nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Bofh 2021-01-05 00:48:01 +01:00
parent e9154610ee
commit 68a99f087b
8 changed files with 79 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin/svgs.js
View File

@ -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 },

4
src/routes/_components/NavItem.html
View File

@ -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: {

4
src/routes/_components/NavItemIcon.html
View File

@ -2,7 +2,6 @@
<div class="nav-link-svg-wrapper">
<SvgIcon className="nav-link-svg" href={svg} />
<span class="nav-link-badge nav-link-badge-digits-{badgeDigits}" aria-hidden="true">
{badgeNumberToShow}
</span>
</div>
{: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

4
src/routes/_components/status/MeetStatus.html
View File

@ -11,6 +11,9 @@
>
<div class="meet-content">
<StatusSidebar {...params} />
<div class="person-info">
<StatusAuthorName {...params} />
</div>
</div>
<div class="meet-msg">
{#if content && (showContent || preloadHiddenContent)}
@ -18,7 +21,6 @@
{/if}
</div>
<div class="meet-footer">
<StatusAuthorName {...params} />
<StatusAuthorHandle {...params} />
<StatusRelativeDate {...params} {...timestampParams} />
{#if showCard }

19
src/routes/_layout.html
View File

@ -15,6 +15,25 @@
<div id="profile-nav" style="display: none">
<div id="prev" style="display: none" onclick="return window.fediloveUI.meetAccountImageDirection('prev')"></div>
<div id="next" onclick="return window.fediloveUI.meetAccountImageDirection('next')"></div>
<div id="account-actions">
<div class="container">
<div class="item">
<div class="btn-do">
<button>NOPE</button>
</div>
</div>
<div class="item">
<div class="btn-do">
<button>MAYBE</button>
</div>
</div>
<div class="item">
<div class="btn-do">
<button>YES!</button>
</div>
</div>
</div>
</div>
</div>
</div>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

4
src/routes/_store/computations/navComputations.js
View File

@ -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'
}
]

54
src/scss/themes/ozark.scss
View File

@ -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 {

14
static/fedilove-no-react.js
View File

@ -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);