ki9
/
tracman-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added better formatting for popups

master
Keith Irwin 2017-05-19 20:21:49 -04:00
parent 98c3f6f229
commit 1465c70216
No known key found for this signature in database
GPG Key ID: 378933C743E2BBC0
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
static/css/base.css
View File

@ -191,21 +191,41 @@ a.underline:hover:not(.btn) {
/* Popups */
.popup {
background: #111;
padding: 3vw;
border-radius: 2vw;
z-index: 50;
padding: 4vh 4vw;
border-radius: 3vh;
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-box-shadow: 0.5vh 0.4vh 1vh 0.1vh #000;
-webkit-box-shadow: 0.5vh 0.4vh 1vh 0.1vh #000;
box-shadow: 0.5vh 0.4vh 1vh 0.1vh #000;
}
.popup h1 {
display: inline-block;
.popup .topbar, .popup p {
margin: 0 0 3vh 0;
}
.popup .topbar {
display: flex;
justify-content: space-between;
margin: 0 0 3vh 0;
}
.popup p {
margin: 0;
margin: 0 0 3vh 0;
}
.popup .close {
cursor: pointer;
float: right;
}
.popup .buttons {
display: flex;
justify-content: space-around;
}
.page-mask {
z-index: 950;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

14
views/map.html
View File

@ -45,11 +45,19 @@
{% block main %}
{% if user and newuserurl %}
<div class='page-mask'></div>
<div id='welcome' class='popup'>
<h1>Welcome!</h1>
<span class='close' onclick="$('#welcome').hide();">✖️</span>
<p>This is your map. It's avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>. You can change that and other settings in <b><a href="/settings">settings</a></b>. Set your location by clicking <b>set</b> below. Clear it by clicking <b>clear</b>. To track your location, click <b>track</b> or download the <a href="/android">android app</a>. For more information, see <a href="/help">the help page</a>. </p>
<div class='topbar'>
<h2>Welcome!</h2>
<div class='close' onclick="$('#welcome').hide();$('.page-mask').hide();">✖️</div>
</div>
<p>This is your map. It's publicly avaliable at <a href="{{newuserurl}}">{{newuserurl}}</a>. You can change that URL and other settings in <b><a href="/settings">settings</a></b>. Set your location by clicking <b>set</b> below. Clear it by clicking <b>clear</b>. To track your location, click <b>track</b> or download the <a href="/android">android app</a>. For more information, see the <b><a href="/help">help</a></b> page. </p>
<div class='buttons'>
<a class='btn main' onclick="$('#welcome').hide();$('.page-mask').hide();">Got it!</a>
</div>
</div>
{% endif %}