From 68a99f087b8298a73c60c24a97850ef7b896fbd7 Mon Sep 17 00:00:00 2001 From: Bastard Operator Date: Tue, 5 Jan 2021 00:48:01 +0100 Subject: [PATCH] Multiple improvements to make it look to competitors * Notification dot is up and shows no number * Notifications shows on direct instead of "notifications" * Asterisk icon instead of notifications because it will be the "matches" page (following/followers on Mastodon) * Make person name appear under the person main photo * Testing NOPE,MAYBE,MATCH buttons (layout) * Name on chat has now white-space: nowrap * Fixed bug where you could slide images when there is none on profile, and make navigation icons appear --- bin/svgs.js | 1 + src/routes/_components/NavItem.html | 4 +- src/routes/_components/NavItemIcon.html | 4 +- src/routes/_components/status/MeetStatus.html | 4 +- src/routes/_layout.html | 19 +++++++ .../_store/computations/navComputations.js | 4 +- src/scss/themes/ozark.scss | 54 ++++++++++++++----- static/fedilove-no-react.js | 14 +++-- 8 files changed, 79 insertions(+), 25 deletions(-) diff --git a/bin/svgs.js b/bin/svgs.js index 683ebeef..3d22c84a 100644 --- a/bin/svgs.js +++ b/bin/svgs.js @@ -1,6 +1,7 @@ module.exports = [ { id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true }, { id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true }, + { id: 'fa-asterisk', src: 'src/thirdparty/font-awesome-svg-png/white/svg/asterisk.svg', inline: true }, { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true }, { id: 'fa-globe', src: 'src/thirdparty/font-awesome-svg-png/white/svg/globe.svg' }, { id: 'fa-gear', src: 'src/thirdparty/font-awesome-svg-png/white/svg/gear.svg', inline: true }, diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html index ff569d18..21eacdc0 100644 --- a/src/routes/_components/NavItem.html +++ b/src/routes/_components/NavItem.html @@ -162,10 +162,10 @@ }) }, showBadge: ({ name, $hasNotifications, $hasFollowRequests }) => ( - (name === 'notifications' && $hasNotifications) || (name === 'community' && $hasFollowRequests) + (name === 'direct' && $hasNotifications) || (name === 'community' && $hasFollowRequests) ), badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => ( - (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0 + (name === 'direct' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0 ) }, methods: { diff --git a/src/routes/_components/NavItemIcon.html b/src/routes/_components/NavItemIcon.html index 8d341992..42e7094f 100644 --- a/src/routes/_components/NavItemIcon.html +++ b/src/routes/_components/NavItemIcon.html @@ -2,7 +2,6 @@
{:else} @@ -74,8 +73,7 @@ badgeNumber: 0 }), computed: { - badgeDigits: ({ badgeNumber }) => Math.min(3, badgeNumber.toString().length), - badgeNumberToShow: ({ badgeNumber }) => (badgeNumber < 100 ? badgeNumber.toString() : '99+') + badgeDigits: ({ badgeNumber }) => Math.min(3, badgeNumber.toString().length) }, components: { SvgIcon diff --git a/src/routes/_components/status/MeetStatus.html b/src/routes/_components/status/MeetStatus.html index 619b4c70..a176c247 100644 --- a/src/routes/_components/status/MeetStatus.html +++ b/src/routes/_components/status/MeetStatus.html @@ -11,6 +11,9 @@ >
+
+ +
{#if content && (showContent || preloadHiddenContent)} @@ -18,7 +21,6 @@ {/if}
- {#if showCard } diff --git a/src/routes/_layout.html b/src/routes/_layout.html index 35195749..7cd11e2b 100644 --- a/src/routes/_layout.html +++ b/src/routes/_layout.html @@ -15,6 +15,25 @@
diff --git a/src/routes/_store/computations/navComputations.js b/src/routes/_store/computations/navComputations.js index 97c3b9c6..0564c402 100644 --- a/src/routes/_store/computations/navComputations.js +++ b/src/routes/_store/computations/navComputations.js @@ -75,7 +75,7 @@ export function navComputations (store) { { name: 'notifications', href: '/notifications', - svg: '#fa-bell', + svg: '#fa-asterisk', label: 'intl.notifications' }, { @@ -87,7 +87,7 @@ export function navComputations (store) { { name: 'settings', href: '/settings', - svg: '#fa-gear', + svg: '#fa-user', label: 'intl.settings' } ] diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss index dcba3a0d..b52bd43b 100644 --- a/src/scss/themes/ozark.scss +++ b/src/scss/themes/ozark.scss @@ -70,7 +70,6 @@ nav#main-nav > ul.main-nav-ul { width: .8em; height: .8em; background: red; - position: relative; top: -1.2em; left: .5em; border: none !important; @@ -145,7 +144,32 @@ body.meet, body.account { div#profile-nav { - div { + div#account-actions { + position: fixed; + bottom: 10%; + height: 5em; + width: 100vw; + z-index: 2; + + div.container { + background: red; + display: flex; + max-width: 50em; + margin: auto; + } + + div.item { + display: flex; + width: 100%; + + div.btn-do { + margin: auto; + /*button { width: 0; height: 0; }*/ + } + } + } + + div#prev, div#next { cursor: pointer; position: fixed; height: 100vh; @@ -212,6 +236,10 @@ div#chat-party-global { display: flex; width: 100%; padding-left: 1em; + + span#account-display-name { + white-space: nowrap; + } a { display: flex; font-weight: bold; @@ -437,15 +465,17 @@ div.main-content.meet { height: 12em; } - a.status-author-name { - position: relative; - left: -1.4em; - color: #fff; - font-size: 2.2em; - font-family: Arial; - top: -1.6em; - text-shadow: 1px 1px 2px #0000003b; - text-decoration: none; + div.person-info { + padding: 0 1em; + + a.status-author-name { + position: relative; + color: #fff; + font-size: 2.2em; + font-family: Arial; + text-shadow: 1px 1px 2px #0000003b; + text-decoration: none; + } } } @@ -521,7 +551,7 @@ div.timeline div.virtual-list-item { } -div.timeline > div.the-list { +div.main-content.chat div.timeline > div.the-list { div.list-item { diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js index 8b3f497e..d32cddec 100644 --- a/static/fedilove-no-react.js +++ b/static/fedilove-no-react.js @@ -484,6 +484,9 @@ function fedilove_customization() { $('body').addClass('direct'); $('nav#main-nav li.main-nav-li svg')[2].classList += ' active'; } + else if (window.location.pathname == '/settings') { + $('nav#main-nav li.main-nav-li svg')[3].classList += ' active'; + } else if (window.location.pathname.startsWith('/accounts/')) { $('div.main-content').addClass('account'); @@ -502,11 +505,6 @@ function fedilove_customization() { cloneBackSvg('#meet-navigation > #profile-nav > #prev'); cloneBackSvg('#meet-navigation > #profile-nav > #next'); fediloveUI.meetAccountImageDirection(null); - fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) { - if (isRightSwipe) - fediloveUI.meetAccountImageDirection('prev'); - else fediloveUI.meetAccountImageDirection('next'); - }); // clone the first element and include the account header image var countmax = 0; @@ -532,7 +530,13 @@ function fedilove_customization() { // clone the first element, insert it at the next position const _e = $('div.virtual-list > div.virtual-list-item:last').clone(); $(_e).insertAfter('div.virtual-list > div.virtual-list-item:last'); + _applyImageTo('div.virtual-list > div.virtual-list-item:last div.status-media img'); + fediloveUI.registerSwipeOnElement('main.infinite-scroll-page', function(isRightSwipe) { + if (isRightSwipe) + fediloveUI.meetAccountImageDirection('prev'); + else fediloveUI.meetAccountImageDirection('next'); + }); } clearInterval(_this);