diff --git a/README.md b/README.md index 7e9d0d0..77c5efe 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,8 @@ Then, place your content inside tags. See the demo for mor ## How it Works +### BYU Faculty Listing + ```html

Name

@@ -34,11 +36,54 @@ Place the url to the profile image in a "faculty-image" attribute of the tag. The content should then be placed in an appropriate slot (see above). +![BYU Faculty Listing](./byu-faculty-listing-example.png) + +### BYU Faculty Card +```html + +

Name

+ Title + Office Location + Phone Number + Email Address +
+``` +The card works just like the listing; however, it is excludes some of the content to make the card much smaller. The card is ideal if you want to display 3 or 4 listings one line. + +![BYU Faculty Card](./byu-faculty-card-example.png) + +### BYU Faculty Profile + +```html + +
Name
+ Title + Office Location + Phone Number + Email Address +

Place biography information here

+

Place research information here

+

Place papers information here

+

Place student information here

+

Place awards information here

+
Custom Header
+

Place custom body information here

+

Place education information here!

+

Place CV File here

+
+``` + +The faculty profile is best used as the destination link when clicking on a listing from above. It adds a few more slots that you are able to put more information into it. +It also lets you choose a background-image. Just put the link to the image and it will be seen in the profile. + +![BYU Faculty Profile](./byu-faculty-profile-example.png) -# Spec URL +## Tips +-If you don't need/want to fill all the slots, no worries. Just leave them out and they will automatically remove themselves from the component. -https://www.figma.com/file/FbyACEZ2W7UJKct4TZW1t8jL/New-Canvas-with-%232A-and-%233 +-To center the cards, just put a div around the entire card area, and style that div to text-align: center; + # Getting Started ``` diff --git a/byu-faculty-card-example.png b/byu-faculty-card-example.png new file mode 100644 index 0000000..a55c437 Binary files /dev/null and b/byu-faculty-card-example.png differ diff --git a/byu-faculty-listing-example.png b/byu-faculty-listing-example.png new file mode 100644 index 0000000..169547e Binary files /dev/null and b/byu-faculty-listing-example.png differ diff --git a/byu-faculty-profile-example.png b/byu-faculty-profile-example.png new file mode 100644 index 0000000..2d059ef Binary files /dev/null and b/byu-faculty-profile-example.png differ diff --git a/components/byu-faculty-card/byu-faculty-card-common.scss b/components/byu-faculty-card/byu-faculty-card-common.scss new file mode 100644 index 0000000..ecd8fbf --- /dev/null +++ b/components/byu-faculty-card/byu-faculty-card-common.scss @@ -0,0 +1,126 @@ +/*! + * @license + * Copyright 2017 Brigham Young University + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@mixin addBorder() { + border-bottom: solid; +} + +@mixin center() { + margin-left: auto; + margin-right: auto; +} + +@mixin contact() { + margin: 20px 0px 16px 0px; +} + +@mixin columnBase() { + padding: 8px; + vertical-align: top; +} + +@mixin facultyImage() { + height: 175px; + vertical-align: middle; + width: auto; + border-radius: 5px; + box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + -moz-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + -webkit-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; +} + +@mixin hide() { + display: none; +} + +@mixin noUnderline { + text-decoration: none; +} + +@mixin adjustedHeader { + color: #002e5d; + margin: 0; +} + +@mixin overflowBase() { + overflow: hidden; +} + +@mixin slottedHeader() { + margin-top: 0px; +} + +@mixin slottedHeaderDiv() { + display: block; + font-size: 1.5em; + font-weight: bold; + color: #002e5d; + font-family: "HCo Ringside Narrow SSm", Arial Narrow, sans-serif; + margin: 0; +} + +@mixin rootAdjustedHeight() { + height: 425px; +} + +@mixin rootBase() { + padding: 16px 16px 16px 16px; + background-color: #FFFFFF; + color: #515151; + font-family: "HCo Ringside Narrow SSm", Arial Narrow, sans-serif; + font-weight: 200; + line-height: 20px; + margin: 24px auto 24px auto; + min-width: 274px; + width: 25%; + max-width: 300px; + vertical-align: top; + display: inline-block; + margin: 20px 20px 20px 20px; + border-radius: 5px; + box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -moz-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -webkit-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + transition: 0.3s; +} + +@mixin rootSlottedH2() { + color: #002E5D; + font-family: "HCo Ringside Narrow SSm", Arial Narrow, sans-serif; + margin: 0px 0px 0px 0px; +} + +@mixin rootSlottedP() { + margin: 0px; +} + +@mixin sectionHeader() { + color: #002E5D; + margin: 12px 0px 0px 0px; +} + +@mixin showHiddenImage() { + display: block; + height: 150px; + margin: 0px auto 0px auto; + padding-top: 15px; + width: auto; +} + +@mixin maincol{ + margin: 30px; +} \ No newline at end of file diff --git a/components/byu-faculty-card/byu-faculty-card-extras.scss b/components/byu-faculty-card/byu-faculty-card-extras.scss new file mode 100644 index 0000000..fbe7379 --- /dev/null +++ b/components/byu-faculty-card/byu-faculty-card-extras.scss @@ -0,0 +1,18 @@ +/*! + * @license + * Copyright 2017 Brigham Young University + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import 'byu-faculty-card-common'; diff --git a/components/byu-faculty-card/byu-faculty-card.html b/components/byu-faculty-card/byu-faculty-card.html new file mode 100644 index 0000000..c229797 --- /dev/null +++ b/components/byu-faculty-card/byu-faculty-card.html @@ -0,0 +1,47 @@ + + + + + + +
+
+
+ +
+
+ +
+ + +
+
+ Office: +
+
+ Phone: +
+ +
+
+
+
\ No newline at end of file diff --git a/components/byu-faculty-card/byu-faculty-card.js b/components/byu-faculty-card/byu-faculty-card.js new file mode 100644 index 0000000..5fe7dc9 --- /dev/null +++ b/components/byu-faculty-card/byu-faculty-card.js @@ -0,0 +1,197 @@ +/** + * @license + * Copyright 2017 Brigham Young University + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +"use strict"; + +import template from './byu-faculty-card.html'; +import * as util from 'byu-web-component-utils'; + +const ATTR_PROFILE_IMAGE = "faculty-image"; +const ATTR_NAME = 'faculty-name'; +const ATTR_TITLE = 'faculty-title'; +const ATTR_OFFICE = 'faculty-office'; +const ATTR_PHONE = 'faculty-phone'; +const ATTR_EMAIL = 'faculty-email'; +const ATTR_OFFICE_HOURS = 'faculty-office-hours'; +const ATTR_PROFILE_LINK = 'faculty-profile-link'; +const ATTR_SIZE = 'size'; + +const DEFAULT_INFORMATION = "Unknown"; + +class ByuFacultyCard extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + //This will stamp our template for us, then let us perform actions on the stamped DOM. + util.applyTemplate(this, 'byu-faculty-card', template, () => { + applyProfileImage(this); + applyProfileLinks(this); + clearEmptyFields(this); + + }); + } + + disconnectedCallback() { + teardownButtonListeners(this); + } + + static get observedAttributes() { + return [ATTR_PROFILE_IMAGE, ATTR_NAME, ATTR_TITLE, ATTR_OFFICE, ATTR_PHONE, ATTR_EMAIL, ATTR_OFFICE_HOURS, ATTR_PROFILE_LINK, ATTR_SIZE]; + } + + attributeChangedCallback(attr, oldValue, newValue) { + switch (attr) { + case ATTR_NAME: + case ATTR_TITLE: + case ATTR_OFFICE: + case ATTR_PHONE: + case ATTR_EMAIL: + case ATTR_OFFICE_HOURS: + case ATTR_PROFILE_LINK: + applyProfileLinks(this); + break; + case ATTR_PROFILE_IMAGE: + applyProfileImage(this); + break; + case ATTR_SIZE: + //switchToSmall(this); + //break; + } + } + + set name(value) { + this.setAttribute(ATTR_NAME, value); + } + + get name() { + if (this.hasAttribute(ATTR_NAME)) { + return this.getAttribute(ATTR_NAME); + } + return DEFAULT_INFORMATION; + } + + set title(value) { + this.setAttribute(ATTR_TITLE, value); + } + + get title() { + if (this.hasAttribute(ATTR_TITLE)) { + return this.getAttribute(ATTR_TITLE); + } + return DEFAULT_INFORMATION; + } + + set office(value) { + this.setAttribute(ATTR_OFFICE, value); + } + + get office() { + if (this.hasAttribute(ATTR_OFFICE)) { + return this.getAttribute(ATTR_OFFICE); + } + return DEFAULT_INFORMATION; + } + + set phone(value) { + this.setAttribute(ATTR_PHONE, value); + } + + get phone() { + if (this.hasAttribute(ATTR_PHONE)) { + return this.getAttribute(ATTR_PHONE); + } + return DEFAULT_INFORMATION; + } + + set email(value) { + this.setAttribute(ATTR_EMAIL, value); + } + + get email() { + if (this.hasAttribute(ATTR_EMAIL)) { + return this.getAttribute(ATTR_EMAIL); + } + return DEFAULT_INFORMATION; + } + + set office_hours(value) { + this.setAttribute(ATTR_OFFICE_HOURS, value); + } + + get office_hours() { + if (this.hasAttribute(ATTR_OFFICE_HOURS)) { + return this.getAttribute(ATTR_OFFICE_HOURS); + } + return DEFAULT_INFORMATION; + } + + set profileImage(value) { + this.setAttribute(ATTR_PROFILE_IMAGE, value); + } + + get profileImage() { + if (this.hasAttribute(ATTR_PROFILE_IMAGE)) { + return this.getAttribute(ATTR_PROFILE_IMAGE); + } + return ''; + } + + set profileLink(value) { + this.setAttribute(ATTR_PROFILE_LINK, value); + } + + get profileLink() { + if (this.hasAttribute(ATTR_PROFILE_LINK)) { + return this.getAttribute(ATTR_PROFILE_LINK); + } + return ''; + } +} + +window.customElements.define('byu-faculty-card', ByuFacultyCard); +window.ByuFacultyCard = ByuFacultyCard; + +// -------------------- Helper Functions -------------------- +function applyProfileImage(component) { + let profileImages = component.shadowRoot.querySelectorAll('.faculty-image'); + + for (var i = 0; i < profileImages.length; i++) { + profileImages[i].src = component.profileImage; + //profileImages[i].parentNode.setAttribute('href', component.profileLink); + } +} + +function applyProfileLinks(component) { + let profileLinks = component.shadowRoot.querySelectorAll('.profile-link'); + for (var i = 0; i < profileLinks.length; i++) { + profileLinks[i].setAttribute('href', component.profileLink); + } +} + +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]; + + if (element.assignedNodes().length == 0) { + office_hours[i].classList.add("hide"); + } + } +} \ No newline at end of file diff --git a/components/byu-faculty-card/byu-faculty-card.scss b/components/byu-faculty-card/byu-faculty-card.scss new file mode 100644 index 0000000..0aefbe9 --- /dev/null +++ b/components/byu-faculty-card/byu-faculty-card.scss @@ -0,0 +1,106 @@ +/*! + * @license + * Copyright 2017 Brigham Young University + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import 'byu-faculty-card-common'; + +.adjusted-header { + @include adjustedHeader(); +} + +.contact-wrapper { + @include contact(); +} + +.contact-wrapper > div ::slotted(p) { + @include rootSlottedP(); +} + +.container-fluid{ + max-width: 1032px; + margin-right: auto; + margin-left: auto; +} + +.faculty-image { + @include facultyImage(); +} + +#faculty-listing-column-middle > a ::slotted(div) { + @include slottedHeaderDiv(); + text-align: center; +} + +#faculty-listing-column-middle > a ::slotted(h2) { + @include rootSlottedH2(); +} + +#faculty-listing-column-middle { + ::slotted(h2) { + @include slottedHeader(); + } +} +#faculty-listing-column-middle{ + text-align: center; +} + +.hide { + @include hide(); +} + +.image-wrapper{ + text-align: center; + margin-bottom: 15px; +} +.listing-root { + @include rootBase(); +} + +.listing-root { + ::slotted(h2) { + @include rootSlottedH2(); + } +} + +.listing-root { + ::slotted(p) { + @include rootSlottedP(); + } +} + +#main-column{ + @include maincol(); +} + +.slot > ::slotted(p) { + @include rootSlottedP(); +} + +.profile-link { + @include noUnderline(); +} + +.listing-root:hover{ + box-shadow: 1px 4px 15px 1px rgba(0,0,0,.2); + -moz-box-shadow: 1px 4px 15px 1px rgba(0,0,0,.2); + -webkit-box-shadow: 1px 4px 15px 1px rgba(0,0,0,.2); +} + +.section-header { + @include sectionHeader(); +} + +//The @media section helps keep the card transitions smooth and looking proportional \ No newline at end of file diff --git a/components/byu-faculty-card/package-lock.json b/components/byu-faculty-card/package-lock.json new file mode 100644 index 0000000..c78d56a --- /dev/null +++ b/components/byu-faculty-card/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "byu-faculty-card", + "version": "1.0.0", + "lockfileVersion": 1 +} diff --git a/components/byu-faculty-card/package.json b/components/byu-faculty-card/package.json new file mode 100644 index 0000000..de7aa7d --- /dev/null +++ b/components/byu-faculty-card/package.json @@ -0,0 +1,11 @@ +{ + "name": "byu-faculty-card", + "version": "1.0.0", + "description": "", + "main": "byu-faculty-card.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/components/byu-faculty-directory-components.js b/components/byu-faculty-directory-components.js index bb65f5f..4ad0c47 100644 --- a/components/byu-faculty-directory-components.js +++ b/components/byu-faculty-directory-components.js @@ -18,3 +18,4 @@ import './byu-faculty-listing/byu-faculty-listing.js'; import './byu-faculty-profile/byu-faculty-profile.js'; +import './byu-faculty-card/byu-faculty-card.js'; diff --git a/components/byu-faculty-directory-components.scss b/components/byu-faculty-directory-components.scss index 1ab2022..8df4207 100644 --- a/components/byu-faculty-directory-components.scss +++ b/components/byu-faculty-directory-components.scss @@ -17,3 +17,4 @@ @import 'byu-faculty-listing/byu-faculty-listing-extras.scss'; @import 'byu-faculty-profile/byu-faculty-profile-extras.scss'; +@import 'byu-faculty-card/byu-faculty-card-extras.scss'; diff --git a/components/byu-faculty-listing/byu-faculty-listing-common.scss b/components/byu-faculty-listing/byu-faculty-listing-common.scss index 71b001f..dfbf8c7 100644 --- a/components/byu-faculty-listing/byu-faculty-listing-common.scss +++ b/components/byu-faculty-listing/byu-faculty-listing-common.scss @@ -40,11 +40,12 @@ @mixin facultyImage() { height: 278px; vertical-align: middle; - width: auto; + max-width: 200px; border-radius: 5px; box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; -moz-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; -webkit-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + object-fit: cover; } @mixin hide() { @@ -96,10 +97,10 @@ min-width: 274px; min-height: 282px; vertical-align: top; - - -moz-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2); - box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2); + border-radius: 5px; + box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -moz-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -webkit-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; } @mixin rootMedium() { @@ -132,3 +133,7 @@ padding-top: 15px; width: auto; } + +@mixin maincol{ + margin: 30px; +} \ No newline at end of file diff --git a/components/byu-faculty-listing/byu-faculty-listing.html b/components/byu-faculty-listing/byu-faculty-listing.html index 9de220d..e85f715 100644 --- a/components/byu-faculty-listing/byu-faculty-listing.html +++ b/components/byu-faculty-listing/byu-faculty-listing.html @@ -65,5 +65,4 @@

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..5317e85 100644 --- a/components/byu-faculty-listing/byu-faculty-listing.js +++ b/components/byu-faculty-listing/byu-faculty-listing.js @@ -29,7 +29,6 @@ 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 DEFAULT_INFORMATION = "Unknown"; class ByuFacultyListing extends HTMLElement { @@ -239,7 +238,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]; diff --git a/components/byu-faculty-listing/byu-faculty-listing.scss b/components/byu-faculty-listing/byu-faculty-listing.scss index 7d22dd0..b99ea43 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%; diff --git a/components/byu-faculty-profile/byu-faculty-profile-common.scss b/components/byu-faculty-profile/byu-faculty-profile-common.scss index 371a842..c35beb7 100644 --- a/components/byu-faculty-profile/byu-faculty-profile-common.scss +++ b/components/byu-faculty-profile/byu-faculty-profile-common.scss @@ -33,9 +33,9 @@ min-width: 300px; border-radius: 5px; - box-shadow: rgba(0,0,0,.2) 1px 4px 2px -2px; - -moz-box-shadow: rgba(0,0,0,.2) 1px 4px 2px -2px; - -webkit-box-shadow: rgba(0,0,0,.2) 1px 4px 2px -2px; + box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -moz-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; + -webkit-box-shadow: rgba(0,0,0,.2) 2px 3px 5px 0; } @mixin cardChevron() { @@ -114,7 +114,12 @@ @mixin facultyImage() { height: 250px; - width: auto; + max-width: 180px; + border-radius: 5px; + box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + -moz-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + -webkit-box-shadow: rgba(0,0,0,.2) 4px 5px 2px -2px; + object-fit: cover; } @mixin hiddenImage() { @@ -152,6 +157,9 @@ @mixin show() { display: block; + max-height: 500px; + opacity: 1; + height: auto; } @mixin svgMedium() { diff --git a/components/byu-faculty-profile/byu-faculty-profile.html b/components/byu-faculty-profile/byu-faculty-profile.html index dc3d82e..8a3353f 100644 --- a/components/byu-faculty-profile/byu-faculty-profile.html +++ b/components/byu-faculty-profile/byu-faculty-profile.html @@ -14,210 +14,208 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - - - - - - - -
-
-
-
-
- Faculty Image -
-
-
- - -
-
- Desk Office: -
- -
- - -
-
-
-

Biography

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Research

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Committees

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Students

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Publications

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Awards

-
-
- -
-
-
- No Information -
-
- -
-
-
-

Courses

+
+ +
+
+
+

Biography

+
+
+ +
+
+
+ No Information +
-
- + +
+
+
+

Research

+
+
+ +
+
+
+ No Information +
-
-
- No Information -
-
- -
-
-
-

Office Hours

+ +
+
+
+

Committees

+
+
+ +
+
+
+ No Information +
-
- + +
+
+
+

Students

+
+
+ +
+
+
+ No Information +
-
-
- No Information -
-
- -