reformatted website

Author: rhansolo

src/MapBox.svelte

@@ -995,19 +995,11 @@
     margin-right: auto;
   }
 
-  .search {
-    position: absolute;
-    width: 50%;
-    left: 25%;
-    top: 60px;
-    z-index: 1001;
-  }
-
   .map-container {
     width: 100%;
     height: 80vh;
     position: relative;
-    top: 100px;
+    top: 50px;
     min-height: 550px;
   }
 
@@ -1060,25 +1052,33 @@
     position: absolute;
     top: 12px;
     left: 10px;
-    max-width: 220px;
+    max-width: 500px;
     z-index: 1001;
     background-color: rgba(255, 255, 255, 0.9);
     padding: 10px 10px;
     box-sizing: border-box;
     transition: all 0.1s ease-in;
   }
 
+  .search {
+    position: absolute;
+    width: 450px;
+    right: 75px;
+    top: 12px;
+    z-index: 1001;
+  }
+
   .legend-container {
     position: absolute;
-    top: 220px;
+    top: 170px;
     left: 10px;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: all 0.1s ease-in;
-    height: 40%;
+    height: 45%;
   }
 
   .invalid_search-container {
@@ -1110,28 +1110,29 @@
   <span class="banner-text">{currentSensorTooltip}</span>
 </div>
 
-{#if loaded && region_lst.length != 0}
-  <div class="search">
-    <AutoComplete
-      placeholder="Search for a location..."
-      items={region_lst}
-      bind:selectedItem={selectedRegion}
-      labelFieldName="display_name"
-      keywordsFunction={place => place.display_name}
-      maxItemsToShowInList="5"
-      minCharactersToSearch="2"
-      onChange={_ => {
-        if (typeof selectedRegion !== 'undefined') {
-          search_element(selectedRegion);
-        }
-      }} />
-  </div>
-{/if}
 <div bind:this={container} class="map-container">
   <div class="options-container">
     <Options {isIE} />
   </div>
 
+  {#if loaded && region_lst.length != 0}
+    <div class="search">
+      <AutoComplete
+        placeholder="Search for a location..."
+        items={region_lst}
+        bind:selectedItem={selectedRegion}
+        labelFieldName="display_name"
+        keywordsFunction={place => place.display_name}
+        maxItemsToShowInList="5"
+        minCharactersToSearch="2"
+        onChange={_ => {
+          if (typeof selectedRegion !== 'undefined') {
+            search_element(selectedRegion);
+          }
+        }} />
+    </div>
+  {/if}
+
   <div class="legend-container">
     <Legend />
   </div>

src/Options.svelte

@@ -25,19 +25,16 @@
 
   .option {
     width: 100%;
+    display: inline-block;
+  }
+  .toggle {
+    width: 200px;
   }
-
   .option .option-title {
     margin-bottom: 0px !important;
     padding-bottom: 0px !important;
   }
 
-  .buttons-group {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
   .buttons-group button.button .disabled-tooltip {
     visibility: hidden;
     width: 80px;
@@ -162,8 +159,17 @@
   .buttons-group-side .button:active {
     outline: none;
   }
-  p {
-    margin-bottom: 5px;
+  label {
+    display: inline-block;
+  }
+  select.indicators {
+    display: inline-block;
+    width: 200px;
+    margin-bottom: 10px;
+  }
+  select.geo-level {
+    display: inline-block;
+    width: 125px;
   }
 
   @keyframes shake {
@@ -193,32 +199,12 @@
 <div class="options">
 
   <div class="option">
-    <p style="font-size: 15px;" class="option-title">
-      <strong>Geo-level:</strong>
-    </p>
-    <select
-      aria-label="geographic level"
-      class="buttons-group"
-      bind:value={level}
-      on:change={() => {
-        currentDataReadyOnMap.set(false);
-        currentLevel.set(level);
-      }}>
-      {#each Object.keys($levels) as level}
-        <option value={level} disabled={$sensorMap.get($currentSensor).levels.includes(level) === false}>
-          {$levels[level]}
-        </option>
-      {/each}
-    </select>
-  </div>
-
-  <div class="option">
-    <p style="font-size: 15px;" class="option-title">
-      <strong>Indicator:</strong>
-    </p>
+    <label style="font-size: 15px;" class="option-title">
+      <strong>Displaying</strong>
+    </label>
     <select
       aria-label="indicator options"
-      class="buttons-group"
+      class="indicators"
       bind:value={sensor}
       on:change={() => {
         currentDataReadyOnMap.set(false);
@@ -236,11 +222,31 @@
         {/each}
       </optgroup>
     </select>
+
+    <label style="font-size: 15px;" class="option-title">
+      <strong>&nbsp;for&nbsp;</strong>
+    </label>
+
+    <select
+      aria-label="geographic level"
+      class="geo-level"
+      bind:value={level}
+      on:change={() => {
+        currentDataReadyOnMap.set(false);
+        currentLevel.set(level);
+      }}>
+      {#each Object.keys($levels) as level}
+        <option value={level} disabled={$sensorMap.get($currentSensor).levels.includes(level) === false}>
+          {$levels[level]}
+        </option>
+      {/each}
+    </select>
+
   </div>
 
   <br />
 
-  <div class="option">
+  <div class="toggle">
     <div aria-label="display type" class="buttons-group-side">
       <button
         aria-pressed={$signalType === 'value' ? 'true' : 'false'}