Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CHEMH-83 | @jdwjdwjdw | Structure and style News node page #67

Merged
merged 15 commits into from
Sep 29, 2023
Merged
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') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jdwjdwjdw Can we discuss these media queries? When I'm looking at the results in the browser, only the one on line 138 is in effect, all the later ones are overridden.

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 %}