fix: Student Projects feedback and accordions (#622)

* using a specific red for bulleted items in PageEduStudentProject * adjusting styles for BlockText ul bullets at different viewports, adding ability to style all filters in a group the same, even if mixing accordions and non-accordions * switching accordion close icon * removing unused import * removing router links from listing page results * moving BlockText scss back to common package
nasa-jpl · Sep 17, 2024 · 2f88340 · 2f88340
1 parent cc7199b
commit 2f88340
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 10 deletions.
diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -175,6 +175,18 @@
       @apply mb-0;
     }
   }
+  &.-medium {
+    ul {
+      li {
+        &::before {
+          @apply mt-3;
+          @screen lg {
+            @apply mt-3.5;
+          }
+        }
+      }
+    }
+  }
   // other sizes
   &.-small {
     p {
@@ -243,5 +255,15 @@
         }
       }
     }
+    ul {
+      li {
+        &::before {
+          @apply mt-2.5;
+          @screen lg {
+            @apply mt-3;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue b/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue
@@ -3,6 +3,7 @@ import { computed, reactive, ref } from 'vue'
 import type { AccordionItemObject } from './../../interfaces.ts'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
+import IconMinus from './../Icons/IconMinus.vue'
 
 export interface BaseAccordionItemProps {
   headingLevel?: string
@@ -76,9 +77,9 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
               </slot>
               <span
                 class="BaseAccordion-icon pointer-events-none text-xs text-action flex-shrink-0 transform transition-transform"
-                :class="{ 'rotate-45': !isHidden }"
               >
-                <IconPlus />
+                <IconPlus v-if="isHidden" />
+                <IconMinus v-else />
               </span>
             </button>
           </component>

diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.vue
@@ -81,7 +81,8 @@
           <!-- correct for zero based index -->
           <div
             v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
-            class="flex my-2"
+            class="flex"
+            :class="{ 'pt-2 mt-2 mb-3': styleAsAccordion, 'my-2': !styleAsAccordion }"
           >
             <input
               :id="
@@ -102,9 +103,10 @@
                   : generateId(bucket.key, groupKey)
               "
               class="form-check-label pl-2 tracking-normal align-middle"
+              :class="{ 'font-extrabold': styleAsAccordion }"
             >
               {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-              <span class="text-gray-mid-dark text-sm">
+              <span class="text-gray-mid-dark text-sm font-normal">
                 ({{ bucket.doc_count.toLocaleString() }})
               </span>
             </label>
@@ -180,6 +182,12 @@ export default {
     subFilterAggKey: {
       type: String,
       default: undefined
+    },
+    // force accordion styles and spacing even if there are no subfilters
+    // useful when mixing filters with and without subfilters together
+    styleAsAccordion: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:filterBy'],

diff --git a/...ages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue b/...ages/vue/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
+import IconMinus from './../Icons/IconMinus.vue'
 
 export interface SearchFilterGroupAccordionItemProps {
   initOpen?: boolean
@@ -57,10 +58,10 @@ const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordio
           @click="handleClick()"
         >
           <span
-            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0 transform transition-transform"
-            :class="{ '!rotate-45': !isHidden }"
+            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0"
           >
-            <IconPlus />
+            <IconPlus v-if="isHidden" />
+            <IconMinus v-else />
           </span>
         </button>
       </template>

diff --git a/packages/vue/src/components/SearchResultsList/SearchResultsList.vue b/packages/vue/src/components/SearchResultsList/SearchResultsList.vue
@@ -193,9 +193,11 @@ export default defineComponent({
               page.id = page._id
               page.score = page._score
               // ensure router links
+              // TODO: issues with router links so disabling for now
+              // page.url = page._source.url
+              //   ? page._source.url.replace(/^[^:]+:\/\/[^/?#]+/, '')
+              //   : undefined
               page.url = page._source.url
-                ? page._source.url.replace(/^[^:]+:\/\/[^/?#]+/, '')
-                : undefined
               page.title = page._source.title
               page.type = pageType
               page.topic = topic

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
@@ -452,7 +452,8 @@ const computedClass = computed((): string => {
     ul {
       li {
         &::before {
-          @apply bg-secondary;
+          // intentionally using a specific red
+          @apply bg-jpl-red;
         }
       }
     }