Improved UI when first loading WebApp (you could see the no-script base blue theme) + some cleanup

This commit is contained in:
Bofh 2020-12-30 20:14:48 +01:00
parent 58c4049d09
commit 136d51e2bc
5 changed files with 15 additions and 9 deletions

View File

@ -1,5 +1,6 @@
<nav id="main-nav" class="main-nav"> <nav id="main-nav" class="main-nav">
<ul class="main-nav-ul"> <div id="dummy-nav" style="height: 5em;"></div>
<ul class="main-nav-ul" style="display: none">
{#each $navPages as navPage (navPage.href)} {#each $navPages as navPage (navPage.href)}
<li class="main-nav-li"> <li class="main-nav-li">
<NavItem <NavItem
@ -43,7 +44,7 @@
.main-nav { .main-nav {
box-sizing: border-box; box-sizing: border-box;
border-bottom: var(--nav-border-bottom) solid var(--nav-border); border-bottom: var(--nav-border-bottom) solid var(--nav-border);
background: var(--nav-bg); background: #ff0759;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;

View File

@ -99,7 +99,7 @@
}, },
store: () => store, store: () => store,
computed: { computed: {
computedClass: ({ isStatusInOwnThread, isStatusInNotification, shown }) => { computedClass: ({ isStatusInNotification, shown }) => {
return classname( return classname(
'status-content', 'status-content',
isStatusInNotification && 'status-in-notification', isStatusInNotification && 'status-in-notification',

View File

@ -299,14 +299,14 @@
expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS), expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS),
expiryText: ({ expired }) => expired ? 'intl.expired' : 'intl.expires', expiryText: ({ expired }) => expired ? 'intl.expired' : 'intl.expires',
refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`, refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`,
useNarrowSize: ({ $isMobileSize, expired, isStatusInOwnThread }) => ( useNarrowSize: ({ $isMobileSize, expired }) => (
!isStatusInOwnThread && $isMobileSize && !expired $isMobileSize && !expired
), ),
formDisabled: ({ choices }) => !choices.length, formDisabled: ({ choices }) => !choices.length,
votesText: ({ votesCount }) => ( votesText: ({ votesCount }) => (
formatIntl('intl.voteCount', { count: votesCount }) formatIntl('intl.voteCount', { count: votesCount })
), ),
computedClass: ({ isStatusInNotification, isStatusInOwnThread, loading, shown }) => ( computedClass: ({ isStatusInNotification, loading, shown }) => (
classname( classname(
'poll', 'poll',
isStatusInNotification && 'status-in-notification', isStatusInNotification && 'status-in-notification',

View File

@ -40,11 +40,11 @@
}, },
computed: { computed: {
elementId: ({ uuid }) => `status-author-avatar-${uuid}`, elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => { size: ({ $isVeryTinyMobileSize }) => {
if ($isVeryTinyMobileSize) { if ($isVeryTinyMobileSize) {
return isStatusInOwnThread ? 'small' : 'extra-small' return 'extra-small'
} }
return isStatusInOwnThread ? 'medium' : 'small' return 'small'
} }
} }
} }

View File

@ -196,6 +196,11 @@ var fediloveEvents = {
// this is our URL-based customizations made by JavaScript // this is our URL-based customizations made by JavaScript
var intervalChatCssChange = null; var intervalChatCssChange = null;
function fedilove_customization() { function fedilove_customization() {
if (document.querySelector('#main-nav > div#dummy-nav') != null) {
document.querySelector('#main-nav > div#dummy-nav').remove();
document.querySelector('#main-nav > ul.main-nav-ul').style = '';
}
document.body.classList = ''; document.body.classList = '';
document.querySelector('.main-content').classList = "main-content"; document.querySelector('.main-content').classList = "main-content";
document.querySelector('#chat-compose-global').style = 'visibility: collapse'; document.querySelector('#chat-compose-global').style = 'visibility: collapse';