@asd20/ui 3.2.751 → 3.2.752

package/package.json

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

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

@@ -97,169 +97,234 @@
     </asd20-page-content>
 
     <div class="asd20-school-details">
-      <section class="asd20-school-details__primary-content">
-        <!-- <asd20-open-seats
+      <asd20-viewport scrollable>
+        <asd20-page-header v-bind="pageHeaderContent" />
+
+        <main class="asd20-school-details__body">
+          <section class="asd20-contact">
+            <!-- <h2>Contact</h2> -->
+            <div class="button-group ">
+              <asd20-button
+                :link="'tel:' + organization.phone"
+                :label="organization.phone"
+                icon="phone"
+                size="md"
+              />
+              <asd20-button
+                :link="organization.website"
+                target="_blank"
+                label="Website"
+                icon="website"
+                size="md"
+              />
+              <asd20-button
+                :link="
+                  `https://www.google.com/maps/search/?api=1&query=${organization.address.street1}&origin_place_id=${organization.name}`
+                "
+                target="_blank"
+                label="Directions"
+                icon="directions"
+                size="md"
+              />
+            </div>
+          </section>
+          <section class="asd20-school-details__primary-content">
+            <!-- <asd20-open-seats
             :seats="openSeats"
             class="asd20-school-details__open-seats"/> -->
 
-        <div
-          v-if="organization.administrators"
-          class="asd20-school-details__leadership"
-        >
-          <asd20-list
-            headline="Leadership"
-            condensed
-            align-top
-            icon="committee"
-          />
-          <h3>
-            <b>
-              {{ organization.administrators[0].firstName }}
-              {{ organization.administrators[0].lastName }}
-              <br />
-              <small>Principal</small>
-            </b>
-          </h3>
-
-          <asd20-list>
-            <asd20-list-item
-              v-if="organization.administrators[0].email"
-              :description="organization.administrators[0].email"
-              condensed
-              align-top
-              icon="email"
+            <div
+              v-if="organization.administrators[0].lastName"
+              class="asd20-school-details__leadership primary-section"
+            >
+              <asd20-list
+                headline="Leadership"
+                condensed
+                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 v-if="organization.administrators[0].lastName"
+                    >Principal/Administrator</small
+                  >
+                </b>
+              </h3>
+
+              <asd20-list>
+                <asd20-list-item
+                  v-if="organization.administrators[0].email"
+                  :description="organization.administrators[0].email"
+                  condensed
+                  align-top
+                  icon="email"
+                />
+                <asd20-list-item
+                  v-if="organization.administrators[0].phone"
+                  :description="organization.administrators[0].phone"
+                  condensed
+                  align-top
+                  icon="phone-alt"
+                />
+              </asd20-list>
+            </div>
+
+            <asd20-list
+              v-if="organization.yearFounded || organization.enrollment"
+              :items="organization.numbersListItems"
+              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"
+                :description="organization.yearFounded.toString()"
+                condensed
+                align-top
+                icon=""
+              />
+              <asd20-list-item
+                v-if="organization.enrollment"
+                label="Enrollment"
+                :description="organization.enrollment.toString()"
+                condensed
+                align-top
+                icon=""
+              />
+            </asd20-list>
+
+            <asd20-list
+              v-if="organization.feederOrganizations.length > 0"
+              :items="
+                organization.feederOrganizations.map(l => ({
+                  label: l,
+                  condensed: true,
+                }))
+              "
+              class="asd20-school-details__feeder-schools primary-section"
+              headline="Feeder Schools"
+              icon="school"
             />
-            <asd20-list-item
-              v-if="organization.administrators[0].phone"
-              :description="organization.administrators[0].phone"
-              condensed
-              align-top
-              icon="phone-alt"
+
+            <asd20-list
+              v-if="organization.uniqueOfferings.length > 0"
+              :items="
+                organization.uniqueOfferings
+                  .map(u => ({
+                    label: u,
+                    alignTop: true,
+                    checked: true,
+                    condensed: true,
+                  }))
+                  .sort((a, b) =>
+                    a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+                  )
+              "
+              class="asd20-school-details__unique-offerings primary-section"
+              headline="Unique Offerings"
+              icon="group"
             />
