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

rudimentary implementation of a lightbox

Browse Source
This commit is contained in:
reverend
2021-04-03 23:03:44 +02:00
parent 092b91825f
commit ceeae9e8c9
3 changed files with 92 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
django_lostplaces/lostplaces/static/main.css
View File

@@ -611,6 +611,12 @@ body {
font-weight: bold;
cursor: pointer;
white-space: nowrap; }
.LP-Button--fullWidth {
text-align: center; }
.LP-Button.LP-Link {
display: block; }
.LP-Button.LP-Link:hover {
color: #f9f9f9; }
.LP-Button:active {
background-color: #76323F;
color: #f9f9f9; }
@@ -717,6 +723,10 @@ body {
margin: 0;
padding: 0; }
.LP-Figure {
padding: 0;
margin: 0; }
.LP-Logo {
max-width: 100%;
max-height: 100%;
@@ -923,7 +933,8 @@ body {
justify-content: space-between;
align-items: flex-start;
gap: unset; }
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline,
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
font-size: unset; }
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
font-size: 28px; }
@@ -941,7 +952,12 @@ body {
overflow: hidden;
order: unset; }
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph {
font-size: unset; }
font-size: unset;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis; }
.LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
height: 165px;
width: 280px;
@@ -1692,9 +1708,62 @@ 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; }
.LP-Map--wide {
height: 300px; }
.LP-Map--full {
height: 100%;
width: 100%; }
.LP-Map .ol-attribution {
font-family: "Montserrat", Helvetica, sans-serif;
color: #565656; }