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

Ja...

Browse Source
This commit is contained in:
reverend
2020-07-17 17:55:46 +02:00
commit 875cf06dd1
61 changed files with 6431 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/01_Atoms/_atoms.scss
+4
View File
@@ -0,0 +1,4 @@
@import 'link/link';
@import 'headline/headline';
@import 'text/text';
@import 'icon/icon';
components/01_Atoms/headline/_headline.scss
+8
View File
@@ -0,0 +1,8 @@
.LP-Headline{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1.7rem;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0.2rem;
}
components/01_Atoms/headline/headline.config.json
+5
View File
@@ -0,0 +1,5 @@
{
"context": {
"headline": "Hello here is my headline"
}
}
components/01_Atoms/headline/headline.hbs
+1
View File
@@ -0,0 +1 @@
<h1 class="LP-Headline">{{headline}}</h1>
components/01_Atoms/icon/_icon.scss
+15
View File
@@ -0,0 +1,15 @@
.LP-Icon{
height: 20px;
width: 20px;
}
.LP-Icon__List{
list-style-type: none;
display: inline-flex;
justify-content: space-between;
justify-items: stretch;
.LP-Icon__Item{
padding: 0 3px;
}
}
components/01_Atoms/icon/icon.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/01_Atoms/icon/icon.hbs
+7
View File
@@ -0,0 +1,7 @@
<img class="LP-Icon" src="/icons/favourite.svg"/>
<ul class="LP-Icon__List">
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
</ul>
components/01_Atoms/link/_link.scss
+8
View File
@@ -0,0 +1,8 @@
.LP-Link {
color: $-secondary-color;
text-decoration: none;
font-family: $-primary-accent-font;
&:hover {
color: $-secondary-accent-color;
}
}
components/01_Atoms/link/link.config.json
+6
View File
@@ -0,0 +1,6 @@
{
"context": {
"url": "#",
"text": "Click Me"
}
}
components/01_Atoms/link/link.hbs
+1
View File
@@ -0,0 +1 @@
<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
components/01_Atoms/text/_text.scss
+5
View File
@@ -0,0 +1,5 @@
.LP-Text {
color: black;
font-family: $-primary-serif-font;
font-size: 1.2rem;
}
components/01_Atoms/text/text.config.json
+5
View File
@@ -0,0 +1,5 @@
{
"context": {
"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."
}
}
components/01_Atoms/text/text.hbs
+1
View File
@@ -0,0 +1 @@
<p class="LP-Text">{{text}}</p>
components/02_Molecules/_molecules.scss
+4
View File
@@ -0,0 +1,4 @@
@import 'logo/logo';
@import 'textSection/textSection';
@import 'place/place';
@import 'securityMeasureList/securityMeasureList';
components/02_Molecules/logo/_logo.scss
+6
View File
@@ -0,0 +1,6 @@
.LP-Logo {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}
components/02_Molecules/logo/logo.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/02_Molecules/logo/logo.hbs
+3
View File
@@ -0,0 +1,3 @@
<a href="LP-Link" href="#">
<img class="LP-Logo" src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2016/07/logo-2.png?auto=format&q=60&fit=max&w=930"/>
</a>
components/02_Molecules/place/_place.scss
+38
View File
@@ -0,0 +1,38 @@
.LP-Place{
width: 280px;
height: 235px;
.LP-Place__Image{
width: 100%;
height: 165px;
object-fit: fill;
}
.LP-Place__Assets{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.8rem;
padding: 0 10px;
}
.LP-Place__Info{
.LP-Place__Title{
font-family: $-primary-sans-serif-font;
color: $-secondary-color;
font-size: 1rem;
padding: 0px;
margin: 0px;
}
.LP-Place__Detail{
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 0.9rem;
}
}
}
components/02_Molecules/place/place.config.json
+7
View File
@@ -0,0 +1,7 @@
{
"context": {
"image": "/images/photo_2020-05-02_18-11-21.jpg",
"title": "Kokerei Wiescherhöfen",
"location": "Hamm (Westfalen)"
}
}
components/02_Molecules/place/place.hbs
+14
View File
@@ -0,0 +1,14 @@
<article class="LP-Place">
<img class="LP-Place__Image" src="{{image}}"/>
<div class="LP-Place__Assets">
<div class="LP-Place__Info">
<h3 class="LP-Place__Title">{{title}}</h3>
<p class="LP-Place__Detail" >{{location}}</p>
</div>
<ul class="LP-Icon__List">
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
</ul>
</div>
</article>
components/02_Molecules/securityMeasureList/_securityMeasureList.scss
+16
View File
@@ -0,0 +1,16 @@
.LP-SecurityMeasure__List{
list-style-type: none;
display: flex;
padding:0;
margin: 0;
.LP-SecurityMeasure__Item{
margin: 0 5px;
padding: 5px 8px;
background-color: #D7CEC7;
.LP-Text{
font-family: $-primary-sans-serif-font;
font-size: 1.2rem;
}
}
}
components/02_Molecules/securityMeasureList/securityMeasureList.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/02_Molecules/securityMeasureList/securityMeasureList.hbs
+7
View File
@@ -0,0 +1,7 @@
<ul class="LP-SecurityMeasure__List">
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
<li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
</ul>
components/02_Molecules/textSection/_textSection.scss
+10
View File
@@ -0,0 +1,10 @@
.LP-Content{
padding: 15px;
}
.LP-TextSection{
.LP-Text {
line-height: 1.4rem;
}
}
components/02_Molecules/textSection/textSection.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/02_Molecules/textSection/textSection.hbs
+4
View File
@@ -0,0 +1,4 @@
<article class="LP-TextSection LP-Content">
{{> @headline headline=headline}}
{{> @text text=text}}
</article>
components/03_Organisms/_organisms.scss
+4
View File
@@ -0,0 +1,4 @@
@import 'header/header';
@import 'navigation/navigation';
@import 'introduction/introduction';
@import 'placeGrid/placeGrid';
components/03_Organisms/header/_header.scss
+16
View File
@@ -0,0 +1,16 @@
.LP-Header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 70px;
&__Logo {
max-width: 300px;
width: 35%;
object-fit:contain;
}
.LP-Header__Navigation{
}
}
components/03_Organisms/header/header.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/03_Organisms/header/header.hbs
+8
View File
@@ -0,0 +1,8 @@
<header class="LP-Header">
<div class="LP-Header__Logo">
{{render '@logo'}}
</div>
<div class="LP-Header__Navigation">
{{> @navigation}}
</div>
</header>
components/03_Organisms/introduction/_introduction.scss
+10
View File
@@ -0,0 +1,10 @@
.LP-Introduction{
.LP-Headline{
font-size: 2rem;
}
.LP-Text{
font-size: 1.3rem;
}
}
components/03_Organisms/introduction/introduction.config.json
+3
View File
@@ -0,0 +1,3 @@
{
"context": {}
}
components/03_Organisms/introduction/introduction.hbs
+4
View File
@@ -0,0 +1,4 @@
<div class="LP-Introduction">
{{> @textsection headline='Welcome to the urban exploring registry' 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.'}}
</div>
components/03_Organisms/navigation/_navigation.scss
+24
View File
@@ -0,0 +1,24 @@
.LP-Menu{
&__List {
list-style-type: none;
display: inline-flex;
justify-content: space-around;
}
&__Item {
padding: 10px 15px;
margin: 0 15px;
width: 100px;
text-align: center;
background-color: transparent;
}
.LP-Link__Text {
color: $-secondary-color;
font-weight: bold;
text-shadow: 0px 0px 20px white;
&:hover{
color: $-primary-accent-color;
}
}
}
components/03_Organisms/navigation/navigation.config.json
+3
View File
@@ -0,0 +1,3 @@
{
}
components/03_Organisms/navigation/navigation.hbs
+7
View File
@@ -0,0 +1,7 @@
<nav class="LP-Menu">
<ul class="LP-Menu__List">
<li class="LP-Menu__Item">{{> @link text='Home'}}</li>
<li class="LP-Menu__Item">{{> @link text='About'}}</li>
<li class="LP-Menu__Item">{{> @link text='Contact'}}</li>
</ul>
</nav>
components/03_Organisms/placeGrid/_placeGrid.scss
+14
View File
@@ -0,0 +1,14 @@
.LP-Place__Grid{
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.LP-Place__Item{
margin: 0 15px;
margin-bottom: 50px;
}
}
components/03_Organisms/placeGrid/placeGrid.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/03_Organisms/placeGrid/placeGrid.hbs
+35
View File
@@ -0,0 +1,35 @@
<div class="LP-Content">
{{> @headline headline='Explorere the latest locations'}}
<ul class="LP-Place__Grid">
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-04-09_18-27-13.jpg' title='Haus Maikotten' location='Münster (westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/photo_2020-05-02_18-11-21.jpg' title='Zementwerk Mersmann' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png' title='Noch ein Zementwerk' location='Beckum (Westfalen)' }}
</li>
<li class="LP-Place__Item">
{{> @place image='/images/Bildschirmfoto_von_2020-07-13_11-03-07.png' title='Kokerei in Hamm' location='Hamm (westfalen)' }}
</li>
</ul>
</div>
components/04_Templates/_templates.scss
+2
View File
@@ -0,0 +1,2 @@
@import 'home/home';
@import 'placeOverview/placeOverview';
components/04_Templates/home/_home.scss
+4
View File
@@ -0,0 +1,4 @@
.LP-MainContainer {
margin: 0 auto;
max-width: 1280px;
}
components/04_Templates/home/home.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/04_Templates/home/home.hbs
+5
View File
@@ -0,0 +1,5 @@
{{> @introduction}}
{{> @placegrid}}
Icons made by <a class="LP-Link" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
components/04_Templates/placeOverview/_placeOverview.scss
+33
View File
@@ -0,0 +1,33 @@
.LP-PlaceOverview{
.LP-PlaceOverview__Info{
display: flex;
margin-bottom: 40px;
.LP-PlaceOveriew__Image{
width: 600px;
height: 400px;
box-shadow: 0 0 10px $-secondary-color;
object-fit: cover;
}
.LP-PlaceOverView__Description{
padding: 0 25px;
}
}
.LP-PlaceOverView__ImageList{
list-style-type: none;
display: flex;
flex-wrap: wrap;
.LP-PlaceOverView__ImageItem{
padding: 15px;
img {
box-shadow: 0 0 5px $-secondary-color;
height: 200px;
width: 300px;
object-fit: cover;
}
}
}
}
components/04_Templates/placeOverview/placeOverview.config.json
+1
View File
@@ -0,0 +1 @@
{}
components/04_Templates/placeOverview/placeOverview.hbs
+36
View File
@@ -0,0 +1,36 @@
<article class="LP-PlaceOverview">
<div class="LP-PlaceOverview__Info">
<img class="LP-PlaceOveriew__Image" src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png">
<article class="LP-PlaceOverView__Description">
{{> @textsection headline='Kokerei Wiescherhöfen' 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.'}}
</article>
</div>
<article>
{{> @headline headline='Sicherheitsmaßnahmen'}}
{{> @securitymeasurelist}}
</article>
<ul class="LP-PlaceOverView__ImageList">
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_20-15-00.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"></a>
</li>
<li class="LP-PlaceOverView__ImageItem">
<a href="#"><img src="/images/photo_2020-05-02_18-11-21.jpg"></a>
</li>
</ul>
{{> @headline headline='Lade deine Bilder hoch'}}
<form>
<input type="file"/>
</form>
</article>
components/_preview.hbs
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ path '/components.css' }}">
<title>Preview</title>
</head>
<body>
{{> @header}}
<article class="LP-MainContainer">{{{ yield }}}</article>
</body>
</html>
components/components.scss
+13
View File
@@ -0,0 +1,13 @@
$-primary-color: #D7CEC7;
$-secondary-color: #565656;
$-primary-accent-color: #76323F;
$-secondary-accent-color: #C09F80;
$-primary-sans-serif-font: "Trebuchet MS", Helvetica, sans-serif;
$-primary-serif-font: "Times New Roman", Times, serif;
$-primary-accent-font: Tahoma, 'sans-serif';
@import '01_Atoms/atoms';
@import '02_Molecules/molecules';
@import '03_Organisms/organisms';
@import '04_Templates/templates';