@asd20/ui 3.2.752 → 3.2.754

package/package.json

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

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

@@ -97,183 +97,152 @@
     </asd20-page-content>
 
     <div class="asd20-school-details">
-      <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
+      <section class="asd20-school-details__primary-content">
+        <!-- <asd20-open-seats
             :seats="openSeats"
             class="asd20-school-details__open-seats"/> -->
 
-            <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
-              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
-              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"
+        <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
-              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-item
+              v-if="organization.administrators[0].phone"
+              :description="organization.administrators[0].phone"
+              condensed
+              align-top
+              icon="phone-alt"
             />
-
-            <!-- <asd20-list
+          </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
+          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
+          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"
@@ -296,35 +265,33 @@
             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>
+      </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>
     </div>
 
     <!-- Feeds -->
@@ -751,12 +718,48 @@ export default {
       }
     }
   }
-  .hide-on-desktop {
-    display: none !important;
-  }
 }
 
 @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-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-school-details {
     &__primary-content {
       padding: space(2);