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

Compare commits

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

5 Commits
b4508ee3e3 ... 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
daaa3e11a7 Adapting ImageGrid 2021-10-24 19:39:00 +02:00
9 changed files with 280 additions and 20 deletions
Expand all files Collapse all files

1
components/02_Molecules/_molecules.scss
View File

@@ -4,3 +4,4 @@
@import 'navigation/navigation'; @import 'navigation/navigation';
@import 'messageList/messageList'; @import 'messageList/messageList';
@import 'userInfo/userInfo'; @import 'userInfo/userInfo';
@import 'voting/voting';

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>

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

@@ -19,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{
@@ -34,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}}

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"
}, },

105
public/main.css
View File

@@ -1,4 +1,3 @@
@charset "UTF-8";
.RV-Dummy { .RV-Dummy {
overflow: hidden; overflow: hidden;
background-color: #F4A460; background-color: #F4A460;
@@ -83,27 +82,27 @@
.RV-AspectRatio--1to2 { .RV-AspectRatio--1to2 {
--aspectX: 1; --aspectX: 1;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--2to1 { .RV-AspectRatio--2to1 {
--aspectX: 2; --aspectX: 2;
--aspectY: 1; --aspectY: 1;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--3to2 { .RV-AspectRatio--3to2 {
--aspectX: 3; --aspectX: 3;
--aspectY: 2; --aspectY: 2;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--4to3 { .RV-AspectRatio--4to3 {
--aspectX: 4; --aspectX: 4;
--aspectY: 3; --aspectY: 3;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
.RV-AspectRatio--16to9 { .RV-AspectRatio--16to9 {
--aspectX: 16; --aspectX: 16;
--aspectY: 9; --aspectY: 9;
padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); padding-top: calc(100% * var(--aspectY) / var(--aspectX));
} }
/** /**
@@ -315,7 +314,7 @@ html {
overflow: hidden; overflow: hidden;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: calc(100%/3); flex-basis: 33.3333333333%;
} }
.RV-Flex__Item--quarter { .RV-Flex__Item--quarter {
overflow: hidden; overflow: hidden;
@@ -371,7 +370,7 @@ html {
.RV-BreakPoint__Item { .RV-BreakPoint__Item {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999); flex-basis: calc(var(--breakPoint) * 999 - 99900%);
overflow: hidden; overflow: hidden;
--outer-spacing: 0; --outer-spacing: 0;
--inner-spacing: 0; --inner-spacing: 0;
@@ -412,7 +411,7 @@ html {
gap: var(--gap); gap: var(--gap);
} }
.RV-Grid__Item { .RV-Grid__Item {
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing))); height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
} }
.RV-Grid__Item > * { .RV-Grid__Item > * {
height: 100%; height: 100%;
@@ -926,7 +925,7 @@ body {
height: 1em; height: 1em;
width: 1em; width: 1em;
border: 1px solid #565656; border: 1px solid #565656;
padding: 0 calc(.5em + 2px); padding: 0 calc(0.5em + 2px);
margin-right: 0.7em; margin-right: 0.7em;
} }
@@ -26397,7 +26396,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
} }
.mdi-blank::before { .mdi-blank::before {
content: ""; content: "\f68c";
visibility: hidden; visibility: hidden;
} }
@@ -26815,6 +26814,84 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
font-weight: bold; font-weight: bold;
} }
.LP-Voting {
font-family: "Montserrat", Helvetica, sans-serif;
gap: 16PX;
font-size: 42px;
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.LP-Voting .LP-Headline {
margin-bottom: 0;
height: 33px;
}
.LP-Voting__Left {
position: relative;
}
.LP-Voting__Choices {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-bottom: 27px;
width: max-content;
--indication-color: #C09F80;
}
.LP-Voting__Choices:hover {
--indication-color: #D7CEC7;
}
.LP-Voting__Vote {
color: #D7CEC7;
text-decoration: none;
transition: color 0.4s;
}
.LP-Voting__Vote:hover, .LP-Voting__Vote:hover ~ .LP-Voting__Vote, .LP-Voting__Vote:focus, .LP-Voting__Votefocus ~ .LP-Voting__Vote {
color: #565656;
cursor: pointer;
}
.LP-Voting__Vote:hover .LP-Voting__Label {
visibility: visible;
}
.LP-Voting__Vote--overall {
color: var(--indication-color);
}
.LP-Voting__Label {
position: absolute;
visibility: hidden;
height: 1.5em;
left: 0px;
width: 100%;
text-align: center;
top: 83px;
background-color: white;
color: #565656;
}
.LP-Voting__Label, .LP-Voting__CurrentVote {
font-size: 18px;
font-weight: bold;
}
.LP-Voting__CurrentVote {
margin-top: -29px;
color: #C09F80;
}
.LP-Voting__Date, .LP-Voting__Vote {
font-weight: bold;
}
.LP-Voting__UserVote .LP-Voting__Vote, .LP-Voting__UserVote .LP-Voting__Vote:hover {
color: black;
cursor: unset;
}
.LP-Voting__Info {
font-size: 18px;
display: flex;
flex-direction: column;
gap: 5px;
}
.LP-Voting__InfoLabel {
display: block;
}
.LP-Header { .LP-Header {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -26895,7 +26972,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
justify-content: center; justify-content: center;
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
height: calc(var(--itemHeight) - calc(2*var(--inner-spacing))); height: calc(var(--itemHeight) - 2 * var(--inner-spacing));
} }
.LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * { .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item > * {
height: 100%; height: 100%;
@@ -26945,7 +27022,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
--icon-color: #C09F80; --icon-color: #C09F80;
} }
.LP-LinkList .RV-Iconized__Icon { .LP-LinkList .RV-Iconized__Icon {
font-size: calc(var(--itemHeight) * .75); font-size: calc(var(--itemHeight) * 0.75);
line-height: 1em; line-height: 1em;
color: var(--icon-color); color: var(--icon-color);
transition: color 0.2s; transition: color 0.2s;
@@ -26998,7 +27075,7 @@ label + .LP-Input--disabled .LP-Input__Field:disabled {
.LP-FooterColumns__Item { .LP-FooterColumns__Item {
flex-grow: 5; flex-grow: 5;
flex-shrink: 5; flex-shrink: 5;
flex-basis: calc(var(--breakPoint) * 999 - 100% * 999); flex-basis: calc(var(--breakPoint) * 999 - 99900%);
overflow: hidden; overflow: hidden;
--outer-spacing: 0; --outer-spacing: 0;
--inner-spacing: 0; --inner-spacing: 0;

2
public/main.css.map
View File

File diff suppressed because one or more lines are too long