midgard/blokmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix "design" of notice bar

Browse source
This commit is contained in:
Midgard 2020-08-01 23:42:56 +02:00
parent d60fc09823
commit 0b6d9e9349
Signed by: midgard
GPG key ID: 511C112F1331BBB4
3 changed files with 37 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/css/map.css
View file

@ -3,18 +3,22 @@ html, body {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; font-family: sans-serif;
flex-direction: column;
} }
.notice { .notice {
padding: 0.5em; padding: 0.5em;
background: linear-gradient(#fdfdfd 75%, #ececec); background: hsla(215, 90%, 20%, 0.75);
border-bottom: 5px solid hsl(215, 40%, 70%, 0.75);
color: #fff;
}
.leaflet-top.leaflet-left {
z-index: 1001;
} }
#map { #map {
width: 100%; width: 100%;
flex-grow: 1; height: 100%;
} }
.leaflet-popup-content-wrapper, .leaflet-popup-content-wrapper,
@ -81,6 +85,7 @@ td {
} }
.author-icon { .author-icon {
display: block;
margin-left: 10px; margin-left: 10px;
} }
@ -161,20 +166,29 @@ a.img-and-text-link:hover span {
} }
} }
@media screen and (max-width: 800px) {
.author-icon {
display: block;
}
}
@media screen and (max-height: 400px) { @media screen and (max-height: 400px) {
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
max-height: 150px; max-height: 150px;
} }
} }
@media screen and (min-width: 300px) {
.notice {
max-width: calc(100vw - 150px);
}
}
@media screen and (min-width: 800px) {
.author-icon {
display: inline;
}
.notice {
max-width: calc(100vw - 250px);
}
}
@media (min-width: 800px) and (min-height: 500px) { @media (min-width: 800px) and (min-height: 500px) {
.notice { .notice {
padding: 2em; padding: 1em 1.5em;
} }
} }

6
src/index.html
View file

@ -29,8 +29,6 @@
<script type="text/javascript" src="js/map.js"></script> <script type="text/javascript" src="js/map.js"></script>
</head> </head>
<body> <body>
<div class="notice">We zijn druk in de weer om Blokmap klaar te stomen voor de herexamens. De komende dagen verschijnt er misschien nog een locatie in je buurt!</div>
<div id="map"></div> <div id="map"></div>
<script id="popup-template" type="text/x-handlebars-template"> <script id="popup-template" type="text/x-handlebars-template">
@ -92,6 +90,10 @@
</div> </div>
</script> </script>
<script id="notice-template" type="text/x-handlebars-template">
We zijn druk in de weer om Blokmap klaar te stomen voor de herexamens. De komende dagen verschijnt er misschien nog een locatie in je buurt!
</script>
<script id="info-template" type="text/x-handlebars-template"> <script id="info-template" type="text/x-handlebars-template">
<a href="https://zeus.gent/" class="author-icon"><img src="img/zeus.png" alt="Zeus WPI"></a> <a href="https://zeus.gent/" class="author-icon"><img src="img/zeus.png" alt="Zeus WPI"></a>
<a href="https://gentsestudentenraad.be/" class="author-icon"><img src="img/GSR.png" alt="Gentse Studentenraad"></a> <a href="https://gentsestudentenraad.be/" class="author-icon"><img src="img/GSR.png" alt="Gentse Studentenraad"></a>

8
src/js/map.js
View file

@ -52,7 +52,7 @@ $(document).ready(function() {
return new HoverMarker(latlng, { icon: icon, riseOnHover: true}); return new HoverMarker(latlng, { icon: icon, riseOnHover: true});
} }
var map = L.map("map").setView([50.702, 4.335], 9); var map = L.map("map", {zoomControl: false}).setView([50.702, 4.335], 9);
var osm = L.tileLayer("//tile.osm.be/osmbe-nl/{z}/{x}/{y}.png", { var osm = L.tileLayer("//tile.osm.be/osmbe-nl/{z}/{x}/{y}.png", {
attribution: 'Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers, <span lang="en">tiles courtesy of <a href="https://geo6.be/">GEO-6</a></span>. | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span> | <a href="https://zeus.gent/about/privacy/">Privacybeleid</a>', attribution: 'Achtergrondkaart © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-bijdragers, <span lang="en">tiles courtesy of <a href="https://geo6.be/">GEO-6</a></span>. | <span lang="en">Made with ❤ by <a href="https://zeus.gent/">Zeus WPI</a></span> | <a href="https://zeus.gent/about/privacy/">Privacybeleid</a>',
maxZoom: 18 maxZoom: 18
@ -152,6 +152,10 @@ $(document).ready(function() {
} }
}); });
var notice = new SimpleControl("#notice-template", "notice", {
position: "topleft"
}).addTo(map);
var info = new SimpleControl("#info-template", "info", { var info = new SimpleControl("#info-template", "info", {
position: "topright" position: "topright"
}).addTo(map); }).addTo(map);
@ -163,4 +167,6 @@ $(document).ready(function() {
var legend = new SimpleControl("#legend-template", christmasSeason ? "holiday-legend" : "legend", { var legend = new SimpleControl("#legend-template", christmasSeason ? "holiday-legend" : "legend", {
position: "bottomright" position: "bottomright"
}).addTo(map); }).addTo(map);
L.control.zoom().addTo(map);
}); });