#524 #246 add header to all event/org pages + WIP page marker

frontend/components/header/HeaderAppPage.vue

@@ -1,5 +1,30 @@
 <template>
   <PageBreadcrumbs class="mt-4" :organization="organization" :event="event" />
+  <div
+    v-if="underDevelopment"
+    class="mt-3 flex w-full bg-light-pending-yellow/40 border border-light-text rounded-md py-1 pl-4 text-light-text dark:bg-dark-pending-yellow/30 dark:text-dark-pending-yellow dark:border-dark-pending-yellow"
+  >
+    <p>
+      🚧&nbsp;&nbsp;{{
+        $t("components.header-app-page.under-development-1")
+      }}&nbsp;
+    </p>
+    <a
+      class="flex space-x-1 items-center focus-brand link-text"
+      href="https://github.com/activist-org/activist"
+      target="_blank"
+    >
+      <p>github.com/activist-org/activist</p>
+      <Icon
+        class="mb-1"
+        name="bi:box-arrow-up-right"
+        size="1em"
+        style="vertical-align: baseline"
+      />
+    </a>
+    <p></p>
+    <p>&nbsp;{{ $t("components.header-app-page.under-development-2") }}</p>
+  </div>
   <div class="flex items-baseline gap-2 md:gap-4">
     <h1
       class="pt-4 font-bold transition-all duration-500 responsive-h1 text-light-text dark:text-dark-text"
@@ -31,6 +56,7 @@ const props = defineProps<{
   tagline?: string;
   organization?: Organization;
   event?: Event;
+  underDevelopment?: boolean;
 }>();
 
 let headerName: string;
@@ -44,8 +70,13 @@ if (props.organization) {
 } else if (props.event) {
   headerName = props.event.name;
   headerTagline = props.event.tagline;
-} else {
-  headerName = props.header || "Default Demo Header";
-  headerTagline = props.tagline || "Default Demo Tagline";
+}
+
+if (props.header) {
+  headerName = props.header || "Default header";
+}
+
+if (props.tagline) {
+  headerTagline = props.tagline || "Default tagline";
 }
 </script>

frontend/components/sidebar/left/SidebarLeftFooter.vue

@@ -215,7 +215,7 @@ const sidebar = useSidebar();
 const createButtons: MenuSelector[] = [
   {
     id: 1,
-    label: "components.sidebar-left-selector.label.new-event",
+    label: "components._global.new-event",
     routeURL: "/",
     iconURL: "bi:calendar-check",
     selected: false,
@@ -231,15 +231,15 @@ const createButtons: MenuSelector[] = [
   },
   {
     id: 3,
-    label: "components.sidebar-left-selector.label.new-group",
+    label: "components._global.new-group",
     routeURL: "/",
     iconURL: "IconGroup",
     selected: false,
     active: true,
   },
   {
     id: 4,
-    label: "components.sidebar-left-selector.label.new-resource",
+    label: "components._global.new-resource",
     routeURL: "/",
     iconURL: "IconResource",
     selected: false,

frontend/composables/useMenuEntriesState.ts

@@ -43,6 +43,7 @@ const useMenuEntriesState = () => {
     createMenuEntry("_global.resources", "organizations", "IconResource", true),
     createMenuEntry("_global.faq", "organizations", "IconFAQ", true),
     createMenuEntry("_global.settings", "organizations", "bi:gear", true),
+    createMenuEntry("_global.team", "organizations", "bi:people", true),
     createMenuEntry("_global.affiliates", "organizations", "IconSupport", true),
     createMenuEntry("_global.tasks", "organizations", "bi:check-square", true),
     createMenuEntry(
@@ -60,7 +61,7 @@ const useMenuEntriesState = () => {
     createMenuEntry("_global.settings", "events", "bi:gear", true),
     createMenuEntry("_global.tasks", "events", "bi:check-square", true),
     createMenuEntry(
-      "_global.discussions",
+      "_global.discussion",
       "events",
       "octicon:comment-discussion-24",
       true

frontend/i18n/en-US.json

@@ -2,14 +2,20 @@
   "_global.about": "About",
   "_global.activist-icon-img-alt-text": "The activist icon: a lower case letter a with a half circle pointing down and to the left in the center.",
   "_global.affiliates": "Affiliates",
+  "_global.affiliates_lower": "affiliates",
   "_global.contact": "Contact",
+  "_global.discussion": "Discussion",
+  "_global.discussion_lower": "discussion",
   "_global.discussions": "Discussions",
+  "_global.discussions_lower": "discussions",
   "_global.documentation": "Documentation",
   "_global.events": "Events",
+  "_global.events_lower": "events",
   "_global.faq": "FAQ",
   "_global.get-active": "Get active",
   "_global.get-organized": "Get organized",
   "_global.groups": "Groups",
+  "_global.groups_lower": "groups",
   "_global.grow-organization": "Grow organization",
   "_global.help": "Help",
   "_global.home": "Home",
@@ -20,16 +26,20 @@
   "_global.privacy-policy": "Privacy policy",
   "_global.repeat-password": "Repeat password",
   "_global.resources": "Resources",
+  "_global.resources_lower": "resources",
   "_global.roadmap": "Roadmap",
   "_global.roadmap-description": "Learn about the planned developments of activist.",
   "_global.search": "Search",
   "_global.settings": "Settings",
+  "_global.settings_lower": "settings",
   "_global.sign-in": "Sign in",
   "_global.sign-up": "Sign up",
   "_global.status": "Status",
   "_global.supporters": "Supporters",
   "_global.tasks": "Tasks",
+  "_global.tasks_lower": "tasks",
   "_global.team": "Team",
+  "_global.team_lower": "team",
   "_global.topics.activism": "Activism",
   "_global.topics.education": "Education",
   "_global.topics.environment": "Environment",
@@ -42,23 +52,42 @@
   "components._global.instagram": "Instagram",
   "components._global.matrix": "Matrix",
   "components._global.members": "Members",
+  "components._global.new-event": "New event",
+  "components._global.new-group": "New group",
+  "components._global.new-resource": "New resource",
   "components._global.organization": "Organization",
   "components.btn-labeled.check-discussion-category-aria-label": "The type of discussion that is taking place",
   "components.btn-labeled.get-in-touch": "Get in touch",
   "components.btn-labeled.get-in-touch-aria-label": "Get in touch with the activist team",
   "components.btn-labeled.go-to-donation-page": "Go to donation page",
+  "components.btn-labeled.invite-someone": "Invite someone",
+  "components.btn-labeled.invite-someone-event-aria-label": "Invite someone to join this event",
+  "components.btn-labeled.invite-someone-org-aria-label": "Invite someone to join this organization",
   "components.btn-labeled.join-organization": "Join organization",
   "components.btn-labeled.join-organization-aria-label": "Start the process to join the organization",
   "components.btn-labeled.learn-more": "Learn more",
   "components.btn-labeled.new-account": "New account",
   "components.btn-labeled.new-account-aria-label": "Add a new account",
+  "components.btn-labeled.new-discussion": "New discussion",
+  "components.btn-labeled.new-discussion-aria-label": "Create a new discussion to plan or get opinions",
+  "components.btn-labeled.new-event-aria-label": "Create a new event for people to get involved in",
+  "components.btn-labeled.new-faq": "New FAQ entry",
+  "components.btn-labeled.new-faq-aria-label": "Add a new question to help people better understand your organization",
+  "components.btn-labeled.new-group-aria-label": "Make a new group to delegate processes to those who work on them",
+  "components.btn-labeled.new-resource-aria-label": "Share information by adding a new resource",
+  "components.btn-labeled.new-task": "New task",
+  "components.btn-labeled.new-task-aria-label": "Add a new task to the board",
   "components.btn-labeled.offer-to-help": "Offer to help",
   "components.btn-labeled.offer-to-help-aria-label": "Start the process to offer help for this event",
   "components.btn-labeled.request-access": "Request access",
   "components.btn-labeled.request-access-aria-label": "Request access to activist.org",
   "components.btn-labeled.return-home": "Return home",
   "components.btn-labeled.return-home-aria-label": "Return home to the activist home page",
+  "components.btn-labeled.save-settings": "Save settings",
+  "components.btn-labeled.save-settings-aria-label": "Update the settings to reflect new changes",
   "components.btn-labeled.share": "Share",
+  "components.btn-labeled.share-discussion": "Share discussion",
+  "components.btn-labeled.share-discussion-aria-label": "Share this event's discussions with others",
   "components.btn-labeled.share-event": "Share event",
   "components.btn-labeled.share-event-aria-label": "Share this event with others",
   "components.btn-labeled.share-organization": "Share organization",
@@ -140,6 +169,8 @@
   "components.grid-supporters.impact-hub-belgrade-logo-aria-label": "Link to the website of Impact Hub Belgrade",
   "components.grid-supporters.wikimedia-de-logo-aria-label": "Link to the website of Wikimedia Deutschland",
   "components.grid-supporters.wikimedia-rs-logo-aria-label": "Link to the website of Wikimedia Serbia",
+  "components.header-app-page.under-development-1": "This page is currently under development. Please visit us at",
+  "components.header-app-page.under-development-2": "if you'd like to help!",
   "components.landing-splash.header": "Where we start.",
   "components.landing-splash.message": "Let's build a platform where movements grow and people are inspired to act on the issues that affect us all. Free, open-source, privacy-focused and driven by our community.",
   "components.landing-tech-banner.open-source-header": "Open-Source APIs",
@@ -190,10 +221,7 @@
   "components.sidebar-left-footer.username": "Username",
   "components.sidebar-left-footer.username-aria-label": "Open to see user specific options",
   "components.sidebar-left-header.sidebar-collapse-aria-label": "Expand or collapse the left sidebar",
-  "components.sidebar-left-selector.label.new-event": "New event",
-  "components.sidebar-left-selector.label.new-group": "New group",
   "components.sidebar-left-selector.label.new-organization": "New organization",
-  "components.sidebar-left-selector.label.new-resource": "New resource",
   "components.sidebar-left-selector.label.notifications": "Notifications",
   "components.sidebar-left-selector.label.sign-out": "Sign out",
   "components.sidebar-left-selector.label.your-events": "Your events",
@@ -227,9 +255,9 @@
   "pages._global.our-network": "Our network",
   "pages._global.our-supporters": "Our supporters",
   "pages._global.public-matrix-chat-rooms": "public Matrix chat rooms",
-  "pages._global.resource-placeholder": "This is a resources page for",
   "pages._global.see-the": "See the",
   "pages._global.share-ideas-say-hi": "to share ideas, ask questions or just say hi :)",
+  "pages._global.tasks-page-tagline": "Current and future work",
   "pages._global.terms-of-service-pt-1": "I have read and agree to the",
   "pages._global.terms-of-service-pt-2": "activist terms and conditions",
   "pages._global.to-learn-more": "to learn more",
@@ -315,11 +343,13 @@
   "pages.docs.index.subheader": "Learn more about activist",
   "pages.error.message": "Oops, something went wrong:",
   "pages.error.title": "Error \u2022 activist",
-  "pages.events.id.team.subheader": "This is a team page for",
+  "pages.events.discussion.tagline": "Plan and review",
   "pages.events.index.header-title": "Events home",
   "pages.events.index.subheader": "Upcoming events near you",
+  "pages.events.resources.tagline": "Tools and references",
   "pages.events.search.header-title": "Events search",
   "pages.events.search.subheader": "Find events to attend",
+  "pages.events.team.tagline": "Event organizers",
   "pages.finances.title": "Finances",
   "pages.help._global.contact-img-alt-text": "An envelope that's closed indicating a message to be sent.",
   "pages.help._global.frequently-asked-questions": "Frequently asked questions",
@@ -445,13 +475,16 @@
   "pages.organizations.create.subtext": "Thanks for bringing your organization to activist! The following information is requested so that our community can better understand what the goals of the organization are. Checking each new organization takes time for all of us, but in this way we can maintain trust within the network. We look forward to working with and supporting you all!",
   "pages.organizations.create.tagline": "Tagline",
   "pages.organizations.create.tagline-placeholder": "A short tagline for the organization (optional)",
-  "pages.organizations.id.events.subheader": "This is an events page for",
-  "pages.organizations.id.faq.subheader": "This is a FAQ page for",
-  "pages.organizations.id.groups.subheader": "This is a working groups page for",
+  "pages.organizations.discussions.tagline": "Community discussions",
+  "pages.organizations.events.tagline": "Our upcoming actions",
+  "pages.organizations.faq.tagline": "Questions we often get",
+  "pages.organizations.groups.tagline": "Our working groups",
   "pages.organizations.index.header-title": "Organizations home",
   "pages.organizations.index.subheader": "Active organizations near you",
+  "pages.organizations.resources.tagline": "Useful links and tools for our work",
   "pages.organizations.search.header-title": "Organizations search",
   "pages.organizations.search.subheader": "Find organizations to support",
+  "pages.organizations.team.tagline": "People involved",
   "pages.search.index.header": "General search",
   "pages.search.index.subheader": "Find organizations, events and more",
   "pages.supporters._global.join-img-alt-text": "An arrow pointing in to an open circle.",

frontend/pages/events/[id]/discussion.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content"
+  >
+    <Head>
+      <Title>{{ event.name }}&nbsp;{{ $t("_global.discussions_lower") }}</Title>
+    </Head>
+    <HeaderAppPage
+      :event="event"
+      :header="event.name + ' ' + $t('_global.discussion_lower')"
+      :tagline="$t('pages.events.discussion.tagline')"
+      :underDevelopment="true"
+    >
+      <div class="flex space-x-2 lg:space-x-3">
+        <BtnLabeled
+          class="hidden md:block w-max"
+          :cta="true"
+          linkTo="/"
+          label="components.btn-labeled.share-discussion"
+          fontSize="sm"
+          leftIcon="bi:box-arrow-up"
+          iconSize="1.25em"
+          ariaLabel="components.btn-labeled.share-discussion-aria-label"
+        />
+      </div>
+    </HeaderAppPage>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Event } from "~/types/event";
+
+definePageMeta({
+  layout: "sidebar",
+});
+
+const event: Event = {
+  name: "Brandenburg Gate Climate Demo",
+  tagline: "There is no Planet B",
+  organizer: "Berlin Climate Org",
+  type: "action",
+  topic: "Environment",
+  description:
+    "Aute aliqua reprehenderit ex ut commodo nostrud et excepteur. Sunt amet velit sunt fugiat et excepteur dolore pariatur nisi non. Exercitation aute aute culpa commodo commodo ea Lorem aliquip id duis. Laboris nostrud ullamco ea voluptate et anim id adipisicing sint reprehenderit incididunt elit. Est fugiat pariatur elit culpa in incididunt eu esse cupidatat minim. Deserunt duis culpa minim Lorem consectetur quis fugiat ipsum nostrud voluptate veniam do. Reprehenderit duis officia in enim anim elit.",
+  getInvolvedDescription:
+    "Sint cillum excepteur sint cupidatat do consectetur excepteur nisi veniam. Sint id in sit eiusmod Lorem commodo minim culpa id cupidatat consectetur. Labore nisi est officia sunt occaecat.",
+  inPersonLocation: "Brandenburg Gate, Berlin",
+  date: new Date().toISOString().slice(0, 10),
+  supporters: 30,
+  imageURL: "/images/tech-from-below.svg",
+  socialLinks: ["climate_org@mastodon", "climate_org@email.com"],
+};
+</script>

frontend/pages/events/[id]/resources.vue

@@ -2,14 +2,52 @@
   <div
     class="flex flex-col px-4 xl:px-8 text-light-text dark:text-dark-text bg-light-content dark:bg-dark-content"
   >
-    <p>{{ $t("pages._global.resource-placeholder") }} {{ id }}</p>
+    <Head>
+      <Title>{{ event.name }}&nbsp;{{ $t("_global.resources_lower") }}</Title>
+    </Head>
+    <HeaderAppPage
+      :event="event"
+      :header="event.name + ' ' + $t('_global.resources_lower')"
+      :tagline="$t('pages.events.resources.tagline')"
+      :underDevelopment="true"
+    >
+      <div class="flex space-x-2 lg:space-x-3">
+        <BtnLabeled
+          class="w-max"
+          :cta="true"
+          linkTo="/"
+          label="components._global.new-resource"
+          fontSize="sm"
+          leftIcon="bi:plus-lg"
+          iconSize="1.35em"
+          ariaLabel="components.btn-labeled.new-resource-aria-label"
+        />
+      </div>
+    </HeaderAppPage>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Event } from "~/types/event";
+
 definePageMeta({
   layout: "sidebar",
 });
 
-const { id } = useRoute().params;
+const event: Event = {
+  name: "Brandenburg Gate Climate Demo",
+  tagline: "There is no Planet B",
+  organizer: "Berlin Climate Org",
+  type: "action",
+  topic: "Environment",
+  description:
+    "Aute aliqua reprehenderit ex ut commodo nostrud et excepteur. Sunt amet velit sunt fugiat et excepteur dolore pariatur nisi non. Exercitation aute aute culpa commodo commodo ea Lorem aliquip id duis. Laboris nostrud ullamco ea voluptate et anim id adipisicing sint reprehenderit incididunt elit. Est fugiat pariatur elit culpa in incididunt eu esse cupidatat minim. Deserunt duis culpa minim Lorem consectetur quis fugiat ipsum nostrud voluptate veniam do. Reprehenderit duis officia in enim anim elit.",
+  getInvolvedDescription:
+    "Sint cillum excepteur sint cupidatat do consectetur excepteur nisi veniam. Sint id in sit eiusmod Lorem commodo minim culpa id cupidatat consectetur. Labore nisi est officia sunt occaecat.",
+  inPersonLocation: "Brandenburg Gate, Berlin",
+  date: new Date().toISOString().slice(0, 10),
+  supporters: 30,
+  imageURL: "/images/tech-from-below.svg",
+  socialLinks: ["climate_org@mastodon", "climate_org@email.com"],
+};
 </script>