luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Refactor CSS #15

Browse source
This commit is contained in:
Michael Mayer 2019-05-19 19:57:10 +02:00
parent 68c4810f17
commit 9a66822c6c
9 changed files with 39 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/css/maps.css Normal file
View file

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

10
frontend/src/app/css/p-busy-overlay.css
View file

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

3
frontend/src/app/css/p-navigation.css
View file

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

150
frontend/src/app/css/photoprism.css
View file

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

0
frontend/src/app/css/p-photo-viewer.css → frontend/src/app/css/viewer.css
View file

5
frontend/src/component/p-photo-details.vue
View file

@ -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>

4
frontend/src/component/p-photo-list.vue
View file

@ -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"

7
frontend/src/component/p-photo-mosaic.vue
View file

@ -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 }"

7
frontend/src/component/p-photo-tiles.vue
View file

@ -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 }"