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

Compare commits

base: Commander1024:e3688ed0703d6f4314215bc3af7d70c96195cac0
Branches Tags
Commander1024:master Commander1024:linklist-add
..
compare: Commander1024:master
Branches Tags
Commander1024:master Commander1024:linklist-add

12 Commits
e3688ed070 ... master

Author SHA1 Message Date
reverend
603d7eb2c7 Anpassen Placelevel im PlaceDetail View 2021-12-29 14:41:19 +01:00
reverend
492b0cc0d2 Unnötige Dependency 2021-12-29 14:41:06 +01:00
reverend
ff9c9ddcbc sync 2021-12-29 13:52:57 +01:00
reverend
aed29a6497 Merge branch 'master' of git.commander1024.de:Commander1024/lostplaces-frontend 2021-11-21 13:26:37 +01:00
reverend
b4508ee3e3 No SCSS errors anymore 2021-11-01 09:49:58 +01:00
reverend
c2cdefff6d Fixing Rest of the Organisms 2021-11-01 09:47:33 +01:00
reverend
c2678fec85 Fixing ImageGrid and Lightbox 2021-11-01 09:43:20 +01:00
reverend
daaa3e11a7 Adapting ImageGrid 2021-10-24 19:39:00 +02:00
reverend
bbcbd19ef5 Adapting Form 2021-10-24 18:28:09 +02:00
reverend
dd69cbbaaf Better Wrapping in the footer 2021-10-24 16:58:08 +02:00
reverend
db13ef4787 #50 Restyling LinkList and Removing Add Item Form 2021-10-24 16:03:16 +02:00
reverend
b264b3a559 Adapating Organisms / LinkList w Icons 2021-10-24 12:32:32 +02:00
23 changed files with 14997 additions and 8394 deletions
Expand all files Collapse all files

13
components/02_Molecules/_molecules.scss
View File

@@ -1,6 +1,7 @@
//@import 'textSection/textSection'; @import 'textSection/textSection';
//@import 'placeTeaser/placeTeaser'; @import 'placeTeaser/placeTeaser';
//@import 'tagList/tagList'; @import 'tagList/tagList';
//@import 'navigation/navigation'; @import 'navigation/navigation';
//@import 'messageList/messageList'; @import 'messageList/messageList';
//@import 'userInfo/userInfo'; @import 'userInfo/userInfo';
@import 'voting/voting';

150
components/02_Molecules/placeTeaser/_placeTeaser.scss
View File

