Skip to content

Commit 87a0faa

Browse files
DjuuuDjuuu
committed
Style
1 parent 4abf99d commit 87a0faa

File tree

8 files changed

+84
-61
lines changed

8 files changed

+84
-61
lines changed

‎src/App.vue

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<template>
2-
<div id="app" class="text-secondary text-xl">
3-
<app-nav></app-nav>
4-
<router-view/>
2+
3+
<div id="app" class="min-h-screen f-col text-secondary text-xl">
4+
5+
<h1 class="text-center font-semibold py-3 mb-2 bg-gray-200" v-if="$route.name !== 'about'">
6+
Ticket-Calc
7+
</h1>
8+
9+
<router-view class="app-content container flex-grow overflow-auto overflow-x-hidden"/>
10+
11+
<app-nav class="bg-gray-200 fixed w-full bottom-0"></app-nav>
512
</div>
613
</template>
714

@@ -16,4 +23,7 @@
1623
</script>
1724

1825
<style>
26+
.app-content {
27+
max-height: calc(100vh - 8.2rem);
28+
}
1929
</style>

‎src/assets/css/app.css

+1-5
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@
44
.f-col { @apply flex flex-col; }
55
.f-row { @apply flex flex-row; }
66

7-
hr {
8-
@apply border w-full my-5;
9-
}
10-
117
/* Buttons */
128

139
.btn {
14-
@apply py-1 px-6 rounded-full font-semibold uppercase;
10+
@apply px-6 rounded-full font-semibold uppercase;
1511
}
1612
.btn-square {
1713
@apply inline-block p-0 w-8 h-8 rounded font-bold text-3xl leading-none;

‎src/components/Nav.vue

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<template>
2-
<nav class="text-center font-semibold text-2xl p-6">
3-
<router-link to="/">Calc</router-link>
2+
<nav class="text-center font-semibold text-2xl p-4">
3+
<router-link to="/">
4+
Calc
5+
</router-link>
46
|
5-
<router-link to="/settings">Settings</router-link>
7+
<router-link to="/settings">
8+
Settings
9+
</router-link>
610
|
7-
<router-link to="/about">About</router-link>
11+
<router-link to="/about">
12+
About
13+
</router-link>
814
</nav>
915
</template>
1016

‎src/components/SolutionButtons.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="f-row flex-wrap justify-around">
2+
<div class="f-row flex-wrap justify-around" style="min-height: 2.5rem;">
33

44
<button class="solution-btn solution-btn-exact tracking-tighter"
55
v-for="(solution, index) in solutions['exact'].solutions" :key="'exact-' + index"
@@ -35,14 +35,15 @@
3535
</script>
3636

3737
<style>
38+
3839
.solution-btn {
3940
@apply py-1 px-3 mb-1 text-lg rounded-full text-white font-bold;
4041
}
4142
.solution-btn:focus {
4243
@apply outline-none;
4344
}
44-
4545
.solution-btn.solution-btn-exact { @apply bg-equalBg; }
4646
.solution-btn.solution-btn-over { @apply bg-positiveBg; }
4747
.solution-btn.solution-btn-under { @apply bg-negativeBg; }
48+
4849
</style>

‎src/components/TicketQuantityRow.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<span class="flex-grow"> {{ ticketQuantity.ticket.value | fixed2 }}</span>
88
</span>
99

10-
<div class="col-end">
10+
<div class="inline-block text-center" style="width: 8rem;">
1111
<button class="btn-square btn-primary align-middle text-xl"
1212
:disabled="buttonsDisabled"
1313
@click="ticketQuantity.sub()">
1414
-
1515
</button>
16-
<span class="input-value inline-block align-middle mx-2 w-12">
16+
<span class="input-value inline-block align-middle w-12">
1717
{{ ticketQuantity.quantity }}
1818
</span>
1919
<button class="btn-square btn-primary align-middle text-xl"
@@ -45,4 +45,8 @@
4545
</script>
4646

4747
<style>
48+
.col-end {
49+
@apply inline-block text-center;
50+
width: 8rem;
51+
}
4852
</style>

‎src/views/About.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<div class="p-5">
2+
<div class="about-page p-5">
33

4-
<h1 class="font-extrabold text-center text-3xl mb-2">Ticket-Calc</h1>
4+
<h1 class="font-extrabold text-center text-3xl my-2">Ticket-Calc</h1>
55

66
<p class="text-sm text-center mb-4">
77
Version {{ version }}
@@ -65,6 +65,9 @@
6565
</script>
6666

6767
<style>
68+
.app-content.about-page {
69+
max-height: calc(100vh - 4.2rem);
70+
}
6871
.made-with {
6972
@apply flex flex-row justify-around px-6;
7073
}

‎src/views/Calc.vue

+41-38
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,65 @@
11
<template>
2-
<div class="container f-col p-3">
2+
<div class="p-3">
33

4-
<div class="f-row items-center justify-between mb-5">
4+
<section class="f-row items-center justify-between">
55
<label for="target" class="inline-block">
66
Target
77
</label>
8-
<input type="number" id="target" min="0" step="0.01" autofocus
9-
class="inline-block w-1/3"
8+
<input type="number" id="target" min="0" max="1000" step="0.01" maxlength="3" autofocus
9+
style="width: 6rem;"
1010
v-model.number.lazy="target" @change="targetChanged($event)"/>
11-
<auto-toggle-button v-model="auto"></auto-toggle-button>
12-
</div>
11+
<div class="inline-block text-center" style="width: 120px;">
12+
<auto-toggle-button class="my-1" v-model="auto"></auto-toggle-button>
13+
<button type="button" class="btn btn-primary clear-btn my-1"
14+
@click="reset()"
15+
:disabled="this.target === null && this.ticketTotal === 0">
16+
Clear
17+
</button>
18+
</div>
19+
</section>
1320

14-
<div class="solution-buttons-container px-5">
21+
<section class="solution-buttons-container pb-1">
1522
<solution-buttons v-if="solutions && auto"
1623
:solutions="solutions"
1724
@select="selectSolution"/>
18-
</div>
19-
20-
<hr>
21-
22-
<div class="f-col">
25+
</section>
2326

27+
<section class="f-col">
2428
<div class="w-full text-center my-3" v-if="ticketQuantities.length === 0">
2529
<router-link to="/settings" class="btn btn-primary-reverse border-2 border-primary">
2630
+ Add tickets
2731
</router-link>
2832
</div>
29-
3033
<ticket-quantity-row v-for="(ticketQuantity, index) in ticketQuantities" :key="index"
3134
:ticket-quantity="ticketQuantity"
3235
:buttons-disabled="calcButtonsDisabled" />
33-
</div>
36+
</section>
3437

35-
<hr>
36-
37-
<div class="f-col">
38+
<section class="f-col">
3839
<div class="f-row mt-2">
3940
<span class="col-start">Ticket total</span>
4041
<div class="col-end-value">
41-
<span class="input-value result-value">{{ ticketTotal | fixed2 }}</span>
42+
<span class="input-value result-value"
43+
:class="{'the-price-is-right': ticketTotal && this.thePriceIsRight}">
44+
{{ ticketTotal | fixed2 }}
45+
</span>
4246
</div>
4347
</div>
44-
<div class="f-row mt-2" :class="{'invisible': !target}">
48+
<div class="f-row mt-2" v-if="target && balance">
4549
<span class="col-start">
4650
{{ balanceLabel }}
4751
</span>
4852
<div class="col-end-value">
49-
<span class="input-value result-value font-semibold" :class="balanceClass">
53+
<span class="input-value result-value font-semibold" :class="{
54+
'the-price-is-right': this.thePriceIsRight,
55+
'has-remaining': this.hasRemaining,
56+
'has-extra': this.hasExtra,
57+
}">
5058
{{ balance | abs | fixed2 }}
5159
</span>
5260
</div>
5361
</div>
54-
</div>
55-
56-
<div class="flex justify-end mt-4 text-base">
57-
<div class="col-end">
58-
<button class="btn btn-primary" type="button"
59-
@click="reset()"
60-
:disabled="this.target === null && this.ticketTotal === 0">
61-
Clear
62-
</button>
63-
</div>
64-
</div>
62+
</section>
6563

