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