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

Compare commits

base: Commander1024:592fd4773b4f5f4bc2f853f226b61bbe9aa7fba9
Branches Tags
Commander1024:master
Commander1024:linklist-add
...
compare: Commander1024:8e4ae2d9be32e14b96b8e101fda16e7254396002
Branches Tags
Commander1024:master
Commander1024:linklist-add

3 Commits
592fd4773b ... 8e4ae2d9be

Author SHA1 Message Date
reverend
8e4ae2d9be Deleting and adding Image 2020-09-25 21:42:18 +02:00
reverend
af100b940b o 2020-09-25 18:46:26 +02:00
reverend
0c24dec2ef i 2020-09-25 18:09:22 +02:00
3 changed files with 110 additions and 20 deletions
Show Stats Expand all files Collapse all files

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

@ -3,7 +3,52 @@
@include RV-ElementList; @include RV-ElementList;
@include RV-Spacing__Inner--small; @include RV-Spacing__Inner--small;
.LP-ImageGrid__Item { &__Item {
position: relative;
@include RV-ContentCrop; @include RV-ContentCrop;
&--add {
.LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: $-almost-white;
.LP-Icon {
width: $-spacing-large;
height: $-spacing-large;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
&__DeleteItem {
opacity: 0.7;
visibility: hidden;
position: absolute;
top: $-spacing-small;
right: $-spacing-small;
background-color: $-light-brown;
border-radius: 50%;
height: $-spacing-large;
width: $-spacing-large;
.LP-Link .LP-Icon{
height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2};
position:relative;
left: #{($-spacing-large - $-spacing-small) / 3};
top: #{($-spacing-large - $-spacing-small) / 3};
}
}
&__Item>.LP-Link:hover + &__DeleteItem, &__DeleteItem:hover {
visibility: visible;
} }
} }

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

@ -3,8 +3,20 @@
<ul class="LP-ImageGrid__Container"> <ul class="LP-ImageGrid__Container">
{{#each images}} {{#each images}}
<li class="LP-ImageGrid__Item"> <li class="LP-ImageGrid__Item">
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a> <a href="#" class="LP-Link">
<img class="LP-Image" src="{{this}}">
</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>
</li> </li>
{{/each}} {{/each}}
<li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
<a class="LP-Link" href="#">
<img class="LP-Icon" src="/icons/plus.svg"/>
</a>
</li>
</ul> </ul>
</div> </div>

47
public/main.css
View File

@ -1588,23 +1588,56 @@ body {
border: none; } border: none; }
.LP-ImageGrid__Container { .LP-ImageGrid__Container {
gap: 10px; } gap: 10px; }
.LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { .LP-ImageGrid__Item {
position: relative; }
.LP-ImageGrid__Item, .LP-ImageGrid__Item * {
overflow: hidden; overflow: hidden;
word-break: break-all; } word-break: break-all; }
.LP-ImageGrid .LP-ImageGrid__Item img { .LP-ImageGrid__Item img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; } object-fit: cover; }
.LP-ImageGrid .LP-ImageGrid__Item--left img { .LP-ImageGrid__Item--left img {
object-position: left; } object-position: left; }
.LP-ImageGrid .LP-ImageGrid__Item--center img { .LP-ImageGrid__Item--center img {
object-position: center; } object-position: center; }
.LP-ImageGrid .LP-ImageGrid__Item--top img { .LP-ImageGrid__Item--top img {
object-position: top; } object-position: top; }
.LP-ImageGrid .LP-ImageGrid__Item--bottom img { .LP-ImageGrid__Item--bottom img {
object-position: botom; } object-position: botom; }
.LP-ImageGrid .LP-ImageGrid__Item--center img { .LP-ImageGrid__Item--center img {
object-position: center; } object-position: center; }
.LP-ImageGrid__Item--add .LP-Link {
width: 100%;
height: 100%;
position: relative;
display: block;
background: #f9f9f9; }
.LP-ImageGrid__Item--add .LP-Link .LP-Icon {
width: 35px;
height: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.LP-ImageGrid__DeleteItem {
opacity: 0.7;
visibility: hidden;
position: absolute;
top: 10px;
right: 10px;
background-color: #C09F80;
border-radius: 50%;
height: 35px;
width: 35px; }
.LP-ImageGrid__DeleteItem .LP-Link .LP-Icon {
height: 20px;
width: 20px;
position: relative;
left: 8.33333px;
top: 8.33333px; }
.LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
visibility: visible; }
.LP-MainContainer { .LP-MainContainer {
margin: 0 auto; margin: 0 auto;