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

Compare commits

base: Commander1024:02b1c39e9e6ca41254d429205b161c367549ea51
Branches Tags
Commander1024:master Commander1024:linklist-add
...
compare: Commander1024:linklist-add
Branches Tags
Commander1024:master Commander1024:linklist-add

46 Commits
02b1c39e9e ... linklist-a

Author SHA1 Message Date
reverend
313968fafd Form fine tuning and link list add 2020-08-21 12:08:51 +02:00
reverend
8fa8033be4 LinkList add LInk 2020-08-21 10:51:07 +02:00
Commander1024
b64724b586 Converted indentation to spaces globally. 2020-08-17 15:39:17 +02:00
reverend
e80e93bcaa Pagination disabled class 2020-08-16 20:56:34 +02:00
reverend
384cdcaae7 More Paginatoin Styling, responsive 2020-08-16 17:50:55 +02:00
reverend
427ce11adb Removed JS, using transition instead of animation for sidebar menu sliding 2020-08-16 17:22:08 +02:00
reverend
15b4bc7880 Padding fix 2020-08-16 12:26:10 +02:00
reverend
9ebfef6c6e Sidebar height fix 2020-08-16 11:56:21 +02:00
reverend
3f69ff8f0d No absolute icon paths 2020-08-16 11:42:13 +02:00
reverend
5f4b72f9be Sidebar animation is not triggered when loading page 2020-08-16 11:40:40 +02:00
reverend
57afcbdffb Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend 2020-08-16 10:31:01 +02:00
reverend
681cdad1cb Responsive Sidebarmenu 2020-08-16 10:30:55 +02:00
Commander1024
a613d9a069 Made inactive pag-items gray and non-hover. 2020-08-15 20:47:40 +02:00
Commander1024
fb72b00456 Aligned page numbers to the rest again. 2020-08-14 13:56:11 +02:00
Commander1024
3970aed176 Added beautiful navigation icons to pagination nav-css. 2020-08-14 13:41:27 +02:00
Commander1024
0eacea8243 Added fest/previous next/last again incl text for alignment. 2020-08-14 11:31:35 +02:00
Commander1024
14ea0910ef Added first/last pagination item. 2020-08-14 11:21:13 +02:00
reverend
0e3f005639 Using grid for master layout 2020-08-13 23:44:06 +02:00
reverend
fc0a96b167 Unbugged nav 2020-08-13 23:43:49 +02:00
reverend
8edcf77d44 Removed after content for prev/next 2020-08-13 23:43:34 +02:00
reverend
f973dccd27 Minor tweaks 2020-08-13 11:17:33 +02:00
reverend
a55b02825e Color adjustment 2020-08-12 22:31:48 +02:00
reverend
7ceddb736f Pagnation in place list 2020-08-12 22:30:14 +02:00
reverend
2243c7ed9e Centered Pagination 2020-08-12 22:29:18 +02:00
reverend
1507a0b01e Small tweak 2020-08-12 22:27:31 +02:00
reverend
c8c21869c4 Pagnination Component 2020-08-12 22:27:18 +02:00
reverend
09a6377901 Some Tweaks 2020-08-12 21:31:13 +02:00
reverend
f0b3839e73 MessageList Component 2020-08-12 21:31:04 +02:00
reverend
72c8febfc4 CSS for Messages 2020-08-12 20:11:22 +02:00
reverend
4120155a1c New Icons 2020-08-12 20:11:12 +02:00
reverend
fba48603b6 Ye 2020-08-12 18:29:27 +02:00
reverend
16f0e10d89 Minor fix 2020-08-12 18:29:20 +02:00
reverend
e431d9a1a0 Form squishiness and Button layout 2020-08-12 18:29:08 +02:00
reverend
f9233249a3 Styled submit input 2020-08-12 18:28:47 +02:00
reverend
2e48395076 Neater cancle button 2020-08-12 18:28:37 +02:00
reverend
fb20b555c4 More Dynamic modifier rendering 2020-08-09 23:52:15 +02:00
reverend
67fe74d67e Added Wrapper for Component 2020-08-09 23:52:04 +02:00
reverend
b335e7a587 Removed remnants 2020-08-09 23:48:51 +02:00
reverend
b497e10584 Current build 2020-08-09 23:44:55 +02:00
reverend
bd9df610e7 Renaming 2020-08-09 23:44:50 +02:00
reverend
448358531c Mayor restrukturing 2020-08-09 23:44:23 +02:00
reverend
9c85c44d2b Minor width fix 2020-08-09 23:43:57 +02:00
reverend
6d69fb6c29 New Component 2020-08-09 23:43:40 +02:00
reverend
f663864c29 Resetting 2020-08-09 23:43:21 +02:00
reverend
1230f140d0 Adjusted padding/margin 2020-08-09 23:43:03 +02:00
reverend
1a92521029 Layout defintion 2020-08-09 23:42:48 +02:00
76 changed files with 1487 additions and 635 deletions
Expand all files Collapse all files

2
components/01_Atoms/_atoms.scss
View File

@@ -8,3 +8,5 @@
@import 'image/image';
@import 'logo/logo';
@import 'tag/tag';
@import 'message/message';
@import 'pagination/pagination';

6
components/01_Atoms/button/_button.scss
View File

