fix: Set default map size to LARGE

feat: Add Center position to set feat: Move yellow bar to the top refactor: Position Enum
Bigismall · Jan 23, 2024 · 1a64df2 · 1a64df2
1 parent 2e927a9
commit 1a64df2
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -24,20 +24,21 @@
       <button class="download__input js-reset">Try another image</button>
     </aside>
     <aside class="map map--hidden">
-      <div class="map__canvas map__canvas--large" id="js-map"></div>
       <div class="map__title map__title--hidden">
         Unable to read
         <abbr title="Exchangeable Image File Format">EXIF</abbr> data from the
         photo. Drag the marker to set
         <abbr title="Global Positioning System">GPS</abbr> position manually, or <a href="" class="js-reset">load another photo</a>.
       </div>
+      <div class="map__canvas map__canvas--large" id="js-map"></div>
       <div class="map__options map__options--hidden" id="js-map-options">
         <fieldset>
           <legend>Map position</legend>
-          <button data-position="topleft">&#11017;</button>
-          <button data-position="topright">&#11016;</button>
-          <button data-position="bottomleft">&#11019;</button>
-          <button data-position="bottomright">&#11018;</button>
+          <button data-position="map--topleft">&#11017;</button>
+          <button data-position="map--topright">&#11016;</button>
+          <button data-position="map--center">&#9737;</button>
+          <button data-position="map--bottomleft">&#11019;</button>
+          <button data-position="map--bottomright">&#11018;</button>
         </fieldset>
         <fieldset>
           <legend>Map size</legend>

diff --git a/src/scripts/MapManager.ts b/src/scripts/MapManager.ts
@@ -18,11 +18,11 @@ const DEFAULT_CENTER: [number, number] = [54.403397, 18.570665];
 // const DEFAULT_ZOOM: number = 14
 
 export enum MapPosition {
-  TOP_LEFT = 'topleft',
-  TOP_RIGHT = 'topright',
-  BOTTOM_LEFT = 'bottomleft',
-  BOTTOM_RIGHT = 'bottomright',
-  CENTER = 'center',
+  TOP_LEFT = 'map--topleft',
+  TOP_RIGHT = 'map--topright',
+  BOTTOM_LEFT = 'map--bottomleft',
+  BOTTOM_RIGHT = 'map--bottomright',
+  CENTER = 'map--center',
 }
 
 export default class MapManager extends ObserverPublisher(Publisher) {
@@ -117,12 +117,13 @@ export default class MapManager extends ObserverPublisher(Publisher) {
       const position: MapPosition = publication.data;
       this.position = position;
       this.container?.classList.remove(
-        'map--topleft',
-        'map--topright',
-        'map--bottomleft',
-        'map--bottomright'
+        MapPosition.TOP_LEFT,
+        MapPosition.TOP_RIGHT,
+        MapPosition.BOTTOM_LEFT,
+        MapPosition.BOTTOM_RIGHT,
+        MapPosition.CENTER
       );
-      this.container?.classList.add(`map--${position}`);
+      this.container?.classList.add(position);
     }
 
     if (publication.state === MessageState.MapSetupReady) {

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -1,4 +1,5 @@
 $blue: #2c3e50;
+$semi-blue: #445465;
 $light-blue: #5c6a79;
 
 $white: #fff;

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -15,12 +15,12 @@ body {
 
   background-color: $blue;
   background-image: linear-gradient(
-    to bottom,
-    $blue,
-    #38495a,
-    #445464,
-    #505f6e,
-    $light-blue
+                  to bottom,
+                  $blue,
+                  #38495a,
+                  #445464,
+                  #505f6e,
+                  $light-blue
   );
 
   -webkit-text-size-adjust: 100%;
@@ -124,9 +124,10 @@ body {
 
   @include e(title) {
     margin: 0;
-    padding: 0.5rem;
-    font-size: 0.75rem;
-    font-weight: bold;
+    padding: 0.4rem 0.5rem;
+    font-size: 0.7rem;
+    line-height: 1;
+    font-weight: bolder;
     text-align: center;
     background-color: $yellow;
     color: $black;
@@ -136,8 +137,8 @@ body {
     }
 
     & a {
-        color: $black;
-        text-decoration: underline;
+      color: $black;
+      text-decoration: underline;
     }
   }
 
@@ -179,8 +180,8 @@ body {
       background-color: #92a0b3;
       box-shadow: rgba(1, 1, 0, 1) 0 2px 8px;
       background-image: linear-gradient(
-        rgba(70, 77, 85, 0.7),
-        rgba(37, 41, 46, 0.8)
+                      rgba(70, 77, 85, 0.7),
+                      rgba(37, 41, 46, 0.8)
       );
     }
   }
@@ -227,14 +228,23 @@ body {
 
 fieldset {
   border: 1px solid $blue;
-  display: block;
-  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+
 }
 
 legend {
   font-size: 0.75rem;
   color: $white;
-  padding: 0.25rem 0.5rem;
+  padding: 0.15rem 0.5rem;
+  background-color: $blue;
+  border-radius: 0.5rem;
 }
 
 fieldset button {
@@ -249,9 +259,9 @@ fieldset button {
     @extend %button-hover;
   }
 
-    &.action {
-      background-image: linear-gradient(#65a200, #4f8000);
-    }
+  &.action {
+    background-image: linear-gradient(#65a200, #4f8000);
+  }
 }
 
 footer {
@@ -279,6 +289,7 @@ footer {
   a {
     color: $white;
   }
+
   ul {
     display: inline-block;
     list-style: none;
@@ -288,6 +299,7 @@ footer {
     li {
       display: inline-block;
       margin: 0 0.25rem 0 0;
+
       &:after {
         margin-left: 0.25rem;
         content: "|"