Adapting ImageGrid
This commit is contained in:
parent
bbcbd19ef5
commit
daaa3e11a7
@ -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';
|
||||||
|
|||||||
@ -1,11 +1,24 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
|
||||||
.LP-ImageGrid{
|
.LP-ImageGrid{
|
||||||
@include RV-FlexGrid(290px, 200px);
|
&__Container {
|
||||||
@include RV-ElementList;
|
list-style-type: none;
|
||||||
@include RV-Spacing__Inner--small;
|
@include RV-Grid;
|
||||||
|
--itemWidth: 290px;
|
||||||
|
--itemHeight: 200px;
|
||||||
|
grid-template-rows: repeat(auto-fit, var(--itemHeight));
|
||||||
|
gap: $-spacing-small;
|
||||||
|
}
|
||||||
|
|
||||||
&__Item {
|
&__Item {
|
||||||
position: relative;
|
position: relative;
|
||||||
@include RV-ContentCrop;
|
//@include RV-ContentCrop;
|
||||||
|
height: var(--itemHeight);
|
||||||
|
|
||||||
|
.LP-Image {
|
||||||
|
height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&--add {
|
&--add {
|
||||||
.LP-Link {
|
.LP-Link {
|
||||||
@ -50,8 +63,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)};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
129
public/main.css
129
public/main.css
@ -27305,4 +27305,133 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
|
|||||||
color: #565656;
|
color: #565656;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.LP-ImageGrid__Container {
|
||||||
|
list-style-type: none;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, var(--itemWidth));
|
||||||
|
gap: var(--gap);
|
||||||
|
--itemWidth: 290px;
|
||||||
|
--itemHeight: 200px;
|
||||||
|
grid-template-rows: repeat(auto-fit, var(--itemHeight));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.LP-ImageGrid__Item {
|
||||||
|
position: relative;
|
||||||
|
height: var(--itemHeight);
|
||||||
|
}
|
||||||
|
.LP-ImageGrid__Item .LP-Image {
|
||||||
|
height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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 */
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user