Commit 6bac8d29 authored by Michael R Lupi's avatar Michael R Lupi
Browse files

Merge branch 'develop' into 'master'

Develop to Master

See merge request digiserve-public/tufts-alerts!1
parents 947d04eb 615dcbc6
.emergency-alert__link a,
.emergency-alert__link a:hover {
border-bottom: 1px solid #333;
color: #333;
text-decoration: none;
}
.alert--warning .emergency-alert__link a,
.emergency-alert__link a {
cursor: pointer;
transition: color ease 320ms, background ease 320ms;
a, a:hover {
border-style: none !important;
}
.emergency-alert {
font-family: "Whitney SSm A";
font-size: 1rem;
line-height: 1.5rem;
line-height: 1rem;
margin-bottom: 0;
min-height: 6rem;
padding: 1rem;
width: 100%;
}
.emergency-alert__icon {
margin-bottom: 1rem;
min-width: 3rem;
width: 3rem;
}
.emergency-alert__close {
display: none;
}
.emergency-alert--high {
background: #c0311a;
background: #e6000c;
color: #fff;
}
.emergency-alert--high svg {
fill: #fff;
}
.emergency-alert--high .field--name-field-alert-text a, .emergency-alert--high .field--name-field-alert-text a:hover {
color: #fff;
text-decoration: underline;
}
.emergency-alert--medium {
background: #ffd200;
background: #fbcf40;
color: #333;
}
.emergency-alert--medium svg {
fill: #333;
}
.emergency-alert--medium .field--name-field-alert-text a, .emergency-alert--medium .field--name-field-alert-text a:hover {
color: #333;
text-decoration: underline;
}
.emergency-alert--low {
background: #ebf3fb;
background: #eaeaea;
color: #333;
}
.emergency-alert--low svg {
fill: #3172ae;
}
.emergency-alert--low .field--name-field-alert-text a, .emergency-alert--low .field--name-field-alert-text a:hover {
color: #333;
text-decoration: underline;
}
@media (min-width: 64em) {
.alert {
border-top: 3px solid #fff;
}
}
.emergency-alert__container {
margin: 0 auto;
-ms-flex-align: center;
......@@ -83,12 +52,17 @@
-ms-flex-pack: center;
justify-content: center;
max-width: 96rem;
padding: 1rem 1.5rem;
padding: 1rem 8rem;
}
.emergency-alert__message {
line-height: 1rem;
}
.emergency-alert__message p {
margin-bottom: 0rem;
}
.emergency-alert__alert-text {
display: inline;
}
@media (min-width: 48em) {
.emergency-alert__container {
-ms-flex-direction: row;
......@@ -98,16 +72,34 @@
margin: 0 1rem;
}
}
.alert--warning {
background: #fbcf40;
color: #000;
@media (min-width: 64em) {
.alert {
border-top: 3px solid #fff;
}
}
.alert--warning .emergency-alert__icon {
color: #333;
@media (max-width: 53em) {
.emergency-alert__container {
padding: 1rem 1rem !important;
}
.emergency-alert__message p {
text-align: center;
}
}
@media (max-width: 64em) {
.emergency-alert__close {
display: flex;
justify-content: flex-end;
padding-top: 1rem;
}
.emergency-alert__close svg {
background-color: rgba(0,0,0,.1);
padding: .3rem;
width: 2rem;
height: 2rem;
}
}
.alert--warning .emergency-alert__link a,
.alert--warning .emergency-alert__link a:hover {
border-bottom: 1px solid #000;
color: #000;
text-decoration: none;
@media (max-width: 100em) {
.emergency-alert__container{
padding: 1rem 1rem;
}
}
.marketing-alert {
font-size: 1.4rem;
font-family: "Whitney SSm A";
line-height: 2rem;
margin-bottom: 0;
min-height: 6rem;
padding: 1rem;
width: 100%;
}
.marketing-alert--brown {
background: #5e4b3c;
color: #fff;
......@@ -21,10 +16,6 @@
background: #d45d00;
color: #fff;
}
.marketing-alert--red {
background: #cb333b;
color: #fff;
}
.marketing-alert--teal {
background: #008489;
color: #fff;
......@@ -33,30 +24,19 @@
background: #500778;
color: #fff;
}
@media (min-width: 64em) {
.marketing-alert {
border-top: 3px solid #fff;
}
}
.marketing-alert__container {
margin: 0 auto;
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
display: flex;
align-items: center;
padding: 0 8.5rem;
max-width: 96rem;
}
@media (min-width: 48em) {
.marketing-alert__container {
-ms-flex-direction: row;
flex-direction: row;
}
}
.marketing-alert__title {
display: inline;
font-size: inherit;
......@@ -64,48 +44,92 @@
text-transform: uppercase;
}
.marketing-alert .field--name-field-alert-cta {
background-color: rgba(0, 0, 0, 0.3);
font-size: 1.2rem;
text-align: center;
padding: 1rem 2rem;
position: relative;
text-transform: uppercase;
top: -12px;
margin-left: 2rem;
border-radius: 6px;
white-space: nowrap;
padding: 1rem 0;
}
.marketing-alert .field--name-field-alert-cta > a {
.marketing-alert__close {
display: none;
}
.marketing-alert .field--name-field-alert-cta a {
color: #fff !important;
border-bottom: none;
font-weight: 700;
background-color: rgba(0, 0, 0, .3);
border-radius: 6px;
padding: 1rem 2rem;
display: flex;
text-align: center;
transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-webkit-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
flex-direction: column;
}
.marketing-alert__link a,
.marketing-alert__link a:hover {
border-bottom: 1px solid #333;
color: #333;
text-decoration: none;
.marketing-alert .field--name-field-alert-cta a:hover{
background-color: rgba(0, 0, 0, .4);
}
.marketing-alert__message {
display: -ms-flexbox;
display: flex;
padding-top: 1.5rem;
text-align: center;
align-items: center;
line-height: 1.4rem;
}
@media (max-width: 440px) {
.marketing-alert .field--name-field-alert-cta {
top: 4px;
margin-top: 3%;
margin-left: 0;
}
.marketing-alert__message {
display: block !important;
text-align: center;
}
.marketing-alert__alert-text {
font-size: 1rem;
}
.marketing-alert__message p {
font-size: 1rem;
margin-bottom: 0rem;
text-align: left;
}
.marketing-alert__alert-text,
.marketing-alert__link {
display: inline;
}
.marketing-alert__link a {
cursor: pointer;
transition: color ease 320ms, background ease 320ms;
@media (min-width: 64em) {
.marketing-alert {
border-top: 1px solid #fff;
}
}
@media (min-width: 48em) {
.marketing-alert__container {
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (max-width: 53em) {
.marketing-alert__container {
justify-content: center;
}
}
@media (max-width: 64em) {
.marketing-alert .field--name-field-alert-cta {
margin-left: 0;
white-space: normal;
padding-bottom: 0;
}
.marketing-alert__message, .marketing-alert__message p {
display: block !important;
text-align: center;
}
.marketing-alert__container{
margin: 1rem auto;
padding: 1rem 1rem;
}
.marketing-alert__close {
display: flex;
justify-content: flex-end;
}
.marketing-alert__close svg {
background-color: rgba(0,0,0,.1);
padding: .5rem;
width: 2.4rem;
height: 2.4rem;
}
}
\ No newline at end of file
(function ($) {
Drupal.behaviors.tuftsEmergencyAlert = {
attach: function(context, settings) {
$(context).find('.emergency-alert__close svg')
.once('closeAlert')
.click(function() {
$( '.emergency-alert' ).slideUp('slow');
});
}
};
Drupal.behaviors.tuftsMarketingAlert = {
attach: function(context, settings) {
$(context).find('.marketing-alert__close svg')
.once('closeAlert')
.click(function() {
$( '.marketing-alert' ).slideUp('slow');
});
}
};
})(jQuery);
......@@ -10,14 +10,19 @@
<article {{ attributes.addClass(classes) }}>
<div class="emergency-alert__container">
<div class="emergency-alert__icon">
{% if node.field_alert_level.value == "high" or node.field_alert_level.value == "medium" %}
{% include '@tufts_alerts/svg/alert-triangle-svg.html.twig' %}
{% if node.field_alert_level.value == "high"%}
{{ source('@tufts_alerts/svg/alert_light.svg') }}
{% elseif node.field_alert_level.value == "medium" %}
{{ source('@tufts_alerts/svg/alert_dark.svg') }}
{% elseif node.field_alert_level.value == "low" %}
{% include '@tufts_alerts/svg/attention-svg.html.twig' %}
{{ source('@tufts_alerts/svg/information.svg') }}
{% endif %}
</div>
<div class="emergency-alert__message">
{{ content.field_alert_text }}
</div>
</div>
</article>
<div class="emergency-alert__close">
{{source('@tufts_alerts/svg/alert_close.svg')}}
</div>
</article>
......@@ -16,4 +16,7 @@
{{ content.field_alert_cta }}
</div>
</div>
<div class="marketing-alert__close">
{{source('@tufts_alerts/svg/alert_close.svg')}}
</div>
</article>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="46.8px" height="46.8px" viewBox="0 0 46.8 46.8" style="enable-background:new 0 0 46.8 46.8;" xml:space="preserve">
<g transform="translate(0, 128)">
<g>
<rect x="22.4" y="-136.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 -67.0956 -47.1888)" width="2" height="64.2"/>
</g>
<g>
<rect x="-8.7" y="-105.6" transform="matrix(0.7071 0.7071 -0.7071 0.7071 -67.0956 -47.1888)" width="64.2" height="2"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
<title>Alert Icon</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="high-alert-icon" fill="#444444">
<g id="Group-3">
<path d="M29.2452071,32.5 C29.2452071,34.29725 27.7891703,35.75 25.9951249,35.75 C24.2010795,35.75 22.7450426,34.29725 22.7450426,32.5 L22.7450426,22.75 C22.7450426,20.956 24.2010795,19.5 25.9951249,19.5 C27.7891703,19.5 29.2452071,20.956 29.2452071,22.75 L29.2452071,32.5 Z M25.9951249,45.5 C24.2010795,45.5 22.7450426,44.04725 22.7450426,42.25 C22.7450426,40.456 24.2010795,39 25.9951249,39 C27.7891703,39 29.2452071,40.456 29.2452071,42.25 C29.2452071,44.04725 27.7891703,45.5 25.9951249,45.5 Z M51.2840148,46.5075 L29.0892032,2.2685 C28.2376816,0.75725 27.1196533,0 25.998375,0 C24.8770966,0 23.7558182,0.75725 22.9075467,2.2685 L0.712735133,46.5075 C-0.987057878,49.52675 0.459228718,52 3.92706647,52 L48.0729335,52 C51.5407713,52 52.9870579,49.52675 51.2872649,46.5075 L51.2840148,46.5075 Z" id="Fill-1"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
<title>Alert Icon</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="high-alert-icon" fill="#FFFFFF">
<g id="Group-3">
<path d="M29.2452071,32.5 C29.2452071,34.29725 27.7891703,35.75 25.9951249,35.75 C24.2010795,35.75 22.7450426,34.29725 22.7450426,32.5 L22.7450426,22.75 C22.7450426,20.956 24.2010795,19.5 25.9951249,19.5 C27.7891703,19.5 29.2452071,20.956 29.2452071,22.75 L29.2452071,32.5 Z M25.9951249,45.5 C24.2010795,45.5 22.7450426,44.04725 22.7450426,42.25 C22.7450426,40.456 24.2010795,39 25.9951249,39 C27.7891703,39 29.2452071,40.456 29.2452071,42.25 C29.2452071,44.04725 27.7891703,45.5 25.9951249,45.5 Z M51.2840148,46.5075 L29.0892032,2.2685 C28.2376816,0.75725 27.1196533,0 25.998375,0 C24.8770966,0 23.7558182,0.75725 22.9075467,2.2685 L0.712735133,46.5075 C-0.987057878,49.52675 0.459228718,52 3.92706647,52 L48.0729335,52 C51.5407713,52 52.9870579,49.52675 51.2872649,46.5075 L51.2840148,46.5075 Z" id="Fill-1"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
<title>Attention Icon</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="alert-2+-lines" transform="translate(0.000000, -24.000000)" fill="#3172AE">
<path d="M33,66 L20,66 L20,62.6666667 L23.25,62.6666667 L23.25,49.3333333 L20,49.3333333 L20,46 L29.75,46 L29.75,62.6666667 L33,62.6666667 L33,66 Z M23,35.625 C23,34.1795 24.183,33 25.625,33 L27.375,33 C28.817,33 30,34.1795 30,35.625 L30,37.375 C30,38.817 28.817,40 27.375,40 L25.625,40 C24.183,40 23,38.817 23,37.375 L23,35.625 Z M26,24 C11.6415,24 0,35.6415 0,50 C0,64.3585 11.6415,76 26,76 C40.3585,76 52,64.3585 52,50 C52,35.6415 40.3585,24 26,24 Z" id="Fill-2779"></path>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -3,4 +3,4 @@ type: module
description: 'Displays emergency and marketing alert banners'
package: Tufts
core: 8.x
core_version_requirement: ^8 || ^9
core_version_requirement: ^8 || ^9
\ No newline at end of file
......@@ -3,10 +3,20 @@ tufts_emergency_alert:
css:
base:
css/emergency-alert.css: {}
js:
js/alert-close.js: {}
dependencies:
- core/jquery
- core/jquery.once
tufts_marketing_alert:
version: VERSION
css:
base:
css/marketing-alert.css: {}
js:
js/alert-close.js: {}
dependencies:
- core/jquery
- core/jquery.once
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment