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

134
src/components/Timer.vue
View File

@ -1,23 +1,67 @@
<template>
<div class="timer">
<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>
<p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
<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>
<button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
<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 class="timer-container">
<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">
</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>
<div class="timer-item">
<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>
<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>
@ -111,11 +155,42 @@ export default {
.timer {
height: 100%;
}
.timer-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%;
.timer-column {
height: 100%;
width: 100%;
display: none;
flex-direction: column;
align-items: center;
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 {
font-size: 60px;
padding: 23px 20px 84px 20px;
@ -155,18 +230,13 @@ export default {
background-color: $white;
}
}
.reverse {
transform: scale(-1, -1);
}
.end {
display: block;
position: absolute;
right: 1px;
top: 1px;
font-size: 32px;
}
}
.end {
display: block;
position: absolute;
right: 1px;
top: 1px;
font-size: 32px;
}
</style>