Frontend: Refactor PPhotoViewer (code clean-up) #15
This commit is contained in:
Michael Mayer
parent
9061a4a683
commit
68c4810f17
7 changed files with 103 additions and 127 deletions
|
|
@ -1,73 +0,0 @@
|
|||
@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("photo.css");
|
||||
|
||||
#photoprism div.loading {
|
||||
text-align: center;
|
||||
margin: 50px 20px;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
body {
|
||||
background: rgb(250, 250, 250);
|
||||
color: #333333;
|
||||
font-family: Roboto, sans-serif;;
|
||||
}
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#photoprism main a {
|
||||
color: #00B8D4;
|
||||
}
|
||||
|
||||
.v-badge__badge {
|
||||
font-size: 12px;
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
right: -20px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
#p-navigation {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Photo Gallery */
|
||||
#photoprism .pswp__caption__center {
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #E0E0E0;
|
||||
}
|
||||
|
||||
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
Normal file
10
frontend/src/app/css/p-busy-overlay.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
#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
Normal file
3
frontend/src/app/css/p-navigation.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
#p-navigation {
|
||||
z-index: 10;
|
||||
}
|
||||
9
frontend/src/app/css/p-photo-viewer.css
Normal file
9
frontend/src/app/css/p-photo-viewer.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
#p-photo-viewer .pswp__caption__center {
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #E0E0E0;
|
||||
}
|
||||
|
|
@ -1,3 +1,52 @@
|
|||
@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");
|
||||
|
||||
body {
|
||||
background: rgb(250, 250, 250);
|
||||
color: #333333;
|
||||
font-family: Roboto, sans-serif;;
|
||||
}
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#photoprism div.loading {
|
||||
text-align: center;
|
||||
margin: 50px 20px;
|
||||
}
|
||||
|
||||
#photoprism main a {
|
||||
color: #00B8D4;
|
||||
}
|
||||
|
||||
#photoprism .v-badge__badge {
|
||||
font-size: 12px;
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
right: -20px;
|
||||
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;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import "./css/app.css";
|
||||
import "./css/photoprism.css";
|
||||
|
||||
export default {
|
||||
name: 'photoprism',
|
||||
|
|
|
|||
|
|
@ -1,70 +1,51 @@
|
|||
<template>
|
||||
<div class="p-photo-viewer">
|
||||
<slot v-bind:openGallery="openGallery"></slot>
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div id="p-photo-viewer" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="pswp__bg"></div>
|
||||
<div class="pswp__scroll-wrap">
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<div class="pswp__top-bar">
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
|
||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -75,9 +56,6 @@
|
|||
|
||||
export default {
|
||||
name: "PPhotoViewer",
|
||||
methods: {
|
||||
openGallery: function () {
|
||||
},
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue