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:
parent
e9154610ee
commit
68a99f087b
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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,16 +465,18 @@ div.main-content.meet {
|
|||
height: 12em;
|
||||
}
|
||||
|
||||
div.person-info {
|
||||
padding: 0 1em;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue