#270 add HeaderAppPage with beadcrumbs, tagline and btns slot

activist-org · Aug 30, 2023 · 1a9bcdf · 1a9bcdf
1 parent 91af592
commit 1a9bcdf
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 106 deletions.
diff --git a/frontend/components/TopicMarker.vue b/frontend/components/TopicMarker.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center justify-between py-3 pl-2 pr-3 border rounded-full topic-marker w-fit h-7 bg-light-cta-orange/30 text-light-cta-orange border-light-cta-orange dark:bg-dark-cta-orange/40 dark:border-dark-cta-orange dark:text-dark-cta-orange hover:bg-light-cta-orange-hover/30 hover:text-light-cta-orange-hover hover:border-light-cta-orange-hover hover:dark:bg-dark-cta-orange-hover/40 hover:dark:border-dark-cta-orange-hover hover:dark:text-dark-cta-orange-hover hover:cursor-pointer active:bg-light-cta-orange/30 active:text-light-cta-orange active:border-light-cta-orange active:dark:bg-dark-cta-orange/40 active:dark:border-dark-cta-orange active:dark:text-dark-cta-orange"
+    class="flex items-center justify-between pl-2 pr-3 border rounded-full topic-marker w-max h-max bg-light-cta-orange/30 text-light-cta-orange border-light-cta-orange dark:bg-dark-cta-orange/40 dark:border-dark-cta-orange dark:text-dark-cta-orange hover:bg-light-cta-orange-hover/30 hover:text-light-cta-orange-hover hover:border-light-cta-orange-hover hover:dark:bg-dark-cta-orange-hover/40 hover:dark:border-dark-cta-orange-hover hover:dark:text-dark-cta-orange-hover hover:cursor-pointer active:bg-light-cta-orange/30 active:text-light-cta-orange active:border-light-cta-orange active:dark:bg-dark-cta-orange/40 active:dark:border-dark-cta-orange active:dark:text-dark-cta-orange"
   >
     <Icon
       name="bi:globe"

diff --git a/frontend/components/header/HeaderAppPage.vue b/frontend/components/header/HeaderAppPage.vue
@@ -0,0 +1,51 @@
+<template>
+  <PageBreadcrumbs class="mt-4" :organization="organization" :event="event" />
+  <div class="flex items-baseline gap-4">
+    <h1
+      class="pt-6 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
+    >
+      {{ header }}
+    </h1>
+    <IconOrganizationStatus v-if="status" :status="status" />
+  </div>
+  <div class="relative flex items-center w-full py-6">
+    <h2
+      :v-if="tagline"
+      class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
+    >
+      {{ tagline }}
+    </h2>
+    <!-- Slot is for BtnLabeled and Dropdown components at the top of the page. -->
+    <div class="absolute right-0 flex items-center space-x-3">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Event } from "~~/types/event";
+import type { Organization } from "~~/types/organization";
+
+const props = defineProps<{
+  header: string;
+  tagline: string;
+  organization?: Organization;
+  event?: Event;
+}>();
+
+let header: string;
+let tagline: string;
+let status: string;
+
+if (props.organization) {
+  header = props.organization.name;
+  tagline = props.organization.tagline;
+  status = props.organization.status;
+} else if (props.event) {
+  header = props.event.name;
+  tagline = props.event.tagline;
+} else {
+  header = props.header;
+  tagline = props.tagline;
+}
+</script>
diff --git a/frontend/components/WebsiteHeader.vue → frontend/components/header/HeaderWebsite.vue b/frontend/components/WebsiteHeader.vue → frontend/components/header/HeaderWebsite.vue
diff --git a/frontend/error.vue b/frontend/error.vue
@@ -1,5 +1,5 @@
 <template>
-  <WebsiteHeader />
+  <HeaderWebsite />
   <div class="flex h-full bg-light-content dark:bg-dark-content">
     <Head>
       <Title>{{ title }}</Title>

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <WebsiteHeader />
+  <HeaderWebsite />
   <slot />
   <Footer />
 </template>
diff --git a/frontend/pages/events/[id]/about.vue b/frontend/pages/events/[id]/about.vue
@@ -5,47 +5,33 @@
     <Head>
       <Title>{{ event.name }}</Title>
     </Head>
-    <PageBreadcrumbs class="mt-4" :event="event" />
-    <h1
-      class="pt-6 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
-    >
-      {{ event.name }}
-    </h1>
-    <div class="relative flex items-center w-full py-6">
-      <h2
-        :v-if="event.tagline"
-        class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
-      >
-        {{ event.tagline }}
-      </h2>
-      <div class="absolute right-0 flex space-x-3">
-        <BtnLabeled
-          :cta="true"
-          linkTo="/"
-          :label="$t('components.btn-labeled.offer-to-help')"
-          fontSize="base"
-          rightIcon="bi:arrow-right"
-          iconSize="1.25em"
-        />
-        <BtnLabeled
-          :cta="true"
-          linkTo="/"
-          :label="$t('components.btn-labeled.support')"
-          fontSize="base"
-          leftIcon="IconSupport"
-          iconSize="1.25em"
-          :counter="event.supporters"
-        />
-        <BtnLabeled
-          :cta="true"
-          linkTo="/"
-          :label="$t('components.btn-labeled.share-event')"
-          fontSize="base"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-        />
-      </div>
-    </div>
+    <HeaderAppPage :event="event">
+      <BtnLabeled
+        :cta="true"
+        linkTo="/"
+        :label="$t('components.btn-labeled.offer-to-help')"
+        fontSize="base"
+        rightIcon="bi:arrow-right"
+        iconSize="1.25em"
+      />
+      <BtnLabeled
+        :cta="true"
+        linkTo="/"
+        :label="$t('components.btn-labeled.support')"
+        fontSize="base"
+        leftIcon="IconSupport"
+        iconSize="1.25em"
+        :counter="event.supporters"
+      />
+      <BtnLabeled
+        :cta="true"
+        linkTo="/"
+        :label="$t('components.btn-labeled.share-event')"
+        fontSize="base"
+        leftIcon="bi:box-arrow-up"
+        iconSize="1.25em"
+      />
+    </HeaderAppPage>
     <div class="pb-6 space-y-6">
       <div
         class="grid grid-rows-2 grid-cols-1 lg:grid-cols-3 lg:grid-rows-1 space-y-6 pb-6 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6"

diff --git a/frontend/pages/events/index.vue b/frontend/pages/events/index.vue
@@ -5,20 +5,12 @@
     <Head>
       <Title>{{ $t("pages.events.index.title") }} </Title>
     </Head>
-    <PageBreadcrumbs class="mt-4" />
-    <h1
-      class="pt-6 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
+    <HeaderAppPage
+      :header="$t('pages.organizations.index.header')"
+      :tagline="$t('pages.organizations.index.subheader')"
     >
-      {{ $t("pages.events.index.header") }}
-    </h1>
-    <flex class="relative flex items-center py-6"
-      ><h2
-        class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
-      >
-        {{ $t("pages.events.index.subheader") }}
-      </h2>
-      <TopicMarker topic="My topics dropdown" class="absolute right-7" />
-    </flex>
+      <TopicMarker topic="My topics dropdown" />
+    </HeaderAppPage>
     <div class="pb-4 space-y-4">
       <CardSearchResult
         searchResultType="event"

diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
@@ -5,42 +5,25 @@
     <Head>
       <Title>{{ organization.name }}</Title>
     </Head>
-    <PageBreadcrumbs class="mt-4" :organization="organization" />
-    <div class="flex items-baseline gap-4">
-      <h1
-        class="pt-6 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
-      >
-        {{ organization.name }}
-      </h1>
-      <IconOrganizationStatus status="approved"></IconOrganizationStatus>
-    </div>
-    <flex class="relative flex items-center w-full py-6"
-      ><h2
-        :v-if="organization.tagline"
-        class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
-      >
-        {{ organization.tagline }}
-      </h2>
-      <div class="absolute right-0 flex space-x-3">
-        <BtnLabeled
-          :cta="true"
-          linkTo="/"
-          :label="$t('components.btn-labeled.support')"
-          fontSize="base"
-          leftIcon="IconSupport"
-          iconSize="1.25em"
-          :counter="organization.supporters"
-        />
-        <BtnLabeled
-          :cta="true"
-          linkTo="/"
-          :label="$t('components.btn-labeled.share-organization')"
-          fontSize="base"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-        />
-      </div>
-    </flex>
+    <HeaderAppPage :organization="organization">
+      <BtnLabeled
+        :cta="true"
+        linkTo="/"
+        :label="$t('components.btn-labeled.support')"
+        fontSize="base"
+        leftIcon="IconSupport"
+        iconSize="1.25em"
+        :counter="organization.supporters"
+      />
+      <BtnLabeled
+        :cta="true"
+        linkTo="/"
+        :label="$t('components.btn-labeled.share-organization')"
+        fontSize="base"
+        leftIcon="bi:box-arrow-up"
+        iconSize="1.25em"
+      />
+    </HeaderAppPage>
     <div class="pb-6 space-y-6">
       <div
         class="grid grid-rows-2 lg:grid-cols-3 lg:grid-rows-1 space-y-6 lg:space-y-0 lg:space-x-6 lg:mr-6"
@@ -74,6 +57,7 @@ const { id } = useRoute().params;
 
 const organization: Organization = {
   name: "tech from below",
+  status: "approved",
   tagline: "Technologie von und für soziale Bewegungen",
   location: "Berlin, Germany",
   description:

diff --git a/frontend/pages/organizations/index.vue b/frontend/pages/organizations/index.vue
@@ -5,20 +5,12 @@
     <Head>
       <Title>{{ $t("pages.organizations.index.title") }}</Title>
     </Head>
-    <PageBreadcrumbs class="mt-4" />
-    <h1
-      class="pt-6 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
+    <HeaderAppPage
+      :header="$t('pages.organizations.index.header')"
+      :tagline="$t('pages.organizations.index.subheader')"
     >
-      {{ $t("pages.organizations.index.header") }}
-    </h1>
-    <flex class="relative flex items-center py-6"
-      ><h2
-        class="transition-all duration-500 responsive-h4 text-light-special-text dark:text-dark-special-text"
-      >
-        {{ $t("pages.organizations.index.subheader") }}
-      </h2>
-      <TopicMarker topic="My topics dropdown" class="absolute right-7" />
-    </flex>
+      <TopicMarker topic="My topics dropdown" />
+    </HeaderAppPage>
     <div class="pb-4 space-y-4">
       <CardSearchResult
         searchResultType="organization"

diff --git a/frontend/types/organization.d.ts b/frontend/types/organization.d.ts
@@ -1,5 +1,6 @@
 export interface Organization {
   name: string;
+  status: string;
   tagline?: string;
   location: string;
   description: string;