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

Change div to button on Meet actions cuz bugs on mobile

This commit is contained in:
Bofh 2021-01-10 01:26:29 +01:00
parent 59cf733942
commit e28cfabbcc
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/_layout.html
View File

@ -18,19 +18,19 @@
<div id="account-actions">
<div class="container">
<div class="item">
<div class="btn-do reload" onclick="window.location.reload(true)"><SvgIcon href="#fa-refresh"/></div>
<button class="btn-do reload" onclick="window.location.reload(true)"><SvgIcon href="#fa-refresh"/></button>
</div>
<div class="item">
<div class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></div>
<button class="btn-do nope" onclick="window.fediloveUI.onAccountNope()"><SvgIcon href="#fa-close"/></button>
</div>
<div class="item">
<div class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></div>
<button class="btn-do maybe" onclick="window.fediloveUI.onAccountMaybe()"><SvgIcon href="#fa-question"/></button>
</div>
<div class="item">
<div class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></div>
<button class="btn-do match" onclick="window.fediloveUI.onAccountMatch()"><SvgIcon href="#fa-heart"/></button>
</div>
<div class="item">
<div class="btn-do report" onclick="window.fediloveApi.reportViewingAccount()"><SvgIcon href="#fa-warning"/></div>
<button class="btn-do report" onclick="window.fediloveApi.reportViewingAccount()"><SvgIcon href="#fa-warning"/></button>
</div>
</div>
</div>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

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

@ -152,7 +152,7 @@ body.meet, body.account {
overflow: hidden;
div#sapper, div.virtual-list, main.infinite-scroll-page {
background: #000 !important;
background: #222 !important;
}
div#meet-navigation {
@ -214,15 +214,16 @@ body.meet, body.account {
display: flex;
width: 100%;
div.btn-do {
button.btn-do {
background: #fff;
border-radius: 50%;
border: 3px solid #fbfbfb;
box-shadow: 0px 0px 1em #c1c1c1;
border: 3px solid #fbfbfb !important;
box-shadow: 0px 0px .6em #c1c1c1;
width: 4em;
height: 4em;
display: flex;
margin: auto;
padding: 0;
cursor: pointer;
svg {
width: 2em;
@ -231,14 +232,14 @@ body.meet, body.account {
position: relative;
}
}
div.btn-do.nope > svg {
button.btn-do.nope > svg {
fill: red;
top: -1px;
}
div.btn-do.match > svg {
button.btn-do.match > svg {
fill: #01bb30;
}
div.btn-do.maybe {
button.btn-do.maybe {
width: 3.2em !important;
height: 3.2em !important;
svg {
@ -246,7 +247,7 @@ body.meet, body.account {
left: -1px;
}
}
div.btn-do.reload {
button.btn-do.reload {
position: relative;
left: -1px;
width: 2.8em !important;
@ -257,7 +258,7 @@ body.meet, body.account {
fill: #515151;
}
}
div.btn-do.report {
button.btn-do.report {
position: relative;
left: 1px;
width: 2.8em !important;
@ -270,8 +271,8 @@ body.meet, body.account {
fill: #dbb72a;
}
}
div.btn-do:focus, div.btn-do:active {
background: #ccc !important;
button.btn-do:focus, button.btn-do:active {
background-image: linear-gradient(white, #9b9b9b) !important;
}
}