@@ -5,6 +5,7 @@
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
cursor: pointer;
&:active{
background-color: $-wine-red;
@@ -12,6 +13,11 @@
}
&--cancel{
background-color: $-grey;
color: $-almost-white;
&:active{
color: $-grey;
background-color: $-almost-white;
}
}
}

2
components/01_Atoms/headline/_headline.scss
View File

@@ -5,7 +5,7 @@
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-bottom: 25px;
&--main{
position: relative;

2
components/01_Atoms/headline/headline.hbs
View File

@@ -1 +1 @@
<h1 class="LP-Headline LP-Headline{{modifier}}">{{headline}}</h1>
<h1 class="LP-Headline{{#if modifier}} LP-Headline{{modifier}}{{/if}}">{{headline}}</h1>

2
components/01_Atoms/image/_image.scss
View File

@@ -3,4 +3,6 @@
width: 100%;
height: auto;
vertical-align: top;
margin: 0;
padding: 0;
}

18
components/01_Atoms/input/_input.scss
View File

@@ -8,7 +8,7 @@
.LP-Input__Field{
border: none;
border-bottom: 1px solid $-grey;
padding: 8px;
padding: 8px 0;
margin-bottom: $-margin-bottom;
&:focus, &:active, &:invalid{
@@ -18,6 +18,22 @@
border-radius: 3px 3px 0 0;
box-shadow: none;
}
&[type=submit]{
background-color: $-light-brown;
color: $-grey;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
cursor: pointer;
&:active{
background-color: $-wine-red;
color:$-almost-white;
}
}
}
.LP-Input__Label{

2
components/01_Atoms/input/input.hbs
View File

@@ -1,6 +1,6 @@
<div class="LP-Input LP-Input{{modifier}}">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
{{#if disabled}}
disabled="disabled"
{{/if}}

69
components/01_Atoms/message/_message.scss Normal file
View File

@@ -0,0 +1,69 @@
.LP-Message{
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
background-color: $-almost-white;
font-family: $-primary-sans-serif-font;
border-radius: 3px;
font-weight: bold;
box-shadow: 0 0 2px $-grey;
overflow: hidden;
&--error{
.LP-Message__Icon{
background-color: invert(#fd6861);
background-image: url('icons/error.png');
}
}
&--warning{
.LP-Message__Icon{
background-color:invert(#ffb818);
background-image: url('icons/error.png');
}
}
&--info{
.LP-Message__Icon{
background-color: invert(lightblue);
background-image: url('icons/information.svg');
}
}
&--success{
.LP-Message__Icon{
background-color: invert(#96c800);
background-image: url('icons/success.svg');
}
}
&--debug{
.LP-Message__Icon{
background-color: invert(#fb95d0);
background-image: url('icons/debug.png');
}
}
.LP-Message__Icon{
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
height: 100%;
min-height: 50px;
width: 50px;
filter: invert(1);
flex-shrink: 0;
flex-grow: 0;
}
.LP-Message__Text{
padding: 0 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px;
}
}

39
components/01_Atoms/message/message.config.json Normal file
View File

@@ -0,0 +1,39 @@
{
"title": "Message",
"context": {
"messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"modifier": "--info"
},
"variants": [
{
"name": "Information",
"context": {
"modifier": "--info"
}
},
{
"name": "Warning",
"context": {
"modifier": "--warning"
}
},
{
"name": "Error",
"context": {
"modifier": "--error"
}
},
{
"name": "Success",
"context": {
"modifier": "--success"
}
},
{
"name": "Debug",
"context": {
"modifier": "--debug"
}
}
]
}

10
components/01_Atoms/message/message.hbs Normal file
View File

@@ -0,0 +1,10 @@
<div class="LP-Message {{#if modifier}}LP-Message{{modifier}}{{/if}}">
<div>
<div class="LP-Message__Icon">
</div>
</div>
<div class="LP-Message__Text">
{{messageText}}
</div>
</div>

92
components/01_Atoms/pagination/_pagination.scss Normal file
View File

@@ -0,0 +1,92 @@
.LP-Pagination{
font-family: $-primary-sans-serif-font;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: center;
.LP-Pagination__List{
list-style-type: none;
display: flex;
flex-direction: row;
padding-left: 0;
padding-right: 0;
}
.LP-Pagination__Item{
margin: 0 4px;
&--disabled{
color: rgb(182, 182, 182);
.LP-Link{
color: rgb(182, 182, 182);
cursor: default;
&:hover{
background-color: unset;
color: unset;
}
}
}
&--current{
.LP-Link{
background-color: $-beige;
&:hover{
background-color: $-beige;
color: $-grey;
}
}
}
}
.LP-Link{
padding: 15px 20px;
vertical-align: sub;
border-radius: 2px;
&:active, &:hover{
background-color: $-beige;
color: $-grey;
}
}
.LP-Icon{
font-size: larger;
}
}
@media(max-width: $-viewport-normal){
.LP-Pagination{
.LP-Link{
padding: 10px 15px;
}
.LP-Pagination__Item--other{
.LP-Text{
display: none;
}
}
}
}
@media(max-width: $-viewport-small){
.LP-Pagination{
.LP-Pagination__Item{
margin: 0 1px;
.LP-Link{
padding: 13px 16px;
}
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Pagination{
.LP-Pagination__Item{
.LP-Link{
padding: 8px 11px;
}
}
}
}

3
components/01_Atoms/pagination/pagination.config.json Normal file
View File

@@ -0,0 +1,3 @@
{
"title": "Pagnination"
}

54
components/01_Atoms/pagination/pagination.hbs Normal file
View File

@@ -0,0 +1,54 @@
<div class="LP-Pagination">
<ul class="LP-Pagination__List">
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
<a href="#" class="LP-Link">
<span class="LP-Icon">⟪</span>
<span class="LP-Text">First</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--disabled LP-Pagination__Item--previous">
<a href="#" class="LP-Link">
<span class="LP-Icon">⟨</span>
<span class="LP-Text">Previous</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link">
<span class="LP-Text">1</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link">
<span class="LP-Text">2</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link">
<span class="LP-Text">3</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--current">
<a href="#" class="LP-Link">
<span class="LP-Text">4</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
<a href="#" class="LP-Link">
<span class="LP-Text">5</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
<a href="#" class="LP-Link">
<span class="LP-Text">Next</span>
<span class="LP-Icon">⟩</span>
</a>
</li>
<li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
<a href="#" class="LP-Link">
<span class="LP-Text">Last</span>
<span class="LP-Icon">⟫</span>
</a>
</li>
</ul>
</div>

2
components/01_Atoms/paragraph/_paragraph.scss
View File

@@ -2,4 +2,6 @@
color: black;
font-family: $-primary-serif-font;
font-size: 1.2rem;
padding: 0;
margin: 0;
}

2
components/01_Atoms/paragraph/paragraph.hbs
View File

@@ -1 +1 @@
<p class="LP-Paragraph LP-Paragraph{{modifier}}">{{text}}</p>
<p class="LP-Paragraph{{#if modifier}} LP-Paragraph{{modifier}}{{/if}}">{{text}}</p>

1
components/02_Molecules/_molecules.scss
View File

@@ -2,3 +2,4 @@
@import 'placeTeaser/placeTeaser';
@import 'tagList/tagList';
@import 'navigation/navigation';
@import 'messageList/messageList';

15
components/02_Molecules/messageList/_messageList.scss Normal file
View File

@@ -0,0 +1,15 @@
.LP-MessageList{
padding: 25px;
.LP-MessageList__List{
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.LP-MessageList__Item{
margin: 5px 0;
}
}

6
components/02_Molecules/messageList/messageList.config.json Normal file
View File

@@ -0,0 +1,6 @@
{
"title": "Message List",
"context": {
"text": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}
}

9
components/02_Molecules/messageList/messageList.hbs Normal file
View File

@@ -0,0 +1,9 @@
<div class="LP-MessageList">
<ul class="LP-MessageList__List">
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--info'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--warning'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--error'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--success'}}</li>
<li class="LP-MessageList__Item">{{> @message messageText=text modifier='--debug'}}</li>
</ul>
</div>

1
components/02_Molecules/navigation/_navigation.scss
View File

@@ -34,7 +34,6 @@
border-left: none;
min-width: 60px;
background-color: $-almost-white;
height: 100%;
padding-top: 25px;
.LP-Menu__List{

1
components/03_Organisms/_organisms.scss
View File

@@ -4,3 +4,4 @@
@import 'linkList/linkList';
@import 'footer/footer';
@import 'form/form';
@import 'imageGrid/imageGrid';

80
components/03_Organisms/form/_form.scss
View File

@@ -1,6 +1,22 @@
.LP-Form{
flex-direction: column;
align-items: center;
&--inline{
padding: 0 10px;
.LP-Form__Fieldset{
.LP-Form__Composition{
gap: 10px;
}
}
}
.LP-Form__Fieldset{
border: none;
padding: 0;
margin: 0;
max-width: 1200px;
min-width: $-viewport-medium;
.LP-Form__Legend{
margin: 0;
@@ -9,34 +25,73 @@
font-size: 21px;
}
}
.LP-Form__Composition{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 30px;
&--buttons{
gap: 10px;
}
.LP-Form__Field{
flex: 3 1 100px;
padding: 6px 15px;
flex: 3 2 100px;
padding: 6px 0;
&--wider{
flex: 5 1;
flex: 5 2;
}
&--wide{
flex: 4 1;
flex: 4 2;
}
&--narrow{
flex: 2 0;
flex: 2 1;
}
&--narrower{
flex: 1 0;
flex: 1 2;
}
&--static{
flex: 0 0;
}
}
&--buttons{
justify-content: flex-end;
}
.LP-Form__Button{
flex-grow: 0;
padding-left: 0;
min-width: 130px;
.LP-Link{
display:contents;
}
}
.LP-Form__InfoText{
.LP-Paragraph{
font-family: $-primary-sans-serif-font;
color: $-grey;
}
}
}
}
@media(max-width: $-viewport-medium){
.LP-Form{
.LP-Form__Fieldset{
min-width: unset;
}
}
}
@media(max-width: $-viewport-small){
.LP-Form{
@@ -51,7 +106,7 @@
}
@media(max-width: $-viewport-extra-small){
.LP-Form{
.LP-Form :not(.LP-Form--inline){
.LP-Form__Fieldset{
.LP-Form__Composition{
display: flex;
@@ -59,10 +114,21 @@
justify-content: space-between;
.LP-Form__Field{
&:not(.LP-Form__Button){
flex: 3 1 100px;
padding: 12px 15px;
}
}
.LP-Form__Button{
padding: 0 15px;
}
&--buttons{
justify-content: flex-end;
}
}
}
}
}

15
components/03_Organisms/form/form.hbs
View File

@@ -37,6 +37,12 @@
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__InfoText">
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
<label for="input123" class="LP-Input__Label">Postal Code</label>
@@ -48,5 +54,14 @@
</div>
</div>
<div class="LP-Form__Composition LP-Form__Composition--buttons">
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit"/>
</div>
<div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
</div>
</div>
</fieldset>
</form>

13
components/03_Organisms/header/_header.scss
View File

@@ -6,6 +6,9 @@ $-logo-height: 45px;
justify-content: space-between;
height: 60px;
box-shadow: 0 0 2px $-light-brown;
grid-area: header;
background-color: white;
padding-left: 25px;
&__Navigation{
flex-grow: 2;
@@ -13,7 +16,6 @@ $-logo-height: 45px;
&__Logo {
height: $-logo-height;
margin: 25px;
object-fit:cover;
max-height: 100%;
width: 225px;
@@ -58,3 +60,12 @@ $-logo-height: 45px;
width: 100%;
}
}
@media(max-width: $-viewport-toggle-sidebar){
.LP-Header{
padding-left: 60px;
width: calc(100% - 60px);
position: fixed;
z-index: 10;
}
}

42
components/03_Organisms/imageGrid/_imageGrid.scss Normal file
View File

@@ -0,0 +1,42 @@
.LP-ImageGrid{
.LP-ImageGrid__List{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
align-content: space-around;
justify-content: center;
margin: 0px;
padding: 0px;
}
.LP-ImageGrid__Item{
margin-top:10px;
}
.LP-Link{
overflow: hidden;
}
.LP-Image {
box-shadow: 0 0 5px $-grey;
height: 200px;
width: 290px;
object-fit: cover;
}
}
@media(max-width: $-viewport-small){
.LP-ImageGrid{
.LP-ImageGrid__List{
grid-template-columns: 1fr;
.LP-Image{
box-shadow: 0 0 5px $-grey;
height: auto;
width: 100%;
object-fit: cover;
}
}
}
}

0
components/04_Templates/placeOverview/placeOverview.config.json → components/03_Organisms/imageGrid/imageGrid.config.json
View File

10
components/03_Organisms/imageGrid/imageGrid.hbs Normal file
View File

@@ -0,0 +1,10 @@
<div class="LP-ImageGrid">
<ul class="LP-ImageGrid__List">
{{#each images}}
<li class="LP-ImageGrid__Item">
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a>
</li>
{{/each}}
</ul>
</div>

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

@@ -7,8 +7,39 @@
.LP-LinkList__Item{
border-left: 1px solid $-light-brown;
width: 100%;
width: calc(100% - 1px);
margin-top: 12px;
position: relative;
&--add{
.LP-LinkList__AddTrigger{
display: none;
&:checked{
& ~ .LP-LinkList__AddPlaceHolder{
visibility: hidden;
}
& ~ .LP-LinkList__Add{
display: block;
}
}
}
.LP-LinkList__Add{
position: absolute;
top: 3px;
display: none;
width: 100%;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
}
}
.LP-Link{
$-link-padding: 1em;

32
components/03_Organisms/linkList/linkList.hbs
View File

@@ -1,10 +1,15 @@
<ul class="LP-LinkList__List">
<div class="LP-LinkList">
<ul class="LP-LinkList__List">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
<li class="LP-LinkList__Item LP-LinkList__Item--add">
<input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
<label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
<span class="LP-Link LP-Link--iconized">
<div class="LP-Link__IconWrapper">
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
@@ -15,5 +20,24 @@
</g>
</svg>
</div>
<span class="LP-Text">Link hinzufügen</span></a></li>
</ul>
<span class="LP-Text">Link hinzufügen</span>
</span>
</label>
<span class="LP-LinkList__Add">
<form class="LP-Form LP-Form--inline">
<fieldset class="LP-Form__Fieldset">
<div class="LP-Form__Composition LP-Form__Composition">
<div class="LP-Form__Field LP-Form__Field--static LP-Input">
<button class="LP-Button">Add</button>
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
<input class="LP-Input__Field" type="url"/>
</div>
</div>
</div>
</fieldset>
</form>
</span>
</li>
</ul>
</div>

6
components/03_Organisms/placeList/_placeList.scss
View File

@@ -21,8 +21,12 @@
.LP-PlaceList__Item{
max-width: 900px;
min-width: 450px;
//min-width: 450px;
margin: 18px 0;
}
}
.LP-Pagination{
margin-top: 50px;
}
}

1
components/03_Organisms/placeList/placeList.hbs
View File

@@ -9,4 +9,5 @@
</li>
{{/each}}
</ul>
{{> @pagination}}
</div>

2
components/04_Templates/_templates.scss
View File

@@ -1,2 +1,2 @@
@import 'home/home';
@import 'placeOverview/placeOverview';
@import 'placeDetail/placeDetail';

35
components/04_Templates/placeDetail/_placeDetail.scss Normal file
View File

@@ -0,0 +1,35 @@
.LP-PlaceDetail{
.LP-PlaceDetail__Image{
width: 700px;
max-height: 500px;
box-shadow: 0 0 10px $-grey;
object-fit: cover;
object-position: 0 0;
margin: 0;
padding: 0;
float: right;
margin-left: 35px;
margin-bottom: 35px;
margin-right: 35px;
overflow: hidden;
}
}
@media (max-width: $-viewport-normal){
.LP-PlaceDetail{
.LP-PlaceDetail__Header{
.LP-PlaceDetail__Image{
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
margin-bottom: 25px;
}
}
}
}

1
components/05_Pages/placeDetail/placeDetail.config.json → components/04_Templates/placeDetail/placeDetail.config.json
View File

@@ -1,5 +1,4 @@
{
"title": "PlaceDetail",
"context": {
"tags": [
"Kamera",

26
components/04_Templates/placeDetail/placeDetail.hbs Normal file
View File

@@ -0,0 +1,26 @@
<article class="LP-PlaceDetail">
<header class="LP-PlaceDetail__Header">
{{> @headline--main headline='Kokerei Wiescherhöfen'}}
<figure class="LP-PlaceDetail__Image">
{{> @image source='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png'}}
</figure>
</header>
<div class="LP-PlaceDetail__Description">
{{> @paragraph text='Lorem ipsum dolor sit amet, '}}
</div>
<section class="LP-Section">
{{> @headline headline='Sicherheitsmaßnahmen'}}
{{> @taglist}}
</section>
<section class="LP-Section">
{{> @headline headline='Links'}}
{{> @linklist}}
</section>
<section class="LP-Section">
{{> @headline headline='Bilder'}}
{{> @imagegrid images=images}}
</section>
</article>

71
components/04_Templates/placeOverview/_placeOverview.scss
View File

@@ -1,71 +0,0 @@
.LP-PlaceOverview{
.LP-PlaceOverview__Info{
.LP-PlaceOveriew__Image{
width: 700px;
max-height: 500px;
box-shadow: 0 0 10px $-grey;
object-fit: cover;
object-position: 0 0;
float: right;
margin-left: 35px;
margin-bottom: 35px;
overflow: hidden;
}
.LP-PlaceOverView__Description{
padding: 0px;
position: relative;
top: -15px;
.LP-Headline{
position: relative;
top: 15px;
margin-bottom: 30px;
}
}
}
.LP-PlaceOverView__ImageList{
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0px;
padding: 0px;
.LP-PlaceOverView__ImageItem{
margin-top:10px;
.LP-Link{
overflow: hidden;
}
.LP-Image {
box-shadow: 0 0 5px $-grey;
height: 200px;
width: 290px;
object-fit: cover;
}
}
}
}
@media (max-width: $-viewport-normal){
.LP-PlaceOverview{
.LP-PlaceOverview__Info{
.LP-TextSection{
margin-top: 30px;
}
.LP-PlaceOveriew__Image{
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}
}
}

49
components/04_Templates/placeOverview/placeOverview.hbs
View File

@@ -1,49 +0,0 @@
<article class="LP-PlaceOverview">
<div class="LP-PlaceOverview__Info">
<header class="LP-Place">
{{> @headline--main headline='Kokerei Wiescherhöfen'}}
</header>
<figure class="LP-PlaceOveriew__Image">
{{> @image source='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png'}}
</figure>
<div class="LP-PlaceOverView__Description">
<div class="LP-TextSection">
{{> @paragraph text='Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb. My moneys in that office, right? If she start giving me some bullshit about it aint there, and we got to go someplace else and get it, Im gonna shoot you in the head then and there. Then Im gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when Im talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb.Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb. My moneys in that office, right? If she start giving me some bullshit about it aint there, and we got to go someplace else and get it, Im gonna shoot you in the head then and there. Then Im gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when Im talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb.'}}
</div>
</div>
</div>
<article>
{{> @headline headline='Sicherheitsmaßnahmen'}}
<div class="LP-Content__Wrapper">
<div class="LP-Content">
{{> @taglist}}
</div>
</div>
</article>
<article>
{{> @headline headline='Links'}}
<div class="LP-Content__Wrapper">
<div class="LP-Content">
{{> @linklist}}
</div>
</div>
</article>
<article class="">
{{> @headline headline='Bilder'}}
<div class="LP-Content__Wrapper">
<div class=" LP-Content">
<ul class="LP-PlaceOverView__ImageList">
{{#each images}}
<li class="LP-PlaceOverView__ImageItem">
<a href="#" class="LP-Link"><img class="LP-Image" src="{{this}}"></a>
</li>
{{/each}}
</ul>
</div>
</div>
</article>
</article>

2
components/05_Pages/_pages.scss
View File

@@ -1 +1 @@
@import 'placeDetail/placeDetail';
@import 'place/place';

0
components/05_Pages/placeDetail/_placeDetail.scss → components/05_Pages/place/_place.scss
View File

22
components/05_Pages/place/place.config.json Normal file
View File

@@ -0,0 +1,22 @@
{
"title": "PlaceDetail",
"context": {
"tags": [
"Kamera",
"Wachhund",
"Zaun",
"Security"
],
"images": [
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
"/images/photo_2020-05-02_18-11-21.jpg",
"/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
],
"additionalItems": [
"Edit Place",
"Delete Place"
]
}
}

11
components/05_Pages/place/place.hbs Normal file
View File

@@ -0,0 +1,11 @@
<div class="LP-Wrapper__Site">
{{> @header}}
<input id="toggle_sidebar" class="LP-Menu__Trigger" type="checkbox"/>
<label id="toggle_sidebar_label" for="toggle_sidebar" class="LP-Menu__TriggerLabel"></label>
<aside class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}}
</aside>
<main class="LP-Main__Content">
{{> @placedetail}}
</main>
</div>

9
components/05_Pages/placeDetail/placeDetail.hbs
View File

@@ -1,9 +0,0 @@
{{> @header}}
<div class="LP-Main">
<aside class="LP-Main__Sidebar">
{{> @navigation modifier='--sidebar'}}
</aside>
<main class="LP-Main__Content">
{{> @placeoverview}}
</main>
</div>

113
components/main.scss
View File

@@ -26,11 +26,13 @@ $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
$-primary-serif-font: Crimson, Times, serif;
$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
$-viewport-small: 650px;
$-viewport-extra-small: 450px;
$-viewport-small: 650px;
$-viewport-medium: 750px;
$-viewport-normal: 1000px;
$-viewport-toggle-sidebar: $-viewport-small;
$-sidebar-width: 250px;
html{
@@ -42,25 +44,114 @@ html{
body{
height: 100%;
margin: 0;
padding: 0;
}
.LP-Main{
display: table;
flex-direction: row-reverse;
height: calc(100% - 61px);
.LP-Wrapper__Site{
display: grid;
grid-template-columns: $-sidebar-width 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "header header" "sidebar content";
margin: 0;
padding: 0;
min-height: 100vh;
}
.LP-Main__Content{
display: table-cell;
width: calc(100% -300px);
.LP-Main__Content{
min-height: 1px;
padding: 25px;
grid-area: content;
}
.LP-Main__Sidebar{
grid-area: sidebar;
background-color: #f9f9f9;
}
.LP-Section{
clear: both;
padding: 25px 0px;
padding-left: 25px;
.LP-Headline{
margin-left: -25px;
}
}
.LP-Menu__Trigger{
display: none;
}
@media(max-width: $-viewport-normal){
.LP-Wrapper__Site{
grid-template-columns: (0.75 * $-sidebar-width) 1fr;
}
}
@media(max-width: $-viewport-small){
.LP-Section{
padding-left: 0;
padding-right: 0;
.LP-Headline{
margin: 0;
}
}
}
@media(max-width: $-viewport-extra-small){
.LP-Main__Sidebar{
max-width: 100vw;
}
}
@media(max-width: $-viewport-toggle-sidebar){
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
.LP-Main__Sidebar{
display: table-cell;
grid-area:unset;
width: $-sidebar-width;
flex-grow: 0;
height: 100%;
z-index: 15;
position: fixed;
left: -1 * $-sidebar-width - 1;
height: 100vh;
top: 60px;
border-right: 1px solid $-light-brown;
transition: left 0.3s;
&--hidden{
visibility: hidden;
}
}
#toggle_sidebar:checked ~ .LP-Main__Sidebar{
left: 0 ;
}
#toggle_sidebar ~ .LP-Main__Sidebar{
left: -1 * $-sidebar-width - 1;
}
.LP-Menu__TriggerLabel{
z-index: 20;
height: 60px;
width: 60px;
background-image: url('icons/hamburger_menu.svg');
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
position: fixed;
}
.LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{
background-color: invert($-grey);
filter: invert(1);
}
.LP-Main__Content{
margin-top: 60px;
}
}

BIN
public/icons/debug.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/icons/error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
public/icons/hamburger_menu.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
public/icons/information.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

1
public/icons/message.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 914 B

3
public/icons/success.svg Normal file
View File

@@ -0,0 +1,3 @@
<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1 s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27 c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707 S16.997,8.208,16.801,8.403z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 717 B

405
public/main.css
View File

@@ -13,22 +13,85 @@ html {
body {
height: 100%;
margin: 0; }
margin: 0;
padding: 0; }
.LP-Main {
display: table;
flex-direction: row-reverse;
height: calc(100% - 61px); }
.LP-Main .LP-Main__Content {
display: table-cell;
width: calc(100% -300px);
.LP-Wrapper__Site {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "header header" "sidebar content";
margin: 0;
padding: 0;
min-height: 100vh; }
.LP-Main__Content {
min-height: 1px;
padding: 25px; }
.LP-Main .LP-Main__Sidebar {
display: table-cell;
padding: 25px;
grid-area: content; }
.LP-Main__Sidebar {
grid-area: sidebar;
background-color: #f9f9f9; }
.LP-Section {
clear: both;
padding: 25px 0px;
padding-left: 25px; }
.LP-Section .LP-Headline {
margin-left: -25px; }
.LP-Menu__Trigger {
display: none; }
@media (max-width: 1000px) {
.LP-Wrapper__Site {
grid-template-columns: 187.5px 1fr; } }
@media (max-width: 650px) {
.LP-Section {
padding-left: 0;
padding-right: 0; }
.LP-Section .LP-Headline {
margin: 0; } }
@media (max-width: 450px) {
.LP-Main__Sidebar {
max-width: 100vw; } }
@media (max-width: 650px) {
.LP-Wrapper__Site {
grid-template-columns: 0 1fr; }
.LP-Main__Sidebar {
grid-area: unset;
width: 250px;
flex-grow: 0;
height: 100%; }
z-index: 15;
position: fixed;
left: -251px;
height: 100vh;
top: 60px;
border-right: 1px solid #C09F80;
transition: left 0.3s; }
.LP-Main__Sidebar--hidden {
visibility: hidden; }
#toggle_sidebar:checked ~ .LP-Main__Sidebar {
left: 0; }
#toggle_sidebar ~ .LP-Main__Sidebar {
left: -251px; }
.LP-Menu__TriggerLabel {
z-index: 20;
height: 60px;
width: 60px;
background-image: url("icons/hamburger_menu.svg");
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
position: fixed; }
.LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel {
background-color: darkgray;
filter: invert(1); }
.LP-Main__Content {
margin-top: 60px; } }
.LP-Link {
color: #565656;
@@ -51,7 +114,7 @@ body {
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px; }
margin-bottom: 25px; }
.LP-Headline--main {
position: relative;
top: 2rem;
@@ -62,7 +125,9 @@ body {
.LP-Paragraph {
color: black;
font-family: Crimson, Times, serif;
font-size: 1.2rem; }
font-size: 1.2rem;
padding: 0;
margin: 0; }
.LP-Icon {
height: 20px;
@@ -83,11 +148,16 @@ body {
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold; }
font-weight: bold;
cursor: pointer; }
.LP-Button:active {
background-color: #76323F;
color: #f9f9f9; }
.LP-Button--cancel {
background-color: #565656;
color: #f9f9f9; }
.LP-Button--cancel:active {
color: #565656;
background-color: #f9f9f9; }
.LP-Form .LP-Form__Checkbox {
@@ -108,7 +178,7 @@ body {
.LP-Input .LP-Input__Field {
border: none;
border-bottom: 1px solid #565656;
padding: 8px;
padding: 8px 0;
margin-bottom: 30px; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
margin-bottom: 29px;
@@ -116,6 +186,17 @@ body {
background-color: #f9f9f9;
border-radius: 3px 3px 0 0;
box-shadow: none; }
.LP-Input .LP-Input__Field[type=submit] {
background-color: #C09F80;
color: #565656;
border: none;
padding: 8px 14px;
border-radius: 2px;
font-weight: bold;
cursor: pointer; }
.LP-Input .LP-Input__Field[type=submit]:active {
background-color: #76323F;
color: #f9f9f9; }
.LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif;
font-size: 16px; }
@@ -150,7 +231,9 @@ body {
object-fit: cover;
width: 100%;
height: auto;
vertical-align: top; }
vertical-align: top;
margin: 0;
padding: 0; }
.LP-Logo {
max-width: 100%;
@@ -170,6 +253,103 @@ body {
font-size: 1em;
display: inline; }
.LP-Message {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
background-color: #f9f9f9;
font-family: Montserrat, Helvetica, sans-serif;
border-radius: 3px;
font-weight: bold;
box-shadow: 0 0 2px #565656;
overflow: hidden; }
.LP-Message--error .LP-Message__Icon {
background-color: #02979e;
background-image: url("icons/error.png"); }
.LP-Message--warning .LP-Message__Icon {
background-color: #0047e7;
background-image: url("icons/error.png"); }
.LP-Message--info .LP-Message__Icon {
background-color: #522719;
background-image: url("icons/information.svg"); }
.LP-Message--success .LP-Message__Icon {
background-color: #6937ff;
background-image: url("icons/success.svg"); }
.LP-Message--debug .LP-Message__Icon {
background-color: #046a2f;
background-image: url("icons/debug.png"); }
.LP-Message .LP-Message__Icon {
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
height: 100%;
min-height: 50px;
width: 50px;
filter: invert(1);
flex-shrink: 0;
flex-grow: 0; }
.LP-Message .LP-Message__Text {
padding: 0 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px; }
.LP-Pagination {
font-family: Montserrat, Helvetica, sans-serif;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: center; }
.LP-Pagination .LP-Pagination__List {
list-style-type: none;
display: flex;
flex-direction: row;
padding-left: 0;
padding-right: 0; }
.LP-Pagination .LP-Pagination__Item {
margin: 0 4px; }
.LP-Pagination .LP-Pagination__Item--disabled {
color: #b6b6b6; }
.LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
color: #b6b6b6;
cursor: default; }
.LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
background-color: unset;
color: unset; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link {
background-color: #D7CEC7; }
.LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
background-color: #D7CEC7;
color: #565656; }
.LP-Pagination .LP-Link {
padding: 15px 20px;
vertical-align: sub;
border-radius: 2px; }
.LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
background-color: #D7CEC7;
color: #565656; }
.LP-Pagination .LP-Icon {
font-size: larger; }
@media (max-width: 1000px) {
.LP-Pagination .LP-Link {
padding: 10px 15px; }
.LP-Pagination .LP-Pagination__Item--other .LP-Text {
display: none; } }
@media (max-width: 650px) {
.LP-Pagination .LP-Pagination__Item {
margin: 0 1px; }
.LP-Pagination .LP-Pagination__Item .LP-Link {
padding: 13px 16px; } }
@media (max-width: 450px) {
.LP-Pagination .LP-Pagination__Item .LP-Link {
padding: 8px 11px; } }
.LP-Content {
padding: 35px; }
@@ -282,7 +462,6 @@ body {
border-left: none;
min-width: 60px;
background-color: #f9f9f9;
height: 100%;
padding-top: 25px; }
.LP-Menu--sidebar .LP-Menu__List {
flex-direction: column; }
@@ -314,17 +493,31 @@ body {
.LP-Menu .LP-Menu__List {
justify-content: space-between; } }
.LP-MessageList {
padding: 25px; }
.LP-MessageList .LP-MessageList__List {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-MessageList .LP-MessageList__Item {
margin: 5px 0; }
.LP-Header {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
box-shadow: 0 0 2px #C09F80; }
box-shadow: 0 0 2px #C09F80;
grid-area: header;
background-color: white;
padding-left: 25px; }
.LP-Header__Navigation {
flex-grow: 2; }
.LP-Header__Logo {
height: 45px;
margin: 25px;
object-fit: cover;
max-height: 100%;
width: 225px;
@@ -355,6 +548,13 @@ body {
.LP-Header__Navigation {
width: 100%; } }
@media (max-width: 650px) {
.LP-Header {
padding-left: 60px;
width: calc(100% - 60px);
position: fixed;
z-index: 10; } }
.LP-PlaceGrid .LP-PlaceGrid__Grid {
margin: 0;
padding: 0;
@@ -378,9 +578,11 @@ body {
border-left: 2px #565656 solid; }
.LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
max-width: 900px;
min-width: 450px;
margin: 18px 0; }
.LP-PlaceList .LP-Pagination {
margin-top: 50px; }
.LP-LinkList__List {
list-style-type: none;
display: grid;
@@ -389,8 +591,25 @@ body {
padding: 0; }
.LP-LinkList__List .LP-LinkList__Item {
border-left: 1px solid #C09F80;
width: 100%;
margin-top: 12px; }
width: calc(100% - 1px);
margin-top: 12px;
position: relative; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
display: none; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
visibility: hidden; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
display: block; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
position: absolute;
top: 3px;
display: none;
width: 100%; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
min-width: unset; }
.LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
display: block;
min-width: 0px; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em;
width: calc(100% - 1em);
@@ -441,28 +660,59 @@ body {
.LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
background-color: inherit; }
.LP-Form .LP-Form__Fieldset {
border: none; }
.LP-Form {
flex-direction: column;
align-items: center; }
.LP-Form--inline {
padding: 0 10px; }
.LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
gap: 10px; }
.LP-Form .LP-Form__Fieldset {
border: none;
padding: 0;
margin: 0;
max-width: 1200px;
min-width: 750px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
margin: 0;
padding: 0;
font-family: Montserrat, Helvetica, sans-serif;
font-size: 21px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
.LP-Form .LP-Form__Composition {
display: flex;
flex-direction: row;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px;
padding: 6px 15px; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 1; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 0; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 0; }
justify-content: space-between;
gap: 30px; }
.LP-Form .LP-Form__Composition--buttons {
gap: 10px; }
.LP-Form .LP-Form__Composition .LP-Form__Field {
flex: 3 2 100px;
padding: 6px 0; }
.LP-Form .LP-Form__Composition .LP-Form__Field--wider {
flex: 5 2; }
.LP-Form .LP-Form__Composition .LP-Form__Field--wide {
flex: 4 2; }
.LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
flex: 2 1; }
.LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
flex: 1 2; }
.LP-Form .LP-Form__Composition .LP-Form__Field--static {
flex: 0 0; }
.LP-Form .LP-Form__Composition--buttons {
justify-content: flex-end; }
.LP-Form .LP-Form__Composition .LP-Form__Button {
flex-grow: 0;
padding-left: 0;
min-width: 130px; }
.LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
display: contents; }
.LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
font-family: Montserrat, Helvetica, sans-serif;
color: #565656; }
@media (max-width: 750px) {
.LP-Form .LP-Form__Fieldset {
min-width: unset; } }
@media (max-width: 650px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
@@ -471,13 +721,47 @@ body {
justify-content: space-between; } }
@media (max-width: 450px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
flex: 3 1 100px;
padding: 12px 15px; } }
padding: 12px 15px; }
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
padding: 0 15px; }
.LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
justify-content: flex-end; } }
.LP-ImageGrid .LP-ImageGrid__List {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
align-content: space-around;
justify-content: center;
margin: 0px;
padding: 0px; }
.LP-ImageGrid .LP-ImageGrid__Item {
margin-top: 10px; }
.LP-ImageGrid .LP-Link {
overflow: hidden; }
.LP-ImageGrid .LP-Image {
box-shadow: 0 0 5px #565656;
height: 200px;
width: 290px;
object-fit: cover; }
@media (max-width: 650px) {
.LP-ImageGrid .LP-ImageGrid__List {
grid-template-columns: 1fr; }
.LP-ImageGrid .LP-ImageGrid__List .LP-Image {
box-shadow: 0 0 5px #565656;
height: auto;
width: 100%;
object-fit: cover; } }
.LP-MainContainer {
margin: 0 auto;
@@ -490,48 +774,25 @@ body {
.LP-MainContainer {
width: 100%; } }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
.LP-PlaceDetail .LP-PlaceDetail__Image {
width: 700px;
max-height: 500px;
box-shadow: 0 0 10px #565656;
object-fit: cover;
object-position: 0 0;
margin: 0;
padding: 0;
float: right;
margin-left: 35px;
margin-bottom: 35px;
margin-right: 35px;
overflow: hidden; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
padding: 0px;
position: relative;
top: -15px; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline {
position: relative;
top: 15px;
margin-bottom: 30px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0px;
padding: 0px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem {
margin-top: 10px; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Link {
overflow: hidden; }
.LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Image {
box-shadow: 0 0 5px #565656;
height: 200px;
width: 290px;
object-fit: cover; }
@media (max-width: 1000px) {
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-TextSection {
margin-top: 30px; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
.LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0; } }
padding: 0;
margin-bottom: 25px; } }