From dc894136528fd5a598e1598d8169ac7673cf9efc Mon Sep 17 00:00:00 2001 From: Robot8lover Date: Wed, 29 May 2024 12:09:16 -0700 Subject: [PATCH 1/5] Change CSS based hiding to v-if conditionals using breakpoints for sidebar layout --- frontend/layouts/sidebar.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/layouts/sidebar.vue b/frontend/layouts/sidebar.vue index e7f566279..8b4ea1d3a 100644 --- a/frontend/layouts/sidebar.vue +++ b/frontend/layouts/sidebar.vue @@ -1,12 +1,12 @@ diff --git a/frontend/components/menu/MenuSubPageSelector.vue b/frontend/components/menu/MenuSubPageSelector.vue index 5ca59f5b9..9ac75d91b 100644 --- a/frontend/components/menu/MenuSubPageSelector.vue +++ b/frontend/components/menu/MenuSubPageSelector.vue @@ -13,14 +13,14 @@ }" :to="localePath(selector.routeURL)" > -
+
-

+

{{ selector.label }}

@@ -33,6 +33,9 @@ diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue index 90a019514..9e6f742f8 100644 --- a/frontend/pages/organizations/[id]/about.vue +++ b/frontend/pages/organizations/[id]/about.vue @@ -78,7 +78,7 @@ :organization="organization" />
- +
@@ -112,6 +112,9 @@ import type { DiscussionEntry } from "~/types/discussion-entry"; import type { DiscussionInput } from "~/types/discussion-input"; import { IconMap } from "~/types/icon-map"; import { testTechOrg } from "~/utils/testEntities"; +import useBreakpoint from "~/composables/useBreakpoint"; + +const large = useBreakpoint("lg"); const organization = testTechOrg; // const route = useRoute(); diff --git a/frontend/pages/organizations/[id]/discussions/index.vue b/frontend/pages/organizations/[id]/discussions/index.vue index db8b52afb..f34ac7166 100644 --- a/frontend/pages/organizations/[id]/discussions/index.vue +++ b/frontend/pages/organizations/[id]/discussions/index.vue @@ -17,7 +17,8 @@ >
@@ -88,6 +88,9 @@ import { BreakpointMap } from "~/types/breakpoint-map"; import { IconMap } from "~/types/icon-map"; import { getGroupSubPages } from "~/utils/groupSubPages"; import { testTechGroup1 } from "~/utils/testEntities"; +import useBreakpoint from "~/composables/useBreakpoint"; + +const large = useBreakpoint("lg"); const groupSubPages = getGroupSubPages(); From 0d56f061cd4fbfdf4887db306e55671af6c13333 Mon Sep 17 00:00:00 2001 From: Robot8lover Date: Fri, 31 May 2024 13:25:20 -0700 Subject: [PATCH 3/5] Fix Prettier style. --- frontend/composables/useBreakpoint.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/composables/useBreakpoint.ts b/frontend/composables/useBreakpoint.ts index df6288085..fc6baab35 100644 --- a/frontend/composables/useBreakpoint.ts +++ b/frontend/composables/useBreakpoint.ts @@ -13,7 +13,9 @@ const breakpoints = useBreakpoints({ }); export default function useBreakpoint( - breakpointName: MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl" | "xxl" | "3xl" | "xxxl"> + breakpointName: MaybeRefOrGetter< + "sm" | "md" | "lg" | "xl" | "2xl" | "xxl" | "3xl" | "xxxl" + > ): Ref { return breakpoints.greaterOrEqual(breakpointName); } From 2bb406c8f3515bd10d154526ed1cf7360cdb0323 Mon Sep 17 00:00:00 2001 From: Andrew Tavis McAllister Date: Fri, 5 Jul 2024 01:57:59 +0200 Subject: [PATCH 4/5] Fix merge conflicts and rename usage based on above BP --- STYLEGUIDE.md | 24 +++ .../{CardTextEntry.vue => CardTextArea.vue} | 11 +- .../card/discussion/CardDiscussion.vue | 16 +- .../card/search-result/CardSearchResult.vue | 21 ++- frontend/components/header/HeaderMobile.vue | 6 +- frontend/components/header/HeaderWebsite.vue | 21 +-- frontend/components/landing/LandingSplash.vue | 5 +- .../components/menu/MenuSubPageSelector.vue | 10 +- .../components/modal/qr-code/ModalQRCode.vue | 142 +++++++++++++++--- frontend/components/page/PageContent.vue | 13 +- frontend/components/page/PageDocs.vue | 5 +- frontend/composables/useBreakpoint.ts | 2 +- frontend/layouts/auth.vue | 8 +- frontend/layouts/sidebar.vue | 10 +- frontend/pages/docs/get-active.vue | 12 +- frontend/pages/docs/get-organized.vue | 12 +- frontend/pages/docs/grow-organization.vue | 12 +- frontend/pages/events/[id]/discussion.vue | 6 +- frontend/pages/organizations/[id]/about.vue | 115 +++----------- .../organizations/[id]/discussions/index.vue | 6 +- .../organizations/[id]/groups/[id]/about.vue | 39 +++-- 21 files changed, 291 insertions(+), 205 deletions(-) rename frontend/components/card/{CardTextEntry.vue => CardTextArea.vue} (90%) diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md index b8028c5ce..7e93d2a2d 100644 --- a/STYLEGUIDE.md +++ b/STYLEGUIDE.md @@ -69,6 +69,30 @@ const emit = defineEmits(["routeToName"]); useRouteToName(emit); ``` +### Breakpoints + +activist uses Tailwind for CSS, and some parts of components will be conditionally rendered based on Tailwind breakpoints, but we want to avoid using it to show and hide whole components. The reason for this is that using CSS in this way means that unneeded TypeScript for the hidden components will still run on page load. Please use `useBreakpoint` for all conditional rendering of full components. + +- ✅ No TS ran: + + ```vue + + + + ``` +- ❌ TS still ran: + + ```vue + + ``` + ## TypeScript [`⇧`](#contents) diff --git a/frontend/components/card/CardTextEntry.vue b/frontend/components/card/CardTextArea.vue similarity index 90% rename from frontend/components/card/CardTextEntry.vue rename to frontend/components/card/CardTextArea.vue index 341ef0ae3..221994e8a 100644 --- a/frontend/components/card/CardTextEntry.vue +++ b/frontend/components/card/CardTextArea.vue @@ -8,9 +8,9 @@ {{ description }}

- + - +