@@ -1,136 +1,16 @@
.LP-PlaceTeaser { .LP-PlaceTeaser {
width: 100%; @include RV-Turner(200px, 280px);
@include RV-Turner--auto;
.LP-PlaceTeaser__Image {
width: 100%; &__Image {
overflow: hidden; @include RV-Turner__Base;
.LP-Image { .LP-Image {
max-width: unset; height: 100%;
max-height: unset; }
object-fit: cover; }
}
} &__Meta {
@include RV-Turner__Content;
.LP-PlaceTeaser__Meta { }
display: flex; }
flex-wrap: wrap;
gap: $-spacing-small;
align-items: center;
justify-content: space-between;
padding: 5px;
padding-bottom: 10px;
padding-top: 10px;
.LP-Paragraph {
font-family: $-primary-sans-serif-font;
padding: 0;
margin: 0;
margin-top: 5px;
font-size: 1.3rem;
}
.LP-Headline {
font-family: $-primary-sans-serif-font;
color: $-grey;
font-size: 2rem;
padding: 0px;
margin: 0px;
}
.LP-Icon {
height: 2em;
width: 2em;
}
}
.LP-PlaceTeaser__Description {
font-family: $-primary-sans-serif-font;
color: $-grey;
order: 3;
flex-basis: 100%;
.LP-Paragraph {
font-size: 22px;
}
}
}
@media(min-width: $-viewport-small) {
.LP-PlaceTeaser {
width: 280px;
&__Image {
width: 280px;
height: 165px;
}
}
.LP-PlaceTeaser--extended {
display: flex;
flex-direction: row;
width: auto;
padding-right: 25px;
height: 165px;
.LP-PlaceTeaser__Meta {
margin: 0;
padding-left: 25px;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: unset;
.LP-Headline,
.LP-Paragraph {
font-size: unset;
}
.LP-PlaceTeaser__Info {
.LP-Headline {
font-size: 28px;
}
}
.LP-PlaceTeaser__Icons {
margin-top: auto;
ul {
padding: 0;
margin: 0;
}
}
.LP-Icon {
height: 20px;
width: 20px;
}
}
.LP-PlaceTeaser__Description {
display: block;
max-height: 55px;
overflow: hidden;
order: unset;
.LP-Paragraph {
font-size: unset;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
}
.LP-PlaceTeaser__Image {
height: 165px;
width: 280px;
flex-shrink: 0;
flex-grow: 0;
}
}
}

6
components/02_Molecules/placeTeaser/placeTeaser.hbs
View File

@@ -1,10 +1,12 @@
<article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}"> <article class="LP-PlaceTeaser LP-PlaceTeaser{{modifier}}">
<div class="LP-PlaceTeaser__Image"> <div class="LP-PlaceTeaser__Image">
<img class="LP-Image" src="{{image}}"/> <img class="LP-Image" src="{{image}}"/>
</div> </div>
<div class="LP-PlaceTeaser__Meta"> <div class="LP-PlaceTeaser__Meta">
<span class="LP-PlaceTeaser__Title">
{{> @headline headline=title modifier='--teaser'}}
</span>
<div class="LP-PlaceTeaser__Info"> <div class="LP-PlaceTeaser__Info">
<span class="LP-PlaceTeaser__Title">{{> @headline headline=title modifier='--teaser'}}</span>
<span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span> <span class="LP-PlaceTeaser__Detail" >{{> @paragraph text=location}}</span>
</div> </div>
<div class="LP-PlaceTeaser__Description"> <div class="LP-PlaceTeaser__Description">

103
components/02_Molecules/voting/_voting.scss Normal file
View File

@@ -0,0 +1,103 @@
.LP-Voting {
$-block: &;
font-family: $-primary-sans-serif-font;
gap: 16PX;
font-size: 42px;
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.LP-Headline {
margin-bottom: 0;
height: 33px;
}
&__Left {
position: relative;
}
&__Choices {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-bottom: calc(1.5 * 18px);
width: max-content;
--indication-color: #{$-light-brown};
&:hover {
--indication-color: #{$-beige};
}
}
&__Vote {
color: $-beige;
text-decoration: none;
transition: color .4s;
&:hover,
&:hover ~ &,
&:focus,
&focus ~ & {
color: $-grey;
cursor: pointer;
}
&:hover {
#{$-block}__Label {
visibility: visible;
}
}
&--overall {
color: var(--indication-color);
}
}
&__Label {
position: absolute;
visibility: hidden;
height: 1.5em;
left: 0px;
width: 100%;
text-align: center;
top: 83px;
background-color: white;
color: $-grey;
}
&__Label, &__CurrentVote {
font-size: 18px;
font-weight: bold;
}
&__CurrentVote {
margin-top: -29px;
color: $-light-brown;
}
&__Date, &__Vote {
font-weight: bold;
}
&__UserVote {
#{$-block}__Vote {
&, &:hover {
color: black;
cursor: unset;
}
}
}
&__Info{
font-size: 18px;
display: flex;
flex-direction: column;
gap: 5px;
&Label {
display: block;
}
}
}

1
components/02_Molecules/voting/voting.config.json Normal file
View File

@@ -0,0 +1 @@
{}

57
components/02_Molecules/voting/voting.hbs Normal file
View File

