Frontend: Refactor CSS #15

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%;
+}

frontend/src/app/css/p-busy-overlay.css

@@ -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);
-}

frontend/src/app/css/p-navigation.css

@@ -1,3 +0,0 @@
-#p-navigation {
-    z-index: 10;
-}

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("maps.css");
-@import url("p-busy-overlay.css");
+@import url("viewer.css");
-@import url("p-navigation.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 {
+#photoprism span.link {
-    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 {
     cursor: pointer;
 }

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-container grid-list-xs fluid class="pa-0 p-photos p-photo-details">
-        <v-card v-if="photos.length === 0">
+        <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>

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"

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-container grid-list-xs fluid class="pa-0 p-photos p-photo-mosaic">
-        <v-card v-if="photos.length === 0">
+        <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 }"

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-container grid-list-xs fluid class="pa-0 p-photos p-photo-tiles">
-        <v-card v-if="photos.length === 0">
+        <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 }"