Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.

Responsive UI Adjustments #82

Open
jowelyn-hornilla wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Responsive UI Adjustments #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/components/CardValue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ defineProps<Props>();
</script>

<template>
<div class="bg-white dark:bg-base100 shadow-md rounded-lg p-4 h-auto md:h-fit xl:!h-[95px] flex gap-2 flex-col xl:!flex-row">
<div class="bg-white dark:bg-base100 shadow-md rounded-lg p-4 h-auto md:h-full xl:!h-[95px] flex gap-2 flex-col xl:!flex-row">
<div
class="linear-gradient-tl-to-br-bg flex items-center justify-center aspect-square linear-gradient-tl-to-br-bg rounded h-12 w-12 xl:!h-full xl:!w-fit aspect-square">
<Icon :icon="icon" class="text-3xl text-white" />
</div>
<div class="h-full flex flex-col md:justify-between flex-nowrap min-w-[0px]">
<div class="h-full flex flex-col md:!justify-start flex-nowrap min-w-[0px]">
<div class="text-gray-400 font-semibold w-full truncate">{{ title }}</div>
<div class="flex flex-col md:!flex-row md:items-center md:gap-2 ">
<div class="font-bold text-2xl truncate">{{ value }}</div>
Expand Down
4 changes: 2 additions & 2 deletions src/modules/competition/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const isDarkMode = computed(() => baseStore.theme === 'dark');
<img class="absolute bottom-0 opacity-50" :src="pillars" />
<img class="absolute -bottom-[65px] w-[80%] left-0 right-0 mx-auto" :src="laptop" />

<div class="absolute bottom-0 px-6 py-4 rounded-xl ml-[16%] border border-white/20 backdrop-blur-sm">
<div class="absolute md:bottom-0 bottom-48 px-6 py-4 rounded-xl ml-[16%] border border-white/20 backdrop-blur-sm">
<div class="relative space-y-2">
<div class="text-2xl font-semibold text-white mr-12">All in with</div>
<div><img :src="kiiExLogo" /></div>
Expand All @@ -183,7 +183,7 @@ const isDarkMode = computed(() => baseStore.theme === 'dark');
</div>

<div
class="absolute overflow-hidden bottom-2 px-6 py-4 rounded-xl right-[16%] border border-white/20 backdrop-blur-sm">
class="absolute overflow-hidden bottom-24 md:bottom-2 px-6 py-4 rounded-xl right-[16%] border border-white/20 backdrop-blur-sm">
<div class="relative space-y-2">
<div class="text-xl font-semibold text-white ml-12 text-right">
<div v-for="text in ['Scalability', 'Connectivity', 'Simplicity']" class="flex gap-2 items-center">
Expand Down