6664
</div>
6765
</template>
@@ -88,7 +86,7 @@
8886
},
8987
data() {
9088
return {
91-
target: null,
89+
target: 32,
9290
ticketQuantities: [],
9391
solutions: null,
9492
auto: true,
@@ -155,13 +153,15 @@
155153

156154
<style>
157155
156+
section {
157+
@apply py-2 border-b-2;
158+
}
159+
section:last-child {
160+
@apply border-b-0;
161+
}
158162
.col-start {
159163
@apply flex-grow pl-2;
160164
}
161-
.col-end {
162-
@apply inline-block text-center;
163-
width: 8rem;
164-
}
165165
.col-end-value {
166166
@apply text-right pr-6;
167167
}
@@ -171,8 +171,11 @@
171171
margin-left: -2%;
172172
}
173173
174+
.clear-btn {
175+
width: 115px;
176+
}
174177
.solution-buttons-container {
175-
min-height: 2.5rem; /*min-h-10*/
178+
min-height: 3.4rem;
176179
}
177180
178181
.result-value {
@@ -181,6 +184,6 @@
181184
}
182185
.has-remaining { @apply text-positive; }
183186
.has-extra { @apply text-negative; }
184-
.the-price-is-right { @apply text-equal; }
187+
.the-price-is-right { @apply text-equal font-semibold; }
185188
186189
</style>

‎src/views/Settings.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
2-
<div class="container f-col p-3">
2+
<div class="p-3">
33

4-
<h1 class="text-3xl font-semibold">
4+
<h2 class="text-2xl font-semibold">
55
Tickets
6-
</h1>
6+
</h2>
77

88
<div class="f-col my-3">
99
<ticket-row v-for="(ticket, index) in tickets" :key="index"
10-
:ticket="ticket" :index="index" />
10+
:ticket="ticket" :index="index" />
1111
</div>
1212

13-
<h2 class="mt-8 text-2xl font-semibold">
13+
<h2 class="mt-4 text-xl font-semibold">
1414
Add a ticket
1515
</h2>
1616

0 commit comments

Comments
 (0)