Skip to content

Commit

Permalink
Merge pull request #18 from Skrillmau5er/master
Browse files Browse the repository at this point in the history
Added cards and other style changes
  • Loading branch information
ben-mur64 authored Feb 26, 2019
2 parents 69a0354 + 60f24fb commit 974f5d1
Show file tree
Hide file tree
Showing 34 changed files with 1,462 additions and 341 deletions.
49 changes: 47 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ Then, place your content inside <byu-faculty-listing> tags. See the demo for mor

## How it Works

### BYU Faculty Listing

```html
<byu-faculty-listing id="id" faculty-image="img_src" faculty-profile-link="link_src">
<h2 slot="listing-name">Name</h2>
Expand All @@ -34,11 +36,54 @@ Place the url to the profile image in a "faculty-image" attribute of the <byu-fa
Place the url to the faculty profile page in a "faculty-profile-link" attribute of the <byu-faculty-listing> 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
<byu-faculty-card id="id" faculty-image="img_src" faculty-profile-link="link_src">
<h2 slot="listing-name">Name</h2>
<span slot="listing-title">Title</span>
<span slot="listing-office">Office Location</span>
<span slot="listing-phone">Phone Number</span>
<span slot="listing-email">Email Address</span>
</byu-faculty-card>
```
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
<byu-faculty-profile background-image="./test_image_5.jpg" faculty-image="./test_image.png">
<div slot="faculty-name">Name</div>
<span slot="faculty-title">Title</span>
<span slot="faculty-office">Office Location</span>
<span slot="faculty-phone">Phone Number</span>
<span slot="faculty-email">Email Address</span>
<p slot="faculty-biography">Place biography information here</p>
<p slot="faculty-research">Place research information here</p>
<p slot="faculty-papers">Place papers information here</p>
<p slot="faculty-students">Place student information here</p>
<p slot="faculty-awards">Place awards information here</p>
<div slot="faculty-custom-header">Custom Header</div>
<p slot="faculty-custom-body">Place custom body information here</p>
<p slot="faculty-education">Place education information here!</p>
<p slot="faculty-cv">Place CV File here</p>
</byu-faculty-profile>
```

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

```
Expand Down
Binary file added byu-faculty-card-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added byu-faculty-listing-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added byu-faculty-profile-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 126 additions & 0 deletions components/byu-faculty-card/byu-faculty-card-common.scss
Original file line number Diff line number Diff line change
@@ -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;
}
18 changes: 18 additions & 0 deletions components/byu-faculty-card/byu-faculty-card-extras.scss
Original file line number Diff line number Diff line change
@@ -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';
47 changes: 47 additions & 0 deletions components/byu-faculty-card/byu-faculty-card.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!--
~ @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.
-->
<!-- Latest compiled and minified CSS -->

<style>
/*${require('./byu-faculty-card.scss')}*/
</style>

<a class="profile-link" href="">
<div class="root listing-root">
<div id="faculty-listing-column-left">
<div class="image-wrapper">
<img class="faculty-image" id="default-image"/>
</div>
</div>

<div id="faculty-listing-column-middle" class="">
<slot id="listing-name" name="listing-name"></slot>
<i><slot name="listing-title"></slot></i>
<div class="contact-wrapper">
<div class="office-slot-wrapper">
<b>Office: </b><slot name="listing-office"></slot>
</div>
<div class="phone-slot-wrapper">
<b>Phone: </b><slot name="listing-phone"></slot>
</div>
<div class="email-slot-wrapper">
<b>Email: </b><slot name="listing-email"></slot>
</div>
</div>
</div>
</div>
</a>
Loading

0 comments on commit 974f5d1

Please sign in to comment.