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

sync

Browse Source
This commit is contained in:
reverend 2021-12-29 13:52:57 +01:00
parent aed29a6497
commit ff9c9ddcbc
7 changed files with 259 additions and 16 deletions
Show Stats Download Patch File Download Diff File 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>

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

@ -12,7 +12,11 @@
</div> </div>
<section class="LP-Section"> <section class="LP-Section">
{{> @headline headline='Sicherheitsmaßnahmen'}} {{> @voting}}
</section>
<section class="LP-Section">
{{> @headline headline='Tags'}}
{{> @taglist}} {{> @taglist}}
</section> </section>
<section class="LP-Section"> <section class="LP-Section">

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