Remove CSS and replace with TailwindCSS

flosoft · Dec 20, 2022 · 46b9482 · 46b9482
1 parent 1040598
commit 46b9482
Showing 1 changed file with 9 additions and 33 deletions.
diff --git a/templates/map.html.j2 b/templates/map.html.j2
@@ -7,41 +7,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script>
     <link href='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css' rel='stylesheet' />
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-        }
 
-        #map {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            width: 100%;
-        }
+    <script src="https://cdn.tailwindcss.com"></script>
 
-        #instructions {
-            position: fixed;
-            width: 100px;
-            bottom: 0px;
-            padding: 20px;
-            background-color: #22262e;
-            overflow-y: scroll;
-            font-family: sans-serif;
-            color: #fff;
-            border: 1px solid rgba(155,162,178,.4);
-            border-radius: 8px;
-        }
-    </style>
     <link href="{{ url_for('static', filename='fontawesome/css/fontawesome.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='fontawesome/css/solid.min.css') }}" rel="stylesheet">
 </head>
-<body>
-<div id="map"></div>
-<div id="instructions">
-    <p id="instructions_eta"><i class="fa-solid fa-flag-checkered"></i> ... </p>
-    <p id="instructions_distance"><i class="fa-solid fa-route"></i> ...</p>
-    <p id="instructions_charge"><i class="fa-solid fa-battery-empty"></i> ...</p>
+<body class="p-0 m-0">
+<div id="map" class="absolute inset-0 w-full"></div>
+<div class="fixed">
+  <div class="fixed bottom-0 left-0 p-6 rounded-tr-lg bg-slate-900 text-white font-sans">
+        <p id="instructions_eta"><i class="fa-solid fa-flag-checkered"></i> ... </p>
+        <p id="instructions_distance"><i class="fa-solid fa-route"></i> ...</p>
+        <p id="instructions_charge"><i class="fa-solid fa-battery-empty"></i> ...</p>
+  </div>
 </div>
 <script>
     // Get start and end location from Python Jinja2
@@ -286,9 +265,6 @@
                     instructions_charge.innerHTML = `<i class="fa-solid fa-charging-station"></i> ${Math.round(battery_level)}%`;
                 }
 
-
-
-
                 // Return the location of the car as GeoJSON.
                 return {
                     'type': 'FeatureCollection',