Commit f9420c61 authored by alex-desktop's avatar alex-desktop
Browse files

Alert Module styling update to match prototype images, close functionality and...

Alert Module styling update to match prototype images, close functionality and button added to mobile view
parent 947d04eb
.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;
......@@ -33,30 +28,19 @@
background: #500778;
color: #fff;
}
@media (min-width: 64em) {
.marketing-alert {
border-top: 3px solid #fff;
}
}
.marketing-alert__container {
margin: 0 auto;
margin: 1rem 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 +48,91 @@
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__close {
display: none;
}
.marketing-alert .field--name-field-alert-cta > a {
.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{
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
Markdown is supported
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