Skip to content

Commit

Permalink
completed notifications, added selection variables to settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuperDJ
SuperDJ committed May 24, 2019
1 parent 180587f commit 7c8e2b4
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 130 deletions.
166 changes: 156 additions & 10 deletions docs/components/notification.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h2 class="xs12">Standard notification</h2>
</section>

<section class="xs12 md6">
<div class="notification notification--standard">
<div class="notification notification--standard" data-trigger="standard-expand">
<header class="notification__header">
<i class="material-icons icon">event</i>
<div class="notification__header__content">Calendar</div>
Expand All @@ -77,12 +77,35 @@ <h2 class="xs12">Standard notification</h2>
<div class="notification__content__text">3:00 - 4:00 PM</div>
</div>

<div class="notification__expanded">
<div class="notification__expanded" id="standard-expand">
<div class="notification__expanded__actions">
<button class="button button--text">Email Guests</button>
</div>
</div>
</div>

<pre class="language-html">
<code>
&lt;div class="notification notification--standard" data-trigger="standard-expand">
&lt;header class="notification__header">
&lt;i class="material-icons icon">event&lt;/i>
&lt;div class="notification__header__content">Calendar&lt;/div>
&lt;i class="material-icons icon expand">expand_more&lt;/i>
&lt;/header>

&lt;div class="notification__content">
&lt;div class="notification__content__title">Design team meeting&lt;/div>
&lt;div class="notification__content__text">3:00 - 4:00 PM&lt;/div>
&lt;/div>

&lt;div class="notification__expanded" id="standard-expand">
&lt;div class="notification__expanded__actions">
&lt;button class="button button--text">Email Guests&lt;/button>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>
</section>
</article>

Expand All @@ -95,7 +118,7 @@ <h2 class="xs12">Big text</h2>
</section>

<section class="xs12 md6">
<div class="notification notification--big-text">
<div class="notification notification--big-text" data-trigger="text-expand">
<header class="notification__header">
<i class="material-icons icon">email</i>
<div class="notification__header__content">Gmail</div>
Expand All @@ -111,7 +134,7 @@ <h2 class="xs12">Big text</h2>
</div>
</div>

<div class="notification__expanded">
<div class="notification__expanded" id="text-expand">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut consectetur consequuntur debitis dignissimos dolor eligendi fuga inventore iste itaque laborum maxime nihil numquam obcaecati omnis quod, soluta vel voluptate?
</p>
Expand All @@ -122,6 +145,38 @@ <h2 class="xs12">Big text</h2>
</div>
</div>
</div>

<pre class="language-html">
<code>
&lt;div class="notification notification--big-text" data-trigger="text-expand">
&lt;header class="notification__header">
&lt;i class="material-icons icon">email&lt;/i>
&lt;div class="notification__header__content">Gmail&lt;/div>
&lt;div class="notification__header__date">8 min ago&lt;/div>
&lt;i class="material-icons icon expand">expand_more&lt;/i>
&lt;/header>

&lt;div class="notification__content">
&lt;div class="notification__content__title">Lily MacDonald&lt;/div>
&lt;div class="notification__content__text">Lasagna&lt;/div>
&lt;div class="notification__content__image">
&lt;img src="//i.pravatar.cc/40" class="shape--circle" alt="notification image"/>
&lt;/div>
&lt;/div>

&lt;div class="notification__expanded" id="text-expand">
&lt;p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut consectetur consequuntur debitis dignissimos dolor eligendi fuga inventore iste itaque laborum maxime nihil numquam obcaecati omnis quod, soluta vel voluptate?
&lt;/p>

&lt;div class="notification__expanded__actions">
&lt;button class="button button--text">Reply&lt;/button>
&lt;button class="button button--text">Archive&lt;/button>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>
</section>
</article>

Expand All @@ -134,7 +189,7 @@ <h2 class="xs12">Big picture</h2>
</section>

<section class="xs12 md6">
<div class="notification notification--big-text">
<div class="notification notification--big-text" data-trigger="picture-expand">
<header class="notification__header">
<i class="material-icons icon">image</i>
<div class="notification__header__content">Android System</div>
Expand All @@ -150,7 +205,7 @@ <h2 class="xs12">Big picture</h2>
</div>
</div>

<div class="notification__expanded">
<div class="notification__expanded" id="picture-expand">
<img src="//placeimg.com/400/200/nature" alt="big picture"/>

<div class="notification__expanded__actions">
Expand All @@ -159,6 +214,36 @@ <h2 class="xs12">Big picture</h2>
</div>
</div>
</div>

<pre class="language-html">
<code>
&lt;div class="notification notification--big-text" data-trigger="picture-expand">
&lt;header class="notification__header">
&lt;i class="material-icons icon">image&lt;/i>
&lt;div class="notification__header__content">Android System&lt;/div>
&lt;div class="notification__header__date">Now&lt;/div>
&lt;i class="material-icons icon expand">expand_more&lt;/i>
&lt;/header>

&lt;div class="notification__content">
&lt;div class="notification__content__title">Screenshot captured&lt;/div>
&lt;div class="notification__content__text">Tap to view your screenshot&lt;/div>
&lt;div class="notification__content__image">
&lt;img src="//placeimg.com/40/40/nature" alt="notification image"/>
&lt;/div>
&lt;/div>

&lt;div class="notification__expanded" id="picture-expand">
&lt;img src="//placeimg.com/400/200/nature" alt="big picture"/>

&lt;div class="notification__expanded__actions">
&lt;button class="button button--text">Share&lt;/button>
&lt;button class="button button--text">Delete&lt;/button>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>
</section>
</article>

Expand All @@ -171,7 +256,7 @@ <h2 class="xs12">Progress</h2>
</section>

<section class="xs12 md6">
<div class="notification notification--progress">
<div class="notification notification--progress" data-trigger="progress-expand">
<header class="notification__header">
<i class="material-icons icon">get_app</i>
<div class="notification__header__content">Download Manager</div>
Expand All @@ -191,12 +276,43 @@ <h2 class="xs12">Progress</h2>
</div>
</div>

<div class="notification__expanded">
<div class="notification__expanded" id="progress-expand">
<div class="notification__expanded__actions">
<button class="button button--text">Cancel</button>
</div>
</div>
</div>

<pre class="language-html">
<code>
&lt;div class="notification notification--progress" data-trigger="progress-expand">
&lt;header class="notification__header">
&lt;i class="material-icons icon">get_app&lt;/i>
&lt;div class="notification__header__content">Download Manager&lt;/div>
&lt;div class="notification__header__date">68%&lt;/div>
&lt;i class="material-icons icon expand">expand_more&lt;/i>
&lt;/header>

&lt;div class="notification__content">
&lt;div class="notification__content__title">App name&lt;/div>
&lt;div class="notification__content__text">2 seconds left&lt;/div>
&lt;div class="notification__content__image">
&lt;progress min="0" max="100" value="68" class="progress progress--determinate">
&lt;div class="progress progress--determinate">
&lt;div class="progress__bar" style="width:68%">&lt;/div>
&lt;/div>
&lt;/progress>
&lt;/div>
&lt;/div>

&lt;div class="notification__expanded" id="progress-expand">
&lt;div class="notification__expanded__actions">
&lt;button class="button button--text">Cancel&lt;/button>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>
</section>
</article>

Expand All @@ -209,7 +325,7 @@ <h2 class="xs12">Messaging</h2>
</section>

<section class="xs12 md6">
<div class="notification notification--messaging">
<div class="notification notification--messaging" data-trigger="messaging-expand">
<header class="notification__header">
<i class="material-icons icon">message</i>
<div class="notification__header__content">Messages</div>
Expand All @@ -226,14 +342,44 @@ <h2 class="xs12">Messaging</h2>
<i class="material-icons icon">reply</i>
</div>

<div class="notification__expanded">
<div class="notification__expanded" id="messaging-expand">
<div class="notification__expanded__actions">
<button class="button button--text">Reply</button>
<button class="button button--text">Archive</button>
</div>
</div>
</div>

<pre class="language-html">
<code>
&lt;div class="notification notification--messaging" data-trigger="messaging-expand">
&lt;header class="notification__header">
&lt;i class="material-icons icon">message&lt;/i>
&lt;div class="notification__header__content">Messages&lt;/div>
&lt;div class="notification__header__date">[email protected]&lt;/div>
&lt;i class="material-icons icon expand">expand_more&lt;/i>
&lt;/header>

&lt;div class="notification__content">
&lt;div class="notification__content__image">
&lt;img src="//i.pravatar.cc/40" class="shape--circle" alt="notification image"/>
&lt;/div>
&lt;div class="notification__content__title">Lily MacDonald&lt;/div>
&lt;div class="notification__content__text">Do you want to see a movie&lt;/div>
&lt;i class="material-icons icon">reply&lt;/i>
&lt;/div>

&lt;div class="notification__expanded" id="messaging-expand">
&lt;div class="notification__expanded__actions">
&lt;button class="button button--text">Reply&lt;/button>
&lt;button class="button button--text">Archive&lt;/button>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>
</section>
</article>
</main>

<nav class="drawer drawer--modal" id="drawer">
Expand Down
2 changes: 1 addition & 1 deletion src/sass/components/_app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
color: var(--app-bar-font-color);
min-height: var(--app-bar-height); // Min height to allow more content in the app bar
padding: var(--app-bar-padding);
width: 100vw;
width: 100%;
@extend %z4;
display: grid;
grid-template-columns: rem-calc(24px) 1fr auto 1fr;
Expand Down
3 changes: 2 additions & 1 deletion src/sass/components/_data-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
.data-table {
--data-table__header-font-size: #{$data-table__header-font-size};
--data-table__header-color: #{$data-table__header-color};
--data-table__header-background: #{$data-table__header-background};
--data-table__header-font-weight: #{$data-table__header-font-weight};
--data-table__header--hover-color: #{$data-table__header--hover-color};

Expand Down Expand Up @@ -35,7 +36,7 @@
th {
position: sticky;
top: var(--app-bar-height);
background: $white;
background: var(--data-table__header-background);
z-index: 1;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/sass/components/_list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@

img {
@include chain(width, height, rem-calc(40px));
border-radius: 50%;
@extend .shape--circle;
}
}

Expand Down
Loading

0 comments on commit 7c8e2b4

Please sign in to comment.