oci/zeronet
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix infopanel overflow on mobile devices

Browse source
This commit is contained in:
Tamas Kocsis 2020-09-04 17:55:41 +02:00
parent 051e404a80
commit 8d964d1b8e
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/Ui/media/Infopanel.coffee
View file

@ -3,7 +3,7 @@ class Infopanel
@visible = false
show: (closed=false) =>
@elem.addClass("visible")
@elem.parent().addClass("visible")
if closed
@close()
else
@ -23,7 +23,7 @@ class Infopanel
@close()
hide: =>
@elem.removeClass("visible")
@elem.parent().removeClass("visible")
close: =>
@elem.addClass("closed")

5
src/Ui/media/Wrapper.css
View file

@ -110,13 +110,14 @@ a { color: black }
/* Infopanel */
.infopanel-container { width: 100%; height: 100%; overflow: hidden; position: absolute; display: none; }
.infopanel-container.visible { display: block; }
.infopanel {
position: absolute; z-index: 999; padding: 15px 15px; bottom: 25px; right: 50px; border: 1px solid #eff3fe; display: none;
position: absolute; z-index: 999; padding: 15px 15px; bottom: 25px; right: 50px; border: 1px solid #eff3fe;
font-family: 'Lucida Grande', 'Segoe UI', Helvetica, Arial, sans-serif; box-shadow: 0px 10px 55px rgba(58, 39, 176, 0.17);
background-color: white; border-left: 4px solid #9a61f8; border-top-left-radius: 4px; border-bottom-left-radius: 4px;
transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.infopanel.visible { display: block; }
.infopanel.closed { box-shadow: none; transform: translateX(100%); right: 0px; cursor: pointer; }
.infopanel .message { font-size: 13px; line-height: 15px; display: inline-block; vertical-align: -9px; }
.infopanel .message .line { max-width: 200px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

4
src/Ui/template/wrapper.html
View file

@ -49,13 +49,15 @@ else if (window.opener && window.opener.location.toString()) {
</div>
<!-- Infopanel -->
<div class='infopanel'>
<div class='infopanel-container'>
<div class='infopanel'>
<span class='closed-num'>8</span>
<div class="message">
<span class='line line-1'>8 modified files</span><br><span class='line line-2'>content.json, data.json</span>
</div>
<a href="#Publish" class="button button-submit">Sign & Publish</a>
<a href="#Close" class="close">&times;</a>
</div>
</div>
<!-- Loadingscreen -->