Various fixes for the news UI.

Made the layout for the status container more comprehensive. Added a spacer to the bottom of news article content. Disabled tabbing between the landing and news containers.
dscalzi · May 10, 2018 · f0a66e7 · f0a66e7
1 parent 848440e
commit f0a66e7
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 46 deletions.
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
@@ -937,7 +937,7 @@ p {
 /* News article status container (left). */
 #newsStatusContainer {
     width: 25%;
-    height: 100%;
+    height: calc(100% - 30px);
     padding: 15px;
     display: flex;
     flex-direction: column;
@@ -960,6 +960,7 @@ p {
     color: white;
     text-decoration: none;
     transition: 0.25s ease;
+    outline: none;
 }
 #newsArticleTitle:hover,
 #newsArticleTitle:focus {
@@ -1009,6 +1010,7 @@ p {
     font-family: 'Avenir Book';
     text-decoration: none;
     transition: 0.25s ease;
+    outline: none;
 }
 #newsArticleComments:focus,
 #newsArticleComments:hover {
@@ -1043,6 +1045,7 @@ p {
 #newsArticleContentScrollable a {
     color: rgba(202, 202, 202, 0.75);
     transition: 0.25s ease;
+    outline: none;
 }
 #newsArticleContentScrollable a:hover,
 #newsArticleContentScrollable a:focus {
@@ -1062,12 +1065,17 @@ p {
     box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
 }
 
+/* Div to add spacing at the end of a news article. */
+.newsArticleSpacer {
+    height: 30px;
+}
+
 /* News navigation container. */
 #newsNavigationContainer {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 40px;
+    margin-bottom: 10px;
 }
 
 /* Navigation status span. */

diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
@@ -731,6 +731,14 @@ function slide_(up){
 
 // Bind news button.
 document.getElementById('newsButton').onclick = () => {
+    // Toggle tabbing.
+    if(newsActive){
+        $("#landingContainer *").removeAttr('tabindex')
+        $("#newsContainer *").attr('tabindex', '-1')
+    } else {
+        $("#landingContainer *").attr('tabindex', '-1')
+        $("#newsContainer, #newsContainer *").removeAttr('tabindex')
+    }
     slide_(!newsActive)
     newsActive = !newsActive
 }
@@ -777,64 +785,81 @@ newsErrorRetry.onclick = () => {
 
 /**
  * Reload the news without restarting.
+ * 
+ * @returns {Promise.<void>} A promise which resolves when the news
+ * content has finished loading and transitioning.
  */
-async function reloadNews(){
-    $('#newsContent').fadeOut(250, () => {
-        $('#newsErrorLoading').fadeIn(250)
+function reloadNews(){
+    return new Promise((resolve, reject) => {
+        $('#newsContent').fadeOut(250, () => {
+            $('#newsErrorLoading').fadeIn(250)
+            initNews().then(() => {
+                resolve()
+            })
+        })
     })
-    await initNews()
 }
 
 /**
  * Initialize News UI. This will load the news and prepare
  * the UI accordingly.
+ * 
+ * @returns {Promise.<void>} A promise which resolves when the news
+ * content has finished loading and transitioning.
  */
-async function initNews(){
-    setNewsLoading(true)
+function initNews(){
 
-    let news = {}
+    return new Promise((resolve, reject) => {
+        setNewsLoading(true)
 
-    try {
-        news = await loadNews()
-    } catch (err) {
-        // Empty
-    }
+        let news = {}
+        loadNews().then(news => {
 
-    newsArr = news.articles || null
+            newsArr = news.articles || null
 
-    if(newsArr == null){
-        // News Loading Failed
-        setNewsLoading(false)
+            if(newsArr == null){
+                // News Loading Failed
+                setNewsLoading(false)
 
-        $('#newsErrorLoading').fadeOut(250, () => {
-            $('#newsErrorFailed').fadeIn(250)
-        })
-    } else if(newsArr.length === 0) {
-        // No News Articles
-        setNewsLoading(false)
+                $('#newsErrorLoading').fadeOut(250, () => {
+                    $('#newsErrorFailed').fadeIn(250, () => {
+                        resolve()
+                    })
+                })
+            } else if(newsArr.length === 0) {
+                // No News Articles
+                setNewsLoading(false)
 
-        $('#newsErrorLoading').fadeOut(250, () => {
-            $('#newsErrorNone').fadeIn(250)
-        })
-    } else {
-        // Success
-        setNewsLoading(false)
+                $('#newsErrorLoading').fadeOut(250, () => {
+                    $('#newsErrorNone').fadeIn(250, () => {
+                        resolve()
+                    })
+                })
+            } else {
+                // Success
+                setNewsLoading(false)
+
+                const switchHandler = (forward) => {
+                    let cArt = parseInt(newsContent.getAttribute('article'))
+                    let nxtArt = forward ? (cArt >= newsArr.length-1 ? 0 : cArt + 1) : (cArt <= 0 ? newsArr.length-1 : cArt - 1)
+
+                    displayArticle(newsArr[nxtArt], nxtArt+1)
+                }
+
+                document.getElementById('newsNavigateRight').onclick = () => { switchHandler(true) }
+                document.getElementById('newsNavigateLeft').onclick = () => { switchHandler(false) }
+
+                $('#newsErrorContainer').fadeOut(250, () => {
+                    displayArticle(newsArr[0], 1)
+                    $('#newsContent').fadeIn(250, () => {
+                        resolve()
+                    })
+                })
+            }
 
-        $('#newsErrorContainer').fadeOut(250, () => {
-            displayArticle(newsArr[0], 1)
-            $('#newsContent').fadeIn(250)
         })
-
-        const switchHandler = (forward) => {
-            let cArt = parseInt(newsContent.getAttribute('article'))
-            let nxtArt = forward ? (cArt >= newsArr.length-1 ? 0 : cArt + 1) : (cArt <= 0 ? newsArr.length-1 : cArt - 1)
-
-            displayArticle(newsArr[nxtArt], nxtArt+1)
-        }
-
-        document.getElementById('newsNavigateRight').onclick = () => { switchHandler(true) }
-        document.getElementById('newsNavigateLeft').onclick = () => { switchHandler(false) }
-    }
+
+    })
 }
 
 /**
@@ -850,7 +875,7 @@ function displayArticle(articleObject, index){
     newsArticleDate.innerHTML = articleObject.date
     newsArticleComments.innerHTML = articleObject.comments
     newsArticleComments.href = articleObject.commentsLink
-    newsArticleContent.innerHTML = articleObject.content
+    newsArticleContent.innerHTML = articleObject.content + '<div class="newsArticleSpacer"></div>'
     newsNavigationStatus.innerHTML = index + ' of ' + newsArr.length
     newsContent.setAttribute('article', index-1)
 }

diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
@@ -75,7 +75,10 @@ function showMainUI(){
         }, 250)
 
     }, 750)
-    initNews()
+    // Disable tabbing to the news container.
+    initNews().then(() => {
+        $("#newsContainer *").attr('tabindex', '-1')
+    })
 }
 
 function showFatalStartupError(){