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

Improved icons on account actions

This commit is contained in:
Bofh 2021-01-09 22:21:34 +01:00
parent e20c77e08f
commit 782e205577
4 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bin/svgs.js
View File

@ -2,6 +2,9 @@ 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-close', src: 'src/thirdparty/font-awesome-svg-png/white/svg/close.svg', inline: true },
{ id: 'fa-question', src: 'src/thirdparty/font-awesome-svg-png/white/svg/question.svg', inline: true },
{ id: 'fa-heart', src: 'src/thirdparty/font-awesome-svg-png/white/svg/heart.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 },

15
src/routes/_layout.html
View File

@ -18,19 +18,13 @@
<div id="account-actions">
<div class="container">
<div class="item">
<div class="btn-do">
<button>NOPE</button>
</div>
<div class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></div>
</div>
<div class="item">
<div class="btn-do">
<button>MAYBE</button>
</div>
<div class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></div>
</div>
<div class="item">
<div class="btn-do">
<button>YES!</button>
</div>
<div class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></div>
</div>
</div>
</div>
@ -86,7 +80,8 @@
components: {
Nav: './_components/Nav.html',
InformationalFooter: './_components/InformationalFooter.html',
IconButton: './_components/IconButton.html'
IconButton: './_components/IconButton.html',
SvgIcon: './_components/SvgIcon.html'
},
oncreate () {
if (process.browser && process.env.NODE_ENV !== 'production') {

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

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

@ -206,21 +206,54 @@ body.meet, body.account {
z-index: 2;
div.container {
background: red;
display: flex;
max-width: 50em;
margin: auto;
}
div.item {
display: flex;
width: 100%;
div.btn-do {
background: #fff;
border-radius: 50%;
border: 3px solid #fbfbfb;
box-shadow: 0px 0px 1em #c1c1c1;
width: 4.5em;
height: 4.5em;
display: flex;
margin: auto;
/*button { width: 0; height: 0; }*/
cursor: pointer;
svg {
width: 2.4em;
height: 2.4em;
margin: auto;
position: relative;
}
}
div.btn-do.nope > svg {
fill: red;
top: -1px;
}
div.btn-do.match {
width: 4.2em !important;
height: 4.2em !important;
svg { fill: #01bb30; }
}
div.btn-do.maybe > svg {
fill: #048eb9;
width: 3em;
height: 3em;
left: -1px;
}
div.btn-do:focus, div.btn-do:active {
background: #ccc !important;
}
}
}
}
div#prev, div#next {

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

@ -218,7 +218,10 @@ var fediloveUI = {
$('div#chat-party-global > div#name > a > span').html(name);
$('div#chat-party-global > div#name > span').text(acct);
if (accid != 0) $('div#chat-party-global > div#name > a').attr('href', `/accounts/${accid}`);
}
},
onAccountNope: function() {},
onAccountMatch: function() {},
onAccountMaybe: function() {}
};
// objects to access from React code
@ -537,7 +540,7 @@ function fedilove_customization() {
if ($(selector)[0] !== undefined)
$(selector)[0].src = window.fediloveData.currentAccount.header;
}
}, 300);
}, 100);
};
const _this = setInterval(function() {
@ -571,6 +574,7 @@ function fedilove_customization() {
clearInterval(_this);
}
countmax++;
}, 200);
}
else if (window.location.pathname == '/federated')