Skip to content

Commit 2f5f152

Browse files
JanisVJanisV
committed
Fix style for Vuetify 4
1 parent 154009a commit 2f5f152

3 files changed

Lines changed: 140 additions & 55 deletions

File tree

‎frontend/src/assets/base.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@
4747
*::after {
4848
box-sizing: border-box;
4949
margin: 0;
50-
font-weight: normal;
5150
}
5251

5352
body {

‎frontend/src/assets/main.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
max-width: 1280px;
55
margin: 0 auto;
66
padding: 2rem;
7-
font-weight: normal;
87
}
98

109
a,

‎frontend/src/components/CoinView.vue‎

Lines changed: 140 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ onUnmounted(async () => {
3333
</script>
3434

3535
<template>
36-
<v-container>
37-
<v-row>
38-
<div class="text-h5">{{ coinData[0] }}</div>
36+
<v-container class="pa-1">
37+
<v-row density="compact">
38+
<div class="text-headline-small pb-1">{{ coinData[0] }}</div>
3939
</v-row>
40-
<v-row>
40+
<v-row density="compact" class="photos">
4141
<v-img :src="arrayBufferToBase64(coinData[service.infoFieldIndex('obverseimg.image')])"
4242
width="150"
4343
@click="router.push('/images/' + route.params['id'])" />
@@ -52,108 +52,188 @@ onUnmounted(async () => {
5252
<v-row density="compact">
5353
<v-col cols="12" md="6">
5454
<v-row density="compact">
55-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['status'] }}</dt>
56-
<dd class="v-col-sm-9">
55+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
56+
{{ settings.fields['status'] }}
57+
</v-col>
58+
<v-col tag="dd" cols="12" sm="9">
5759
<StatusItem :status="coinData[service.infoFieldIndex('status')]" :statuses="settings.statuses" statusPresentation="icon_text" class="font-weight-bold" />
58-
</dd>
60+
</v-col>
5961
<template v-if="coinData[service.infoFieldIndex('region')]">
60-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['region'] }}</dt>
61-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('region')] }}</dd>
62+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
63+
{{ settings.fields['region'] }}
64+
</v-col>
65+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
66+
{{ coinData[service.infoFieldIndex('region')] }}
67+
</v-col>
6268
</template>
6369
<template v-if="coinData[service.infoFieldIndex('country')]">
64-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['country'] }}</dt>
65-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('country')] }}</dd>
70+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
71+
{{ settings.fields['country'] }}
72+
</v-col>
73+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
74+
{{ coinData[service.infoFieldIndex('country')] }}
75+
</v-col>
6676
</template>
6777
<template v-if="coinData[service.infoFieldIndex('period')]">
68-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['period'] }}</dt>
69-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('period')] }}</dd>
78+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
79+
{{ settings.fields['period'] }}
80+
</v-col>
81+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
82+
{{ coinData[service.infoFieldIndex('period')] }}
83+
</v-col>
7084
</template>
7185
<template v-if="coinData[service.infoFieldIndex('ruler')]">
72-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['ruler'] }}</dt>
73-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('ruler')] }}</dd>
86+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
87+
{{ settings.fields['ruler'] }}
88+
</v-col>
89+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
90+
{{ coinData[service.infoFieldIndex('ruler')] }}
91+
</v-col>
7492
</template>
7593
<template v-if="coinData[service.infoFieldIndex('value')] || coinData[service.infoFieldIndex('unit')]">
76-
<dt class="v-col-sm-3 text-medium-emphasis">{{ i18n.global.t('Denomination') }}</dt>
77-
<dd class="v-col-sm-9 font-weight-bold">
94+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
95+
{{ i18n.global.t('Denomination') }}
96+
</v-col>
97+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
7898
{{ convertFraction(props.settings.convert_fraction, coinData[service.infoFieldIndex('value')]) }}
7999
{{ coinData[service.infoFieldIndex('unit')] }}
80-
</dd>
100+
</v-col>
81101
</template>
82102
<template v-if="coinData[service.infoFieldIndex('type')]">
83-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['type'] }}</dt>
84-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('type')] }}</dd>
103+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
104+
{{ settings.fields['type'] }}
105+
</v-col>
106+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
107+
{{ coinData[service.infoFieldIndex('type')] }}
108+
</v-col>
85109
</template>
86110
<template v-if="coinData[service.infoFieldIndex('series')]">
87-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['series'] }}</dt>
88-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('series')] }}</dd>
111+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
112+
{{ settings.fields['series'] }}
113+
</v-col>
114+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
115+
{{ coinData[service.infoFieldIndex('series')] }}
116+
</v-col>
89117
</template>
90118
<template v-if="coinData[service.infoFieldIndex('subjectshort')]">
91-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['subjectshort'] }}</dt>
92-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('subjectshort')] }}</dd>
119+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
120+
{{ settings.fields['subjectshort'] }}
121+
</v-col>
122+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
123+
{{ coinData[service.infoFieldIndex('subjectshort')] }}
124+
</v-col>
93125
</template>
94126

95127
<template v-if="coinData[service.infoFieldIndex('issuedate')]">
96-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['issuedate'] }}</dt>
97-
<dd class="v-col-sm-9 font-weight-bold">{{ i18n.global.d(coinData[service.infoFieldIndex('issuedate')]) }}</dd>
128+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
129+
{{ settings.fields['issuedate'] }}
130+
</v-col>
131+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
132+
{{ coinData[service.infoFieldIndex('issuedate')] }}
133+
</v-col>
98134
</template>
99135
<template v-else-if="coinData[service.infoFieldIndex('year')]">
100-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['year'] }}</dt>
101-
<dd class="v-col-sm-9 font-weight-bold">
136+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
137+
{{ settings.fields['year'] }}
138+
</v-col>
139+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
102140
{{ formatYear(props.settings.enable_bc, coinData[service.infoFieldIndex('year')]) }}
103-
</dd>
141+
</v-col>
104142
</template>
105143

