Edited layout.

src/components/image-dialog/ImageDialog.vue

@@ -17,64 +17,64 @@
           v-on:keyup.enter="close"
           v-on:keyup.esc="close"
         />
-        <div class="control-buttons card">
-          <eye-icon
-            class="icon"
-            v-if="showSticks"
-            @click="onToggleShowSticks"
-          />
-          <eye-off-icon class="icon" v-else @click="onToggleShowSticks" />
-          <div>
-            Sticks
-          </div>
-          <eye-icon
-            class="icon"
-            v-if="showMarkers"
-            @click="onToggleShowMarkers"
-          />
-          <eye-off-icon class="icon" v-else @click="onToggleShowMarkers" />
-          <div>
-            Snow markers
-          </div>
-          <eye-icon
-            class="icon"
-            v-if="showLabels"
-            @click="onToggleShowLabels"
-          />
-          <eye-off-icon class="icon" v-else @click="onToggleShowLabels" />
-          <div>
-            Labels
+        <div class="controls">
+          <div class="show-hide-controls card">
+            <eye-icon
+              class="icon"
+              v-if="showSticks"
+              @click="onToggleShowSticks"
+            />
+            <eye-off-icon class="icon" v-else @click="onToggleShowSticks" />
+            <div>
+              Stakes
+            </div>
+            <eye-icon
+              class="icon"
+              v-if="showMarkers"
+              @click="onToggleShowMarkers"
+            />
+            <eye-off-icon class="icon" v-else @click="onToggleShowMarkers" />
+            <div>
+              Snow markers
+            </div>
+            <eye-icon
+              class="icon"
+              v-if="showLabels"
+              @click="onToggleShowLabels"
+            />
+            <eye-off-icon class="icon" v-else @click="onToggleShowLabels" />
+            <div>
+              Labels
+            </div>
           </div>
+          <TimeShift :cameraID="cameraID" :imageName="imageName" />
+          <button @click="onRevertChangeToSticks">
+            Revert changes
+          </button>
         </div>
-        <div class="image-info card">
-          <div>Location:</div>
-          <div>{{ location.name }}</div>
-          <div>Coordinates:</div>
-          <div>
-            {{ location.latitude.toFixed(2) + '°' }},
-            {{ location.longitude.toFixed(2) + '°' }}
+        <div class="info">
+          <div class="image-info card">
+            <div>Location:</div>
+            <div>{{ location.name }}</div>
+            <div>Coordinates:</div>
+            <div>
+              {{ location.latitude.toFixed(2) + '°' }},
+              {{ location.longitude.toFixed(2) + '°' }}
+            </div>
+            <div>Date:</div>
+            <div>{{ imageDate }}</div>
+            <div>Time:</div>
+            <div>{{ imageTime }}</div>
+          </div>
+          <div class="stick-info card">
+            <div>Stake label:</div>
+            <div>{{ stickViewLabel }}</div>
+            <div>Stake height:</div>
+            <div>{{ stickLengthCm }} cm</div>
+            <div>Snow height:</div>
+            <div>{{ snowHeight }} cm</div>
           </div>
-          <div>Date:</div>
-          <div>{{ imageDate }}</div>
-          <div>Time:</div>
-          <div>{{ imageTime }}</div>
-        </div>
-        <div class="stick-info card">
-          <div>Stake label:</div>
-          <div>{{ stickViewLabel }}</div>
-          <div>Stake height:</div>
-          <div>{{ stickLengthCm }} cm</div>
-          <div>Snow height:</div>
-          <div>{{ snowHeight }} cm</div>
         </div>
-        <TimeShift
-          class="time-shift"
-          :cameraID="cameraID"
-          :imageName="imageName"
-        />
-        <button @click="onRevertChangeToSticks">
-          Revert changes
-        </button>
       </div>
     </div>
   </transition>
@@ -191,7 +191,7 @@ export default {
 }
 
 .dialog-container {
-  width: 60%;
+  width: 70%;
   margin: 20px auto;
   padding: 30px;
   background-color: var(--color-background);
@@ -200,14 +200,11 @@ export default {
   transition: all 0.3s ease;
 
   display: grid;
-  grid-template-rows: 30px 0.5fr 1fr 0.7fr 1fr;
-  grid-template-columns: 3fr 1fr 30px;
+  grid-template-rows: 30px auto;
+  grid-template-columns: 4fr 1fr 2fr;
   grid-template-areas:
     '. . close-button'
-    'image control-buttons control-buttons'
-    'image image-info image-info'
-    'image stick-info stick-info'
-    'image time-shift time-shift';
+    'image controls info';
   gap: 5px;
 }
 
@@ -227,7 +224,6 @@ export default {
 
 .image-detail {
   grid-area: image;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 }
 
 .close-button {
@@ -236,26 +232,32 @@ export default {
   justify-self: right;
 }
 
-.control-buttons {
-  grid-area: control-buttons;
+.controls {
+  grid-area: controls;
+}
 
+.show-hide-controls {
   display: grid;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 30px auto;
   column-gap: 10px;
+  margin-bottom: 5px;
 }
 
-.control-buttons * {
+.show-hide-controls * {
   align-self: center;
 }
 
-.image-info {
-  grid-area: image-info;
+.info {
+  grid-area: info;
+}
 
+.image-info {
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 30px 30px 30px 30px;
+  grid-template-columns: auto auto;
   column-gap: 10px;
+  margin-bottom: 5px;
 }
 
 .image-info div:nth-child(even) {
@@ -270,12 +272,11 @@ export default {
 }
 
 .stick-info {
-  grid-area: stick-info;
-
   display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 30px 30px 30px;
+  grid-template-columns: auto auto;
   column-gap: 10px;
+  margin-top: 5px;
 }
 
 .stick-info div:nth-child(even) {
@@ -288,8 +289,4 @@ export default {
   justify-self: right;
   font-weight: bold;
 }
-
-.time-shift {
-  grid-area: time-shift;
-}
 </style>