rummy-timer/app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added tablet design

Browse Source
This commit is contained in:
Jeroen De Meerleer 2021-05-05 13:24:05 +02:00
parent 1cb1bec05a
commit 6f1a98f65a
1 changed files with 102 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Timer.vue
View File

@ -1,15 +1,38 @@
<template> <template>
<div class="timer"> <div class="timer">
<div class="end" v-on:click="resetTime()">X</div> <div class="end" v-on:click="resetTime()">X</div>
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft reverse">{{ countDown.toString() }}</p> <div class="timer-container">
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse"> <div class="timer-column no-mobile">
<div class="timer-item">
&nbsp;
</div>
<div class="timer-item rotate-left">
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
</p> </p>
</div>
<div class="timer-item">
&nbsp;
</div>
</div>
<div class="timer-column mobile">
<div class="timer-item reverse">
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
</p>
</div>
<button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button> <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
<div class="timer-item">
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p> <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="warning == true || (typeof warning == 'undefined')" class="timeout"> <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
@ -19,6 +42,27 @@
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
</p> </p>
</div> </div>
</div>
<div class="timer-column no-mobile">
<div class="timer-item">
&nbsp;
</div>
<div class="timer-item rotate-right">
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
<img src="joker.png" alt="joker">
</p>
</div>
<div class="timer-item">
&nbsp;
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
@ -111,11 +155,42 @@ export default {
.timer { .timer {
height: 100%; height: 100%;
}
.timer-container {
display: flex; display: flex;
height: 100%;
.timer-column {
height: 100%;
width: 100%;
display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&.mobile {
display: flex;
}
.timer-item {
&.reverse {
transform: rotate(180deg);
}
&.rotate-left {
transform: rotate(90deg);
}
&.rotate-right {
transform: rotate(-90deg);
}
&.empty {
height: 33%;
}
}
@media (min-width: 768px) {
&.no-mobile {
display: flex;
}
}
}
.timeleft { .timeleft {
font-size: 60px; font-size: 60px;
padding: 23px 20px 84px 20px; padding: 23px 20px 84px 20px;
@ -155,11 +230,7 @@ export default {
background-color: $white; background-color: $white;
} }
} }
.reverse {
transform: scale(-1, -1);
} }
.end { .end {
display: block; display: block;
position: absolute; position: absolute;
@ -167,6 +238,5 @@ export default {
top: 1px; top: 1px;
font-size: 32px; font-size: 32px;
} }
}
</style> </style>