From 3c9b69884ece15416da99bc212377cba1090c9fe Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 18 Sep 2021 21:37:53 +0100 Subject: [PATCH] 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) {