Skip to content

Commit 97be251

Browse files
devmountdevmount
authored
Merge pull request #246 from devmount/bugs/fix-alignment-issues
Fix alignment and style related issues
2 parents 0b02dcd + f1e789c commit 97be251

File tree

11 files changed

+55
-53
lines changed

11 files changed

+55
-53
lines changed

‎frontend/src/App.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,19 @@
2828
<div class="flex flex-col gap-1 mt-1">
2929
<router-link
3030
:to="{ name: 'dashboard' }"
31-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
31+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
3232
@click="open = false"
3333
>
3434
<icon-layout-grid class="w-5 h-5 stroke-1.5" />
35-
<span class="mb-0.5 uppercase">{{ t('page.dashboard') }}</span>
35+
<span class="uppercase">{{ t('page.dashboard') }}</span>
3636
</router-link>
3737
<router-link
3838
:to="{ name: 'songs' }"
39-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
39+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
4040
@click="open = false"
4141
>
4242
<icon-music class="w-5 h-5 stroke-1.5" />
43-
<span class="mb-0.5 uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
43+
<span class="uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
4444
<div class="flex items-center gap-4 ml-auto">
4545
<div v-if="ready.songs" class="font-bold">{{ Object.keys(c.songs).length }}</div>
4646
<secondary-button
@@ -55,11 +55,11 @@
5555
</router-link>
5656
<router-link
5757
:to="{ name: 'setlists' }"
58-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
58+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
5959
@click="open = false"
6060
>
6161
<icon-playlist class="w-5 h-5 stroke-1.5" />
62-
<span class="mb-0.5 uppercase">{{ t('page.setlists', setlistCount) }}</span>
62+
<span class="uppercase">{{ t('page.setlists', setlistCount) }}</span>
6363
<div class="flex items-center gap-4 ml-auto">
6464
<label v-if="ready.setlists" class="font-bold">{{ setlistCount }}</label>
6565
<secondary-button
@@ -75,7 +75,7 @@
7575
<divider-horizontal :label="t('divider.account')" />
7676
<router-link
7777
:to="{ name: 'profile' }"
78-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
78+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
7979
@click="open = false"
8080
>
8181
<avatar :photo-url="c.users[auth.user].photo" :name="userName" size="md" />
@@ -88,11 +88,11 @@
8888
</router-link>
8989
<router-link
9090
:to="{ name: 'settings' }"
91-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
91+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
9292
@click="open = false"
9393
>
9494
<icon-settings class="w-5 h-5 stroke-1.5" />
95-
<span class="mb-0.5 uppercase">{{ t('page.settings') }}</span>
95+
<span class="uppercase">{{ t('page.settings') }}</span>
9696
<indicator-pulse v-if="registrationsExist && userRoles[c.permissions[auth.user].role] > 3" class="ml-auto" />
9797
</router-link>
9898
<secondary-button class="mt-2" @click="signOut">
@@ -102,27 +102,27 @@
102102
<divider-horizontal :label="t('divider.info')" />
103103
<router-link
104104
:to="{ name: 'shortcuts' }"
105-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
105+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
106106
@click="open = false"
107107
>
108108
<icon-bulb class="w-5 h-5 stroke-1.5" />
109-
<span class="mb-0.5 uppercase">{{ t('page.shortcuts') }}</span>
109+
<span class="uppercase">{{ t('page.shortcuts') }}</span>
110110
</router-link>
111111
<router-link
112112
:to="{ name: 'documentation' }"
113-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
113+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
114114
@click="open = false"
115115
>
116116
<icon-book class="w-5 h-5 stroke-1.5" />
117-
<span class="mb-0.5 uppercase">{{ t('page.docu') }}</span>
117+
<span class="uppercase">{{ t('page.docu') }}</span>
118118
</router-link>
119119
<a
120120
href="https://github.com/devmount/SongDrive"
121-
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
121+
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
122122
target="_blank"
123123
>
124124
<icon-brand-github class="w-5 h-5 stroke-1.5" />
125-
<span class="mb-0.5 uppercase">{{ t('page.github') }}</span>
125+
<span class="uppercase">{{ t('page.github') }}</span>
126126
<icon-external-link class="w-5 h-5 ml-auto" />
127127
</a>
128128
</div>

‎frontend/src/assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080

8181
@layer base {
8282
input, select, textarea {
83-
@apply transition-all py-1.5! border-blade-400 dark:border-black focus:ring-4! focus:ring-spring-400/20! hover:border-spring-400! focus:border-spring-600! dark:bg-blade-900! dark:text-blade-100! hover:disabled:border-black!;
83+
@apply transition-all py-1.5! border-blade-400 dark:border-black focus:ring-4! focus:ring-spring-400/20! hover:border-spring-400! focus:border-spring-600! dark:bg-blade-900! dark:disabled:bg-blade-900/50! dark:text-blade-100! hover:disabled:border-black!;
8484
}
8585
button, a {
8686
@apply cursor-pointer transition-all;

‎frontend/src/elements/PrimaryButton.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<button
33
class="
44
text-white py-2 px-3 rounded-sm shadow-m flex justify-center items-center gap-2
5-
hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
5+
hover:shadow-l disabled:opacity-30 disabled:shadow-none
66
"
77
:class="{
8-
'bg-spring-600 dark:bg-spring-700': !type,
9-
'bg-rose-500': type === types.danger
8+
'bg-spring-600 hover:bg-spring-600/75 hover:disabled:bg-spring-600 dark:bg-spring-700 hover:dark:bg-spring-700/75 hover:disabled:dark:bg-spring-700': !type,
9+
'bg-rose-500 hover:bg-rose-500/75 hover:disabled:bg-rose-500': type === types.danger
1010
}"
1111
>
1212
<slot></slot>

‎frontend/src/elements/SecondaryButton.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<button
33
class="
44
py-2 px-3 rounded-sm shadow-md flex justify-center items-center gap-2
5-
hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
5+
hover:shadow-l disabled:opacity-30 disabled:shadow-none
66
"
77
:class="{
8-
'bg-blade-400 text-white dark:bg-blade-700': !type,
9-
'text-rose-600 bg-blade-350 dark:text-rose-500 dark:bg-blade-750': type === types.danger
8+
'bg-blade-400 hover:bg-blade-400/75 hover:disabled:bg-blade-400 text-white dark:bg-blade-700 dark:hover:bg-blade-700/75 dark:hover:disabled:bg-blade-700': !type,
9+
'text-rose-600 bg-blade-350 hover:bg-blade-350/75 hover:disabled:bg-blade-350 dark:text-rose-500 dark:bg-blade-750 dark:hover:bg-blade-750/75 dark:hover:disabled:bg-blade-750': type === types.danger
1010
}"
1111
>
1212
<slot></slot>

‎frontend/src/partials/Logo.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div
3-
class="flex items-center gap-2 font-medium select-none"
3+
class="flex font-medium select-none"
44
:class="{
5-
'flex-col 2xs:flex-row 2xs:items-baseline 2xs:font-normal': featured,
6-
'items-baseline': !featured
5+
'gap-3 flex-col 2xs:flex-row items-center 2xs:items-baseline 2xs:font-normal': featured,
6+
'gap-2 items-baseline': !featured
77
}"
88
>
99
<img
@@ -12,13 +12,13 @@
1212
:class="featured ? 'w-12': 'w-8'"
1313
/>
1414
<div
15-
class="text-spring-600 leading-5 tracking-wide uppercase"
16-
:class="featured ? 'text-2xl 2xs:text-[2.1rem]': 'text-2xl'"
15+
class="text-spring-600 tracking-wide uppercase text-2xl"
16+
:class="{ '2xs:text-4xl': featured }"
1717
>
1818
{{ t('app.name') }}
1919
</div>
2020
</div>
21-
<div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mt-1 mr-0.5">
21+
<div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mr-0.5">
2222
{{ version }}
2323
</div>
2424
</template>

