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

UI improvements on /matches page 

* Added separators for items
* Added final separator with different color (to separate different states of accounts)
This commit is contained in:
Bofh 2021-01-25 01:06:04 +01:00
parent 147fb50569
commit 4ae389fb7a
3 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/_pages/matches/index.html
View File

@ -12,9 +12,7 @@
</span> </span>
</a> </a>
<div class="account__relationship"> <div class="account__relationship">
<button aria-label="[intl:relAction]" title="[intl:relAction]" class="icon-button active" tabindex="[index]"> <button aria-label="[intl:relAction]" title="[intl:relAction]" class="icon-button active dismiss" tabindex="[index]">X</button>
<i role="img" class="fa fa-user-times fa-fw" aria-hidden="true"></i>
</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -503,8 +503,29 @@ div.main-content.meet, div.main-content.account {
div.main-content.matches { div.main-content.matches {
div#manage-matches {
background: #fdfdfd;
padding: 1em .2em;
border-radius: .4em;
height: 100vh;
}
div.accsep {
height: 2px;
background: #b7b6b638;
margin: 1em .5em;
}
div.accsep-close {
height: .4em;
width: 30%;
background: #ff0054d4;
margin: 2em auto;
border-radius: 3em;
border-top: .2em solid #eeeeeed4;
border-bottom: .2em solid #d50449d4;
}
div.account { div.account {
margin: 1em 0;
div.account__wrapper { div.account__wrapper {
display: flex; display: flex;
@ -518,15 +539,29 @@ div.main-content.matches {
width: 100%; width: 100%;
max-width: 10em; max-width: 10em;
padding-left: 1em; padding-left: 1em;
text-decoration: none;
span.display-name { span.display-name {
margin: auto 0; margin: auto 0;
span.display-name__account {
color: gray;
text-decoration: none;
font-size: .9em;
}
} }
} }
div.account__relationship { div.account__relationship {
width: 100%; width: 100%;
button { button {
position: absolute; position: absolute;
right: 0; right: 1em;
}
button.dismiss {
color: red;
border-radius: 100%;
width: 2em;
height: 2em;
padding: 0;
} }
} }
} }

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

@ -705,6 +705,7 @@ function fedilove_customization() {
$('#manage-matches').html(''); $('#manage-matches').html('');
filledOnce = true; filledOnce = true;
} }
var i = 0;
for (var account of accounts) { for (var account of accounts) {
var acct = account.acct; var acct = account.acct;
if (acct.charAt(0) !== '@') if (acct.charAt(0) !== '@')
@ -719,6 +720,11 @@ function fedilove_customization() {
htm = htm.replace(/\[userHandle\]/g, acct); htm = htm.replace(/\[userHandle\]/g, acct);
htm = htm.replace(/\[displayName\]/g, dname); htm = htm.replace(/\[displayName\]/g, dname);
$('#manage-matches').append(htm); $('#manage-matches').append(htm);
if (i < accounts.length -1)
$('#manage-matches').append('<div class="accsep"></div>');
else
$('#manage-matches').append('<div class="accsep-close"></div>');
i++;
} }
}; };
fediloveMastodon.API.getRequestsToFollowMe(function(data) { fediloveMastodon.API.getRequestsToFollowMe(function(data) {