Skip to content

Fix alignment and style related issues #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devmount merged 7 commits into from
Mar 25, 2025
Merged

Fix alignment and style related issues #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
03383f5
💚 Realign logo word mark
devmount Mar 25, 2025
464d16c
💚 Recenter flex items
devmount Mar 25, 2025
2f76587
💚 Make nav items more touch friendly
devmount Mar 25, 2025
8547a6f
🔨 Replace deprecated bg-opacity class
devmount Mar 25, 2025
90815d6
💚 Improve input disabled style
devmount Mar 25, 2025
3857111
🔨 Handle deleted song
devmount Mar 25, 2025
f1e789c
❌ Remove console statement
devmount Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,19 @@
<div class="flex flex-col gap-1 mt-1">
<router-link
:to="{ name: 'dashboard' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-layout-grid class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.dashboard') }}</span>
<span class="uppercase">{{ t('page.dashboard') }}</span>
</router-link>
<router-link
:to="{ name: 'songs' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-music class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
<span class="uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
<div class="flex items-center gap-4 ml-auto">
<div v-if="ready.songs" class="font-bold">{{ Object.keys(c.songs).length }}</div>
<secondary-button
Expand All @@ -55,11 +55,11 @@
</router-link>
<router-link
:to="{ name: 'setlists' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-playlist class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.setlists', setlistCount) }}</span>
<span class="uppercase">{{ t('page.setlists', setlistCount) }}</span>
<div class="flex items-center gap-4 ml-auto">
<label v-if="ready.setlists" class="font-bold">{{ setlistCount }}</label>
<secondary-button
Expand All @@ -75,7 +75,7 @@
<divider-horizontal :label="t('divider.account')" />
<router-link
:to="{ name: 'profile' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<avatar :photo-url="c.users[auth.user].photo" :name="userName" size="md" />
Expand All @@ -88,11 +88,11 @@
</router-link>
<router-link
:to="{ name: 'settings' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-settings class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.settings') }}</span>
<span class="uppercase">{{ t('page.settings') }}</span>
<indicator-pulse v-if="registrationsExist && userRoles[c.permissions[auth.user].role] > 3" class="ml-auto" />
</router-link>
<secondary-button class="mt-2" @click="signOut">
Expand All @@ -102,27 +102,27 @@
<divider-horizontal :label="t('divider.info')" />
<router-link
:to="{ name: 'shortcuts' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-bulb class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.shortcuts') }}</span>
<span class="uppercase">{{ t('page.shortcuts') }}</span>
</router-link>
<router-link
:to="{ name: 'documentation' }"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
@click="open = false"
>
<icon-book class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.docu') }}</span>
<span class="uppercase">{{ t('page.docu') }}</span>
</router-link>
<a
href="https://github.com/devmount/SongDrive"
class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
target="_blank"
>
<icon-brand-github class="w-5 h-5 stroke-1.5" />
<span class="mb-0.5 uppercase">{{ t('page.github') }}</span>
<span class="uppercase">{{ t('page.github') }}</span>
<icon-external-link class="w-5 h-5 ml-auto" />
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

