Merge pull request activist-org#890 from Robot8lover/fix-component-hi…

…ding

Fix component hiding

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
+    <template>
+      <MyComponent v-if="aboveMediumBP" />
+    </template>
+
+   <script setup lang="ts">
+   import useBreakpoint from "~/composables/useBreakpoint";
+   const aboveMediumBP = useBreakpoint("md");
+   </script>
+   ```
+- ❌ TS still ran:
+
+    ```vue
+    <template>
+      <MyComponent class="hidden md:block" />
+    </template>
+    ```
+
 <a id="typescript"></a>
 
 ## TypeScript [`⇧`](#contents)

frontend/components/card/CardTextArea.vue

@@ -8,19 +8,21 @@
         {{ description }}
       </p>
       <div v-if="multiline">
-        <!-- Mobile -->
+        <!-- MARK: Mobile -->
         <textarea
+          v-if="!aboveMediumBP"
           id="feedback"
-          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:hidden md:resize-y md:overflow-hidden"
+          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
           rows="5"
           :placeholder="placeholder"
           :aria-label="textAreaAriaLabel"
         ></textarea>
-        <!-- Desktop -->
+        <!-- MARK: Desktop -->
         <textarea
+          v-if="aboveMediumBP"
           id="feedback"
-          class="hidden w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:block md:resize-y md:overflow-hidden"
+          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
           rows="3"
           :placeholder="placeholder"
@@ -40,11 +42,15 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
 defineProps<{
   header: string;
   description: string;
   placeholder: string;
   multiline: boolean;
   textAreaAriaLabel: string;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>

frontend/components/card/discussion/CardDiscussion.vue

@@ -3,7 +3,8 @@
     class="card-style flex w-full flex-col px-3 py-4 md:grow md:flex-row md:py-3 lg:px-5"
   >
     <BtnAction
-      class="mt-1 hidden h-min md:flex"
+      v-if="aboveMediumBP"
+      class="mt-1 flex h-min"
       :cta="true"
       :counter="discussion.upVoters.length"
       fontSize="sm"
@@ -18,7 +19,10 @@
             <h2 class="responsive-h3 w-full font-bold">
               {{ discussion.title }}
             </h2>
-            <div class="flex items-center space-x-3 md:hidden md:w-fit">
+            <div
+              v-if="!aboveMediumBP"
+              class="flex items-center space-x-3 md:w-fit"
+            >
               <MetaTagMembers :members="discussion.participants.length" />
               <MetaTag
                 :iconName="IconMap.CHAT"
@@ -28,7 +32,8 @@
           </div>
           <div class="flex space-x-2">
             <BtnAction
-              class="mt-1 flex md:hidden"
+              v-if="!aboveMediumBP"
+              class="mt-1 flex"
               :cta="true"
               :label="`${discussion.upVoters}`"
               fontSize="sm"
@@ -47,7 +52,8 @@
           </div>
         </div>
         <div
-          class="hidden w-full items-center space-x-3 md:flex md:w-fit lg:space-x-5"
+          v-if="aboveMediumBP"
+          class="flex w-full items-center space-x-3 md:w-fit lg:space-x-5"
         >
           <MetaTagMembers :members="discussion.participants.length" />
           <MetaTag
@@ -78,11 +84,14 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import type { Discussion } from "~/types/content/discussion";
 import { IconMap } from "~/types/icon-map";
 
 defineProps<{
   isPrivate?: boolean;
   discussion: Discussion;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>

frontend/components/card/search-result/CardSearchResult.vue

@@ -159,7 +159,10 @@
               :user="user"
             />
           </div>
-          <div class="hidden items-center space-x-3 md:flex lg:space-x-5">
+          <div
+            v-if="aboveMediumBP"
+            class="flex items-center space-x-3 lg:space-x-5"
+          >
             <MetaTagLocation v-if="location" :location="location" />
             <MetaTagVideo
               v-if="onlineLocation"
@@ -170,7 +173,10 @@
           </div>
         </div>
         <div class="flex flex-col space-y-3 md:flex-row md:space-y-0">
-          <div class="flex items-center justify-center space-x-4 md:hidden">
+          <div
+            v-if="!aboveMediumBP"
+            class="flex items-center justify-center space-x-4"
+          >
             <MetaTagLocation v-if="location" :location="location" />
             <MetaTagVideo
               v-if="onlineLocation"
@@ -215,6 +221,7 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { useLinkURL } from "~/composables/useLinkURL";
 import type { User } from "~/types/auth/user";
 import type { Resource } from "~/types/content/resource";
@@ -233,6 +240,8 @@ const props = defineProps<{
   isPrivate?: boolean;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const i18n = useI18n();
 const localePath = useLocalePath();
 const { linkURL } = useLinkURL(props);

frontend/components/header/HeaderMobile.vue

@@ -1,7 +1,8 @@
 <template>
   <header
+    v-if="!aboveMediumBP"
     ref="header"
-    class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2 md:hidden"
+    class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2"
   >
     <div class="h-full">
       <div class="flex h-full justify-between gap-2 px-4">
@@ -48,8 +49,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { DropdownLocation, SearchBarLocation } from "~/types/location";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const userIsSignedIn = false;
 const isSearchExpanded = ref(false);
 

frontend/components/header/HeaderWebsite.vue

@@ -10,7 +10,7 @@
     }"
   >
     <!-- MARK: Mobile Header -->
-    <div id="mobile-header" class="flex px-4 py-3 md:hidden">
+    <div v-if="!aboveMediumBP" class="flex px-4 py-3">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -37,7 +37,7 @@
       </SidebarRight>
     </div>
     <!-- MARK: Desktop Header -->
-    <div id="desktop-header" class="mx-auto hidden py-3 md:block">
+    <div v-if="aboveMediumBP" id="desktop-header" class="mx-auto py-3">
       <div class="responsive-px-5 flex items-center justify-between">
         <div class="flex items-center md:space-x-4 lg:space-x-6 xl:space-x-8">
           <div class="relative z-0 h-10 w-36">
@@ -52,17 +52,19 @@
             <DropdownTheme />
             <DropdownLanguage />
             <BtnRouteInternal
+              v-if="aboveLargeBP"
               id="btn-get-in-touch-large"
-              class="hidden lg:block"
+              class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
               linkTo="/help/contact"
               fontSize="sm"
               ariaLabel="components.btn-route-internal.get-in-touch-aria-label"
             />
             <BtnRouteInternal
+              v-else-if="aboveMediumBP"
               id="btn-get-in-touch-medium"
-              class="hidden md:block lg:hidden"
+              class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
               linkTo="/help/contact"
@@ -77,8 +79,12 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { DropdownLocation } from "~/types/location";
 
+const aboveMediumBP = useBreakpoint("md");
+const aboveLargeBP = useBreakpoint("lg");
+
 const headerOpacity: Ref<number> = ref(1);
 const prevScrollY: Ref<number> = ref(0);
 

frontend/components/landing/LandingSplash.vue

@@ -14,11 +14,11 @@
       <div
         class="w-10/12 text-center text-base sm:text-xl md:w-3/4 md:text-lg xl:text-2xl"
       >
-        <div class="hidden flex-col space-y-1 md:block xl:space-y-2">
+        <div v-if="aboveMediumBP" class="block flex-col space-y-1 xl:space-y-2">
           <p>{{ $t("components.landing-splash.message-1") }}</p>
           <p>{{ $t("components.landing-splash.message-2") }}</p>
         </div>
-        <p class="md:hidden">
+        <p v-else>
           {{ $t("components.landing-splash.message-1") }}&nbsp;{{
             $t("components.landing-splash.message-2")
           }}
@@ -37,3 +37,9 @@
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
+const aboveMediumBP = useBreakpoint("md");
+</script>

frontend/components/menu/MenuSubPageSelector.vue

@@ -13,14 +13,14 @@
             }"
             :to="localePath(selector.routeURL)"
           >
-            <div class="md:hidden">
+            <div v-if="!aboveMediumBP">
               <Icon
                 v-if="selector.iconName"
                 :name="selector.iconName"
                 size="1em"
               />
             </div>
-            <p :class="{ 'hidden md:block': selector.iconName }">
+            <p v-if="!selector.iconName || aboveMediumBP">
               {{ selector.label }}
             </p>
           </NuxtLink>
@@ -32,13 +32,16 @@
 
 <script setup lang="ts">
 import { Tab, TabGroup, TabList } from "@headlessui/vue";
+import useBreakpoint from "~/composables/useBreakpoint";
 import type { SubPageSelector } from "~/types/sub-page-selector";
 
 const props = defineProps<{
   selectors: SubPageSelector[];
   selectedRoute: number;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const localePath = useLocalePath();
 const nuxtApp = useNuxtApp();
 const router = useRouter();

frontend/components/modal/qr-code/ModalQRCode.vue

@@ -55,8 +55,9 @@
             {{ $t("components.modal-qr-code.section-3-paragraph-1") }}
           </p> -->
         <BtnActionDropdown
+          v-if="aboveMediumBP"
           @main-btn-clicked="handleMainBtnClicked"
-          class="hidden w-fit md:block"
+          class="block w-fit"
           :cta="true"
           :label="$t('components.btn-action-dropdown.download-qr-code')"
           fontSize="lg"
@@ -97,8 +98,9 @@
         </button>
       </div>
       <BtnActionDropdown
+        v-if="!aboveMediumBP"
         @main-btn-clicked="handleMainBtnClicked"
-        class="w-fit md:hidden"
+        class="w-fit"
         :cta="true"
         :label="$t('components.btn-action-dropdown.download-qr-code')"
         fontSize="lg"
@@ -119,6 +121,7 @@
 
 <script setup lang="ts">
 import { DialogTitle } from "@headlessui/vue";
+import useBreakpoint from "~/composables/useBreakpoint";
 import { useLinkURL } from "~/composables/useLinkURL";
 import type { User } from "~/types/auth/user";
 import type { Resource } from "~/types/content/resource";
@@ -136,6 +139,8 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const { linkURL } = useLinkURL(props);
 const modals = useModals();
 const modalName = "ModalsQRCode";

frontend/components/page/PageContent.vue

@@ -1,7 +1,8 @@
 <template>
   <!-- Note: image on top of content. -->
   <img
-    class="mb-4 h-40 sm:h-52 md:hidden"
+    v-if="!aboveMediumBP"
+    class="mb-4 h-40 sm:h-52"
     :src="imgURL + '_' + $colorMode.value + '.png'"
     :alt="$t(imgAltText)"
   />
@@ -14,17 +15,19 @@
     <div class="items-center space-y-4 text-left md:items-start">
       <!-- Note: image floating right of content. -->
       <img
-        class="float-right hidden h-52 p-4 md:block lg:h-64 2xl:hidden"
+        v-if="aboveMediumBP && !above2xlBP"
+        class="float-right block h-52 p-4 lg:h-64"
         :src="imgURL + '_' + $colorMode.value + '.png'"
         :alt="$t(imgAltText)"
       />
-      <PageBreadcrumbs v-if="includeBreadcrumbs" class="hidden md:block" />
+      <PageBreadcrumbs v-if="includeBreadcrumbs && aboveMediumBP" />
       <slot />
     </div>
     <div class="flex justify-end pr-32">
       <!-- Note: image right of content. -->
       <img
-        class="hidden h-72 2xl:block"
+        v-if="above2xlBP"
+        class="block h-72"
         :src="imgURL + '_' + $colorMode.value + '.png'"
         :alt="$t(imgAltText)"
       />
@@ -33,12 +36,17 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
 export interface Props {
   imgURL: string;
   imgAltText: string;
   includeBreadcrumbs?: boolean;
 }
 
+const aboveMediumBP = useBreakpoint("md");
+const above2xlBP = useBreakpoint("2xl");
+
 withDefaults(defineProps<Props>(), {
   includeBreadcrumbs: false,
 });