From 9a66822c6c4e0bcb179613c00d22aeb042c94415 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sun, 19 May 2019 19:57:10 +0200
Subject: [PATCH] Frontend: Refactor CSS #15

---
 frontend/src/app/css/maps.css                 |   8 +
 frontend/src/app/css/p-busy-overlay.css       |  10 --
 frontend/src/app/css/p-navigation.css         |   3 -
 frontend/src/app/css/photoprism.css           | 150 +++---------------
 .../css/{p-photo-viewer.css => viewer.css}    |   0
 frontend/src/component/p-photo-details.vue    |   5 +-
 frontend/src/component/p-photo-list.vue       |   4 +-
 frontend/src/component/p-photo-mosaic.vue     |   7 +-
 frontend/src/component/p-photo-tiles.vue      |   7 +-
 9 files changed, 39 insertions(+), 155 deletions(-)
 create mode 100644 frontend/src/app/css/maps.css
 delete mode 100644 frontend/src/app/css/p-busy-overlay.css
 delete mode 100644 frontend/src/app/css/p-navigation.css
 rename frontend/src/app/css/{p-photo-viewer.css => viewer.css} (100%)

diff --git a/frontend/src/app/css/maps.css b/frontend/src/app/css/maps.css
new file mode 100644
index 000000000..64fd671c8
--- /dev/null
+++ b/frontend/src/app/css/maps.css
@@ -0,0 +1,8 @@
+#photoprism div.leaflet-container .leaflet-marker-photo {
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-color: #fff;
+    color: rgba(0, 0, 0, 0.87);
+    display: block;
+    border-radius: 50%;
+}
diff --git a/frontend/src/app/css/p-busy-overlay.css b/frontend/src/app/css/p-busy-overlay.css
deleted file mode 100644
index fd4e85627..000000000
--- a/frontend/src/app/css/p-busy-overlay.css
+++ /dev/null
@@ -1,10 +0,0 @@
-#p-busy-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background-color: rgba(0, 0, 0, 0.2);
-}
diff --git a/frontend/src/app/css/p-navigation.css b/frontend/src/app/css/p-navigation.css
deleted file mode 100644
index 687c1596c..000000000
--- a/frontend/src/app/css/p-navigation.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#p-navigation {
-    z-index: 10;
-}
diff --git a/frontend/src/app/css/photoprism.css b/frontend/src/app/css/photoprism.css
index aac8f4449..55a7e39ad 100644
--- a/frontend/src/app/css/photoprism.css
+++ b/frontend/src/app/css/photoprism.css
@@ -1,9 +1,8 @@
 @import url("../../../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
 @import url("../../../node_modules/vuetify/dist/vuetify.min.css");
 @import url("../../../node_modules/leaflet/dist/leaflet.css");
-@import url("p-photo-viewer.css");
-@import url("p-busy-overlay.css");
-@import url("p-navigation.css");
+@import url("maps.css");
+@import url("viewer.css");
 
 body {
     background: rgb(250, 250, 250);
@@ -22,6 +21,21 @@ main {
     z-index: 1;
 }
 
+#p-busy-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+#p-navigation {
+    z-index: 10;
+}
+
 #photoprism div.loading {
     text-align: center;
     margin: 50px 20px;
@@ -39,134 +53,6 @@ main {
     top: -8px;
 }
 
-div.leaflet-container .leaflet-marker-photo {
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
-    background-color: rgba(0, 0, 0, 0.3);
-    border-color: #fff;
-    color: rgba(0, 0, 0, 0.87);
-    display: block;
-    border-radius: 50%;
-}
-
-.photo-tile {
-    cursor: pointer;
-}
-
-.photo-tile.selected {
-    opacity: 0.6;
-}
-
-.photo-grid .photo {
-    background: #eeeeee;
-    display: block;
-    width: 250px;
-    height: 250px;
-    float: left;
-    margin: 3px;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-}
-
-.photo-grid .photo img {
-    margin: 0;
-    padding: 0;
-}
-
-.photo-grid .photo .info {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    opacity: 0.75;
-    background: black;
-    font-size: 12px;
-    padding: 8px 12px;
-    color: white;
-    cursor: text;
-}
-
-.photo-grid .photo:hover .info {
-    display: block;
-}
-
-.photo-grid .photo .right {
-    float: right;
-}
-
-.photo-grid .photo .left {
-    float: left;
-}
-
-.photo-grid .photo .actions {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 1;
-    background: transparent;
-    font-size: 14px;
-    padding: 6px 12px;
-    color: white;
-    text-align: center;
-    cursor: default;
-}
-
-.photo-grid .photo:hover .actions {
-    background: black;
-    opacity: 0.75;
-}
-
-.photo-grid .photo .actions .action {
-    display: none;
-}
-
-.photo-grid .photo .location {
-    display: none;
-    font-size: 12px;
-    text-decoration: none;
-    color: white;
-}
-
-.photo-grid .photo:hover .location {
-    display: inline;
-}
-
-.photo-grid .photo:hover .actions .action,
-.photo-grid .photo .actions .action.favorite {
-    display: inline;
-    cursor: pointer;
-}
-
-.photo-carousel {
-    overflow: hidden;
-}
-
-.photo-carousel .next,
-.photo-carousel .prev {
-    position: absolute;
-    top: 50%;
-    z-index: 1;
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-}
-
-.photo-carousel .next {
-    right: 5px;
-}
-
-.photo-carousel .prev {
-    left: 5px;
-}
-
-.photo-carousel .photo-img {
-    margin: 0;
-    padding: 0;
-    cursor: pointer
-}
-
-span.link {
+#photoprism span.link {
     cursor: pointer;
 }
diff --git a/frontend/src/app/css/p-photo-viewer.css b/frontend/src/app/css/viewer.css
similarity index 100%
rename from frontend/src/app/css/p-photo-viewer.css
rename to frontend/src/app/css/viewer.css
diff --git a/frontend/src/component/p-photo-details.vue b/frontend/src/component/p-photo-details.vue
index d79778069..afd3f4953 100644
--- a/frontend/src/component/p-photo-details.vue
+++ b/frontend/src/component/p-photo-details.vue
@@ -1,6 +1,6 @@
 <template>
-    <v-container grid-list-xs fluid class="pa-0 p-photo-details">
-        <v-card v-if="photos.length === 0">
+    <v-container grid-list-xs fluid class="pa-0 p-photos p-photo-details">
+        <v-card v-if="photos.length === 0" class="p-photos-empty">
             <v-card-title primary-title>
                 <div>
                     <h3 class="headline mb-3">No photos matched your search</h3>
@@ -12,6 +12,7 @@
             <v-flex
                     v-for="(photo, index) in photos"
                     :key="photo.ID"
+                    class="p-photo"
                     xs12 sm6 md4 lg3 d-flex
             >
                 <v-hover>
diff --git a/frontend/src/component/p-photo-list.vue b/frontend/src/component/p-photo-list.vue
index e5cd95fe5..d1fb77863 100644
--- a/frontend/src/component/p-photo-list.vue
+++ b/frontend/src/component/p-photo-list.vue
@@ -3,14 +3,14 @@
             :headers="listColumns"
             :items="photos"
             hide-actions
-            class="elevation-1 p-photo-list"
+            class="elevation-1 p-photos p-photo-list"
             select-all
             disable-initial-sort
             item-key="ID"
             v-model="selectedPhotos"
             :no-data-text="'No photos matched your search'"
     >
-        <template slot="items" slot-scope="props">
+        <template slot="items" slot-scope="props" class="p-photo">
             <td>
                 <v-checkbox
                         v-model="props.selected"
diff --git a/frontend/src/component/p-photo-mosaic.vue b/frontend/src/component/p-photo-mosaic.vue
index ca328712d..2eef70a59 100644
--- a/frontend/src/component/p-photo-mosaic.vue
+++ b/frontend/src/component/p-photo-mosaic.vue
@@ -1,6 +1,6 @@
 <template>
-    <v-container grid-list-xs fluid class="pa-0 p-photo-mosaic">
-        <v-card v-if="photos.length === 0">
+    <v-container grid-list-xs fluid class="pa-0 p-photos p-photo-mosaic">
+        <v-card v-if="photos.length === 0" class="p-photos-empty">
             <v-card-title primary-title>
                 <div>
                     <h3 class="headline mb-3">No photos matched your search</h3>
@@ -12,8 +12,9 @@
             <v-flex
                     v-for="(photo, index) in photos"
                     :key="photo.ID"
+                    v-bind:class="{ selected: photo.selected }"
+                    class="p-photo"
                     xs4 sm3 md2 lg1 d-flex
-                    v-bind:class="{ selected: photo.selected }" class="single-photo"
             >
                 <v-hover>
                     <v-card tile slot-scope="{ hover }"
diff --git a/frontend/src/component/p-photo-tiles.vue b/frontend/src/component/p-photo-tiles.vue
index 0254544a9..cc9da1940 100644
--- a/frontend/src/component/p-photo-tiles.vue
+++ b/frontend/src/component/p-photo-tiles.vue
@@ -1,6 +1,6 @@
 <template>
-    <v-container grid-list-xs fluid class="pa-0 p-photo-tiles">
-        <v-card v-if="photos.length === 0">
+    <v-container grid-list-xs fluid class="pa-0 p-photos p-photo-tiles">
+        <v-card v-if="photos.length === 0" class="p-photos-empty">
             <v-card-title primary-title>
                 <div>
                     <h3 class="headline mb-3">No photos matched your search</h3>
@@ -12,8 +12,9 @@
             <v-flex
                     v-for="(photo, index) in photos"
                     :key="photo.ID"
-                    xs12 sm6 md3 lg2 d-flex
                     v-bind:class="{ selected: photo.selected }"
+                    class="p-photo"
+                    xs12 sm6 md3 lg2 d-flex
             >
                 <v-hover>
                     <v-card tile slot-scope="{ hover }"