@layer base {
input, select, textarea {
@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!;
@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!;
}
button, a {
@apply cursor-pointer transition-all;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/elements/PrimaryButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<button
class="
text-white py-2 px-3 rounded-sm shadow-m flex justify-center items-center gap-2
hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
hover:shadow-l disabled:opacity-30 disabled:shadow-none
"
:class="{
'bg-spring-600 dark:bg-spring-700': !type,
'bg-rose-500': type === types.danger
'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,
'bg-rose-500 hover:bg-rose-500/75 hover:disabled:bg-rose-500': type === types.danger
}"
>
<slot></slot>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/elements/SecondaryButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<button
class="
py-2 px-3 rounded-sm shadow-md flex justify-center items-center gap-2
hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
hover:shadow-l disabled:opacity-30 disabled:shadow-none
"
:class="{
'bg-blade-400 text-white dark:bg-blade-700': !type,
'text-rose-600 bg-blade-350 dark:text-rose-500 dark:bg-blade-750': type === types.danger
'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,
'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
}"
>
<slot></slot>
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/partials/Logo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div
class="flex items-center gap-2 font-medium select-none"
class="flex font-medium select-none"
:class="{
'flex-col 2xs:flex-row 2xs:items-baseline 2xs:font-normal': featured,
'items-baseline': !featured
'gap-3 flex-col 2xs:flex-row items-center 2xs:items-baseline 2xs:font-normal': featured,
'gap-2 items-baseline': !featured
}"
>
<img
Expand All @@ -12,13 +12,13 @@
:class="featured ? 'w-12': 'w-8'"
/>
<div
class="text-spring-600 leading-5 tracking-wide uppercase"
:class="featured ? 'text-2xl 2xs:text-[2.1rem]': 'text-2xl'"
class="text-spring-600 tracking-wide uppercase text-2xl"
:class="{ '2xs:text-4xl': featured }"
>
{{ t('app.name') }}
</div>
</div>
<div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mt-1 mr-0.5">
<div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mr-0.5">
{{ version }}
</div>
</template>
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/views/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<div class="text-4xl sm:text-6xl font-thin">
{{ Object.keys(songs).length }}
</div>
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
<icon-music class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
<icon-music class="shrink-0 w-5 h-5 stroke-1.5" />
{{ t('widget.songsStored') }}
</div>
</div>
Expand All @@ -16,8 +16,8 @@
<div class="text-4xl sm:text-6xl font-thin">
{{ setlistCount }}
</div>
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
<icon-playlist class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
<icon-playlist class="shrink-0 w-5 h-5 stroke-1.5" />
{{ t('widget.publicSetlists') }}
</div>
</div>
Expand All @@ -26,8 +26,8 @@
<div class="text-4xl sm:text-6xl font-thin">
<span class="text-blade-500">~</span>{{ songsPerformed }}
</div>
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
<icon-microphone class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
<icon-microphone class="shrink-0 w-5 h-5 stroke-1.5" />
{{ t('widget.songsPerformed') }}
</div>
</div>
Expand All @@ -36,8 +36,8 @@
<div class="text-4xl sm:text-6xl font-thin">
{{ languagesUsed }}
</div>
<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
<icon-world class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
<icon-world class="shrink-0 w-5 h-5 stroke-1.5" />
{{ t('widget.languages', languagesUsed) }}
</div>
</div>
Expand Down Expand Up @@ -139,7 +139,7 @@ const songsArray = computed(() => {
// true if song data collection is empty
const noSongs = computed(() => props.ready.songs && songsArray.value.length == 0);

// total number of song languages
// total number of song languages
const languagesUsed = computed(() => {
let languages = [];
songsArray.value.forEach(song => {
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/views/SetlistShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@
</td>
</template>
<template v-else>
<td colspan="2" class="px-3 py-2 max-w-0">
<td colspan="3" class="px-3 py-2 max-w-0">
<div class="truncate">
<span class="text-rose-600">{{ t('toast.songDeleted') }}</span>
<span class="text-blade-500 font-mono text-sm ml-3">{{ element.id }}</span>
Expand Down Expand Up @@ -362,7 +362,8 @@
</dropdown>
<secondary-button
v-else
class="flex items-center text-rose-600! hover:bg-opacity-80"
class="flex items-center"
type="danger"
@click.prevent="removeSong(element.id)"
>
<icon-trash class="w-5 h-5" />
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/views/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,21 +174,21 @@
</div>
<a
:href="'mailto:' + u.email + '?' + confirmationMail(u.name)"
class="flex items-center text-spring-600 hover:bg-opacity-80"
class="flex items-center text-spring-600 hover:opacity-80"
:title="t('tooltip.sendConfirmationMail')"
>
<icon-mail class="w-5 h-5 stroke-1.5" />
</a>
<button
class="flex items-center text-spring-600 hover:bg-opacity-80"
class="flex items-center text-spring-600 hover:opacity-80"
:title="t('modal.editUser')"
@click.prevent="editUser(u)"
>
<icon-edit class="w-5 h-5 stroke-1.5" />
</button>
<button
v-if="numberOfUsers > 1"
class="flex items-center text-rose-600 hover:bg-opacity-80"
class="flex items-center text-rose-600 hover:opacity-80"
:title="t('modal.deleteUser')"
@click.prevent="active.user=u; active.key=u.id; active.approved=true; modal.userdelete=true"
>
Expand Down Expand Up @@ -221,14 +221,14 @@
{{ t('role.unconfirmed') }}
</div>
<button
class="flex items-center text-spring-600 hover:bg-opacity-80"
class="flex items-center text-spring-600 hover:opacity-80"
:title="t('tooltip.approveUser')"
@click.prevent="addRegistration(r, k)"
>
<icon-user-plus class="w-5 h-5 stroke-1.5" />
</button>
<button
class="flex items-center text-rose-600 hover:bg-opacity-80"
class="flex items-center text-rose-600 hover:opacity-80"
:title="t('modal.deleteUser')"
@click.prevent="active.user=r; active.key=k; active.approved=false; modal.userdelete=true"
>
Expand Down Expand Up @@ -268,14 +268,14 @@
<div class="truncate">{{ l.label }}</div>
</div>
<button
class="flex items-center text-spring-600 hover:bg-opacity-80"
class="flex items-center text-spring-600 hover:opacity-80"
:title="t('modal.editLanguage')"
@click="active.language=l; active.key=key; active.existing=true; modal.languageset=true"
>
<icon-edit class="w-5 h-5 stroke-1.5" />
</button>
<button
class="flex items-center text-rose-600 hover:bg-opacity-80"
class="flex items-center text-rose-600 hover:opacity-80"
:title="t('modal.deleteLanguage')"
@click="active.language=l; active.key=key; modal.languagedelete=true;"
>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/views/SongShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,6 @@ import {

// component constants
const { t, availableLocales } = useI18n();
console.log(availableLocales);

const route = useRoute();
const router = useRouter();
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/widgets/WidgetSetlistList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<div class="flex flex-col overflow-hidden">
<div class="-mt-1 flex gap-1 items-center">
<div class="truncate">{{ setlist.title }}</div>
<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600 mt-1" />
<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600" />
</div>
<div class="text-sm text-blade-500 -mt-1 truncate">{{ humanDate(setlist.date, locale) }}</div>
</div>
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/widgets/WidgetSongOfYear.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const props = defineProps({
});

// list data
const page = ref(0);
const page = ref(0);
const listLength = 7;

// build song of year list
Expand All @@ -93,10 +93,12 @@ const songOfYear = computed(() => {
list[year] = {};
}
setlist.songs.forEach(song => {
if (!list[year].hasOwnProperty(song.id)) {
list[year][song.id] = 1;
} else {
list[year][song.id]++;
if (props.songs.hasOwnProperty(song.id)) {
if (!list[year].hasOwnProperty(song.id)) {
list[year][song.id] = 1;
} else {
list[year][song.id]++;
}
}
});
}
Expand Down