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

148
src/App.vue
View File

@ -52,34 +52,36 @@
@click="takeScreenshot()" @click="takeScreenshot()"
v-bind:class="{ success: isScreenshotSuccess }" v-bind:class="{ success: isScreenshotSuccess }"
/> />
<font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" /> <div class="menu" v-bind:class="{ open: isControlOpen }">
<ul v-if="isControlOpen"> <font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" />
<li @click="togglePublic">Toggle <em>G</em>rimoire</li> <ul>
<li> <li @click="togglePublic">Toggle <em>G</em>rimoire</li>
Size <li>
<font-awesome-icon @click="zoom -= 0.1" icon="search-minus" /> Size
{{ Math.round(zoom * 100) }}% <font-awesome-icon @click="zoom -= 0.1" icon="search-minus" />
<font-awesome-icon @click="zoom += 0.1" icon="search-plus" /> {{ Math.round(zoom * 100) }}%
</li> <font-awesome-icon @click="zoom += 0.1" icon="search-plus" />
<li @click="addPlayer" v-if="players.length < 20"> </li>
<em>A</em>dd Player <li @click="addPlayer" v-if="players.length < 20">
</li> <em>A</em>dd Player
<li @click="randomizeSeatings" v-if="players.length > 2"> </li>
<em>R</em>andomize Seatings <li @click="randomizeSeatings" v-if="players.length > 2">
</li> <em>R</em>andomize Seatings
<li @click="clearPlayers" v-if="players.length"> </li>
Clear Players <li @click="clearPlayers" v-if="players.length">
</li> Clear Players
<li @click="clearRoles" v-if="players.length"> </li>
Clear Roles <li @click="clearRoles" v-if="players.length">
</li> Clear Roles
<li @click="showEditionModal" v-if="players.length > 4"> </li>
Select Edition <li @click="showEditionModal" v-if="players.length > 4">
</li> Select Edition
<li @click="showRoleModal" v-if="players.length > 4"> </li>
Select Roles <li @click="showRoleModal" v-if="players.length > 4">
</li> Select Roles
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -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,41 +334,75 @@ 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;
} }
} }
ul {
display: flex; .fa-camera {
list-style-type: none; position: absolute;
padding: 0; right: 50px;
margin: 0; top: 10px;
flex-direction: column; }
border-radius: 10px;
overflow: hidden; .menu {
box-shadow: 0 0 10px black; transform-origin: 91% 5.5%;
li { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
padding: 5px 10px; transform: rotate(-90deg);
color: white;
text-align: center; &.open {
background: rgba(0, 0, 0, 0.7); transform: rotate(0deg);
margin-bottom: 1px; }
cursor: pointer;
&:hover { > svg {
background-color: red; background: rgba(0, 0, 0, 0.5);
} border: 3px solid black;
em { width: 40px;
text-decoration: underline; height: 50px;
font-style: normal; margin-bottom: -8px;
font-weight: bold; border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 5px 5px 15px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
flex-direction: column;
overflow: hidden;
box-shadow: 0 0 10px black;
border: 3px solid black;
border-radius: 10px 0 10px 10px;
li {
padding: 5px 10px;
color: white;
text-align: center;
background: rgba(0, 0, 0, 0.7);
margin-bottom: 1px;
cursor: pointer;
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: red;
}
em {
text-decoration: underline;
font-style: normal;
font-weight: bold;
}
} }
} }
} }