‎frontend/src/views/Dashboard.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<div class="text-4xl sm:text-6xl font-thin">
77
{{ Object.keys(songs).length }}
88
</div>
9-
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
10-
<icon-music class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
9+
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
10+
<icon-music class="shrink-0 w-5 h-5 stroke-1.5" />
1111
{{ t('widget.songsStored') }}
1212
</div>
1313
</div>
@@ -16,8 +16,8 @@
1616
<div class="text-4xl sm:text-6xl font-thin">
1717
{{ setlistCount }}
1818
</div>
19-
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
20-
<icon-playlist class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
19+
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
20+
<icon-playlist class="shrink-0 w-5 h-5 stroke-1.5" />
2121
{{ t('widget.publicSetlists') }}
2222
</div>
2323
</div>
@@ -26,8 +26,8 @@
2626
<div class="text-4xl sm:text-6xl font-thin">
2727
<span class="text-blade-500">~</span>{{ songsPerformed }}
2828
</div>
29-
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
30-
<icon-microphone class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
29+
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
30+
<icon-microphone class="shrink-0 w-5 h-5 stroke-1.5" />
3131
{{ t('widget.songsPerformed') }}
3232
</div>
3333
</div>
@@ -36,8 +36,8 @@
3636
<div class="text-4xl sm:text-6xl font-thin">
3737
{{ languagesUsed }}
3838
</div>
39-
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
40-
<icon-world class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
39+
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
40+
<icon-world class="shrink-0 w-5 h-5 stroke-1.5" />
4141
{{ t('widget.languages', languagesUsed) }}
4242
</div>
4343
</div>
@@ -139,7 +139,7 @@ const songsArray = computed(() => {
139139
// true if song data collection is empty
140140
const noSongs = computed(() => props.ready.songs && songsArray.value.length == 0);
141141
142-
// total number of song languages
142+
// total number of song languages
143143
const languagesUsed = computed(() => {
144144
let languages = [];
145145
songsArray.value.forEach(song => {

‎frontend/src/views/SetlistShow.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@
324324
</td>
325325
</template>
326326
<template v-else>
327-
<td colspan="2" class="px-3 py-2 max-w-0">
327+
<td colspan="3" class="px-3 py-2 max-w-0">
328328
<div class="truncate">
329329
<span class="text-rose-600">{{ t('toast.songDeleted') }}</span>
330330
<span class="text-blade-500 font-mono text-sm ml-3">{{ element.id }}</span>
@@ -362,7 +362,8 @@
362362
</dropdown>
363363
<secondary-button
364364
v-else
365-
class="flex items-center text-rose-600! hover:bg-opacity-80"
365+
class="flex items-center"
366+
type="danger"
366367
@click.prevent="removeSong(element.id)"
367368
>
368369
<icon-trash class="w-5 h-5" />

‎frontend/src/views/Settings.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,21 +174,21 @@
174174
</div>
175175
<a
176176
:href="'mailto:' + u.email + '?' + confirmationMail(u.name)"
177-
class="flex items-center text-spring-600 hover:bg-opacity-80"
177+
class="flex items-center text-spring-600 hover:opacity-80"
178178
:title="t('tooltip.sendConfirmationMail')"
179179
>
180180
<icon-mail class="w-5 h-5 stroke-1.5" />
181181
</a>
182182
<button
183-
class="flex items-center text-spring-600 hover:bg-opacity-80"
183+
class="flex items-center text-spring-600 hover:opacity-80"
184184
:title="t('modal.editUser')"
185185
@click.prevent="editUser(u)"
186186
>
187187
<icon-edit class="w-5 h-5 stroke-1.5" />
188188
</button>
189189
<button
190190
v-if="numberOfUsers > 1"
191-
class="flex items-center text-rose-600 hover:bg-opacity-80"
191+
class="flex items-center text-rose-600 hover:opacity-80"
192192
:title="t('modal.deleteUser')"
193193
@click.prevent="active.user=u; active.key=u.id; active.approved=true; modal.userdelete=true"
194194
>
@@ -221,14 +221,14 @@
221221
{{ t('role.unconfirmed') }}
222222
</div>
223223
<button
224-
class="flex items-center text-spring-600 hover:bg-opacity-80"
224+
class="flex items-center text-spring-600 hover:opacity-80"
225225
:title="t('tooltip.approveUser')"
226226
@click.prevent="addRegistration(r, k)"
227227
>
228228
<icon-user-plus class="w-5 h-5 stroke-1.5" />
229229
</button>
230230
<button
231-
class="flex items-center text-rose-600 hover:bg-opacity-80"
231+
class="flex items-center text-rose-600 hover:opacity-80"
232232
:title="t('modal.deleteUser')"
233233
@click.prevent="active.user=r; active.key=k; active.approved=false; modal.userdelete=true"
234234
>
@@ -268,14 +268,14 @@
268268
<div class="truncate">{{ l.label }}</div>
269269
</div>
270270
<button
271-
class="flex items-center text-spring-600 hover:bg-opacity-80"
271+
class="flex items-center text-spring-600 hover:opacity-80"
272272
:title="t('modal.editLanguage')"
273273
@click="active.language=l; active.key=key; active.existing=true; modal.languageset=true"
274274
>
275275
<icon-edit class="w-5 h-5 stroke-1.5" />
276276
</button>
277277
<button
278-
class="flex items-center text-rose-600 hover:bg-opacity-80"
278+
class="flex items-center text-rose-600 hover:opacity-80"
279279
:title="t('modal.deleteLanguage')"
280280
@click="active.language=l; active.key=key; modal.languagedelete=true;"
281281
>

‎frontend/src/views/SongShow.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,6 @@ import {
327327
328328
// component constants
329329
const { t, availableLocales } = useI18n();
330-
console.log(availableLocales);
331330
332331
const route = useRoute();
333332
const router = useRouter();

‎frontend/src/widgets/WidgetSetlistList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<div class="flex flex-col overflow-hidden">
3838
<div class="-mt-1 flex gap-1 items-center">
3939
<div class="truncate">{{ setlist.title }}</div>
40-
<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600 mt-1" />
40+
<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600" />
4141
</div>
4242
<div class="text-sm text-blade-500 -mt-1 truncate">{{ humanDate(setlist.date, locale) }}</div>
4343
</div>

0 commit comments

Comments
 (0)