Added better formatting for popups
parent
98c3f6f229
commit
1465c70216
|
@ -191,21 +191,41 @@ a.underline:hover:not(.btn) {
|
||||||
/* Popups */
|
/* Popups */
|
||||||
.popup {
|
.popup {
|
||||||
background: #111;
|
background: #111;
|
||||||
padding: 3vw;
|
padding: 4vh 4vw;
|
||||||
border-radius: 2vw;
|
border-radius: 3vh;
|
||||||
z-index: 50;
|
z-index: 1000;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -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 {
|
.popup .topbar, .popup p {
|
||||||
display: inline-block;
|
margin: 0 0 3vh 0;
|
||||||
|
}
|
||||||
|
.popup .topbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 0 3vh 0;
|
||||||
}
|
}
|
||||||
.popup p {
|
.popup p {
|
||||||
margin: 0;
|
margin: 0 0 3vh 0;
|
||||||
}
|
}
|
||||||
.popup .close {
|
.popup .close {
|
||||||
cursor: pointer;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,11 +45,19 @@
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
|
||||||
{% if user and newuserurl %}
|
{% if user and newuserurl %}
|
||||||
|
<div class='page-mask'></div>
|
||||||
<div id='welcome' class='popup'>
|
<div id='welcome' class='popup'>
|
||||||
|
|
||||||
<h1>Welcome!</h1>
|
<div class='topbar'>
|
||||||
<span class='close' onclick="$('#welcome').hide();">✖️</span>
|
<h2>Welcome!</h2>
|
||||||
<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='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>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Loading…
Reference in New Issue