Fixing ImageGrid and Lightbox
This commit is contained in:
parent
bbcbd19ef5
commit
c2678fec85
|
|
@ -4,6 +4,6 @@
|
|||
@import 'linkList/linkList';
|
||||
@import 'footer/footer';
|
||||
@import 'form/form';
|
||||
//@import 'imageGrid/imageGrid';
|
||||
@import 'imageGrid/imageGrid';
|
||||
//@import 'osmMap/osmMap';
|
||||
//@import 'userProfile/userProfile';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,25 @@
|
|||
.LP-ImageGrid{
|
||||
@include RV-FlexGrid(290px, 200px);
|
||||
@include RV-ElementList;
|
||||
@include RV-Spacing__Inner--small;
|
||||
@use "sass:math";
|
||||
|
||||
.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 {
|
||||
position: relative;
|
||||
@include RV-ContentCrop;
|
||||
|
||||
.LP-Image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--add {
|
||||
.LP-Link {
|
||||
|
|
@ -50,8 +64,8 @@
|
|||
height: #{$-spacing-small * 2};
|
||||
width: #{$-spacing-small * 2};
|
||||
position:relative;
|
||||
left: #{($-spacing-large - $-spacing-small) / 3.2};
|
||||
top: #{($-spacing-large - $-spacing-small) / 3.2};
|
||||
left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
|
||||
top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,9 +105,10 @@
|
|||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__FullSizeImage {
|
||||
grid-area: picture;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
&__Previous{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{#each images}}
|
||||
<li class="LP-ImageGrid__Item">
|
||||
<a href="#{{this.current_id}}" class="LP-Link">
|
||||
<img class="LP-Image" src="{{this}}">
|
||||
<img class="LP-Image" src="{{this.url}}">
|
||||
</a>
|
||||
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
|
||||
<a href="#" class="LP-Link">
|
||||
|
|
|
|||
161
public/main.css
161
public/main.css
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
.RV-Dummy {
|
||||
overflow: hidden;
|
||||
background-color: #F4A460;
|
||||
|
|
@ -82,27 +83,27 @@
|
|||
.RV-AspectRatio--1to2 {
|
||||
--aspectX: 1;
|
||||
--aspectY: 2;
|
||||
padding-top: calc(100% * var(--aspectY) / var(--aspectX));
|
||||
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
|
||||
}
|
||||
.RV-AspectRatio--2to1 {
|
||||
--aspectX: 2;
|
||||
--aspectY: 1;
|
||||
padding-top: calc(100% * var(--aspectY) / var(--aspectX));
|
||||
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
|
||||
}
|
||||
.RV-AspectRatio--3to2 {
|
||||
--aspectX: 3;
|
||||
--aspectY: 2;
|
||||
padding-top: calc(100% * var(--aspectY) / var(--aspectX));
|
||||
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
|
||||
}
|
||||
.RV-AspectRatio--4to3 {
|
||||
--aspectX: 4;
|
||||
--aspectY: 3;
|
||||
padding-top: calc(100% * var(--aspectY) / var(--aspectX));
|
||||
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX)));
|
||||
}
|
||||
.RV-AspectRatio--16to9 {
|
||||
--aspectX: 16;
|
||||
--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;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 33.3333333333%;
|
||||
flex-basis: calc(100%/3);
|
||||
}
|
||||
.RV-Flex__Item--quarter {
|
||||
overflow: hidden;
|
||||
|
|
@ -370,7 +371,7 @@ html {
|
|||
.RV-BreakPoint__Item {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 5;
|
||||
flex-basis: calc(var(--breakPoint) * 999 - 99900%);
|
||||
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
|
||||
overflow: hidden;
|
||||
--outer-spacing: 0;
|
||||
--inner-spacing: 0;
|
||||
|
|
@ -411,7 +412,7 @@ html {
|
|||
gap: var(--gap);
|
||||
}
|
||||
.RV-Grid__Item {
|
||||
height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
|
||||
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing)));
|
||||
}
|
||||
.RV-Grid__Item > * {
|
||||
height: 100%;
|
||||
|
|
@ -925,7 +926,7 @@ body {
|
|||
height: 1em;
|
||||
width: 1em;
|
||||
border: 1px solid #565656;
|
||||
padding: 0 calc(0.5em + 2px);
|
||||
padding: 0 calc(.5em + 2px);
|
||||
margin-right: 0.7em;
|
||||
}
|
||||
|
||||
|
|
@ -26396,7 +26397,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||
}
|
||||
|
||||
.mdi-blank::before {
|
||||
content: "\f68c";
|
||||
content: "";
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -26894,7 +26895,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||
justify-content: center;
|
||||
}
|
||||
.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 > * {
|
||||
height: 100%;
|
||||
|
|
@ -26944,7 +26945,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||
--icon-color: #C09F80;
|
||||
}
|
||||
.LP-LinkList .RV-Iconized__Icon {
|
||||
font-size: calc(var(--itemHeight) * 0.75);
|
||||
font-size: calc(var(--itemHeight) * .75);
|
||||
line-height: 1em;
|
||||
color: var(--icon-color);
|
||||
transition: color 0.2s;
|
||||
|
|
@ -26998,7 +26999,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||
.LP-FooterColumns__Item {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 5;
|
||||
flex-basis: calc(var(--breakPoint) * 999 - 99900%);
|
||||
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999);
|
||||
overflow: hidden;
|
||||
--outer-spacing: 0;
|
||||
--inner-spacing: 0;
|
||||
|
|
@ -27305,4 +27306,138 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||
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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue