Skip to content

add app-level notification banner pattern #17

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Dec 16, 2016
Merged

add app-level notification banner pattern #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c1aa57
add app-level notification banner pattern
frrrances Dec 9, 2016
c0b36f6
add inline actions and adjust list extends to classes
frrrances Dec 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions sass/elements/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

.button-primary {
transition: background-color .25s, border .25s;
display: inline-block;
border: 1px solid $brand-primary;
border-radius: 3px;
padding: 5px 10px;
Expand All @@ -19,6 +20,7 @@

.button-secondary {
transition: background-color .25s, border .25s;
display: inline-block;
border: 1px solid $gray-l2;
border: 1px solid $smoke;
border-radius: 3px;
Expand Down
6 changes: 3 additions & 3 deletions sass/elements/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

.wrap-usergroups {
@extend %list-inline-pipe;
@extend .list-inline-pipe;
font-size: $fs-small;
}

Expand Down Expand Up @@ -69,7 +69,7 @@
.wrap-footer.footer-slim {

.sitemap-libraries-abbrev a {
@extend %list-inline-pipe;
@extend .list-inline-pipe;
font-size: $fs-small;
}

Expand Down Expand Up @@ -99,7 +99,7 @@
}

.about-mit {
@extend %list-inline-pipe;
@extend .list-inline-pipe;
color: $gray-l2;
text-transform: uppercase;
}
Expand Down
48 changes: 47 additions & 1 deletion sass/elements/_modules.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

ul {
@extend %list-unbulleted;
@extend .list-unbulleted;
}
}

Expand All @@ -21,6 +21,10 @@
margin-bottom: .2rem;
}

&.info {
color: $black;
}

&.success {
color: $success;
}
Expand All @@ -32,8 +36,30 @@
&.error {
color: $error;
}
}

/* global app style alerts and notices */

.wrap-notices {
background-color: $white;
color: $black;
font-size: $fs-xsmall;

&.info {
border-top: 2px solid $gray-l2;
}

&.success {
border-top: 2px solid $success;
}

&.warning {
border-top: 2px solid $warning;
}

&.error {
border-top: 2px solid $error;
}
}

.alert-banner {
Expand Down Expand Up @@ -63,3 +89,23 @@
color: darken($error, 20%);
}
}


.inline-action {

@media (min-width: $bp-screen-md) {

.message {
display: inline-block;
vertical-align: middle;
width: 65%
}

.actions {
display: inline-block;
vertical-align: middle;
width: 34%;
text-align: right;
}
}
}
29 changes: 17 additions & 12 deletions sass/global/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@
}
}

%list-unbulleted {
.list-unbulleted {
list-style: none;
padding-left: 0;
text-indent: 0;
}

%list-inline {
.list-inline {
@extend %reset-list;

li,
Expand All @@ -90,17 +90,22 @@
}
}

%list-inline-pipe {
display: inline-block;
padding-right: 1rem;
.list-inline-pipe {
padding-left: 0;

.item:after {
content: ' | ';
margin-left: 1rem;
}

.item:last-child:after {
content: '';
li,
.item {
display: inline-block;
padding-right: 1rem;

&:after {
content: ' | ';
margin-left: 1rem;
}

&:last-child:after {
content: '';
}
}
}

Expand Down
1 change: 1 addition & 0 deletions sass/global/_layouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
}

.wrap-gridband,
.wrap-notice,
.wrap-header,
.wrap-header-local,
.wrap-breadcrumb,
Expand Down
56 changes: 56 additions & 0 deletions templates/working.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@
<a id="skip" class="skip sr sr-focusable" href="#content-main">Skip to main content</a>

<div class="wrap-page">
<div class="wrap-notices info layout-band">
<div class="wrap-notice">
<div class="alert alert-global" role="alert">
<p>This is a beta service. Try it out or <a href="http://libraries.mit.edu">return to our main site</a>.</p>
</div>
</div>
</div>
<div class="wrap-outer-header layout-band">
<div class="wrap-header">
<header class="header-site header-slim" role="banner">
Expand Down Expand Up @@ -220,14 +227,63 @@ <h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
<li>Regular unordered list</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

<ol>
<li>Regular ordered list</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>

<ul class="list-unbulleted">
<li>Unbulleted list</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

<ul class="list-inline">
<li>Inline list</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

<ul class="list-inline-pipe">
<li>Inline pipe list</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>

<div class="gridband">
<div class="wrap-notices inline-action">
<div class="message">
<h3 class="title">Get help from a research professional</h3>
<p>Our librarians are trained to find what you need.</p>
</div>
<div class="actions">
<a class="button button-secondary" href="https://libraries.mit.edu/ask/">AskUs: Chat with a Librarian</a>
</div>
</div>
</div>


<hr />

Expand Down