table view: improve columns width (#248)

lieser · Jul 24, 2021 · ef01660 · ef01660
1 parent a73d6c2
commit ef01660
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 0 deletions.
diff --git a/content/keysView.css b/content/keysView.css
@@ -0,0 +1,30 @@
+#keysTable {
+	table-layout: auto;
+}
+
+td[data-column-name="sdid"] {
+	width: 10em;
+	max-width: max(10em, 30vw);
+}
+
+td[data-column-name="selector"] {
+	width: 10em;
+	max-width: max(10em, 20vw);
+}
+
+td[data-column-name="key"] {
+	white-space: nowrap;
+	max-width: 5em;
+}
+
+td[data-column-name="insertedAt"] {
+	width: 7em;
+}
+
+td[data-column-name="lastUsedAt"] {
+	width: 7em;
+}
+
+td[data-column-name="secure"] {
+	width: 1em;
+}
diff --git a/content/keysView.html b/content/keysView.html
@@ -8,6 +8,7 @@
   <link rel='stylesheet' type='text/css' href="chrome://global/skin/in-content/common.css">
 
   <link rel='stylesheet' type='text/css' href="./table.css">
+  <link rel='stylesheet' type='text/css' href="./keysView.css">
 
   <script type="module" src="./translation.mjs.js"></script>
   <script type="module" src="./keysView.mjs.js"></script>

diff --git a/content/signRulesDefaultsView.css b/content/signRulesDefaultsView.css
@@ -0,0 +1,26 @@
+#rulesTable {
+	table-layout: auto;
+}
+
+td[data-column-name="domain"] {
+	width: 10em;
+	max-width: max(10em, 30vw);
+}
+
+td[data-column-name="addr"] {
+	width: 10em;
+	max-width: max(10em, 20vw);
+}
+
+td[data-column-name="sdid"] {
+	width: 10em;
+	max-width: max(10em, 20vw);
+}
+
+td[data-column-name="type"] {
+	width: 1em;
+}
+
+td[data-column-name="priority"] {
+	width: 1em;
+}
diff --git a/content/signRulesDefaultsView.html b/content/signRulesDefaultsView.html
@@ -8,6 +8,7 @@
   <link rel='stylesheet' type='text/css' href="chrome://global/skin/in-content/common.css">
 
   <link rel='stylesheet' type='text/css' href="./table.css">
+  <link rel='stylesheet' type='text/css' href="./signRulesDefaultsView.css">
 
   <script type="module" src="./translation.mjs.js"></script>
   <script type="module" src="./signRulesDefaultsView.mjs.js"></script>

diff --git a/content/signRulesUserView.css b/content/signRulesUserView.css
@@ -0,0 +1,35 @@
+#rulesTable {
+	table-layout: auto;
+}
+
+td[data-column-name="domain"] {
+	width: 10em;
+	max-width: max(10em, 15vw);
+}
+
+td[data-column-name="listId"] {
+	width: 10em;
+	max-width: max(10em, 10vw);
+}
+
+td[data-column-name="addr"] {
+	width: 7em;
+	max-width: max(7em, 10vw);
+}
+
+td[data-column-name="sdid"] {
+	width: 7em;
+	max-width: max(7em, 10vw);
+}
+
+td[data-column-name="type"] {
+	width: 1em;
+}
+
+td[data-column-name="priority"] {
+	width: 1em;
+}
+
+td[data-column-name="enabled"] {
+	width: 1em;
+}
diff --git a/content/signRulesUserView.html b/content/signRulesUserView.html
@@ -8,6 +8,7 @@
   <link rel='stylesheet' type='text/css' href="chrome://global/skin/in-content/common.css">
 
   <link rel='stylesheet' type='text/css' href="./table.css">
+  <link rel='stylesheet' type='text/css' href="./signRulesUserView.css">
 
   <script type="module" src="./translation.mjs.js"></script>
   <script type="module" src="./signRulesUserView.mjs.js"></script>

diff --git a/content/table.css b/content/table.css
@@ -1,6 +1,7 @@
 table {
 	border-collapse: collapse;
 	margin: 20px;
+	width: calc(100% - 40px);
 }
 
 th {
@@ -10,6 +11,8 @@ th {
 th, td {
 	border-inline: 1px solid var(--in-content-box-border-color);
 	padding: 3px 4px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 tr:nth-child(even) {