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