From 9f0fe0dd873faaae56b396db238dbfd0427d2a13 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sun, 13 Aug 2017 13:59:44 +0200 Subject: [PATCH 01/11] Remove line-height overwrite to make messages more readable Signed-off-by: Jan-Christoph Borchardt --- css/styles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index fcb3708b1..4d1add2f4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,7 +1,6 @@ .notification { display: block; padding: 16px 12px; - line-height: 1em; } .notification:not(:last-child) { border-bottom: 1px solid rgb(238, 238, 238); From cc530e0da88550644930e4d894cd5647ba72aa3a Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sun, 13 Aug 2017 14:01:51 +0200 Subject: [PATCH 02/11] Remove border, fix scrollbar position Signed-off-by: Jan-Christoph Borchardt --- css/styles.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/styles.css b/css/styles.css index 4d1add2f4..38b80d466 100644 --- a/css/styles.css +++ b/css/styles.css @@ -17,7 +17,6 @@ min-height: 100px; max-height: 260px; border-radius: 0 0 3px 3px; - border: 1px solid rgb(238, 238, 238); } .notification-container .emptycontent h2 { @@ -172,7 +171,6 @@ img.notification-icon { max-height: 260px; overflow: hidden; overflow-y: auto; - margin-right: 3px; } .notifications .emptycontent { From f059b3204a2111e1390456fac681f0c2c231fba2 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sun, 13 Aug 2017 14:04:51 +0200 Subject: [PATCH 03/11] Show notification message and action elements only when there, fix layout Signed-off-by: Jan-Christoph Borchardt --- js/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/app.js b/js/app.js index 912bb37ee..114b0b391 100644 --- a/js/app.js +++ b/js/app.js @@ -66,14 +66,14 @@ ' {{{subject}}}' + ' ' + ' {{/if}}' + - '
{{{message}}}
' + + ' {{#if message}}
{{{message}}}
{{/if}}' + ' ' + - '
' + + ' {{#if actions}}
' + ' {{#each actions}}' + ' ' + ' {{/each}}' + - '
' + + '
{{/if}}' + ' ' + From 8b043404ebb6a2850748d0a8a6b4fca11da8075e Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Thu, 14 Dec 2017 14:38:52 +0100 Subject: [PATCH 04/11] Use flex for individual notifications - Close icon always visible - Give close icon a 44*44px clickable area - Fix margins and paddings - Minimal CSS cleanup Signed-off-by: Marin Treselj --- css/styles.css | 82 +++++++++++++++----------------------------------- js/app.js | 20 ++++++------ 2 files changed, 35 insertions(+), 67 deletions(-) diff --git a/css/styles.css b/css/styles.css index 38b80d466..93fb3afb2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,11 +1,3 @@ -.notification { - display: block; - padding: 16px 12px; -} -.notification:not(:last-child) { - border-bottom: 1px solid rgb(238, 238, 238); -} - .notification-container { background-color: #fff; display: none; @@ -25,35 +17,28 @@ } .notification { - color: black; - position: relative; - clear: both; + display: flex; + flex-direction: column; } -img.notification-icon { - width: 32px; - height: 32px; - display: block; +.notification:not(:last-child) { + border-bottom: 1px solid rgb(238, 238, 238); } -/** - * Vertical alignment from http://stackoverflow.com/a/39923209 - */ -.notification-subject { - padding-top: 12px; - position: relative; +.notification-heading { + display: flex; + flex-flow: wrap; } -.notification-subject a { - display: inline-block; +img.notification-icon { + width: 32px; + height: 32px; + display: flex; } -.notification-subject > span.image, -.notification-subject > span.text, -.notification-subject > a > span.image, -.notification-subject > a > span.text { - display:table-cell; - vertical-align:middle; +.notification-subject { + padding: 0 12px; + display: flex; } .notification-subject > span.text, @@ -65,30 +50,21 @@ img.notification-icon { color: #999; } -.notification:hover > .notification-delete { - display: block !important; - position: absolute; - top: 7px; - right: 12px; - opacity: 0.3; -} - -.notification-delete:hover { - opacity: 0.8 !important; - cursor: pointer; +.notification-delete { + display: flex; + opacity: 0.5; + padding: 14px; } -.notification-delete div, .notifications-button img { +.notification-delete:hover, +.notifications-button img { + opacity: 1; cursor: pointer; } .notification-time { - text-align: right; opacity: 0.5; - padding-right: 32px; - margin-top: -7px; - position: absolute; - right: 0; + margin: 13px 0 13px auto; } .notifications-button { @@ -117,10 +93,7 @@ img.notification-icon { } .notification .notification-actions { - padding: 0; - display: inline-block; - width: 100%; - margin: -6px 0; + margin: 0 12px 12px; } .notification .notification-actions .action-button.primary { @@ -131,15 +104,11 @@ img.notification-icon { margin-left: auto; } -.notification .notification-subject { - margin-right: 20px; -} - .notification .notification-message, .notification .notification-full-message { line-height: 20px; - padding-bottom: 16px; opacity: .57; + padding: 12px; } .notification .notification-message img, @@ -156,8 +125,7 @@ img.notification-icon { margin: 0 5px 2px 3px; } -.notification strong, -.notification .notification-subject a:not(.full-subject-link) { +.notification strong { font-weight: bold; opacity: 1; } diff --git a/js/app.js b/js/app.js index 114b0b391..f426b0a89 100644 --- a/js/app.js +++ b/js/app.js @@ -52,14 +52,17 @@ /** @type {string} */ _notificationTemplate: '' + '
' + - ' {{relativeDate}}' + - ' {{#if link}}' + - '
' + - ' ' + - ' {{#if icon}}{{/if}}' + - ' {{{subject}}}' + - ' ' + + '
' + + ' {{relativeDate}}' + + '
' + + ' ' + '
' + + '
' + + ' {{#if link}}' + + ' ' + + ' {{#if icon}}{{/if}}' + + ' {{{subject}}}' + + ' ' + ' {{else}}' + '
' + ' {{#if icon}}{{/if}}' + @@ -74,9 +77,6 @@ 'data-href="{{this.link}}">{{this.label}}' + ' {{/each}}' + '
{{/if}}' + - ' ' + '
', /** From 1f53b805bcb931b4573f2b5a5675afb8a1a9195a Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Thu, 14 Dec 2017 14:43:13 +0100 Subject: [PATCH 05/11] Fix cursor on close icon Signed-off-by: Marin Treselj --- css/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/styles.css b/css/styles.css index 93fb3afb2..72ec0ec93 100644 --- a/css/styles.css +++ b/css/styles.css @@ -57,6 +57,7 @@ img.notification-icon { } .notification-delete:hover, +.notification-delete .icon-close, .notifications-button img { opacity: 1; cursor: pointer; From a3c422204c0a5af4018f1a8f4392fbdb8e6de91b Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 15 Dec 2017 11:02:17 +0100 Subject: [PATCH 06/11] Fix margin for notifications that have no long-message text Signed-off-by: Marin Treselj --- css/styles.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/css/styles.css b/css/styles.css index 72ec0ec93..b14e874b1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -25,9 +25,9 @@ border-bottom: 1px solid rgb(238, 238, 238); } -.notification-heading { +.notification-heading, +.notification-subject { display: flex; - flex-flow: wrap; } img.notification-icon { @@ -36,11 +36,6 @@ img.notification-icon { display: flex; } -.notification-subject { - padding: 0 12px; - display: flex; -} - .notification-subject > span.text, .notification-subject > a > span.text { padding-left: 10px; @@ -93,6 +88,9 @@ img.notification-icon { margin: 0; } +.notification-subject, +.notification .notification-message, +.notification .notification-full-message, .notification .notification-actions { margin: 0 12px 12px; } @@ -109,7 +107,6 @@ img.notification-icon { .notification .notification-full-message { line-height: 20px; opacity: .57; - padding: 12px; } .notification .notification-message img, From 2c6485c4ad4838dc64460770036a7f2a976328a6 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Fri, 15 Dec 2017 15:18:27 +0100 Subject: [PATCH 07/11] Fix notifications order Signed-off-by: Marin Treselj --- css/styles.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/css/styles.css b/css/styles.css index b14e874b1..c50de06d6 100644 --- a/css/styles.css +++ b/css/styles.css @@ -9,6 +9,8 @@ min-height: 100px; max-height: 260px; border-radius: 0 0 3px 3px; + overflow: hidden; + overflow-y: auto; } .notification-container .emptycontent h2 { @@ -16,12 +18,7 @@ font-size: 16px; } -.notification { - display: flex; - flex-direction: column; -} - -.notification:not(:last-child) { +.notification:not(:first-child) { border-bottom: 1px solid rgb(238, 238, 238); } @@ -134,9 +131,8 @@ img.notification-icon { } .notification-wrapper { - max-height: 260px; - overflow: hidden; - overflow-y: auto; + display: flex; + flex-direction: column-reverse; } .notifications .emptycontent { From a73e25f9094558e405d51de07116dd4a60660564 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Mon, 18 Dec 2017 15:50:50 +0100 Subject: [PATCH 08/11] Revert CSS fix for notification sorting Signed-off-by: Marin Treselj --- css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index c50de06d6..e88bc8654 100644 --- a/css/styles.css +++ b/css/styles.css @@ -132,7 +132,7 @@ img.notification-icon { .notification-wrapper { display: flex; - flex-direction: column-reverse; + flex-direction: column; } .notifications .emptycontent { From 546ad03ced6640d623a3aad04d60359942cbb039 Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Mon, 18 Dec 2017 16:00:44 +0100 Subject: [PATCH 09/11] Fix bottom border Signed-off-by: Marin Treselj --- css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index e88bc8654..f595429e6 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,7 +18,7 @@ font-size: 16px; } -.notification:not(:first-child) { +.notification:not(:last-child) { border-bottom: 1px solid rgb(238, 238, 238); } From c8174f1deaabb680dd4c30e4a0e350dc3aac977c Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Tue, 19 Dec 2017 11:05:43 +0100 Subject: [PATCH 10/11] Add padding-bottom to notifications Signed-off-by: Marin Treselj --- css/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/styles.css b/css/styles.css index f595429e6..166d6c18a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,6 +18,10 @@ font-size: 16px; } +.notification { + padding-bottom: 12px; +} + .notification:not(:last-child) { border-bottom: 1px solid rgb(238, 238, 238); } From b541bf466f8e05a26c8d4f0445333c4b45326d9d Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Tue, 19 Dec 2017 12:12:34 +0100 Subject: [PATCH 11/11] Fix indentation Signed-off-by: Marin Treselj --- css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index 166d6c18a..26a8c42b2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -28,7 +28,7 @@ .notification-heading, .notification-subject { - display: flex; + display: flex; } img.notification-icon {