@@ -0,0 +1,57 @@
<div class="LP-Voting">
<div class="LP-Voting__Left">
<h2 class="LP-Headline">
Place level
</h2>
<div class="LP-Voting__Choices">
<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Time Capsule&quot;">
<i class="mdi mdi-shield-home"></i>
<span class="LP-Voting__Label">
Time Capsule
</span>
</a>
<a href="#5" class="LP-Voting__Vote" title="Vote place as &quot;Lost in History&quot;">
<i class="mdi mdi-shield-home"></i>
<span class="LP-Voting__Label">
Lost in History
</span>
</a>
<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Natures Treasure&quot;">
<i class="mdi mdi-shield-home"></i>
<span class="LP-Voting__Label">
Natures Treasure
</span>
</a>
<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Vandalized&quot;">
<i class="mdi mdi-shield-home"></i>
<span class="LP-Voting__Label">
Vandalized
</span>
</a>
<a href="#5" class="LP-Voting__Vote LP-Voting__Vote--overall" title="Vote place as &quot;Ruin&quot;">
<i class="mdi mdi-shield-home"></i>
<span class="LP-Voting__Label">
Ruin
</span>
</a>
</div>
<div class="LP-Voting__CurrentVote">
Natures Treasure
</div>
</div>
<div class="LP-Voting__Right">
<div class="LP-Voting__Info">
<div class="LP-Voting__UserVote">
<span class="LP-Voting__InfoLabel">You voted this place as</span>
<span class="LP-Voting__Vote">Lost in History (4 / 5)</span>
</div>
<div class="LP-Voting__Expiration">
<span class="LP-Voting__InfoLabel">Your vote expires on</span>
<span class="LP-Voting__Date">
<time datetime="2022-01-24">24 of January 2022</time>
</span>
</div>
</div>
</div>
</div>

18
components/03_Organisms/_organisms.scss
View File

@@ -1,9 +1,9 @@
//@import 'header/header'; @import 'header/header';
//@import 'placeGrid/placeGrid'; @import 'placeGrid/placeGrid';
//@import 'placeList/placeList'; @import 'placeList/placeList';
//@import 'linkList/linkList'; @import 'linkList/linkList';
//@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';

13
components/03_Organisms/footer/_footer.scss
View File

@@ -10,15 +10,13 @@ $-primary-line-color: $-almost-white;
font-size: 1rem; font-size: 1rem;
&Columns__Container { &Columns__Container {
width: 100%; @include RV-BreakPoint;
display: flex; --breakPoint: 750px;
flex-direction: row; justify-content: center;
justify-content: space-evenly;
flex-wrap: wrap;
} }
&Columns__Item { &Columns__Item {
flex-grow: 1; @include RV-BreakPoint__Item;
} }
* { * {
@@ -208,9 +206,6 @@ $-primary-line-color: $-almost-white;
} }
@media(max-width: $-viewport-medium) { @media(max-width: $-viewport-medium) {
.LP-Footer__ListTop {
width: 100%;
}
.LP-Footer__ListHeader { .LP-Footer__ListHeader {
font-size: 3em; font-size: 3em;
} }

50
components/03_Organisms/footer/footer.hbs
View File

@@ -2,30 +2,36 @@
<div class="LP-FooterColumns__Container"> <div class="LP-FooterColumns__Container">
<!-- 1st footer column --> <!-- 1st footer column -->
<ul class="LP-Footer__ListTop"> <div class="LP-FooterColumns__Item">
<li><h4 class="LP-Footer__ListHeader">About</h4></li> <ul class="LP-Footer__ListTop">
<li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li> <li><h4 class="LP-Footer__ListHeader">About</h4></li>
<li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li> <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/src/branch/master/Readme.md' class="LP-Footer__GenericAnchor">Host your own instance!</a></li>
<li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li> <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend/issues' class="LP-Footer__GenericAnchor">Issue tracker</a></li>
<li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li> <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-backend' class="LP-Footer__GenericAnchor">Backend repository</a></li>
</ul> <li class="LP-Footer__ListText"><a href='https://git.mowoe.com/reverend/lostplaces-frontend' class="LP-Footer__GenericAnchor">Frontend repository</a></li>
</ul>
</div>
<!-- 2nd footer column --> <div class="LP-FooterColumns__Item">
<ul class="LP-Footer__ListTop"> <!-- 2nd footer column -->
<li><h4 class="LP-Footer__ListHeader">Contact</h4></li> <ul class="LP-Footer__ListTop">
<li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li> <li><h4 class="LP-Footer__ListHeader">Contact</h4></li>
<li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li> <li class="LP-Footer__ListText">web. <a href='https://www.urban-exploration.com' class="LP-Footer__GenericAnchor">https://www.urban-exploration.com</a></li>
<li class="LP-Footer__ListText">tel. 937-387-6498</li> <li class="LP-Footer__ListText">mail. <a href='mailto:JohnSSmith@einrot.com' class="LP-Footer__GenericAnchor">JohnSSmith@einrot.com</a></li>
</ul> <li class="LP-Footer__ListText">tel. 937-387-6498</li>
</ul>
</div>
<!-- 3rd footer column --> <div class="LP-FooterColumns__Item">
<ul class="LP-Footer__ListTop"> <!-- 3rd footer column -->
<li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li> <ul class="LP-Footer__ListTop">
<li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li> <li id='Contact'><h4 class="LP-Footer__ListHeader">Postal address</h4></li>
<li class="LP-Footer__ListText">John S. Smith</li> <li class="LP-Footer__ListText"><b>Urban Exploration Ltd.</b></li>
<li class="LP-Footer__ListText">2563 College Avenue</li> <li class="LP-Footer__ListText">John S. Smith</li>
<li class="LP-Footer__ListText">Dayton, OH 45402</li> <li class="LP-Footer__ListText">2563 College Avenue</li>
</ul> <li class="LP-Footer__ListText">Dayton, OH 45402</li>
</ul>
</div>
</div> </div>
<!-- Explore with us / social media bar --> <!-- Explore with us / social media bar -->

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

@@ -16,7 +16,8 @@
} }
.LP-Form__Button { .LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(max-content); @include RV-Flex__Item--fixedSize;
--fixed-size: max-content;
} }
fieldset.LP-Form__Fieldset { fieldset.LP-Form__Fieldset {
@@ -31,23 +32,25 @@
&:not(.LP-Form--inline) { &:not(.LP-Form--inline) {
.LP-Form__Composition { .LP-Form__Composition {
@media(max-width: $-viewport-extra-small) { @media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Container--multiRow; @include RV-Flex--wrap;
} }
} }
.LP-Form__Button { .LP-Form__Button {
@include RV-FlexRow__Item--fixedSize(130px); @include RV-Flex__Item--fixedSize;
--fixedSize: 130px;
@media(max-width: $-viewport-extra-small) { @media(max-width: $-viewport-extra-small) {
@include RV-FlexRow__Item--fixedSize(100%); @include RV-Flex__Item--fixedSize;
--fixedSize: 100%;
} }
} }
} }
.LP-Form__Fieldset { .LP-Form__Fieldset {
@include RV-Reset;
max-width: 1200px; max-width: 1200px;
min-width: $-viewport-medium; min-width: $-viewport-medium;
border: none;
@media(max-width: $-viewport-medium) { @media(max-width: $-viewport-medium) {
min-width: unset; min-width: unset;
@@ -62,23 +65,23 @@
} }
.LP-Form__Composition { .LP-Form__Composition {
@include RV-FlexRow__Container; @include RV-Flex;
@include RV-Spacing__Inner--small(''); gap: $-spacing-small;
&--breakable { &--breakable {
@media(max-width: $-viewport-small) { @media(max-width: $-viewport-small) {
@include RV-FlexRow__Container--multiRow; @include RV-Flex--wrap;
} }
} }
&--buttons { &--buttons {
justify-content: flex-end; justify-content: flex-end;
@include RV-Spacing__Inner--small; gap: 20px;
} }
} }
.LP-Form__Field { .LP-Form__Field {
@include RV-FlexRow__Item; @include RV-Flex__Item;
} }
.LP-Form__InfoText { .LP-Form__InfoText {

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

@@ -1,11 +1,25 @@
.LP-ImageGrid{ @use "sass:math";
@include RV-FlexGrid(290px, 200px);
@include RV-ElementList;
@include RV-Spacing__Inner--small;
.LP-ImageGrid{
&__Container {
@include RV-Grid;
@include RV-Grid--fixedSize;
--fixedSize: var(--itemWidth);
--itemWidth: 290px;
--itemHeight: 200px;
list-style-type: none;
--gap: #{$-spacing-small};
}
&__Item { &__Item {
position: relative; position: relative;
@include RV-ContentCrop;
.LP-Image {
height: 100%;
width: 100%;
object-fit: cover;
}
&--add { &--add {
.LP-Link { .LP-Link {
@@ -50,8 +64,8 @@
height: #{$-spacing-small * 2}; height: #{$-spacing-small * 2};
width: #{$-spacing-small * 2}; width: #{$-spacing-small * 2};
position:relative; position:relative;
left: #{($-spacing-large - $-spacing-small) / 3.2}; left: #{math.div($-spacing-large - $-spacing-small, 3.2)};
top: #{($-spacing-large - $-spacing-small) / 3.2}; top: #{math.div($-spacing-large - $-spacing-small, 3.2)};
} }
} }
@@ -91,9 +105,10 @@
pointer-events: initial; pointer-events: initial;
} }
} }
&__FullSizeImage { &__FullSizeImage {
grid-area: picture; grid-area: picture;
justify-self: center;
} }
&__Previous{ &__Previous{

2
components/03_Organisms/imageGrid/imageGrid.hbs
View File

@@ -4,7 +4,7 @@
{{#each images}} {{#each images}}
<li class="LP-ImageGrid__Item"> <li class="LP-ImageGrid__Item">
<a href="#{{this.current_id}}" class="LP-Link"> <a href="#{{this.current_id}}" class="LP-Link">
<img class="LP-Image" src="{{this}}"> <img class="LP-Image" src="{{this.url}}">
</a> </a>
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen"> <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="#" class="LP-Link"> <a href="#" class="LP-Link">

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

@@ -1,74 +1,47 @@
.LP-LinkList{ .LP-LinkList{
@include RV-Grid; @include RV-Grid;
@include RV-Grid--autoWidth;
--itemMinWidth: 350px;
--itemHeight: 3em;
align-items: center; align-items: center;
--icon-color: #{$-light-brown};
.RV-Iconized__Icon {
font-size: calc(var(--itemHeight) * .75);
line-height: 1em;
color: var(--icon-color);
transition: color .2s;
}
.LP-LinkList__Item{ .LP-LinkList__Item{
font-weight: 500;
--color: #{$-grey};
border-left: 1px solid $-light-brown; border-left: 1px solid $-light-brown;
width: calc(100% - 1px); transition: background .2s;
overflow: hidden; height: 100%;
transition: background .3s, color .5s;
@include RV-Alignment--verticalCenter; @include RV-Alignment--verticalCenter;
@include RV-Flex;
.LP-LinkList__ItemHover {
opacity: 0.5;
@include RV-Alignment--right;
@include RV-FlexRow__Item--fixedSize(min-content);
}
&:hover { &:hover {
background-color: $-almost-white; background-color: $-beige;
--icon-color: #{$-grey};
.LP-LinkList__ItemHover { .LP-LinkList__ItemHover {
opacity: 1; opacity: 1;
} }
} }
&--addItem {
background-color: $-almost-white;
font-weight: bold;
}
} }
.LP-Link { .LP-Link {
@include RV-FlexRow__Item; @include RV-Flex__Item;
@include RV-Spacing__Inner--small; padding-left: $-spacing-medium;
} color: var(--color);
transition: color .2s;
.LP-LinkAdd{
height: 0;
}
.LP-LinkAdd__Container{
position: relative;
top: -39px;
.LP-Form__Fieldset{
min-width:unset;
}
.LP-Form{
display: block;
min-width: 0px;
}
} }
} }
.LP-LinkAdd{
display: none;
}
.LP-LinkAdd__Trigger {
display: none;
}
.LP-LinkAdd__TriggerLabel{
cursor: pointer;
display: contents;
}
.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel{
display: none;
}
.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd{
display: block;
}

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

@@ -1,66 +1,74 @@
<div class="LP-LinkList"> <ul class="LP-LinkList">
<ul class="LP-LinkList__Container"> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> <span class="LP-Text RV-Iconized">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li> <span class="RV-Iconized__Text">
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li> OSM
<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li> </span>
<li class="LP-LinkList__Item"> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a> <i class="mdi mdi-map-outline"></i>
<a href="google.com" class="LP-Link LP-LinkList__ItemHover"> </span>
<div class="RV-Iconized__Container RV-Iconized__Container--small"> </span></a>
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" </li>
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"> <span class="LP-Text RV-Iconized">
<g> <span class="RV-Iconized__Text">
<g> Google Maps
<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717 </span>
L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859 <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287 <i class="mdi mdi-map-outline"></i>
l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285 </span>
L284.286,256.002z" /> </span></a>
</g> </li>
</g> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
</svg> <span class="LP-Text RV-Iconized">
</div> <span class="RV-Iconized__Text">
</a> Photoalbum
</li> </span>
<li class="LP-LinkList__Item"> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<input type="checkbox" id="checkbox123" class="LP-LinkAdd__Trigger" /> <i class="mdi mdi-camera-burst"></i>
<label for="checkbox123" class="LP-LinkAdd__TriggerLabel"> </span>
<a class="LP-Link"> </span></a>
<div class="RV-Iconized__Container RV-Iconized__Container--small"> </li>
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" <span class="LP-Text RV-Iconized">
xml:space="preserve"> <span class="RV-Iconized__Text">
<g> YouTube Link
<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 </span>
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" /> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
</g> <i class="mdi mdi-youtube"></i>
</svg> </span>
<span class="RV-Iconized__Text">Link hinzufügen</span> </span></a>
</div> </li>
</a> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
</label> <span class="LP-Text RV-Iconized">
<div class="LP-LinkAdd"> <span class="RV-Iconized__Text">
<span class="LP-LinkAdd__Container"> Twitter Link
<form class="LP-Form LP-Form--inline"> </span>
<fieldset class="LP-Form__Fieldset"> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
<legend class="LP-Form__Legend">Basic data</legend> <i class="mdi mdi-twitter"></i>
<div class="LP-Form__Composition LP-Form__Composition--buttons"> </span>
<div class="LP-Form__Field LP-Form__Button LP-Input"> </span></a>
<input type="submit" class="LP-Button" value="Submit" /> </li>
</div> <li class="LP-LinkList__Item"><a href="#" class="LP-Link">
<div class="LP-Form__Field LP-Form__Field--narrower"> <span class="LP-Text RV-Iconized">
<div class="LP-Input"> <span class="RV-Iconized__Text">
<label for="input123" class="LP-Input__Label">Link URL</label> Toller externer Blog
<input type="text" id="input123" class="LP-Input__Field" /> </span>
</div> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
</div> <i class="mdi mdi-open-in-new"></i>
</div> </span>
</fieldset> </span></a>
</form> </li>
<li class="LP-LinkList__Item LP-LinkList__Item--addItem">
<a href="#" class="LP-Link">
<span class="LP-Text RV-Iconized">
<span class="RV-Iconized__Text">
Link Hinzufügen
</span> </span>
</div> <span class="RV-Iconized__Icon RV-Iconized__Icon--left">
</li> <i class="mdi mdi-plus"></i>
</ul> </span>
</div> </span>
</a>
</li>
</ul>

13
components/03_Organisms/placeGrid/_placeGrid.scss
View File

@@ -3,12 +3,17 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
display: flex; @include RV-Grid;
flex-direction: row; @include RV-Grid--autoWidth;
flex-wrap: wrap; --itemHeight: 200px;
--itemMinWidth: 280px;
--gap: 15px;
padding: 15px;
justify-content: center;
.LP-PlaceGrid__Item{ .LP-PlaceGrid__Item{
margin: 18px; @include RV-Grid__Item;
} }
.LP-Link{ .LP-Link{

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

@@ -27,7 +27,6 @@
margin: 18px 0; margin: 18px 0;
@media (max-width: $-viewport-medium) { @media (max-width: $-viewport-medium) {
width: 100%; width: 100%;
margin-bottom: $-spacing-large;
} }
} }
} }

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';

16
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;
@@ -20,6 +19,17 @@
} }
} }
.LP-Quickinfo {
clear: both;
display: flex;
gap: $-spacing-large;
justify-content: space-between;
.LP-Section {
flex-basis: 50%;
}
}
@media (max-width: $-viewport-medium){ @media (max-width: $-viewport-medium){
.LP-PlaceDetail{ .LP-PlaceDetail{
.LP-PlaceDetail__Header{ .LP-PlaceDetail__Header{
@@ -35,4 +45,8 @@
} }
} }
} }
.LP-Quickinfo {
flex-direction: column;
}
} }

15
components/04_Templates/placeDetail/placeDetail.hbs
View File

@@ -11,10 +11,17 @@
{{> @paragraph text='Am 31. März 1987 wurde die Kokerei der Zeche Heinrich Robert geschlossen. Im Herbst 1987 wurde mit dem Abriss der Gebäude begonnen. Er dauerte bis zum Frühjahr 1988. Ziemlich zum Ende mussten die beiden Kamine weichen. Durch die Stilllegung der Kokerei änderte sich das Ortsbild entsprechend: Nachdem das Feuer in den Öfen erloschen war, blieben auch die Löschwasserdampfwolken und Abgasfackeln aus. Erst nach dem Abriss wollte man ein Industriedenkmal in Form einer Koksofentür aufstellen, allerdings wurde bereits alles entsorgt. Die auf dem Wiescherhöfener Marktplatz ausgestellte Ofentür stammt von der Kokerei Hansa in Dortmund.'}} {{> @paragraph text='Am 31. März 1987 wurde die Kokerei der Zeche Heinrich Robert geschlossen. Im Herbst 1987 wurde mit dem Abriss der Gebäude begonnen. Er dauerte bis zum Frühjahr 1988. Ziemlich zum Ende mussten die beiden Kamine weichen. Durch die Stilllegung der Kokerei änderte sich das Ortsbild entsprechend: Nachdem das Feuer in den Öfen erloschen war, blieben auch die Löschwasserdampfwolken und Abgasfackeln aus. Erst nach dem Abriss wollte man ein Industriedenkmal in Form einer Koksofentür aufstellen, allerdings wurde bereits alles entsorgt. Die auf dem Wiescherhöfener Marktplatz ausgestellte Ofentür stammt von der Kokerei Hansa in Dortmund.'}}
</div> </div>
<section class="LP-Section"> <div class="LP-Quickinfo">
{{> @headline headline='Sicherheitsmaßnahmen'}} <section class="LP-Section">
{{> @taglist}} {{> @headline headline='Tags'}}
</section> {{> @taglist}}
</section>
<section class="LP-Section">
{{> @voting}}
</section>
</div>
<section class="LP-Section"> <section class="LP-Section">
{{> @headline headline='Links'}} {{> @headline headline='Links'}}
{{> @linklist}} {{> @linklist}}

2
components/rcss.bundled.scss
View File

@@ -321,7 +321,7 @@ $-spacing-large: 35px;
@mixin RV-Alignment--horizontalCenter { @mixin RV-Alignment--horizontalCenter {
display: flex; display: flex;
justify-content:0 center; justify-content: center;
} }
@mixin RV-Alignment--verticalCenter { @mixin RV-Alignment--verticalCenter {

1
package.json
View File

@@ -6,7 +6,6 @@
"@mdi/font": "^6.2.95", "@mdi/font": "^6.2.95",
"fractal": "0.0.3", "fractal": "0.0.3",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"node-sass": "^4.14.1",
"sass": "^1.30.0", "sass": "^1.30.0",
"sass-loader": "^10.0.5" "sass-loader": "^10.0.5"
}, },

22650
public/main.css
View File

File diff suppressed because it is too large Load Diff

1
public/main.css.map Normal file
View File

File diff suppressed because one or more lines are too long