Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-03 08:49:50 +01:00
Code Issues Projects Releases Wiki Activity

Replace table with grid

Browse Source
This commit is contained in:
Patrick H. Lauke 2021-09-18 21:37:53 +01:00
parent 02cccf981d
commit 3c9b69884e
2 changed files with 49 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/notification/bar.html
View File

@ -5,45 +5,33 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<table class="outter-table" cellpadding="0" cellspacing="0"> <div class="outer-wrapper">
<tbody> <div class="logo">
<tr> <a href="https://vault.bitwarden.com" target="_blank" id="logo-link">
<td width="24"> <img id="logo" alt="Bitwarden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVBQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzjZa7EAAAAHB0Uk5TAGOSmJRPBP/wZ5ygx4CC4ZDDBsWdD86RJeX5dF7+3j4Hq78Rj/pY824x2B7tJoS7mgIc2Rqhyid69g6V/FQFe/sN0RTAGcxO4rwVickfrlDIpRsKeZdI94UD6tXmZCO1/TAIWulwn+zumy8B0DPPwmJoSmgAAAFHSURBVHicY2AAAkYmZsKAhZWNAQbYiQIcnCRqYOciVQM3VTXw8CIDPn6CGgQYkAGb4KiGUQ2jGoaTBiFhkJgI8RpExUBi4sRrkJAECklJE69BRhYoJCcP50sS0KCgCBJSUoYLqKji16CmDhSR1UAIaGrh1aCtAxKR1EUS0sOngU0fLGJgiKTByBi3BhNTsICZObIjDS0scWmwsgZL2djaoYSblb0sdg3m3A5gvrUhAypwdMKqwdkFot7JlQEdmLhhamBz94DwPJ0x1DMweLmgaxD1toFwfHyxqAcmGD8bZA1s/gGQ+JQNDMKqnoEhOEQdriE0LDAcwpKMCMahnoEhki8KpiE6BsrgiBXCqR4I4uITUEMrMBGfciBISo5CUp6SSkA5CCSmpUOVZ2RmZROhgYFNPgesXjjXjrBiCDC0zQvP52TDKgcAwC5BBQq6zvAAAAAASUVORK5CYII=" />
<a href="https://vault.bitwarden.com" target="_blank" id="logo-link"> </a>
<img id="logo" alt="Bitwarden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVBQTFRFAAAAMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzjZa7EAAAAHB0Uk5TAGOSmJRPBP/wZ5ygx4CC4ZDDBsWdD86RJeX5dF7+3j4Hq78Rj/pY824x2B7tJoS7mgIc2Rqhyid69g6V/FQFe/sN0RTAGcxO4rwVickfrlDIpRsKeZdI94UD6tXmZCO1/TAIWulwn+zumy8B0DPPwmJoSmgAAAFHSURBVHicY2AAAkYmZsKAhZWNAQbYiQIcnCRqYOciVQM3VTXw8CIDPn6CGgQYkAGb4KiGUQ2jGoaTBiFhkJgI8RpExUBi4sRrkJAECklJE69BRhYoJCcP50sS0KCgCBJSUoYLqKji16CmDhSR1UAIaGrh1aCtAxKR1EUS0sOngU0fLGJgiKTByBi3BhNTsICZObIjDS0scWmwsgZL2djaoYSblb0sdg3m3A5gvrUhAypwdMKqwdkFot7JlQEdmLhhamBz94DwPJ0x1DMweLmgaxD1toFwfHyxqAcmGD8bZA1s/gGQ+JQNDMKqnoEhOEQdriE0LDAcwpKMCMahnoEhki8KpiE6BsrgiBXCqR4I4uITUEMrMBGfciBISo5CUp6SSkA5CCSmpUOVZ2RmZROhgYFNPgesXjjXjrBiCDC0zQvP52TDKgcAwC5BBQq6zvAAAAAASUVORK5CYII=" /> </div>
</a> <div id="content"></div>
</td> <div>
<td id="content"></td> <a href="#" id="close-button">
<td align="right" width="15"> <img id="close" alt="X" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABJQTFRFAAAAMzMzMzMzMzMzMzMzMzMzbxxq5QAAAAZ0Uk5TAECg/2CfwOuXQgAAAJVJREFUeJxVkdEJwzAMRNXgAQpZINAu0Fz7b3AHyP7T1MrppNQfMuI9sE42s7vp3Lws7+zHMcsDPdqGz8SAhAEctgIhNDhiDYyNVw+8p5ZYgrCExBS+iSmgMIXCEhJTKMy+Yobf//BF0Hv9gp8lcPKRAifPPSiYBAULoXJTWHNyJy/f917vbv4fCtZOslSwcZLKMf/zB2MLKtNp5GuwAAAAAElFTkSuQmCC" />
<a href="#" id="close-button"> </a>
<img id="close" alt="X" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABJQTFRFAAAAMzMzMzMzMzMzMzMzMzMzbxxq5QAAAAZ0Uk5TAECg/2CfwOuXQgAAAJVJREFUeJxVkdEJwzAMRNXgAQpZINAu0Fz7b3AHyP7T1MrppNQfMuI9sE42s7vp3Lws7+zHMcsDPdqGz8SAhAEctgIhNDhiDYyNVw+8p5ZYgrCExBS+iSmgMIXCEhJTKMy+Yobf//BF0Hv9gp8lcPKRAifPPSiYBAULoXJTWHNyJy/f917vbv4fCtZOslSwcZLKMf/zB2MLKtNp5GuwAAAAAElFTkSuQmCC" /> </div>
</a> </div>
</td>
</tr>
</tbody>
</table>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<table class="inner-table" cellpadding="0" cellspacing="0" id="template-add"> <div class="inner-wrapper" id="template-add">
<tbody> <div class="add-text"></div>
<tr> <div class="add-buttons">
<td class="add-text"></td> <button class="never-save link"></button>
<td align="right" class="add-buttons"> <button class="add-save"></button>
<button class="never-save link"></button> </div>
<button class="add-save"></button> </div>
</td> <div class="inner-wrapper" id="template-change">
</tr> <div class="change-text"></div>
</tbody> <div class="change-buttons">
</table> <button class="change-save"></button>
<table class="inner-table" cellpadding="0" cellspacing="0" id="template-change"> </div>
<tbody> </div>
<tr>
<td class="change-text"></td>
<td align="right" class="change-buttons">
<button class="change-save"></button>
</td>
</tr>
</tbody>
</table>
<div id="template-alert"></div> <div id="template-alert"></div>
</div> </div>
</body> </body>

41
src/notification/bar.scss
View File

@ -9,31 +9,35 @@
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
} }
table { .outer-wrapper {
width: 100%; 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 { .outer-wrapper > * {
padding: 0 0 0 10px; align-self: center;
border-bottom: 2px solid #175DDC;
height: 40px;
} }
.outter-table > tbody > tr > td:last-child { .inner-wrapper {
padding-right: 10px; display: grid;
} grid-template-columns: 2fr 1fr;
column-gap: 10px;
.inner-table td { grid-column-gap: 10px;
padding: 0 10px 0 0;
} }
.inner-table td:last-child { #content .change-buttons {
padding: 0; justify-self: end;
} }
.inner-table td button { .wrapper > *, .inner-wrapper > * {
margin-left: 5px; align-self: center;
} }
img { img {
border: 0; border: 0;
@ -83,6 +87,7 @@ button.link {
body[class*='lang-en'] .add-buttons { body[class*='lang-en'] .add-buttons {
width: 175px; width: 175px;
text-align: right;
} }
@media (min-width: 768px) { @media (min-width: 768px) {