fix(ui): search scrolling, filter layout, nav grouping, syllabus feedback history

src/components/AppHeader.vue

@@ -17,6 +17,10 @@
   margin-bottom: 0rem;
 }
 
+.app-header-link {
+  margin-right: 2.5rem;
+}
+
 .logo {
   height: 100%;
   width: auto;

src/components/CheckboxCompnent.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   selectAll?: () => void;
   isDisabled?: boolean;
   isCapitalized?: boolean;
+  isIndeterminate?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue', 'selectAll']);
@@ -39,7 +40,7 @@ const model = computed({
       :checked="checked"
       :disabled="isDisabled"
     />
-    <span class="checkmark"></span>
+    <span class="checkmark" :class="{ indeterminate: isIndeterminate }"></span>
   </label>
 </template>
 <style scoped>
@@ -91,12 +92,12 @@ const model = computed({
 /* Create a custom checkbox */
 .checkmark {
   position: absolute;
-  top: 0.25rem;
+  top: 0.3125rem;
   left: 0;
-  height: 1rem;
-  width: 1rem;
+  height: 0.875rem;
+  width: 0.875rem;
   background-color: var(--neutral-0);
-  outline: 0.125rem solid var(--neutral-50);
+  outline: 0.1rem solid var(--neutral-50);
   border-radius: 0.125rem;
 }
 
@@ -122,12 +123,19 @@ const model = computed({
   display: block;
 }
 
+/* Partial selection (e.g. "select all" with only some items ticked): show a dash */
+.container .checkmark.indeterminate:after {
+  display: block;
+  top: 0.375rem;
+  height: 0.125rem;
+}
+
 /* Style the checkmark/indicator */
 .container .checkmark:after {
-  left: 0.25rem;
-  top: 0.25rem;
-  width: 0.5rem;
-  height: 0.5rem;
+  left: 0.21875rem;
+  top: 0.21875rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
   background-color: var(--primary);
 }
 </style>

src/components/FiltersComponent.vue

@@ -15,40 +15,15 @@ const props = defineProps<{
 }>();
 
 const sourcesStore = useSourcesStore();
-const availableSources = ref(sourcesStore.sourcesList);
 const { shouldClose } = toRefs(props);
 
-const handleSearchFilters = (event: Event) => {
-  if (!(event.target instanceof HTMLInputElement))
-    availableSources.value = sourcesStore.sourcesList;
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-  let temp = undefined;
-
-  for (const [category, sources] of Object.entries(sourcesStore.sourcesList)) {
-    const filteredSources = sources.filter((source) =>
-      source.name.toLowerCase().includes(value.toLowerCase())
-    );
-    if (filteredSources.length > 0) {
-      temp = temp || {};
-      temp[category] = filteredSources;
-    }
-  }
-
-  availableSources.value = temp || sourcesStore.sourcesList;
-};
-
 const hideFilters = ref(false);
 watch(shouldClose, (close) => {
   if (close) {
     hideFilters.value = close;
   }
 });
 
-watch(sourcesStore, () => {
-  availableSources.value = sourcesStore.sourcesList;
-});
-
 const filters = useFiltersStore();
 const toggleFilters = () => (hideFilters.value = !hideFilters.value);
 
@@ -70,22 +45,6 @@ const clearFilters = () => {
   </div>
   <div v-if="filters.hasFilters" class="is-flex">
     <div class="is-flex is-flex-direction-column">
-      <div class="is-flex flex-wrap selection mb-1" v-if="filters.languageFilters.length">
-        <p>{{ $t('languages') }}{{ $t(':') }}</p>
-        <GenericPillComponent
-          class="mx-1"
-          bgColor="primary"
-          :key="filter"
-          v-for="filter in filters.languageFilters"
-          :content="$t(`lang.${filter}`, `${filter}`)"
-        >
-          <template #actions>
-            <span class="is-clickable" @click="filters.handleLanguageFilterChange(filter)">
-              x
-            </span>
-          </template>
-        </GenericPillComponent>
-      </div>
       <div class="is-flex flex-wrap selection mb-1" v-if="filters.sourcesFilters.length">
         <p>{{ $t('sources') }}{{ $t(':') }}</p>
         <GenericPillComponent
@@ -114,36 +73,45 @@ const clearFilters = () => {
           </template>
         </GenericPillComponent>
       </div>
+      <div class="is-flex flex-wrap selection mb-1" v-if="filters.languageFilters.length">
+        <p>{{ $t('languages') }}{{ $t(':') }}</p>
+        <GenericPillComponent
+          class="mx-1"
+          bgColor="primary"
+          :key="filter"
+          v-for="filter in filters.languageFilters"
+          :content="$t(`lang.${filter}`, `${filter}`)"
+        >
+          <template #actions>
+            <span class="is-clickable" @click="filters.handleLanguageFilterChange(filter)">
+              x
+            </span>
+          </template>
+        </GenericPillComponent>
+      </div>
     </div>
     <p class="ml-auto mr-6 remove-all" @click="clearFilters">{{ $t('removeAll') }}</p>
   </div>
   <p v-else>
     <span class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
   </p>
   <div :class="{ hide: hideFilters }" class="pr-5 filters">
-    <input
-      class="input"
-      type="text"
-      :placeholder="$t('searchBarPlaceholder')"
-      @keyup="handleSearchFilters"
-    />
-
     <details class="filter-section" open>
-      <summary>{{ $t('languages') }}</summary>
+      <summary>{{ $t('sources') }}</summary>
       <div class="filter-options">
-        <LanguagesSelector :availableLanguages="filters.languageList" />
+        <SourcesSelector :availableSources="sourcesStore.sourcesList || {}" />
       </div>
     </details>
     <details class="filter-section" open>
-      <summary>{{ $t('sources') }}</summary>
+      <summary>{{ $t('sdgsAcronym') }}</summary>
       <div class="filter-options">
-        <SourcesSelector :availableSources="availableSources" />
+        <SDGSelector />
       </div>
     </details>
     <details class="filter-section" open>
-      <summary>{{ $t('sdgsAcronym') }}</summary>
+      <summary>{{ $t('languages') }}</summary>
       <div class="filter-options">
-        <SDGSelector />
+        <LanguagesSelector :availableLanguages="filters.languageList" />
       </div>
     </details>
   </div>

src/components/FooterComponent.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { WL_FEEDBACK_FORM_URL } from '@/utils/constants';
+import { useFeatureFlipStore } from '@/stores/featureFlip';
+
+const featureFlip = useFeatureFlipStore();
 </script>
 
 <template>
@@ -9,6 +12,9 @@ import { WL_FEEDBACK_FORM_URL } from '@/utils/constants';
     </div>
     <div>
       <a target="_blank" :href="WL_FEEDBACK_FORM_URL">{{ $t('giveFeedback') }}</a>
+      <router-link v-if="featureFlip.isFeatureEnabled('about')" class="about" to="/about">
+        <span class="item-name">{{ $t('nav.about') }}</span>
+      </router-link>
       <router-link class="terms" to="/terms">
         <span class="item-name">{{ $t('terms') }}</span>
       </router-link>
@@ -31,7 +37,8 @@ a {
   cursor: pointer;
 }
 
-a:first-child {
+a:first-child,
+.about {
   margin-right: 1rem;
   padding-right: 1rem;
   border-right: 1px solid var(--neutral-70);
@@ -48,7 +55,8 @@ a:hover {
     font-size: 0.8rem;
   }
 
-  a:first-child {
+  a:first-child,
+  .about {
     margin-right: 0.5rem;
     padding-right: 0.5rem;
   }