potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

customized EventCard; no rounded edges, adjusted box shadow, colored spans

Browse source
This commit is contained in:
xcexec 2024-10-19 11:38:51 +02:00
parent 7ec511a43a
commit 51c7bcba74
5 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/tailwind.css
View file

@ -24,7 +24,7 @@
@layer components { @layer components {
.mbz-card { .mbz-card {
@apply block bg-white hover:bg-white text-black-title dark:text-white dark:hover:text-white rounded-lg dark:border-black-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white; @apply block bg-white hover:bg-white text-black-title shadow-eventcard dark:text-white dark:hover:text-white dark:border-black-title dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-800 dark:text-white dark:hover:text-white;
} }
} }

9
src/components/Event/EventCard.vue
View file

@ -9,7 +9,7 @@
:isInternal="isInternal" :isInternal="isInternal"
> >
<div <div
class="rounded-lg" class=""
:class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }" :class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
> >
<figure class="block relative pt-40"> <figure class="block relative pt-40">
@ -69,13 +69,13 @@
/> />
</div> </div>
<span <span
class="text-gray-700 dark:text-white font-semibold hidden" class="text-black dark:text-white font-semibold hidden"
:class="{ 'sm:block': mode === 'row' }" :class="{ 'sm:block': mode === 'row' }"
>{{ formatDateTimeWithCurrentLocale }}</span >{{ formatDateTimeWithCurrentLocale }}</span
> >
<div class="w-full flex flex-col justify-between h-full"> <div class="w-full flex flex-col justify-between h-full">
<h2 <h2
class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-black-title dark:text-white"
dir="auto" dir="auto"
:lang="event.language" :lang="event.language"
> >
@ -83,7 +83,7 @@
</h2> </h2>
<div class=""> <div class="">
<div <div
class="flex items-center text-violet-3 dark:text-white" class="flex items-center text-black bg-fomo-card-1"
dir="auto" dir="auto"
> >
<figure class="" v-if="actorAvatarURL"> <figure class="" v-if="actorAvatarURL">
@ -102,6 +102,7 @@
</span> </span>
</div> </div>
<inline-address <inline-address
class="bg-fomo-card-2 text-black"
v-if="event.physicalAddress" v-if="event.physicalAddress"
:physical-address="event.physicalAddress" :physical-address="event.physicalAddress"
/> />

2
src/components/Image/LazyImage.vue
View file

@ -13,7 +13,7 @@
<!-- Show the real image on the top and fade in after loading --> <!-- Show the real image on the top and fade in after loading -->
<img <img
ref="image" ref="image"
class="transition-opacity duration-500 rounded-lg object-cover h-full w-full" class="transition-opacity duration-500 object-cover h-full w-full"
:class="imageOpacity" :class="imageOpacity"
alt="" alt=""
src="" src=""

2
src/components/Local/CloseContent.vue
View file

@ -27,7 +27,7 @@
<span class="">&lt;</span> <span class="">&lt;</span>
</button> </button>
</div> --> </div> -->
<div class="overflow-hidden"> <div class="">
<div <div
class="multi-card-event" class="multi-card-event"
> >

3
tailwind.config.cjs
View file

@ -3,6 +3,9 @@ module.exports = {
darkMode: "class", darkMode: "class",
theme: { theme: {
extend: { extend: {
boxShadow: {
"eventcard": "0 2px 13px -5px rgba(0, 0, 0, 1)",
},
colors: { colors: {
primary: "#1e7d97", primary: "#1e7d97",
secondary: "#ffd599", secondary: "#ffd599",