Skip to content

Commit

Permalink
CHEMH-83 | @jdwjdwjdw | Structure and style News node page (#67)
Browse files Browse the repository at this point in the history
* Update news node template

* Update News node page

* Update news node page

* Update news more-link to gradient button

* Update news node

* Update news node

* Update dist, remove unnecessary code

* Update news header and topics

* Update dist, button fixup, news node spacing fixups

* Remove commented out code

* Remove unnecessary code

* Fixup past event color

* Fixup for past event with no event types
  • Loading branch information
jdwjdwjdw authored Sep 29, 2023
1 parent b915e27 commit 57ed686
Show file tree
Hide file tree
Showing 6 changed files with 271 additions and 6 deletions.
2 changes: 1 addition & 1 deletion dist/css/chem_h_subtheme.css

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions src/js/chem_h_subtheme.behaviors.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@

// Replace <a> tag for event node event type taxonomy with <p>
$('.node.event .section-editorial-content .su-event-type a').contents().unwrap().wrap('<p/>');

// Replace <a> tag for news node news topics taxonomy with <p>
$('.news.node .layout--section-news-header .section-header .su-news-topics a').contents().unwrap().wrap('<p/>');

}
};
Expand Down
6 changes: 4 additions & 2 deletions src/scss/components/events/_event-node.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
background: $su-color-black url(../../assets/png/header-sm-000--cropped.png) no-repeat 50%/cover;
}

.su-event-type {
.su-event-type,
.node-stanford-event-title {
text-align: center;

a,
p {
p,
.su-event-label-past {
color: $su-color-white;
text-transform: uppercase;
letter-spacing: .3rem;
Expand Down
173 changes: 172 additions & 1 deletion src/scss/components/news/_news-node.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,170 @@
@charset "UTF-8";

.news.node {
.header-spacer {
height: 48rem;
background: $su-color-black-true url(../../assets/png/header-sm-000--cropped.png) no-repeat 5%/cover;
box-shadow: 0 3px 6px rgba(0,0,0,.13), 0 3px 6px rgba(0,0,0,.1);

@include grid-media-min('2xl') {
background: $su-color-black-true url(../../assets/png/header-sm-000--cropped.png) no-repeat 50%/cover;
}
}

.layout--section-news-header {
position: relative;
top: -54rem;
margin: 0 auto;
margin-bottom: -54rem;

@include grid-media-min('sm') {
max-width: 70%;
}

.section-header {
max-width: 100%;
width: 100%;

.main-region {
max-width: 100%;

.su-news-topics {
@include type-e;

text-align: center;
color: $su-color-white;
opacity: .9;

a,
p {
display: inline-block;
color: $su-color-white;
text-transform: uppercase;
letter-spacing: .3rem;
margin-bottom: .5rem;
margin-left: .5rem;

&:first-child {
margin-left: 0;
}
}
}

.su-news-title {
&::after {
@include chemh-main-nav--gradient;

content: '';
height: 1rem;
display: block;
}

h1 {
@include chemh-heading--badge;

color: $su-color-white;
background: transparent;
padding-bottom: 6rem;
margin-bottom: 0;
text-align: center;

@include grid-media-max('md') {
font-size: 4.5rem;
}

@include grid-media-max('sm') {
font-size: 4rem;
}

&::before {
margin: 3rem auto;
}
}
}

.node-stanford-news-su-news-dek {
@include responsive-spacing('padding-top', 2);

background: $su-color-white;

.su-news-dek {
@include responsive-spacing('padding-bottom', 1);

font-family: $su-font-serif;
font-style: italic;
font-size: 3rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
border-bottom: 1px solid $su-color-black-true;

@include grid-media-max('sm') {
max-width: calc(83.33333% - 3.33333px);
}
}
}
}
}

.byline-social-media-wrapper {
@include responsive-spacing('padding-top', 1);

background: $su-color-white;
width: 100%;
max-width: 100%;
margin-bottom: -26rem;
padding-bottom: 24rem;

div.flex-10-of-12 {
justify-content: space-between;

@include grid-media-max('sm') {
max-width: calc(83.33333% - 3.33333px);
}
}
}

.section-banner-media {
.su-news-banner {
padding-top: 6rem;
}
}

.section-components {
max-width: 100%;
width: 100%;

.main-region {
@include grid-media-min('sm') {
flex: 0 0 calc(83.33333% - 3.33333px);
max-width: calc(83.33333% - 3.33333px);
}

@include grid-media-min('md') {
flex: 0 0 calc(83.33333% - 3.33333px);
max-width: calc(83.33333% - 3.33333px);
}

@include grid-media-min('lg') {
flex: 0 0 calc(83.33333% - 6px);
max-width: calc(83.33333% - 6px);
}

@include grid-media-min('xl') {
flex: 0 0 calc(83.33333% - 6.66667px);
max-width: calc(83.33333% - 6.66667px);
}

@include grid-media-min('xxl') {
flex: 0 0 calc(83.33333% - 8px);
max-width: calc(83.33333% - 8px);
}
}
}
}
}

// More News section
.stanford-news-vertical-teaser-term {
>h2 {
@include chemh-heading--badge;
Expand All @@ -10,7 +174,14 @@
}

.more-link {
@include chemh--right-arrow-icon;
a {
@include chemh-button--gradient;

&:focus,
&:hover {
background-color: $chemh-color-hover-peach;
}
}
}

// Related news cards in footer.
Expand Down
9 changes: 7 additions & 2 deletions src/scss/theme/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@
.su-button.su-link,
.su-button--big,
.su-button--big.su-link,
.stanford-news-vertical-teaser-term .more-link a,
.node.event .more-link a,
[type=button],
[type=image],
[type=reset],
[type=submit],
button {
button {
@include chemh--shadow-system-button--big;

background-color: transparent;
Expand All @@ -33,6 +34,8 @@ button {
.su-button.su-link:hover,
.su-button:focus,
.su-button:hover,
.stanford-news-vertical-teaser-term .more-link a:focus,
.stanford-news-vertical-teaser-term .more-link a:hover,
.node.event .more-link a:focus,
.node.event .more-link a:hover,
[type=button]:focus,
Expand All @@ -57,6 +60,7 @@ button:hover {
.su-button:active,
.su-button--big.su-link:active,
.su-button--big:active,
.stanford-news-vertical-teaser-term .more-link a:active,
.node.event .more-link a,
[type=button]:active,
[type=image]:active,
Expand All @@ -76,13 +80,13 @@ button:hover {
}
}


main,
footer {
.su-button.su-link,
.su-button,
.su-button--big.su-link,
.su-button--big,
.stanford-news-vertical-teaser-term .more-link a,
.node.event .more-link a,
button {
@include chemh-button--gradient;
Expand Down Expand Up @@ -119,6 +123,7 @@ footer {
}

.su-button,
.stanford-news-vertical-teaser-term .more-link a,
.node.event .more-link a {
&.su-link--external {
&::after {
Expand Down
84 changes: 84 additions & 0 deletions templates/components/news/node--stanford-news.html.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
{# Create classes array. The 'node' class is required for contextual edit links. #}
{% set node_classes = ['node'] %}
{% set node_classes = node_classes|merge([
node.type ? node.type.entity.label|clean_class,
view_mode ? 'node--layout-' ~ view_mode|clean_class
]) %}
{% set title_classes = [ node.bundle|clean_class ~ '__title'] %}
{% set attributes = attributes.addClass(node_classes) %}
{% set attributes = attributes.removeAttribute('role') %}

{# Template Paths #}
{%- if template_alert is empty -%}
{%- set template_alert = "@basic-dist/decanter/components/alert/alert.twig" -%}
{%- endif -%}
{# End Template Paths #}

{% if page %}
{# Node as a page should be a section. #}
<section{{ attributes }}>
{# Unpublished Warning. #}
{%- if not node.published -%}

{% set message = "This page is currently unpublished and not visible to the public." %}
{% if node.publish_on and not node.publish_on.isEmpty %}
{% set message =message ~ " The page is also scheduled to publish in the future." %}
{% endif %}

{%- set data = {
'attributes': create_attribute({'class': 'su-alert su-alert--warning'}),
'alert_text': message|t,
} -%}
{%- include template_alert with data only -%}
{%- endif -%}

{# Node in a list should be it's own article. #}
{% else %}
<article{{ attributes }}>
{% endif %}
{% if title_prefix or title_suffix or display_submitted or unpublished or page is empty and label %}
<header>

{# Title Prefix #}
{{ title_prefix }}

{%- if not page and label -%}
<h2{{ title_attributes.addClass(title_classes) }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{%- endif -%}

{# Title Suffix #}
{{ title_suffix }}

{# Display Submitted #}
{%- if display_submitted -%}
<div class="submitted">
{{ author_picture }}
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
{%- endif -%}
</header>
{%- endif -%}


{# Main content container. #}
<div{{ content_attributes.addClass('content') }}>
<div class="header-spacer"></div>
<div class="layout--section-news-header">
{{ content|without('links') }}
</div>
</div><!-- /.content -->

{%- if content.links -%}
<div class="links">
{{ content.links }}
</div><!-- /.links -->
{%- endif -%}

{% if page %}
</section><!-- /.node as page -->
{% else %}
</article><!-- /.node as a list -->
{% endif %}

0 comments on commit 57ed686

Please sign in to comment.