@asd20/ui 3.2.751 → 3.2.753

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.751",
+  "version": "3.2.753",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -103,8 +103,8 @@
             class="asd20-school-details__open-seats"/> -->
 
         <div
-          v-if="organization.administrators"
-          class="asd20-school-details__leadership"
+          v-if="organization.administrators[0].lastName"
+          class="asd20-school-details__leadership primary-section"
         >
           <asd20-list
             headline="Leadership"
@@ -112,12 +112,15 @@
             align-top
             icon="committee"
           />
+          <!-- <h2 v-if="organization.administrators[0].lastName">Leadership</h2> -->
           <h3>
             <b>
               {{ organization.administrators[0].firstName }}
               {{ organization.administrators[0].lastName }}
               <br />
-              <small>Principal</small>
+              <small v-if="organization.administrators[0].lastName"
+                >Principal/Administrator</small
+              >
             </b>
           </h3>
 
@@ -142,11 +145,18 @@
         <asd20-list
           v-if="organization.yearFounded || organization.enrollment"
           :items="organization.numbersListItems"
-          :column-width="240"
-          class="asd20-school-details__numbers"
+          class="asd20-school-details__numbers primary-section"
           headline="By the Numbers"
           icon="info"
         >
+          <asd20-list-item
+            v-if="organization.educationLevels"
+            label="Offered at This School"
+            :description="getGradeRange"
+            condensed
+            align-top
+            icon=""
+          />
           <asd20-list-item
             v-if="organization.yearFounded"
             label="Year Founded"
@@ -173,17 +183,17 @@
               condensed: true,
             }))
           "
-          class="asd20-school-details__feeder-schools"
+          class="asd20-school-details__feeder-schools primary-section"
           headline="Feeder Schools"
           icon="school"
         />
 
         <asd20-list
-          v-if="organization.awardsHonors.length > 0"
+          v-if="organization.uniqueOfferings.length > 0"
           :items="
