From 5c3ed54337cd578744daebfdf65157bfce317cc9 Mon Sep 17 00:00:00 2001
From: Alec Taylor Ostheimer Biography
-
\ No newline at end of file
diff --git a/components/byu-faculty-listing/byu-faculty-listing.js b/components/byu-faculty-listing/byu-faculty-listing.js
index c40ce13..4432023 100644
--- a/components/byu-faculty-listing/byu-faculty-listing.js
+++ b/components/byu-faculty-listing/byu-faculty-listing.js
@@ -29,6 +29,7 @@ const ATTR_OFFICE_HOURS = 'faculty-office-hours';
const ATTR_RESEARCH = 'faculty-research';
const ATTR_BIOGRAPHY = 'faculty-biography';
const ATTR_PROFILE_LINK = 'faculty-profile-link';
+const ATTR_SIZE = 'size';
const DEFAULT_INFORMATION = "Unknown";
@@ -46,6 +47,7 @@ class ByuFacultyListing extends HTMLElement {
truncateText(this);
setupSlotListeners(this);
clearEmptyFields(this);
+ switchToSmall(this);
});
}
@@ -54,7 +56,7 @@ class ByuFacultyListing extends HTMLElement {
}
static get observedAttributes() {
- return [ATTR_PROFILE_IMAGE, ATTR_NAME, ATTR_TITLE, ATTR_OFFICE, ATTR_PHONE, ATTR_EMAIL, ATTR_OFFICE_HOURS, ATTR_RESEARCH, ATTR_BIOGRAPHY, ATTR_PROFILE_LINK];
+ return [ATTR_PROFILE_IMAGE, ATTR_NAME, ATTR_TITLE, ATTR_OFFICE, ATTR_PHONE, ATTR_EMAIL, ATTR_OFFICE_HOURS, ATTR_RESEARCH, ATTR_BIOGRAPHY, ATTR_PROFILE_LINK, ATTR_SIZE];
}
attributeChangedCallback(attr, oldValue, newValue) {
@@ -77,9 +79,21 @@ class ByuFacultyListing extends HTMLElement {
case ATTR_PROFILE_IMAGE:
applyProfileImage(this);
break;
+ case ATTR_SIZE:
+ //switchToSmall(this);
+ //break;
}
}
+
+ set size(value){
+ this.setAttribute(ATTR_SIZE, value);
+ }
+
+ get size(){
+ return this.getAttribute(ATTR_SIZE);
+ }
+
set name(value) {
this.setAttribute(ATTR_NAME, value);
}
@@ -239,7 +253,6 @@ function truncateText(component) {
function clearEmptyFields(component) {
let office_hours = component.shadowRoot.querySelectorAll('.office-hours-slot-wrapper');
-
for (var i = 0; i < office_hours.length; i++) {
var element = office_hours[i];
element = element.children[2];
@@ -269,6 +282,23 @@ function clearEmptyFields(component) {
}
}
+//This function switches the layout to smaller icon thingys
+function switchToSmall(component) {
+ if(component.size == 'small'){
+ component.shadowRoot.querySelector('.container-fluid').setAttribute('id', 'main-column');
+ let maincol = component.shadowRoot.querySelector('#main-column');
+ maincol.classList.remove('container-fluid');
+ maincol.classList.add('col-sm-3');
+ let research = maincol.querySelector('.research-slot-wrapper');
+ let biography = maincol.querySelector('.biography-slot-wrapper');
+ research.classList.add('hide');
+ biography.classList.add('hide');
+ maincol.querySelector('#faculty-listing-column-left').classList = '';
+ maincol.querySelector('#faculty-listing-column-right').classList = '';
+ maincol.querySelector('#faculty-listing-column-middle').classList = '';
+
+ }
+}
function setupButtonListeners(component) {
// let button = component.shadowRoot.querySelector('.root');
diff --git a/components/byu-faculty-listing/byu-faculty-listing.scss b/components/byu-faculty-listing/byu-faculty-listing.scss
index 7d22dd0..fcd4dde 100644
--- a/components/byu-faculty-listing/byu-faculty-listing.scss
+++ b/components/byu-faculty-listing/byu-faculty-listing.scss
@@ -82,6 +82,9 @@
}
}
+#main-column{
+ @include maincol();
+}
.slot > ::slotted(p) {
@include rootSlottedP();
@@ -108,6 +111,7 @@
}
//The @media section helps keep the card transitions smooth and looking proportional
+
@media only screen and (max-width: 1290px) {
.container-fluid{
margin-right: 10%;
@@ -170,4 +174,4 @@
.col-md-3 {
width: 25%;
}
-}
\ No newline at end of file
+}
diff --git a/demo.html b/demo.html
index d4abfba..216d8d3 100644
--- a/demo.html
+++ b/demo.html
@@ -73,7 +73,7 @@
Faculty Listing Examples
-
combustion, and air pollution control, with an emphasis on CFD simulation
of these processes.
This is where the CV goes!