fix: stylized attributions button and some minor design tweaks

afonsosousah · Feb 17, 2024 · 775630b · 775630b
1 parent f133819
commit 775630b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -256,6 +256,24 @@ body {
 	left: .5em;
 	bottom: unset !important;
 	right: unset !important;
+	border-radius: 999px !important;
+}
+.ol-attribution button {
+	all: unset;
+	height: 1.375em;
+	width: 1.375em;
+	line-height: .4em;
+	border-radius: 999px;
+	background-color: var(--glass-white);
+	color: var(--green);
+	text-align: center;
+	font-family: Roboto, Arial, sans-serif;
+	font-weight: bold;
+}
+.ol-attribution button:focus, .ol-attribution button:hover {
+	outline: 1px solid var(--green);
+	color: var(--green);
+	line-height: .4em;
 }
 /* #endregion */
 
@@ -623,7 +641,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .station-card #startNavigationButton {
 	position: absolute;
 	top: -8vh;
-	right: 8vh;
+	right: 7vh;
 	background-color: var(--black);
 	border-radius: 999px;
 	color: white;
@@ -632,6 +650,7 @@ input[type="search"]::-webkit-search-results-decoration {
 	align-items: center;
 	height: 6vh;
 	width: 6vh;
+	box-shadow: 0px 4px 6px 0px var(--shadow-black), 0px 0px 5px 0px var(--shadow-black) inset;
 }
 .station-card #startNavigationButton:hover {
 	cursor: pointer;
@@ -657,6 +676,7 @@ input[type="search"]::-webkit-search-results-decoration {
 	height: 6vh;
 	padding: 0 2dvh;
 	font-size: 0.8rem;
+	box-shadow: 0px 4px 6px 0px var(--shadow-black), 0px 0px 5px 0px var(--shadow-black) inset;
 }
 /* #endregion */
 

diff --git a/index.html b/index.html
@@ -46,9 +46,9 @@
 
 		<title>mGira</title>
 
-		<link rel="stylesheet" href="assets/style.css" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.1.0/ol.css" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+		<link rel="stylesheet" href="assets/style.css" />
 
 		<!-- JS imports -->
 		<script src="scripts/bikeSerialNumberMapping.js"></script>

diff --git a/scripts/map.js b/scripts/map.js
@@ -31,8 +31,12 @@ async function initMap() {
 		format: new ol.format.GeoJSON(),
 	});
 
-  const attribution = new ol.control.Attribution({
-    collapsible: true,
+	const infoLabel = document.createElement("i");
+	infoLabel.classList.add("bi", "bi-info");
+
+	const attribution = new ol.control.Attribution({
+		collapsible: true,
+		label: infoLabel,
 	});
 
 	map = new ol.Map({