Merge pull request #126 from ScienceCommons/staging

merge full-screen mode optimizations & other minor improvements into production

Author: eplebel

.gitignore

@@ -1,19 +1,6 @@
 #backup
 backup.bak
 
-# more ignores
-bin/
-share/
-package-lock.json
-curate_science/settings.py
-package.json
-curate/migrations/0057_auto_20200305_1956.py
-curate_science/google_cloud_credentials.json.enc
-pyvenv.cfg
-lib64
-media/
-
-
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
@@ -175,5 +162,3 @@ node_modules/
 
 # images
 media/key_figures/*.*
-
-

dist/js/bundle.js

@@ -56,8 +56,13 @@ textarea {
   }
 }
 
+.TopBar.EmbeddedViewerVisible {
+  width: 100%;
+  position: relative;
+}
+
 .AppContent.EmbeddedViewerVisible {
-  width: 50%;
+  width: 40%;
   margin: 0;
   max-height: calc(100vh - 56px);
   overflow-y: scroll;

package-lock.json

@@ -324,10 +324,13 @@ class ArticleContent extends React.PureComponent {
 
         <div id="details" hidden={!is_expanded} style={{ paddingBottom: '0.75rem' }}>
           <Typography className={classes.abstract} variant="body2">
-            { is_article_page ?
+            { (is_article_page) ? 
             <span>{article.abstract}</span>
-                :
-                  <TruncatedText text={article.abstract} maxLength={540} fontSize={12} />
+              : 
+                (article.abstract == null || article.abstract.length == 0) ?
+                null
+                  : 
+                    <TruncatedText text={article.abstract} maxLength={540} fontSize={12} />
             }
           </Typography>
           <ArticleKeywords keywords={article.keywords} />

src/App.css

@@ -40,7 +40,7 @@ export default withRouter(function EmbeddedViewer({ history }) {
     const view_url = ViewURL.useContainer()
     const viewer_visible = !(view_url.url === null)
 
-    const width = viewer_visible ? '50%' : 0
+    const width = viewer_visible ? '60%' : 0
     const visibility = viewer_visible ? 'visible' : 'hidden'
 
     const style = {
@@ -63,6 +63,7 @@ export default withRouter(function EmbeddedViewer({ history }) {
     // .AppContent to be rerendered when the viewer is shown (clearing any filters etc.)
     // There's probably a better way to do this...
     const app_content_el = document.querySelector('.AppContent')
+    const top_bar_ev = document.querySelector('.TopBar')
     const viewer_visible_class = 'EmbeddedViewerVisible'
 
     if (app_content_el) {
@@ -72,12 +73,14 @@ export default withRouter(function EmbeddedViewer({ history }) {
             const scroll_position = window.scrollY
             // add class
             app_content_el.classList.add(viewer_visible_class)
+            top_bar_ev.classList.add(viewer_visible_class)
             app_content_el.scrollTop = scroll_position
         } else if (!viewer_visible) {
             // Store AppContent scroll position to be applied to window
             const scroll_position = app_content_el.scrollTop
             // remove class
             app_content_el.classList.remove(viewer_visible_class)
+            top_bar_ev.classList.remove(viewer_visible_class)   
             window.scrollTo(0, scroll_position)
         }
     }

src/components/ArticleContent.jsx

@@ -85,7 +85,7 @@ class SortBy extends React.PureComponent {
               style={{color: "#999"}}
             >
               <Icon className={classes.leftIcon}>sort</Icon>
-              Sort by { sorted_by ? <span>: { sorted_by }</span> : null }
+              Sort by
             </Button>
               { menu_open ? (
                 <Paper className={classes.menu}>

src/components/EmbeddedViewer.jsx

@@ -40,8 +40,9 @@ function pdf_url_is_valid(url) {
 
 
 function html_url_is_valid(url) {
+    const valid_urls = ['github.io', 'distill.pub']
     if (includes(url, 'frontiersin.org/articles') && endsWith(url, 'full')) return true
-    if (includes(url, 'github.io')) return true
+    if (url_contains(url, valid_urls)) return true
     return endsWith(url, '.html')
 }
 
@@ -87,7 +88,7 @@ export default function ViewEmbeddedContentButton({ iconStyle, mediaType, style,
     }
 
     // If the screen size is less than the XL breakpoint, don't show the embedded content button
-    const lessThanXl = useMediaQuery(theme => theme.breakpoints.down('lg'))
+    const lessThanXl = useMediaQuery('(max-width:1499px)')
     if (lessThanXl) return null
 
     if (!url_is_valid(url, mediaType)) return null

src/components/SortArticlesButton.jsx

@@ -25,7 +25,7 @@ class Home extends React.PureComponent {
       articles_loading: true,
       content_filters: [],
       transparency_filters: ['open_code', 'open_data', 'open_materials'],
-      sort_by: 'created',
+      sort_by: null,
       more_articles: true,
       current_page: 1,
     };