106144
<template v-if="coinData[service.infoFieldIndex('mintage')]">
107-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['mintage'] }}</dt>
108-
<dd class="v-col-sm-9 font-weight-bold">{{ i18n.global.n(coinData[service.infoFieldIndex('mintage')]) }}</dd>
145+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
146+
{{ settings.fields['mintage'] }}
147+
</v-col>
148+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
149+
{{ coinData[service.infoFieldIndex('mintage')] }}
150+
</v-col>
109151
</template>
110152
<template v-if="coinData[service.infoFieldIndex('material')]">
111-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['material'] }}</dt>
112-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('material')] }}</dd>
153+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
154+
{{ settings.fields['material'] }}
155+
</v-col>
156+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
157+
{{ coinData[service.infoFieldIndex('material')] }}
158+
</v-col>
113159
</template>
114160

115161
<template v-if="coinData[service.infoFieldIndex('mint')] && coinData[service.infoFieldIndex('mintmark')]">
116-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['mint'] }}</dt>
117-
<dd class="v-col-sm-9 font-weight-bold">
162+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
163+
{{ settings.fields['mint'] }}
164+
</v-col>
165+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
118166
{{ coinData[service.infoFieldIndex('mint')] }} ({{ coinData[service.infoFieldIndex('mintmark')] }})
119-
</dd>
167+
</v-col>
120168
</template>
121169
<template v-else-if="coinData[service.infoFieldIndex('mint')]">
122-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['mint'] }}</dt>
123-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('mint')] }}</dd>
170+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
171+
{{ settings.fields['mint'] }}
172+
</v-col>
173+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
174+
{{ coinData[service.infoFieldIndex('mint')] }}
175+
</v-col>
124176
</template>
125177
<template v-else-if="coinData[service.infoFieldIndex('mintmark')]">
126-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['mintmark'] }}</dt>
127-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('mintmark')] }}</dd>
178+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
179+
{{ settings.fields['mintmark'] }}
180+
</v-col>
181+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
182+
{{ coinData[service.infoFieldIndex('mintmark')] }}
183+
</v-col>
128184
</template>
129185
</v-row>
130186
</v-col>
131187

132188
<v-col cols="12" md="6">
133189
<v-row density="compact">
134190
<template v-if="coinData[service.infoFieldIndex('grade')]">
135-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['grade'] }}</dt>
136-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('grade')] }}</dd>
191+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
192+
{{ settings.fields['grade'] }}
193+
</v-col>
194+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
195+
{{ coinData[service.infoFieldIndex('grade')] }}
196+
</v-col>
137197
</template>
138198
<template v-if="coinData[service.infoFieldIndex('paydate')]">
139-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['paydate'] }}</dt>
140-
<dd class="v-col-sm-9 font-weight-bold">{{ i18n.global.d(coinData[service.infoFieldIndex('paydate')]) }}</dd>
199+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
200+
{{ settings.fields['paydate'] }}
201+
</v-col>
202+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
203+
{{ coinData[service.infoFieldIndex('paydate')] }}
204+
</v-col>
141205
</template>
142206
<template v-if="coinData[service.infoFieldIndex('payprice')]">
143-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['payprice'] }}</dt>
144-
<dd class="v-col-sm-9 font-weight-bold">{{ i18n.global.n(coinData[service.infoFieldIndex('payprice')]) }}</dd>
207+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
208+
{{ settings.fields['payprice'] }}
209+
</v-col>
210+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
211+
{{ coinData[service.infoFieldIndex('payprice')] }}
212+
</v-col>
145213
</template>
146214
<template v-if="coinData[service.infoFieldIndex('storage')]">
147-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['storage'] }}</dt>
148-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('storage')] }}</dd>
215+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
216+
{{ settings.fields['storage'] }}
217+
</v-col>
218+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
219+
{{ coinData[service.infoFieldIndex('storage')] }}
220+
</v-col>
149221
</template>
150222
<template v-if="coinData[service.infoFieldIndex('condition')]">
151-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['condition'] }}</dt>
152-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('condition')] }}</dd>
223+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
224+
{{ settings.fields['condition'] }}
225+
</v-col>
226+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
227+
{{ coinData[service.infoFieldIndex('condition')] }}
228+
</v-col>
153229
</template>
154230
<template v-if="coinData[service.infoFieldIndex('quantity')]">
155-
<dt class="v-col-sm-3 text-medium-emphasis">{{ settings.fields['quantity'] }}</dt>
156-
<dd class="v-col-sm-9 font-weight-bold">{{ coinData[service.infoFieldIndex('quantity')] }}</dd>
231+
<v-col tag="dt" cols="12" sm="3" class="text-medium-emphasis">
232+
{{ settings.fields['quantity'] }}
233+
</v-col>
234+
<v-col tag="dd" cols="12" sm="9" class="font-weight-bold">
235+
{{ coinData[service.infoFieldIndex('quantity')] }}
236+
</v-col>
157237
</template>
158238
</v-row>
159239
</v-col>
@@ -168,5 +248,12 @@ onUnmounted(async () => {
168248
</template>
169249

170250
<style scoped>
171-
251+
.v-row--density-compact {
252+
--v-col-gap-x: 8px;
253+
--v-col-gap-y: 0px;
254+
}
255+
.photos {
256+
--v-col-gap-x: 4px;
257+
--v-col-gap-y: 4px;
258+
}
172259
</style>

0 commit comments

Comments
 (0)