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 {
.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"
>
<div
class="rounded-lg"
class=""
:class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
>
<figure class="block relative pt-40">
@ -69,13 +69,13 @@
/>
</div>
<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' }"
>{{ formatDateTimeWithCurrentLocale }}</span
>
<div class="w-full flex flex-col justify-between h-full">
<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"
:lang="event.language"
>
@ -83,7 +83,7 @@
</h2>
<div class="">
<div
class="flex items-center text-violet-3 dark:text-white"
class="flex items-center text-black bg-fomo-card-1"
dir="auto"
>
<figure class="" v-if="actorAvatarURL">
@ -102,6 +102,7 @@
</span>
</div>
<inline-address
class="bg-fomo-card-2 text-black"
v-if="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 -->
<img
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"
alt=""
src=""

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

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

3
tailwind.config.cjs
View file

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