add responsiveness for the dashboard and menu

This commit is contained in:
Gregor Vostrak
2024-04-13 02:12:57 +02:00
parent 528865fc1c
commit 335a057ba1
12 changed files with 80 additions and 46 deletions

View File

@@ -20,7 +20,7 @@ const props = withDefaults(
const badgeClasses = {
base: 'py-1 px-2 space-x-1.5 text-xs',
large: 'py-1.5 px-3 space-x-2 text-sm text-muted',
large: 'py-1 sm:py-1.5 px-2 sm:px-3 space-x-1.5 sm:space-x-2 text-xs sm:text-sm text-muted',
};
const borderClasses = computed(() => {

View File

@@ -21,11 +21,11 @@ const iconColorClasses = computed(() => {
:class="
twMerge(
iconColorClasses,
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
)
">
<svg
class="h-7"
class="w-5 sm:w-7 h-5 sm:h-7"
viewBox="0 0 8 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">

View File

@@ -21,7 +21,7 @@ const props = withDefaults(
const indicatorClasses = {
base: 'w-2.5 h-2.5',
large: 'w-3 h-3',
large: 'w-2 sm:w-3 h-2 sm:h-3',
};
</script>

View File

@@ -25,10 +25,10 @@ const iconColorClasses = computed(() => {
:class="
twMerge(
iconColorClasses,
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-11 h-11 flex items-center justify-center'
'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
)
">
<TagIcon class="w-7 h-7"></TagIcon>
<TagIcon class="w-5 sm:w-7 h-5 sm:h-7"></TagIcon>
<span
v-if="model.length > 1"
class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">

View File

@@ -16,11 +16,11 @@ const props = withDefaults(
);
const buttonSizeClasses = {
base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-8 hover:scale-110',
large: 'w-8 sm:w-11 h-8 sm:h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
};
const iconClass = {
base: 'w-3.5 h-3.5',
large: 'w-4 h-4',
large: 'w-3.5 h-3.5 sm:w-4 sm:h-4',
};
const buttonColorClasses = computed(() => {