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:fb20b555c4db135bfe034efb18a91a2cda72b4d2
Branches Tags
Commander1024:master
Commander1024:linklist-add

11 Commits
02b1c39e9e ... fb20b555c4

Author SHA1 Message Date
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
23 changed files with 245 additions and 180 deletions
Show Stats Expand all files Collapse all files

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

@ -5,7 +5,7 @@
padding-top: 0px; padding-top: 0px;
margin-top: 0px; margin-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
margin-bottom: 0px; margin-bottom: 25px;
&--main{ &--main{
position: relative; 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%; width: 100%;
height: auto; height: auto;
vertical-align: top; vertical-align: top;
margin: 0;
padding: 0;
} }

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

@ -2,4 +2,6 @@
color: black; color: black;
font-family: $-primary-serif-font; font-family: $-primary-serif-font;
font-size: 1.2rem; 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/03_Organisms/_organisms.scss
View File

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

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>

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

@ -7,7 +7,7 @@
.LP-LinkList__Item{ .LP-LinkList__Item{
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: 100%; width: calc(100% - 1px);
margin-top: 12px; margin-top: 12px;
.LP-Link{ .LP-Link{

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

@ -1,19 +1,22 @@
<ul class="LP-LinkList__List">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> <div class="LP-LinkList">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li> <ul class="LP-LinkList__List">
<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">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">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 LP-Link--iconized"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
<div class="LP-Link__IconWrapper"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" <div class="LP-Link__IconWrapper">
xml:space="preserve"> <svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
<g> xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216 xml:space="preserve">
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> <g>
</g> <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
</svg> v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</div> </g>
<span class="LP-Text">Link hinzufügen</span></a></li> </svg>
</ul> </div>
<span class="LP-Text">Link hinzufügen</span></a></li>
</ul>
</div>

2
components/04_Templates/_templates.scss
View File

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

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

@ -0,0 +1,33 @@
.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;
}
}
}
}

21
components/04_Templates/placeDetail/placeDetail.config.json Normal file
View File

@ -0,0 +1,21 @@
{
"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"
]
}
}

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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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.'}}
</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

0
components/05_Pages/placeDetail/placeDetail.config.json → components/05_Pages/place/place.config.json
View File

2
components/05_Pages/placeDetail/placeDetail.hbs → components/05_Pages/place/place.hbs
View File

@ -4,6 +4,6 @@
{{> @navigation modifier='--sidebar'}} {{> @navigation modifier='--sidebar'}}
</aside> </aside>
<main class="LP-Main__Content"> <main class="LP-Main__Content">
{{> @placeoverview}} {{> @placedetail}}
</main> </main>
</div> </div>

21
components/main.scss
View File

@ -64,6 +64,27 @@ body{
} }
} }
.LP-Section{
clear: both;
padding: 25px 0px;
padding-left: 25px;
.LP-Headline{
margin-left: -25px;
}
}
@media(max-width: $-viewport-small){
.LP-Section{
padding-left: 0;
padding-right: 0;
.LP-Headline{
margin: 0;
}
}
}
@import '01_Atoms/atoms'; @import '01_Atoms/atoms';
@import '02_Molecules/molecules'; @import '02_Molecules/molecules';
@import '03_Organisms/organisms'; @import '03_Organisms/organisms';

90
public/main.css
View File

@ -30,6 +30,20 @@ body {
flex-grow: 0; flex-grow: 0;
height: 100%; } height: 100%; }
.LP-Section {
clear: both;
padding: 25px 0px;
padding-left: 25px; }
.LP-Section .LP-Headline {
margin-left: -25px; }
@media (max-width: 650px) {
.LP-Section {
padding-left: 0;
padding-right: 0; }
.LP-Section .LP-Headline {
margin: 0; } }
.LP-Link { .LP-Link {
color: #565656; color: #565656;
text-decoration: none; text-decoration: none;
@ -51,7 +65,7 @@ body {
padding-top: 0px; padding-top: 0px;
margin-top: 0px; margin-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
margin-bottom: 0px; } margin-bottom: 25px; }
.LP-Headline--main { .LP-Headline--main {
position: relative; position: relative;
top: 2rem; top: 2rem;
@ -62,7 +76,9 @@ body {
.LP-Paragraph { .LP-Paragraph {
color: black; color: black;
font-family: Crimson, Times, serif; font-family: Crimson, Times, serif;
font-size: 1.2rem; } font-size: 1.2rem;
padding: 0;
margin: 0; }
.LP-Icon { .LP-Icon {
height: 20px; height: 20px;
@ -150,7 +166,9 @@ body {
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: auto; height: auto;
vertical-align: top; } vertical-align: top;
margin: 0;
padding: 0; }
.LP-Logo { .LP-Logo {
max-width: 100%; max-width: 100%;
@ -389,7 +407,7 @@ body {
padding: 0; } padding: 0; }
.LP-LinkList__List .LP-LinkList__Item { .LP-LinkList__List .LP-LinkList__Item {
border-left: 1px solid #C09F80; border-left: 1px solid #C09F80;
width: 100%; width: calc(100% - 1px);
margin-top: 12px; } margin-top: 12px; }
.LP-LinkList__List .LP-LinkList__Item .LP-Link { .LP-LinkList__List .LP-LinkList__Item .LP-Link {
padding: 1em 0 1em 1em; padding: 1em 0 1em 1em;
@ -479,6 +497,36 @@ body {
flex: 3 1 100px; flex: 3 1 100px;
padding: 12px 15px; } } padding: 12px 15px; } }
.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 { .LP-MainContainer {
margin: 0 auto; margin: 0 auto;
max-width: 1280px; } max-width: 1280px; }
@ -490,46 +538,22 @@ body {
.LP-MainContainer { .LP-MainContainer {
width: 100%; } } width: 100%; } }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { .LP-PlaceDetail .LP-PlaceDetail__Image {
width: 700px; width: 700px;
max-height: 500px; max-height: 500px;
box-shadow: 0 0 10px #565656; box-shadow: 0 0 10px #565656;
object-fit: cover; object-fit: cover;
object-position: 0 0; object-position: 0 0;
margin: 0;
padding: 0;
float: right; float: right;
margin-left: 35px; margin-left: 35px;
margin-bottom: 35px; margin-bottom: 35px;
margin-right: 35px;
overflow: hidden; } 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) { @media (max-width: 1000px) {
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-TextSection { .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
margin-top: 30px; }
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
float: none; float: none;
width: 100%; width: 100%;
height: auto; height: auto;