@byu-oit/vue-decision-processing-components 8.25.4 → 8.26.0

package/AdmitPeriodConfig.vue

@@ -61,6 +61,7 @@ export default {
 	accept: 'application/json',
 	'content-type': 'application/json'
       }
+      // This config is hosted in the domain-common-admit-periods repository
       const url = `https://admit-period-vocab-cdn.ces-admissionssupport-prd.amazon.byu.edu/${this.school}-admit-periods.json`
       const options = { headers, url }
       const r = await window.byu.auth.request(options)

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [8.26.0](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.4...v8.26.0) (2022-06-03)
+
+
+### Features
+
+* collapsing DetailsHeader - when scrolling and not mouseover - header collapses to a smaller size. ([05ef93a](https://github.com/byu-oit/vue-decision-processing-components/commit/05ef93aaaee0c05c0a6a1651b72d35f0a7cd2773))
+
 ### [8.25.4](https://github.com/byu-oit/vue-decision-processing-components/compare/v8.25.3...v8.25.4) (2022-06-01)
 
 

package/DetailsHeader.vue

@@ -14,24 +14,48 @@
    limitations under the License.
 -->
 <template>
-  <div class="applicant-details">
-    <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
-      <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
-    </div>
+  <div ref="container" class="header-container bg-secondary text-white" @mouseenter="mouseenter" @mouseleave="mouseleave">
 
-    <div class="name">
-      <slot name="applicantName">
-        <h2>{{application.applicantName}}</h2>
-      </slot>
+    <transition name="scale">
+    <div v-if="compact" class="applicant-details compact" key="compact">
+      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
+        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
+      </div>
+      <div class="name">
+        <slot name="applicantNameCompact"></slot>
+      </div>
+      <div class="applicant">
+        <slot name="applicantInfoCompact"></slot>
+      </div>
+      <div class="additional">
+        <slot name="additionalInfoCompact"></slot>
+      </div>
+      <div class="actions bg-light">
+        <slot name="actionsCompact"></slot>
+      </div>
     </div>
-    <div class="applicant">
-      <slot name="applicantInfo">
+    <div v-else class="applicant-details" key="expanded">
+      <div class="star" v-if="!hideStar && appId" :title="userFlag.isActive ? 'Remove from Tracking List' : 'Add to Tracking List'">
+        <starred-indicator :set="userFlag.isActive" @click="toggleApplicationStar" />
+      </div>
+      <div class="name">
+        <slot name="applicantName">
+        <h2>{{application.applicantName}}</h2>
+        </slot>
+      </div>
+      <div class="applicant">
+        <slot name="applicantInfo">
         <ApplicantInfo/>
-      </slot>
-    </div>
-    <div class="additional">
-      <slot name="additionalInfo"></slot>
+        </slot>
+      </div>
+      <div class="additional">
+        <slot name="additionalInfo"></slot>
+      </div>
+      <div class="actions bg-light text-body">
+        <slot name="actions"></slot>
+      </div>
     </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -56,6 +80,12 @@ export default {
       type: String
     }
   },
+  data () {
+    return {
+      compact: false,
+      hovering: false
+    }
+  },
   computed: {
     ...mapState({
       userInfo: 'userInfo',
@@ -81,20 +111,56 @@ export default {
         flagValue: 'S-' + this.userInfo.byuId,
         flagState: userFlagSet ? 'clear' : 'set'
       })
+    },
+    handleScroll (event) {
+      if (!this.hovering) {
+        const containerElem = this.$refs.container
+        const containerTopY = containerElem.getBoundingClientRect().top
+        // Prevent flickering when just over the scroll threshold
+        if (this.compact) {
+          this.compact = containerTopY < 50
+        } else {
+          this.compact = containerTopY <= 0
+        }
+      }
+    },
+    mouseenter () {
+      this.compact = false
+      this.hovering = true
+    },
+    mouseleave (event) {
+      this.hovering = false
+      this.handleScroll(event)
     }
   },
-  filters: { yearTermFormat }
+  filters: { yearTermFormat },
+  mounted () {
+    window.addEventListener("scroll", this.handleScroll)
+  },
+  beforeUnmount () {
+    window.removeEventListener("scroll", this.handleScroll)
+  }
 }
 </script>
 <style scoped>
+.header-container {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.header-container > * {
+  grid-column: 1/2;
+  grid-row: 1/2;
+}
+
 .applicant-details {
   display: grid;
-  grid-template-columns: 3rem 2fr 1fr;
+  grid-template-columns: 3rem minmax(40vw, 2fr) minmax(20vw, 1fr) minmax(auto, 30vw);
   grid-template-rows: repeat(2, auto);
   grid-column-gap: 0.5rem;
   grid-template-areas:
-  "star name additional"
-  "star applicant additional";
+  "star name additional actions"
+  "star applicant additional actions";
 }
 
 .star {
@@ -117,4 +183,24 @@ export default {
   padding: 0.5rem;
 }
 
+.actions {
+  grid-area: actions;
+  padding: 0.5rem;
+}
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.scale-enter {
+  opacity: 0;
+  transform: scaleY(0.5) translateY(0.5rem);
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scaleY(0.5) translateY(-0.5rem);
+}
+
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byu-oit/vue-decision-processing-components",
-  "version": "8.25.4",
+  "version": "8.26.0",
   "description": "Vue components shared between decision processing systems for the CES schools.",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",