From 4ee18e2244a44c6cb2e7ea0516d4dc861496f083 Mon Sep 17 00:00:00 2001
From: xcexec <hattori.hansa@protonmail.com>
Date: Fri, 18 Oct 2024 15:17:02 +0200
Subject: [PATCH] added fomo background w/ text-alignment; changed darkmode
navbar to black
---
src/App.vue | 2 +-
src/assets/logo.svg | 2 +-
src/components/Home/Introduction.vue | 61 +++++++++++++++++++
.../Home/UnloggedIntroduction.story.vue | 6 +-
src/components/Home/UnloggedIntroduction.vue | 34 -----------
src/components/NavBar.vue | 2 +-
src/views/HomeView.vue | 16 ++---
7 files changed, 75 insertions(+), 48 deletions(-)
create mode 100644 src/components/Home/Introduction.vue
delete mode 100644 src/components/Home/UnloggedIntroduction.vue
diff --git a/src/App.vue b/src/App.vue
index 33604c491..bb24539da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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 />
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 321481769..ae601197b 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -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"
diff --git a/src/components/Home/Introduction.vue b/src/components/Home/Introduction.vue
new file mode 100644
index 000000000..38aa81f0a
--- /dev/null
+++ b/src/components/Home/Introduction.vue
@@ -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>
diff --git a/src/components/Home/UnloggedIntroduction.story.vue b/src/components/Home/UnloggedIntroduction.story.vue
index 4958f4e22..5dc3f2273 100644
--- a/src/components/Home/UnloggedIntroduction.story.vue
+++ b/src/components/Home/UnloggedIntroduction.story.vue
@@ -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",
diff --git a/src/components/Home/UnloggedIntroduction.vue b/src/components/Home/UnloggedIntroduction.vue
deleted file mode 100644
index c22f37e6d..000000000
--- a/src/components/Home/UnloggedIntroduction.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 54c49d6c4..a79af0b34 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -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
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 918a95ff7..945a38590 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -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";