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

Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend

Browse Source
This commit is contained in:
reverend
2021-11-21 13:26:37 +01:00
parent daaa3e11a7 b4508ee3e3
commit aed29a6497
7 changed files with 144 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/03_Organisms/_organisms.scss
View File

@@ -5,5 +5,5 @@
@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';

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

@@ -1,23 +1,24 @@
@use "sass:math"; @use "sass:math";
.LP-ImageGrid{ .LP-ImageGrid{
&__Container { &__Container {
list-style-type: none;
@include RV-Grid; @include RV-Grid;
@include RV-Grid--fixedSize;
--fixedSize: var(--itemWidth);
--itemWidth: 290px; --itemWidth: 290px;
--itemHeight: 200px; --itemHeight: 200px;
grid-template-rows: repeat(auto-fit, var(--itemHeight)); list-style-type: none;
gap: $-spacing-small; --gap: #{$-spacing-small};
} }
&__Item { &__Item {
position: relative; position: relative;
//@include RV-ContentCrop;
height: var(--itemHeight);
.LP-Image { .LP-Image {
height: 100%; height: 100%;
height: 100%; width: 100%;
object-fit: cover;
} }
&--add { &--add {
@@ -63,8 +64,8 @@
height: #{$-spacing-small * 2}; height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2}; width: #{$-spacing-small * 2};
position:relative; position:relative;
left: #{math.div(($-spacing-large - $-spacing-small), 3.2)}; left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
top: #{math.div(($-spacing-large - $-spacing-small), 3.2)}; top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
} }
} }
@@ -107,6 +108,7 @@
&__FullSizeImage { &__FullSizeImage {
grid-area: picture; grid-area: picture;
justify-self: center;
} }
&__Previous{ &__Previous{

1
components/03_Organisms/linkList/_linkList.scss
View File

@@ -25,7 +25,6 @@
&:hover { &:hover {
background-color: $-beige; background-color: $-beige;
--icon-color: #{$-grey}; --icon-color: #{$-grey};
--color: #{$-almost-white};
.LP-LinkList__ItemHover { .LP-LinkList__ItemHover {
opacity: 1; opacity: 1;

6
components/04_Templates/_templates.scss
View File

@@ -1,3 +1,3 @@
//@import 'home/home'; @import 'home/home';
//@import 'placeDetail/placeDetail'; @import 'placeDetail/placeDetail';
//@import 'codex/codex'; @import 'codex/codex';

1
components/04_Templates/placeDetail/_placeDetail.scss
View File

@@ -4,7 +4,6 @@
max-width: 700px; max-width: 700px;
max-height: 500px; max-height: 500px;
width: 50%; width: 50%;
@include RV-BoxShadow--simple($-grey);
box-shadow: 0 0 10px $-grey; box-shadow: 0 0 10px $-grey;
object-fit: cover; object-fit: cover;
object-position: 0 0; object-position: 0 0;

144
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;
@@ -26961,7 +26962,6 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
.LP-LinkList .LP-LinkList__Item:hover { .LP-LinkList .LP-LinkList__Item:hover {
background-color: #D7CEC7; background-color: #D7CEC7;
--icon-color: #565656; --icon-color: #565656;
--color: #f9f9f9;
} }
.LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover { .LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover {
opacity: 1; opacity: 1;
@@ -26998,7 +26998,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;
@@ -27306,22 +27306,26 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
} }
.LP-ImageGrid__Container { .LP-ImageGrid__Container {
list-style-type: none;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, var(--itemWidth)); grid-template-columns: repeat(auto-fill, var(--itemWidth));
gap: var(--gap); 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; --itemWidth: 290px;
--itemHeight: 200px; --itemHeight: 200px;
grid-template-rows: repeat(auto-fit, var(--itemHeight)); list-style-type: none;
gap: 10px; --gap: 10px;
} }
.LP-ImageGrid__Item { .LP-ImageGrid__Item {
position: relative; position: relative;
height: var(--itemHeight);
} }
.LP-ImageGrid__Item .LP-Image { .LP-ImageGrid__Item .LP-Image {
height: 100%; height: 100%;
height: 100%; width: 100%;
object-fit: cover;
} }
.LP-ImageGrid__Item--add .LP-Link { .LP-ImageGrid__Item--add .LP-Link {
width: 100%; width: 100%;
@@ -27396,6 +27400,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
} }
.LP-ImageGrid__FullSizeImage { .LP-ImageGrid__FullSizeImage {
grid-area: picture; grid-area: picture;
justify-self: center;
} }
.LP-ImageGrid__Previous { .LP-ImageGrid__Previous {
grid-area: previous; grid-area: previous;
@@ -27434,4 +27439,105 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
box-shadow: 0 0 3px 3px #C09F80; box-shadow: 0 0 3px 3px #C09F80;
} }
.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;
}
.LP-Map .ol-attribution a {
color: #C09F80;
}
.LP-Map .ol-attribution a:hover, .LP-Map .ol-attribution a:focus {
color: #D7CEC7;
}
.LP-Map .ol-zoom-in, .LP-Map .ol-zoom-out {
background-color: #C09F80;
}
.LP-Map .ol-zoom-in:hover, .LP-Map .ol-zoom-in:focus, .LP-Map .ol-zoom-out:hover, .LP-Map .ol-zoom-out:focus {
background-color: #565656;
}
.LP-Map .LP-Map__Popup {
font-family: "Montserrat", Helvetica, sans-serif;
color: #565656;
background-color: #f9f9f9;
padding: 0.5em;
border-radius: 2px;
}
.LP-UserProfile {
display: flex;
flex-direction: row;
}
.LP-UserProfile__Bio {
flex-grow: 5;
flex-shrink: 10;
padding-right: 35px;
}
.LP-UserProfile__Info {
flex-grow: 10;
flex-shrink: 1;
flex-basis: max-content;
}
.LP-MainContainer {
margin: 0 auto;
max-width: 1280px;
}
.LP-HorizontalLine {
color: #565656;
}
@media (max-width: 650px) {
.LP-MainContainer {
width: 100%;
}
}
.LP-PlaceDetail .LP-PlaceDetail__Image {
max-width: 700px;
max-height: 500px;
width: 50%;
box-shadow: 0 0 10px #565656;
object-fit: cover;
object-position: 0 0;
margin: 0;
padding: 0;
float: right;
margin-left: 25px;
margin-bottom: 25px;
margin-right: 25px;
overflow: hidden;
}
@media (max-width: 750px) {
.LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
float: none;
width: 100%;
max-width: unset;
height: auto;
margin: 0;
padding: 0;
margin-bottom: 25px;
}
}
.LP-TextSection .LP-UnorderedList {
font-family: "Crimson Pro", Times, serif;
font-size: 1.4rem;
}
.LP-TextSection .LP-UnorderedList li {
margin-bottom: 0.75em;
list-style-type: square;
margin-left: 2em;
padding-left: 1em;
}
/*# 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