mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-12-22 11:42:14 -08:00
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.
This commit is contained in:
parent
848440ed1c
commit
f0a66e7a02
@ -937,7 +937,7 @@ p {
|
|||||||
/* News article status container (left). */
|
/* News article status container (left). */
|
||||||
#newsStatusContainer {
|
#newsStatusContainer {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 100%;
|
height: calc(100% - 30px);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -960,6 +960,7 @@ p {
|
|||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.25s ease;
|
transition: 0.25s ease;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
#newsArticleTitle:hover,
|
#newsArticleTitle:hover,
|
||||||
#newsArticleTitle:focus {
|
#newsArticleTitle:focus {
|
||||||
@ -1009,6 +1010,7 @@ p {
|
|||||||
font-family: 'Avenir Book';
|
font-family: 'Avenir Book';
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.25s ease;
|
transition: 0.25s ease;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
#newsArticleComments:focus,
|
#newsArticleComments:focus,
|
||||||
#newsArticleComments:hover {
|
#newsArticleComments:hover {
|
||||||
@ -1043,6 +1045,7 @@ p {
|
|||||||
#newsArticleContentScrollable a {
|
#newsArticleContentScrollable a {
|
||||||
color: rgba(202, 202, 202, 0.75);
|
color: rgba(202, 202, 202, 0.75);
|
||||||
transition: 0.25s ease;
|
transition: 0.25s ease;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
#newsArticleContentScrollable a:hover,
|
#newsArticleContentScrollable a:hover,
|
||||||
#newsArticleContentScrollable a:focus {
|
#newsArticleContentScrollable a:focus {
|
||||||
@ -1062,12 +1065,17 @@ p {
|
|||||||
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
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. */
|
/* News navigation container. */
|
||||||
#newsNavigationContainer {
|
#newsNavigationContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navigation status span. */
|
/* Navigation status span. */
|
||||||
|
@ -731,6 +731,14 @@ function slide_(up){
|
|||||||
|
|
||||||
// Bind news button.
|
// Bind news button.
|
||||||
document.getElementById('newsButton').onclick = () => {
|
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)
|
slide_(!newsActive)
|
||||||
newsActive = !newsActive
|
newsActive = !newsActive
|
||||||
}
|
}
|
||||||
@ -777,64 +785,81 @@ newsErrorRetry.onclick = () => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Reload the news without restarting.
|
* Reload the news without restarting.
|
||||||
|
*
|
||||||
|
* @returns {Promise.<void>} A promise which resolves when the news
|
||||||
|
* content has finished loading and transitioning.
|
||||||
*/
|
*/
|
||||||
async function reloadNews(){
|
function reloadNews(){
|
||||||
$('#newsContent').fadeOut(250, () => {
|
return new Promise((resolve, reject) => {
|
||||||
$('#newsErrorLoading').fadeIn(250)
|
$('#newsContent').fadeOut(250, () => {
|
||||||
|
$('#newsErrorLoading').fadeIn(250)
|
||||||
|
initNews().then(() => {
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
await initNews()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize News UI. This will load the news and prepare
|
* Initialize News UI. This will load the news and prepare
|
||||||
* the UI accordingly.
|
* the UI accordingly.
|
||||||
|
*
|
||||||
|
* @returns {Promise.<void>} A promise which resolves when the news
|
||||||
|
* content has finished loading and transitioning.
|
||||||
*/
|
*/
|
||||||
async function initNews(){
|
function initNews(){
|
||||||
setNewsLoading(true)
|
|
||||||
|
|
||||||
let news = {}
|
return new Promise((resolve, reject) => {
|
||||||
|
setNewsLoading(true)
|
||||||
|
|
||||||
try {
|
let news = {}
|
||||||
news = await loadNews()
|
loadNews().then(news => {
|
||||||
} catch (err) {
|
|
||||||
// Empty
|
|
||||||
}
|
|
||||||
|
|
||||||
newsArr = news.articles || null
|
newsArr = news.articles || null
|
||||||
|
|
||||||
if(newsArr == null){
|
if(newsArr == null){
|
||||||
// News Loading Failed
|
// News Loading Failed
|
||||||
setNewsLoading(false)
|
setNewsLoading(false)
|
||||||
|
|
||||||
$('#newsErrorLoading').fadeOut(250, () => {
|
$('#newsErrorLoading').fadeOut(250, () => {
|
||||||
$('#newsErrorFailed').fadeIn(250)
|
$('#newsErrorFailed').fadeIn(250, () => {
|
||||||
})
|
resolve()
|
||||||
} else if(newsArr.length === 0) {
|
})
|
||||||
// No News Articles
|
})
|
||||||
setNewsLoading(false)
|
} else if(newsArr.length === 0) {
|
||||||
|
// No News Articles
|
||||||
|
setNewsLoading(false)
|
||||||
|
|
||||||
$('#newsErrorLoading').fadeOut(250, () => {
|
$('#newsErrorLoading').fadeOut(250, () => {
|
||||||
$('#newsErrorNone').fadeIn(250)
|
$('#newsErrorNone').fadeIn(250, () => {
|
||||||
})
|
resolve()
|
||||||
} else {
|
})
|
||||||
// Success
|
})
|
||||||
setNewsLoading(false)
|
} 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
|
newsArticleDate.innerHTML = articleObject.date
|
||||||
newsArticleComments.innerHTML = articleObject.comments
|
newsArticleComments.innerHTML = articleObject.comments
|
||||||
newsArticleComments.href = articleObject.commentsLink
|
newsArticleComments.href = articleObject.commentsLink
|
||||||
newsArticleContent.innerHTML = articleObject.content
|
newsArticleContent.innerHTML = articleObject.content + '<div class="newsArticleSpacer"></div>'
|
||||||
newsNavigationStatus.innerHTML = index + ' of ' + newsArr.length
|
newsNavigationStatus.innerHTML = index + ' of ' + newsArr.length
|
||||||
newsContent.setAttribute('article', index-1)
|
newsContent.setAttribute('article', index-1)
|
||||||
}
|
}
|
||||||
|
@ -75,7 +75,10 @@ function showMainUI(){
|
|||||||
}, 250)
|
}, 250)
|
||||||
|
|
||||||
}, 750)
|
}, 750)
|
||||||
initNews()
|
// Disable tabbing to the news container.
|
||||||
|
initNews().then(() => {
|
||||||
|
$("#newsContainer *").attr('tabindex', '-1')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function showFatalStartupError(){
|
function showFatalStartupError(){
|
||||||
|
Loading…
Reference in New Issue
Block a user