Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implementing a beta version of a lightbox

Browse Source
This commit is contained in:
reverend 2021-04-03 22:25:35 +02:00
parent d6a456d1eb
commit e906065d47
4 changed files with 158 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/03_Organisms/imageGrid/_imageGrid.scss
View File

@ -56,4 +56,66 @@
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
visibility: visible;
}
&__LightBox {
visibility: hidden;
display: none;
position: fixed;
pointer-events: none;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba($-grey, .9);
padding: 2rem;
padding-bottom: 0;
width: 100vw;
height: 100vh;
z-index: 30;
top: 0;
left: 0;
box-sizing: border-box;
&:target {
visibility: visible;
display: grid;
grid-template-areas: 'picture picture' 'previous next';
grid-template-rows: 1fr 4rem;
grid-template-columns: 1fr 1fr;
pointer-events: initial;
}
}
&__FullSizeImage {
grid-area: picture;
}
&__Previous{
grid-area: previous;
align-self: center;
justify-self: end;
}
&__Next {
grid-area: next;
align-self: center;
justify-self: start;
}
&__Previous, &__Next {
padding: 25px;
color: $-beige;
text-decoration: none;
font-family: $-primary-sans-serif-font;
font-weight: bold;
font-size: 20px;
}
&__Close{
position: fixed;
right: 1rem;
top: 1rem;
left: unset;
visibility: visible;
opacity: 1;
}
}

33
components/03_Organisms/imageGrid/imageGrid.config.json
View File

@ -1,11 +1,34 @@
{
"context": {
"images": [
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
{
"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"current_id": "image0",
"next_id": "image1"
},
{
"url": "/images/photo_2020-05-02_18-11-21.jpg",
"previous_id": "image0",
"current_id": "image1",
"next_id": "image2"
},
{
"url": "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
"previous_id": "image1",
"current_id": "image2",
"next_id": "image3"
},
{
"url": "/images/photo_2020-05-02_18-11-21.jpg",
"previous_id": "image2",
"current_id": "image3",
"next_id": "image4"
},
{
"url": "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"previous_id": "image3",
"current_id": "image4"
}
]
}
}

18
components/03_Organisms/imageGrid/imageGrid.hbs
View File

@ -3,14 +3,28 @@
<ul class="LP-ImageGrid__Container">
{{#each images}}
<li class="LP-ImageGrid__Item">
<a href="#" class="LP-Link">
<img class="LP-Image" src="{{this}}">
<a href="#{{this.current_id}}" class="LP-Link">
<img class="LP-Image" src="{{this.url}}">
</a>
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="#" class="LP-Link">
<img class="LP-Icon" src="/icons/cancel.svg"/>
</a>
</span>
<div id="{{this.current_id}}" class="LP-ImageGrid__LightBox">
<img class="LP-ImageGrid__FullSizeImage" src="{{this.url}}" loading="lazy"/>
{{#if this.next_id}}
<a href="#{{this.next_id}}" class="LP-ImageGrid__Next">Next</a>
{{/if}}
{{#if this.previous_id}}
<a href="#{{this.previous_id}}" class="LP-ImageGrid__Previous">Previous</a>
{{/if}}
<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
<a href="#" class="LP-Link">
<img class="LP-Icon" src="/icons/cancel.svg"/>
</a>
</span>
</div>
</li>
{{/each}}
<li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">

52
public/main.css
View File

@ -723,6 +723,10 @@ body {
margin: 0;
padding: 0; }
.LP-Figure {
padding: 0;
margin: 0; }
.LP-Logo {
max-width: 100%;
max-height: 100%;
@ -1704,6 +1708,54 @@ body {
top: 7.8125px; }
.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
visibility: visible; }
.LP-ImageGrid__LightBox {
visibility: hidden;
display: none;
position: fixed;
pointer-events: none;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(86, 86, 86, 0.9);
padding: 2rem;
padding-bottom: 0;
width: 100vw;
height: 100vh;
z-index: 30;
top: 0;
left: 0;
box-sizing: border-box; }
.LP-ImageGrid__LightBox:target {
visibility: visible;
display: grid;
grid-template-areas: 'picture picture' 'previous next';
grid-template-rows: 1fr 4rem;
grid-template-columns: 1fr 1fr;
pointer-events: initial; }
.LP-ImageGrid__FullSizeImage {
grid-area: picture; }
.LP-ImageGrid__Previous {
grid-area: previous;
align-self: center;
justify-self: end; }
.LP-ImageGrid__Next {
grid-area: next;
align-self: center;
justify-self: start; }
.LP-ImageGrid__Previous, .LP-ImageGrid__Next {
padding: 25px;
color: #D7CEC7;
text-decoration: none;
font-family: "Montserrat", Helvetica, sans-serif;
font-weight: bold;
font-size: 20px; }
.LP-ImageGrid__Close {
position: fixed;
right: 1rem;
top: 1rem;
left: unset;
visibility: visible;
opacity: 1; }
.LP-Map {
margin-bottom: 25px; }