From 164ce1138beb7f956126216ea46a81fe02c459a1 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 21:27:56 +0100 Subject: [PATCH 1/6] Remove aria-hidden from bitwarden logo link, add appropriate alt attribute --- src/notification/bar.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index 065ca944bb..ba4c537bc4 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -9,8 +9,8 @@ - + From 02cccf981d3fec5c3e659bd7e3eb5b7aefdde071 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 21:28:57 +0100 Subject: [PATCH 2/6] Add proper title to the page --- src/notification/bar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index ba4c537bc4..d8f67b504e 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -1,7 +1,7 @@  - + Bitwarden From 3c9b69884ece15416da99bc212377cba1090c9fe Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 21:37:53 +0100 Subject: [PATCH 3/6] Replace table with grid --- src/notification/bar.html | 64 ++++++++++++++++----------------------- src/notification/bar.scss | 41 ++++++++++++++----------- 2 files changed, 49 insertions(+), 56 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index d8f67b504e..efacf8d878 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -5,45 +5,33 @@ - - - - - - - - -
- - - - - - X - -
+
+ +
+
+ + X + +
+
diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 1f673d5255..d959de210a 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -9,31 +9,35 @@ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } -table { - width: 100%; +.outer-wrapper { + padding: 0 15px 0 10px; + border-bottom: 2px solid #175ddc; + display: grid; + grid-template-columns: 1fr auto 1fr; + column-gap: 10px; + grid-column-gap: 10px; + box-sizing: border-box; + height: 42px; } -.outter-table > tbody > tr > td { - padding: 0 0 0 10px; - border-bottom: 2px solid #175DDC; - height: 40px; +.outer-wrapper > * { + align-self: center; } - .outter-table > tbody > tr > td:last-child { - padding-right: 10px; - } - -.inner-table td { - padding: 0 10px 0 0; +.inner-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 10px; + grid-column-gap: 10px; } - .inner-table td:last-child { - padding: 0; - } +#content .change-buttons { + justify-self: end; +} - .inner-table td button { - margin-left: 5px; - } +.wrapper > *, .inner-wrapper > * { + align-self: center; +} img { border: 0; @@ -83,6 +87,7 @@ button.link { body[class*='lang-en'] .add-buttons { width: 175px; + text-align: right; } @media (min-width: 768px) { From 3b9cddefd843d5a9746b9fc3736a5f53cb0621ca Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 21:37:53 +0100 Subject: [PATCH 4/6] Replace table with grid --- src/notification/bar.html | 64 ++++++++++++++++----------------------- src/notification/bar.scss | 41 ++++++++++++++----------- 2 files changed, 49 insertions(+), 56 deletions(-) diff --git a/src/notification/bar.html b/src/notification/bar.html index d8f67b504e..efacf8d878 100644 --- a/src/notification/bar.html +++ b/src/notification/bar.html @@ -5,45 +5,33 @@ - - - - - - - - -
- - - - - - X - -
+
+ +
+
+ + X + +
+
diff --git a/src/notification/bar.scss b/src/notification/bar.scss index 1f673d5255..8942ed5098 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -9,31 +9,35 @@ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } -table { - width: 100%; +.outer-wrapper { + padding: 0 10px; + border-bottom: 2px solid #175ddc; + display: grid; + grid-template-columns: 1fr auto 1fr; + column-gap: 10px; + grid-column-gap: 10px; + box-sizing: border-box; + height: 42px; } -.outter-table > tbody > tr > td { - padding: 0 0 0 10px; - border-bottom: 2px solid #175DDC; - height: 40px; +.outer-wrapper > * { + align-self: center; } - .outter-table > tbody > tr > td:last-child { - padding-right: 10px; - } - -.inner-table td { - padding: 0 10px 0 0; +.inner-wrapper { + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 10px; + grid-column-gap: 10px; } - .inner-table td:last-child { - padding: 0; - } +#content .change-buttons { + justify-self: end; +} - .inner-table td button { - margin-left: 5px; - } +.wrapper > *, .inner-wrapper > * { + align-self: center; +} img { border: 0; @@ -83,6 +87,7 @@ button.link { body[class*='lang-en'] .add-buttons { width: 175px; + text-align: right; } @media (min-width: 768px) { From 495a7adcb7d01cbbea661de368c76294222c1607 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 23:09:41 +0100 Subject: [PATCH 5/6] Tweak styles for folder select --- src/notification/bar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/notification/bar.scss b/src/notification/bar.scss index c76a534007..d12a891c61 100644 --- a/src/notification/bar.scss +++ b/src/notification/bar.scss @@ -92,7 +92,7 @@ body[class*='lang-en'] .add-buttons { @media (min-width: 768px) { body[class*='lang-en'] .add-buttons { - width: 320px; + width: 420px; } } From 6514b5fa3b93b0726a80156322ecf25170f789ab Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 23:11:10 +0100 Subject: [PATCH 6/6] Inject aria-label to folder select --- src/notification/bar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/notification/bar.js b/src/notification/bar.js index 070b293440..b4d658577e 100644 --- a/src/notification/bar.js +++ b/src/notification/bar.js @@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => { i18n.close = chrome.i18n.getMessage('close'); i18n.yes = chrome.i18n.getMessage('yes'); i18n.never = chrome.i18n.getMessage('never'); + i18n.folder = chrome.i18n.getMessage('folder'); i18n.notificationAddSave = chrome.i18n.getMessage('notificationAddSave'); i18n.notificationNeverSave = chrome.i18n.getMessage('notificationNeverSave'); i18n.notificationAddDesc = chrome.i18n.getMessage('notificationAddDesc'); @@ -39,6 +40,7 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelector('#template-add .add-save').textContent = i18n.notificationAddSave; document.querySelector('#template-add .never-save').textContent = i18n.notificationNeverSave; document.querySelector('#template-add .select-folder').style.display = 'initial'; + document.querySelector('#template-add .select-folder').setAttribute('aria-label', i18n.folder); document.querySelector('#template-change .change-save').textContent = i18n.notificationChangeSave; }