-          </asd20-list>
-        </div>
-
-        <asd20-list
-          v-if="organization.yearFounded || organization.enrollment"
-          :items="organization.numbersListItems"
-          :column-width="240"
-          class="asd20-school-details__numbers"
-          headline="By the Numbers"
-          icon="info"
-        >
-          <asd20-list-item
-            v-if="organization.yearFounded"
-            label="Year Founded"
-            :description="organization.yearFounded.toString()"
-            condensed
-            align-top
-            icon=""
-          />
-          <asd20-list-item
-            v-if="organization.enrollment"
-            label="Enrollment"
-            :description="organization.enrollment.toString()"
-            condensed
-            align-top
-            icon=""
+
+            <asd20-list
+              v-if="organization.awardsHonors.length > 0"
+              :items="
+                organization.awardsHonors
+                  .map(a => ({
+                    label: a,
+                    alignTop: true,
+                    checked: true,
+                    condensed: true,
+                  }))
+                  .sort((a, b) =>
+                    a.label > b.label ? 1 : b.label > a.label ? -1 : 0
+                  )
+              "
+              class="asd20-school-details__awards-honors primary-section"
+              icon="award"
+              headline="Awards &amp; Honors"
+            />
+
+            <asd20-list
+              v-if="organization.educationLevels.indexOf('Preschool') > -1"
+              :items="[
+                {
+                  alignTop: true,
+                  checked: true,
+                  condensed: true,
+                  description:
+                    '<a href=https://www.asd20.org/preschool>Learn more and apply.</a>',
+                },
+              ]"
+              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>
-
-        <asd20-list
-          v-if="organization.feederOrganizations.length > 0"
-          :items="
-            organization.feederOrganizations.map(l => ({
-              label: l,
-              condensed: true,
-            }))
-          "
-          class="asd20-school-details__feeder-schools"
-          headline="Feeder Schools"
-          icon="school"
-        />
-
-        <asd20-list
-          v-if="organization.awardsHonors.length > 0"
-          :items="
-            organization.awardsHonors
-              .map(a => ({
-                label: a,
-                alignTop: true,
-                checked: true,
-                condensed: true,
-              }))
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
-              )
-          "
-          class="asd20-school-details__awards-honors"
-          icon="award"
-          headline="Awards &amp; Honors"
-        />
-
-        <asd20-list
-          v-if="organization.uniqueOfferings.length > 0"
-          :items="
-            organization.uniqueOfferings
-              .map(u => ({
-                label: u,
-                alignTop: true,
-                checked: true,
-                condensed: true,
-              }))
-              .sort((a, b) =>
-                a.label > b.label ? 1 : b.label > a.label ? -1 : 0
-              )
-          "
-          class="asd20-school-details__unique-offerings"
-          headline="Unique Offerings"
-          icon="group"
-        />
-
-        <asd20-list
-          v-if="organization.educationLevels.indexOf('Preschool') > -1"
-          :items="[
-            {
-              alignTop: true,
-              checked: true,
-              condensed: true,
-              description:
-                '<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">
-        <asd20-list
-          v-if="academicsListItems.length > 0"
-          :items="academicsListItems"
-          class="asd20-school-details__academics-offerings"
-          headline="Academics Offerings"
-          icon="library"
-        />
-        <div class="otherOfferings">
+
           <asd20-list
-            v-if="artsListItems.length > 0"
-            :items="artsListItems"
-            class="asd20-school-details__arts-offerings"
-            headline="Arts Offerings"
-            multi-column
-            icon="arts"
+            v-if="organization.uniqueOfferingsListItems.length > 0"
+            :items="organization.uniqueOfferingsListItems"
+            class="asd20-school-details__unique-offerings"
+            headline="Unique Offerings"
+            icon="group"
           />
+
           <asd20-list
-            v-if="athleticsListItems.length > 0"
-            :items="athleticsListItems"
-            class="asd20-school-details__athletics-offerings"
-            headline="Athletics Offerings"
-            multi-column
-            icon="athletics"
-          />
-        </div>
-      </section>
+            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">
+            <asd20-list
+              v-if="academicsListItems.length > 0"
+              :items="academicsListItems"
+              class="asd20-school-details__academics-offerings"
+              headline="Academics Offerings"
+              icon="library"
+            />
+            <div class="otherOfferings">
+              <asd20-list
+                v-if="artsListItems.length > 0"
+                :items="artsListItems"
+                class="asd20-school-details__arts-offerings"
+                headline="Arts Offerings"
+                icon="arts"
+              />
+              <asd20-list
+                v-if="athleticsListItems.length > 0"
+                :items="athleticsListItems"
+                class="asd20-school-details__athletics-offerings"
+                headline="Athletics Offerings"
+                icon="athletics"
+              />
+            </div>
+          </section>
+        </main>
+      </asd20-viewport>
     </div>
 
     <!-- Feeds -->
@@ -431,6 +496,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 +602,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 +631,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 +666,10 @@ export default {
     }
   }
 
+  .asd20-page-header__top + h1 {
+    // margin-top: space(2);
+  }
+
   .asd20-page-header__top img {
     display: block;
     object-fit: cover;
@@ -525,146 +689,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>