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

added fomo background w/ text-alignment; changed darkmode navbar to black

Browse source
This commit is contained in:
xcexec 2024-10-18 15:17:02 +02:00
parent 7e5b3ca346
commit f017a533bb
7 changed files with 75 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -24,7 +24,7 @@
</div>
<ErrorComponent v-if="error" :error="error" />
<main id="main" class="px-2 py-4" v-else>
<main id="main" v-else>
<router-view></router-view>
</main>
<mobilizon-footer />

2
src/assets/logo.svg
View file

@ -1,5 +1,5 @@
<svg
class="fill-current text-white dark:text-black"
class="fill-current text-white"
:class="{ 'bg-gray-900': invert }"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 248.16 46.78"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

61
src/components/Home/Introduction.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<!-- Main section that contains both the background and text -->
<section class="relative bg-section-graphic">
<!-- Background overlay for better text readability -->
<div class="absolute inset-0 bg-black opacity-10 z-0"></div>
<!-- Text content aligned with the grid and over the background -->
<div class="container mx-auto px-2 my-3">
<p class="heading dark:text-black mb-2">{{ config.slogan }}</p>
<p class="subheading dark:text-black mb-2">{{ config.description }}</p>
</div>
</section>
</template>
<script lang="ts" setup>
import { IConfig } from "@/types/config.model";
defineProps<{
config: Pick<IConfig, "name" | "description" | "slogan" | "registrationsOpen">;
}>();
</script>
<style scoped>
/* Background section with the graphic */
.bg-section-graphic {
background-image: url('/img/pics/homepage_background.png'); /* Background image */
background-size: cover; /* Ensure it covers the section */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Prevent tiling */
position: relative;
padding: 40px 0; /* Adjust padding to give vertical space */
width: 100%;
min-height: 150px; /* Minimum height for visual consistency */
}
/* Remove flexbox alignment, let the container align with the grid */
.container {
display: block; /* Ensure block-level alignment */
}
/* Heading and Subheading Styles */
.heading {
font-size: 2rem;
font-weight: bold;
}
.subheading {
font-size: 1.25rem;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.heading {
font-size: 1.5rem;
}
.subheading {
font-size: 1rem;
}
}
</style>

6
src/components/Home/UnloggedIntroduction.story.vue
View file

@ -1,16 +1,16 @@
<template>
<Story>
<Variant :title="'Open'">
<UnloggedIntroduction :config="config" />
<Introduction :config="config" />
</Variant>
<Variant :title="'Closed'">
<UnloggedIntroduction :config="configClosed" />
<Introduction :config="configClosed" />
</Variant>
</Story>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import UnloggedIntroduction from "./UnloggedIntroduction.vue";
import Introduction from "./Introduction.vue";
const config = reactive({
name: "My instance name",

34
src/components/Home/UnloggedIntroduction.vue
View file

@ -1,34 +0,0 @@
<template>
<section class="container mx-auto px-2 my-3">
<p class="dark:text-white mb-2">{{ config.slogan }}</p>
<!-- We don't invite to find other instances yet -->
<!-- <p v-if="!config.registrationsOpen">
{{ t("This instance isn't opened to registrations, but you can register on other instances.") }}
</p>-->
<div class="flex flex-wrap gap-2 items-center">
<o-button
variant="primary"
tag="router-link"
:to="{ name: RouteName.REGISTER }"
v-if="config.registrationsOpen"
>{{ t("Create an account") }}</o-button
>
<!-- We don't invite to find other instances yet -->
<!-- <o-button v-else variant="link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
</div>
</section>
</template>
<script lang="ts" setup>
import { IConfig } from "@/types/config.model";
import RouteName from "@/router/name";
import { useI18n } from "vue-i18n";
defineProps<{
config: Pick<
IConfig,
"name" | "description" | "slogan" | "registrationsOpen"
>;
}>();
const { t } = useI18n({ useScope: "global" });
</script>

2
src/components/NavBar.vue
View file

@ -1,6 +1,6 @@
<template>
<nav
class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-50"
class="bg-black border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-black"
id="navbar"
>
<div

16
src/views/HomeView.vue
View file

@ -1,11 +1,11 @@
<template>
<!-- Unlogged introduction -->
<unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
<introduction :config="config" />
<!-- Search fields -->
<!-- Categories preview
<categories-preview /> -->
<!-- Welcome back -->
<section
<!-- <section
class="container mx-auto"
v-if="currentActor?.id && (welcomeBack || newRegisteredUser)"
>
@ -19,9 +19,9 @@
username: displayName(currentActor),
})
}}</o-notification>
</section>
</section> -->
<!-- Your upcoming events -->
<section v-if="canShowMyUpcomingEvents" class="container mx-auto">
<!-- <section v-if="canShowMyUpcomingEvents" class="container mx-auto">
<h2 class="dark:text-white font-bold">
{{ t("Your upcoming events") }}
</h2>
@ -79,9 +79,9 @@
>{{ t("View everything") }} >></router-link
>
</span>
</section>
</section> -->
<!-- Events from your followed groups -->
<section
<!-- <section
class="relative pt-10 px-2 container mx-auto px-2"
v-if="canShowFollowedGroupEvents"
>
@ -109,7 +109,7 @@
>{{ t("View everything") }} >></router-link
>
</span>
</section>
</section> -->
<!-- Recent events
<CloseEvents
@doGeoLoc="performGeoLocation()"
@ -192,7 +192,7 @@ import {
} from "@/graphql/location";
import { LocationType } from "@/types/user-location.model";
import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
import Introduction from "@/components/Home/Introduction.vue";
import SearchFields from "@/components/Home/SearchFields.vue";
import { useHead } from "@unhead/vue";
import { geoHashToCoords } from "@/utils/location";