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

Fixing ImageGrid and Lightbox

Browse Source
This commit is contained in:
reverend 2021-11-01 09:43:20 +01:00
parent bbcbd19ef5
commit c2678fec85
5 changed files with 174 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/03_Organisms/_organisms.scss
View File

@ -4,6 +4,6 @@
@import 'linkList/linkList'; @import 'linkList/linkList';
@import 'footer/footer'; @import 'footer/footer';
@import 'form/form'; @import 'form/form';
//@import 'imageGrid/imageGrid'; @import 'imageGrid/imageGrid';
//@import 'osmMap/osmMap'; //@import 'osmMap/osmMap';
//@import 'userProfile/userProfile'; //@import 'userProfile/userProfile';

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

@ -1,11 +1,25 @@
.LP-ImageGrid{ @use "sass:math";
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
.LP-ImageGrid{
&__Container {
@include RV-Grid;
@include RV-Grid--fixedSize;
--fixedSize: var(--itemWidth);
--itemWidth: 290px;
--itemHeight: 200px;
list-style-type: none;
--gap: #{$-spacing-small};
}
&__Item { &__Item {
position: relative; position: relative;
@include RV-ContentCrop;
.LP-Image {
height: 100%;
width: 100%;
object-fit: cover;
}
&--add { &--add {
.LP-Link { .LP-Link {
@ -50,8 +64,8 @@
height: #{$-spacing-small * 2}; height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2}; width: #{$-spacing-small * 2};
position:relative; position:relative;
left: #{($-spacing-large - $-spacing-small) / 3.2}; left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
top: #{($-spacing-large - $-spacing-small) / 3.2}; top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
} }
} }
@ -91,9 +105,10 @@
pointer-events: initial; pointer-events: initial;
} }
} }
&__FullSizeImage { &__FullSizeImage {
grid-area: picture; grid-area: picture;
justify-self: center;
} }
&__Previous{ &__Previous{

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

@ -4,7 +4,7 @@
{{#each images}} {{#each images}}
<li class="LP-ImageGrid__Item"> <li class="LP-ImageGrid__Item">
<a href="#{{this.current_id}}" class="LP-Link"> <a href="#{{this.current_id}}" class="LP-Link">
<img class="LP-Image" src="{{this}}"> <img class="LP-Image" src="{{this.url}}">
</a> </a>
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen"> <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link">

161
public/main.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
.RV-Dummy { .RV-Dummy {
overflow: hidden; overflow: hidden;
background-color: #F4A460; background-color: #F4A460;
@ -82,27 +83,27 @@
.RV-AspectRatio--1to2 { .RV-AspectRatio--1to2 {
--aspectX: 1; --aspectX: 1;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * var(--aspectY) / var(--aspectX)); padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
} }
.RV-AspectRatio--2to1 { .RV-AspectRatio--2to1 {
--aspectX: 2; --aspectX: 2;
--aspectY: 1; --aspectY: 1;
padding-top: calc(100% * var(--aspectY) / var(--aspectX)); padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
} }
.RV-AspectRatio--3to2 { .RV-AspectRatio--3to2 {
--aspectX: 3; --aspectX: 3;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * var(--aspectY) / var(--aspectX)); padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
} }
.RV-AspectRatio--4to3 { .RV-AspectRatio--4to3 {
--aspectX: 4; --aspectX: 4;
--aspectY: 3; --aspectY: 3;
padding-top: calc(100% * var(--aspectY) / var(--aspectX)); padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
} }
.RV-AspectRatio--16to9 { .RV-AspectRatio--16to9 {
--aspectX: 16; --aspectX: 16;
--aspectY: 9; --aspectY: 9;
padding-top: calc(100% * var(--aspectY) / var(--aspectX)); padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
} }
/** /**
@ -314,7 +315,7 @@ html {
overflow: hidden; overflow: hidden;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 33.3333333333%; flex-basis: calc(100%/3);
} }
.RV-Flex__Item--quarter { .RV-Flex__Item--quarter {
overflow: hidden; overflow: hidden;
@ -370,7 +371,7 @@ html {
.RV-BreakPoint__Item { .RV-BreakPoint__Item {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
flex-basis: calc(var(--breakPoint) * 999 - 99900%); flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
overflow: hidden; overflow: hidden;
--outer-spacing: 0; --outer-spacing: 0;
--inner-spacing: 0; --inner-spacing: 0;
@ -411,7 +412,7 @@ html {
gap: var(--gap); gap: var(--gap);
} }
.RV-Grid__Item { .RV-Grid__Item {
height: calc(var(--itemHeight) - 2 * var(--inner-spacing)); height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
} }
.RV-Grid__Item > * { .RV-Grid__Item > * {
height: 100%; height: 100%;
@ -925,7 +926,7 @@ body {
height: 1em; height: 1em;
width: 1em; width: 1em;
border: 1px solid #565656; border: 1px solid #565656;
padding: 0 calc(0.5em + 2px); padding: 0 calc(.5em + 2px);
margin-right: 0.7em; margin-right: 0.7em;
} }
@ -26396,7 +26397,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
} }
.mdi-blank::before { .mdi-blank::before {
content: "\f68c"; content: "";
visibility: hidden; visibility: hidden;
} }
@ -26894,7 +26895,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
justify-content: center; justify-content: center;
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
height: calc(var(--itemHeight) - 2 * var(--inner-spacing)); height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * {
height: 100%; height: 100%;
@ -26944,7 +26945,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
--icon-color: #C09F80; --icon-color: #C09F80;
} }
.LP-LinkList .RV-Iconized__Icon { .LP-LinkList .RV-Iconized__Icon {
font-size: calc(var(--itemHeight) * 0.75); font-size: calc(var(--itemHeight) * .75);
line-height: 1em; line-height: 1em;
color: var(--icon-color); color: var(--icon-color);
transition: color 0.2s; transition: color 0.2s;
@ -26998,7 +26999,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
.LP-FooterColumns__Item { .LP-FooterColumns__Item {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
flex-basis: calc(var(--breakPoint) * 999 - 99900%); flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
overflow: hidden; overflow: hidden;
--outer-spacing: 0; --outer-spacing: 0;
--inner-spacing: 0; --inner-spacing: 0;
@ -27305,4 +27306,138 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
color: #565656; color: #565656;
} }
.LP-ImageGrid__Container {
display: grid;
grid-template-columns: repeat(auto-fill, var(--itemWidth));
gap: var(--gap);
grid-template-rows: repeat(auto-fill, minmax(var(--itemHeight), 1fr));
grid-auto-rows: minmax(var(--itemHeight), 1fr);
grid-template-columns: repeat(auto-fill, var(--itemWidth));
justify-content: space-between;
--fixedSize: var(--itemWidth);
--itemWidth: 290px;
--itemHeight: 200px;
list-style-type: none;
--gap: 10px;
}
.LP-ImageGrid__Item {
position: relative;
}
.LP-ImageGrid__Item .LP-Image {
height: 100%;
width: 100%;
object-fit: cover;
}
.LP-ImageGrid__Item--add .LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: #f9f9f9;
transition: background 0.3s;
}
.LP-ImageGrid__Item--add .LP-Link .LP-Icon {
width: 35px;
height: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.LP-ImageGrid__Item--add:hover .LP-Link {
background-color: #D7CEC7;
}
.LP-ImageGrid__DeleteItem {
opacity: 0.7;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
border-radius: 50%;
transition: background 0.2s;
height: 35px;
width: 35px;
}
.LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
height: 20px;
width: 20px;
position: relative;
left: 7.8125px;
top: 7.8125px;
}
.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
background-color: #C09F80;
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 img {
object-fit: contain;
}
.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;
justify-self: center;
}
.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-Select {
display: block;
cursor: pointer;
transition: box-shadow 0.3s;
}
.LP-Select:checked, :checked + .LP-Select, .LP-Select--active {
box-shadow: 0 0 3px 3px #C09F80;
}
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */

2
public/main.css.map
View File

File diff suppressed because one or more lines are too long