-            organization.awardsHonors
-              .map(a => ({
-                label: a,
+            organization.uniqueOfferings
+              .map(u => ({
+                label: u,
                 alignTop: true,
                 checked: true,
                 condensed: true,
@@ -192,17 +202,17 @@
                 a.label > b.label ? 1 : b.label > a.label ? -1 : 0
               )
           "
-          class="asd20-school-details__awards-honors"
-          icon="award"
-          headline="Awards &amp; Honors"
+          class="asd20-school-details__unique-offerings primary-section"
+          headline="Unique Offerings"
+          icon="group"
         />
 
         <asd20-list
-          v-if="organization.uniqueOfferings.length > 0"
+          v-if="organization.awardsHonors.length > 0"
           :items="
-            organization.uniqueOfferings
-              .map(u => ({
-                label: u,
+            organization.awardsHonors
+              .map(a => ({
+                label: a,
                 alignTop: true,
                 checked: true,
                 condensed: true,
@@ -211,9 +221,9 @@
                 a.label > b.label ? 1 : b.label > a.label ? -1 : 0
               )
           "
-          class="asd20-school-details__unique-offerings"
-          headline="Unique Offerings"
-          icon="group"
+          class="asd20-school-details__awards-honors primary-section"
+          icon="award"
+          headline="Awards &amp; Honors"
         />
 
         <asd20-list
@@ -227,10 +237,34 @@
                 '<a href=https://www.asd20.org/preschool>Learn more and apply.</a>',
             },
           ]"
-          class="asd20-school-details__unique-offerings"
+          class="asd20-school-details__unique-offerings primary-section"
           headline="Preschool Offered"
           icon="bell"
         />
+
+        <!-- <asd20-list
+            v-if="organization.awardsHonorsListItems.length > 0"
+            :items="organization.awardsHonorsListItems"
+            class="asd20-school-details__awards-honors"
+            icon="award"
+            headline="Awards &amp; Honors"
+          />
+
+          <asd20-list
+            v-if="organization.uniqueOfferingsListItems.length > 0"
+            :items="organization.uniqueOfferingsListItems"
+            class="asd20-school-details__unique-offerings"
+            headline="Unique Offerings"
+            icon="group"
+          />
+
+          <asd20-list
+            v-if="organization.educationLevels.indexOf('Preschool') > -1"
+            :items="[{ checked: true, condensed: true, description: 'Preschool may be available for families living inside school boundaries. <a href=https://www.asd20.org/preschool>Learn more and apply.</a>' }]"
+            class="asd20-school-details__unique-offerings"
+            headline="Preschool Offered"
+            icon="bell"
+          /> -->
       </section>
 
       <section class="asd20-school-details__secondary-content">
@@ -247,7 +281,6 @@
             :items="artsListItems"
             class="asd20-school-details__arts-offerings"
             headline="Arts Offerings"
-            multi-column
             icon="arts"
           />
           <asd20-list
@@ -255,7 +288,6 @@
             :items="athleticsListItems"
             class="asd20-school-details__athletics-offerings"
             headline="Athletics Offerings"
-            multi-column
             icon="athletics"
           />
         </div>
@@ -431,6 +463,66 @@ export default {
         }))
         .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0))
     },
+    getGradeRange() {
+      let levels = this.organization.educationLevels
+      let gradeRange = []
+
+      // Check for Preschool
+      if (levels.includes('Preschool')) {
+        gradeRange.push('Preschool')
+      }
+
+      // Check for Kindergarten
+      if (levels.includes('Kindergarten')) {
+        gradeRange.push('Kindergarten')
+      }
+
+      // Check for Elementary thru High
+      if (
+        levels.includes('Elementary') &&
+        levels.includes('Middle') &&
+        levels.includes('High')
+      ) {
+        gradeRange.push('Grades 1 - 12')
+      } else if (
+        levels.includes('Elementary') &&
+        levels.includes('Middle') &&
+        !levels.includes('High')
+      ) {
+        gradeRange.push('Grades 1 - 8')
+      } else if (
+        levels.includes('Elementary') &&
+        !levels.includes('Middle') &&
+        !levels.includes('High')
+      ) {
+        gradeRange.push('Grades 1 - 5')
+      } else if (
+        !levels.includes('Elementary') &&
+        levels.includes('Middle') &&
+        levels.includes('High')
+      ) {
+        gradeRange.push('Grades 6 - 12')
+      } else if (
+        !levels.includes('Elementary') &&
+        levels.includes('Middle') &&
+        !levels.includes('High')
+      ) {
+        gradeRange.push('Grades 6 - 8')
+      } else if (
+        !levels.includes('Elementary') &&
+        !levels.includes('Middle') &&
+        levels.includes('High')
+      ) {
+        gradeRange.push('Grades 9 - 12')
+      }
+
+      // Generate the final grade range string
+      if (gradeRange.length > 0) {
+        return gradeRange.join(', ')
+      } else {
+        return 'Grade range not specified'
+      }
+    },
   },
 }
 </script>
@@ -477,6 +569,20 @@ export default {
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
+
+  .asd20-icon {
+    fill: var(--color__accent-t40);
+  }
+
+  .asd20-contact {
+    padding: space(1);
+  }
+  .asd20-page-header__main {
+    background: var(--color__secondary-s30);
+  }
+  .asd20-page-header__lead {
+    color: var(--color__accent-t90);
+  }
   .asd20-page-header__content {
     width: auto;
   }
@@ -492,9 +598,30 @@ export default {
   .asd20-page-header__top img {
     border: 2px solid white;
   }
+  .asd20-page-header__tools {
+    flex-direction: row;
+  }
+  .asd20-page-header .back {
+    order: 1;
+  }
+  .asd20-page-header .right {
+    order: 2;
+  }
+
+  .button-group {
+    // background: asd20-swatch('background-alt', 5);
+    display: flex;
+    flex-shrink: 0;
+    justify-content: space-around;
+
+    // & > :first-child {
+    //   margin-right: auto;
+    // }
+  }
+
   .asd20-page-header h1 small {
-    font-size: 1.25rem !important;
-    color: var(--color__accent) !important;
+    font-size: 1.25rem;
+    color: var(--color__accent-t90);
     text-transform: uppercase;
     opacity: 1;
     position: relative;
@@ -506,6 +633,10 @@ export default {
     }
   }
 
+  .asd20-page-header__top + h1 {
+    // margin-top: space(2);
+  }
+
   .asd20-page-header__top img {
     display: block;
     object-fit: cover;
@@ -525,146 +656,85 @@ export default {
     background-image: url('/img/chalk-dark.png');
     background-position-y: top;
     padding: 0 space(1);
+    display: flex;
+    flex-wrap: wrap;
+    .primary-section {
+      width: 100%;
+      padding: 0 0 3rem 0;
+    }
     h2 {
       color: asd20-swatch('primary');
       font-size: 1.25rem;
     }
     h3 {
-      font-size: 1.15rem;
+      font-size: 1rem;
     }
   }
+
   &__secondary-content {
     padding: space(1);
+    display: flex;
+    flex-direction: column;
+    .asd20-school-details__academics-offerings {
+      max-width: 90%;
+      padding-bottom: 2rem;
+    }
+    .asd20-school-details__athletics-offerings {
+      margin-top: 2rem;
+    }
   }
+
   .asd20-list__headline {
     font-size: 1.25rem !important;
     color: asd20-swatch('primary');
   }
-}
 
-@media (min-width: 1024px) {
-  .asd20-template-profile {
-    @include template-desktop;
-    margin-left: space(3);
-    margin-top: 0;
-    .asd20-notification-group--floating {
-      position: absolute;
-      top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
-    }
-    .notification-group--inline {
-      margin: space(2) space(3) space(1) space(3);
-    }
+  .asd20-list__items {
+    margin: 0;
+  }
 
-    .asd20-page-content {
-      // margin-top: space(1);
-      display: flex;
-      justify-content: space-between;
-      align-items: stretch;
-      flex-wrap: wrap;
-      .asd20-widgets-section {
-        flex-basis: 30%;
-        padding: space(2) space(2) 0 0;
-        background: none;
-      }
-    }
-    .notification-group--inline {
-      flex-basis: 100%;
-      margin-bottom: 0 !important;
-    }
-    .primary-messaging-section {
-      max-width: 50vw;
+  .asd20-list-item--checked {
+    &::before {
+      margin-top: space(0.125);
     }
   }
-  @supports (display: grid) {
-    .asd20-page-header__image {
-      min-width: 40vw !important;
+}
 
-      img {
-        height: 100%;
-        object-fit: cover;
+@media (min-width: 768px) {
+  .asd20-school-details {
+    &__primary-content {
+      padding: space(2);
+      .primary-section {
+        width: 49%;
       }
     }
-    .asd20-school-details {
-      &__primary-content {
-        display: grid;
-        padding: space(3);
-        grid-template: min-content min-content min-content / 1fr 1fr 1fr;
-        grid-column-gap: space(3);
-        grid-row-gap: space(1);
-      }
-
-      .asd20-contact {
-        padding: space(1) space(3);
+    &__secondary-content {
+      padding: space(2);
+      display: flex;
+      flex-direction: row;
+      .asd20-school-details__academics-offerings {
+        max-width: 60%;
+        padding-right: 2rem;
       }
+    }
+  }
+  .hide-on-desktop {
+    display: none !important;
+  }
+}
 
-      &__awards-honors {
-        display: flex;
-        flex-direction: column;
-      }
-      &__unique-offerings {
-        display: flex;
-        flex-direction: column;
-      }
-      // &__open-seats {
-      //   grid-column: 2 / 3;
-      //   grid-row: 3 / 3;
-      // }
-      &__leadership {
-        display: flex;
-        flex-direction: column;
-      }
-      &__feeder-schools {
-        display: flex;
-        flex-direction: column;
-      }
-      &__numbers {
-        display: flex;
-        flex-direction: column;
-      }
-      &__secondary-content {
-        display: grid;
-        padding: space(3);
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: min-content min-content;
-        grid-auto-flow: row;
-        grid-column-gap: space(3);
-        grid-row-gap: space(1);
-      }
-      &__academic-offerings {
-        display: flex;
-        flex-direction: column;
-        grid-row: 1 / -1;
-      }
-      &__arts-offerings {
-        margin-bottom: 2rem;
-        // display: flex;
-        // flex-direction: column;
-        // grid-column: 2 / -1;
-        // grid-row: 1 / 2;
-      }
-      // &__athletics-offerings {
-      //   display: flex;
-      //   flex-direction: column;
-      //   grid-column: 2 / -1;
-      //   grid-row: 2 / -1;
-      //   &:nth-child(2) {
-      //     grid-row: 1 / -1;
-      //   }
-      // }
-      .otherOfferings {
-        display: flex;
-        flex-direction: column;
-        grid-column: 2 / -1;
-        grid-row: 1 / 2;
+@media (min-width: 1024px) {
+  .asd20-school-details {
+    &__primary-content {
+      padding: space(2);
+      .primary-section {
+        width: 31%;
+        padding: 0 1vw 3rem 1vw;
       }
     }
+    .asd20-contact {
+      padding: space(1) space(3);
+    }
   }
 }
 </style>