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
Download Patch File Download Diff File Expand all files Collapse all files

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>