From f0a66e7a02e552d52692a8877abe943ed0849834 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Thu, 10 May 2018 05:48:55 -0400 Subject: [PATCH] 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. --- app/assets/css/launcher.css | 12 +++- app/assets/js/scripts/landing.js | 115 ++++++++++++++++++------------ app/assets/js/scripts/uibinder.js | 5 +- 3 files changed, 84 insertions(+), 48 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 13882ab6..6a8d52f8 100644 --- 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 index 974c536f..2e8ca216 100644 --- 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.} 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.} 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, () => { + resolve() + }) + }) + } else if(newsArr.length === 0) { + // No News Articles + 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() + }) + }) + } - $('#newsErrorLoading').fadeOut(250, () => { - $('#newsErrorFailed').fadeIn(250) }) - } else if(newsArr.length === 0) { - // No News Articles - setNewsLoading(false) - - $('#newsErrorLoading').fadeOut(250, () => { - $('#newsErrorNone').fadeIn(250) - }) - } else { - // Success - setNewsLoading(false) - - $('#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 + '
' 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 index 7d23cce8..ffab5861 100644 --- 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(){