Skip to content

Commit

Permalink
Merge pull request #20 from byuweb/multiple-read-more
Browse files Browse the repository at this point in the history 
enabled multiple read-more elements

Former-commit-id: aa9735d
  • Loading branch information
@Gi60s
Gi60s authored Mar 1, 2018
2 parents f5d2ec9 + d657343 commit fd379a1
Show file tree
Hide file tree
Showing 12 changed files with 44 additions and 43 deletions.
18 changes: 15 additions & 3 deletions byu-hero-banner/byu-hero-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,13 @@

.read-more-link {

display: inline-block;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

::slotted(a), ::slotted(.btn) {
margin-bottom: 0;

font-weight: bold !important;
vertical-align: middle;
touch-action: manipulation;
Expand All @@ -71,6 +74,11 @@
align-items: center;
justify-content: center;
}

::slotted(a), ::slotted(.btn:not(:first-child)) {
margin-top: 10px;
margin-left: 10px;
}
}

:host(.title-only) {
Expand Down Expand Up @@ -287,6 +295,7 @@
.read-more-link {
margin-top: 20px;
align-self: center;


::slotted(a), ::slotted(.btn) {
background-color: $navy !important;
Expand Down Expand Up @@ -369,8 +378,10 @@
}

.read-more-link {
margin: 0 -10px;
margin-top: 20px;

justify-content: flex-start;

::slotted(a), ::slotted(.btn) {
background-color: $navy !important;
color: #fff !important;
Expand Down Expand Up @@ -435,6 +446,7 @@
.read-more-link {
margin-top: 20px;
align-self: center;
width: 100%;

::slotted(a), ::slotted(.btn) {
background-color: $navy !important;
Expand Down
45 changes: 17 additions & 28 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,34 +61,6 @@
<h1 slot="site-title">Hero Component Demo</h1>
</byu-header>

<h1>Side Image</h1>
<byu-hero-banner id="hero" image-source="side-image.jpg" class="side-image" style="height: 400px">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Transparent Overlay</h1>
<byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay" style="height: 300px;">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. Short intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Transparent Overlay</h1>
<byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay" style="height: 400px;">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. Short intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Transparent Overlay</h1>
<byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay" style="height: 500px;">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. Short intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<!-- directly models www.byu.edu/academics -->
<h1>Title Only</h1>
<byu-hero-banner id="hero" image-source="jfsb.jpg" class="title-only">
Expand All @@ -101,48 +73,65 @@ <h1>Youtube Video</h1>
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>MP4 Video</h1>
<byu-hero-banner id="hero" image-source="dark-image2.jpg" video-source="websitehero.mp4" class="video-hero">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Side Image</h1>
<byu-hero-banner id="hero" image-source="side-image.jpg" class="side-image">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Transparent Overlay</h1>
<byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Transparent Overlay (Right Aligned)</h1>
<byu-hero-banner id="hero" image-source="dark-image.jpg" class="transparent-overlay byu-hero-right">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Full Screen with Light Image</h1>
<byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Full Screen with Light Image</h1>
<byu-hero-banner id="hero" image-source="light-image.jpg" class="full-screen light-image">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<h1>Full Screen Dark Image</h1>
<byu-hero-banner id="hero" image-source="dark-image2.jpg" class="full-screen dark-image">
<span slot="headline">This is the Headline</span>
<span slot="intro-text">This is the intro text. I'm going to add more words here so it's not so short, resulting in a longer piece of intro text.</span>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
<a slot="read-more" href="http://www.google.com">Custom "Read More" Text</a>
</byu-hero-banner>

<div class="page-content">
Expand Down
2 changes: 1 addition & 1 deletion dist/byu-hero-banner.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit fd379a1

Please sign in to comment.