martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

menu styling

This commit is contained in:
Steffen 2020-04-26 21:38:35 +02:00
parent db67d2e542
commit 339479b310
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
1 changed files with 92 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.vue
View File

@ -52,8 +52,9 @@
@click="takeScreenshot()" @click="takeScreenshot()"
v-bind:class="{ success: isScreenshotSuccess }" v-bind:class="{ success: isScreenshotSuccess }"
/> />
<div class="menu" v-bind:class="{ open: isControlOpen }">
<font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" /> <font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" />
<ul v-if="isControlOpen"> <ul>
<li @click="togglePublic">Toggle <em>G</em>rimoire</li> <li @click="togglePublic">Toggle <em>G</em>rimoire</li>
<li> <li>
Size Size
@ -82,6 +83,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -129,7 +131,7 @@ export default {
}, },
togglePublic() { togglePublic() {
this.isPublic = !this.isPublic; this.isPublic = !this.isPublic;
this.isControlOpen = false; this.isControlOpen = !this.isPublic;
}, },
addPlayer() { addPlayer() {
const name = prompt("Player name"); const name = prompt("Player name");
@ -332,27 +334,54 @@ ul {
// Controls // Controls
.controls { .controls {
position: absolute; position: absolute;
right: 0; right: 3px;
top: 0; top: 3px;
text-align: right; text-align: right;
padding: 10px;
svg { svg {
cursor: pointer; cursor: pointer;
margin-left: 10px;
&.success { &.success {
animation: greenToWhite 1s normal forwards; animation: greenToWhite 1s normal forwards;
animation-iteration-count: 1; animation-iteration-count: 1;
} }
} }
.fa-camera {
position: absolute;
right: 50px;
top: 10px;
}
.menu {
transform-origin: 91% 5.5%;
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
transform: rotate(-90deg);
&.open {
transform: rotate(0deg);
}
> svg {
background: rgba(0, 0, 0, 0.5);
border: 3px solid black;
width: 40px;
height: 50px;
margin-bottom: -8px;
border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 5px 5px 15px;
}
ul { ul {
display: flex; display: flex;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
flex-direction: column; flex-direction: column;
border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;
border: 3px solid black;
border-radius: 10px 0 10px 10px;
li { li {
padding: 5px 10px; padding: 5px 10px;
color: white; color: white;
@ -360,9 +389,15 @@ ul {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
margin-bottom: 1px; margin-bottom: 1px;
cursor: pointer; cursor: pointer;
&:last-child {
margin-bottom: 0;
}
&:hover { &:hover {
background-color: red; background-color: red;
} }
em { em {
text-decoration: underline; text-decoration: underline;
font-style: normal; font-style: normal;
@ -371,6 +406,7 @@ ul {
} }
} }
} }
}
// Editions // Editions
@each $img, $skipIcons in $editions { @each $img, $skipIcons in $editions {