changeset 7109:228dd29e79da

less: clean up changelog style - use table-layout: fixed Since we already use a fixed width for the most cells, this makes it easier (faster) for the browser to render specially big tables. And it allows to use 'text-overflow: ellipsis'. The old ellipsis settings have no effect. - use nowrap and 'text-overflow: ellipsis' for all cells A table is easier (faster) to read for a user if all the row have the same height. Therefore don't wrap lines and in case of overflow use ellipsis. - remove unnecessary height Up until now the row was bigger then 31px so this had no effect. And it look wrong to make the row bigger then its content. - remove unnecessary border-color bootstrap default is almost the same color - remove unnecessary text-align left is the default - remove font-size or use bootstrap .small Making fonts too small hurts the readability. - remove some padding and margin - don't use special colors The differences are hardly noticable or in case of the gray dates hurt readability. - remove obsolete table#changesets .logtags style
author domruf <dominikruf@gmail.com>
date Sat, 28 Oct 2017 23:35:04 +0200
parents 450a5ee5889b
children 9f976d75b04c
files kallithea/public/less/kallithea-variables.less kallithea/public/less/style.less
diffstat 2 files changed, 40 insertions(+), 115 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/less/kallithea-variables.less	Wed Oct 25 22:41:45 2017 +0200
+++ b/kallithea/public/less/kallithea-variables.less	Sat Oct 28 23:35:04 2017 +0200
@@ -28,6 +28,7 @@
 @dropdown-link-color:               @navbar-inverse-color;
 @dropdown-bg:                       @navbar-inverse-bg;
 @headings-font-weight:              700;
+@table-cell-padding:                2px 4px;
 
 /* custom variables */
 @highlight-color:                   #FAFFA6;
--- a/kallithea/public/less/style.less	Wed Oct 25 22:41:45 2017 +0200
+++ b/kallithea/public/less/style.less	Sat Oct 28 23:35:04 2017 +0200
@@ -360,12 +360,6 @@
 #changeset_compare_view_content .compare_view_commits td {
   padding: 0px 0px 0px 12px !important;
 }
-td.author {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 210px;
-}
 #graph_nodes {
   position: absolute;
   width: 100px;
@@ -384,115 +378,6 @@
 table#changesets tr.out-of-range {
   opacity: 0.6;
 }
-table#changesets tr > td {
-  height: 31px;
-  border-color: #cdcdcd;
-  text-align: left;
-}
-table#changesets tr > td.checkbox-column {
-  width: 14px;
-  font-size: 0.85em;
-}
-table#changesets tr > td.status {
-  width: 14px;
-  font-size: 0.85em;
-}
-table#changesets tr > td.hash {
-  width: 100px;
-  font-size: 0.85em;
-}
-table#changesets tr > td.date {
-  width: auto !important;
-  color: #666;
-  font-size: 10px;
-  white-space: nowrap;
-}
-table#changesets tr > td.mid {
-  width: 100%;
-  padding: 0;
-}
-table#changesets .log-container {
-  position: relative;
-  margin-top: 8px;
-}
-table#changesets tr #singlerange,
-table#changesets tr .changeset_range {
-  float: left;
-  margin: 2px 0;
-}
-table#changesets tr > td.author img {
-  vertical-align: middle;
-}
-table#changesets tr > td.author .user {
-  color: #444444;
-}
-table#changesets tr > td.mid .message,
-#graph_content_pr .compare_view_commits .message {
-  white-space: nowrap;
-  padding: 0;
-  overflow: hidden;
-}
-#graph_content_pr .compare_view_commits .message {
-  padding: 0 !important;
-}
-table#changesets tr > td.mid .message.expanded,
-#graph_content_pr .compare_view_commits .message.expanded {
-  height: auto;
-  overflow: initial;
-}
-table#changesets tr .extra-container {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.comments-container,
-table#changesets .logtags {
-  display: block;
-  float: left;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  white-space: nowrap;
-}
-table#changesets .tagcontainer {
-  width: 80px;
-  position: relative;
-  float: right;
-  height: 100%;
-  top: 7px;
-  margin-left: 0.5em;
-}
-table#changesets .logtags {
-  min-width: 80px;
-  height: 1.1em;
-  position: absolute;
-  left: 0px;
-  width: auto;
-  top: 0px;
-}
-table#changesets .logtags.tags {
-  top: 14px;
-}
-table#changesets .logtags:hover {
-  overflow: visible;
-  position: absolute;
-  width: auto;
-  right: 0;
-  left: initial;
-}
-table#changesets .logtags .booktag,
-table#changesets .logtags .tagtag {
-  float: left;
-  line-height: 1em;
-  margin-bottom: 1px;
-  margin-right: 1px;
-  padding: 1px 3px;
-  font-size: 10px;
-}
-table#changesets tr > td.mid .message a:hover {
-  text-decoration: none;
-}
 #updaterevs-graph {
   position: relative;
   width: 40px;
@@ -892,6 +777,45 @@
   margin-left: 100px;
 }
 
+/* changelog table columns */
+.table#changesets {
+  table-layout: fixed;
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .checkbox-column {
+    width: 24px;
+    /* the optional second checkbox will be inline-block but should wrap to a new line */
+    white-space: normal;
+  }
+  .changeset-logical-index,
+  .expand_commit,
+  .status {
+    width: 28px;
+  }
+  .author {
+    width: 200px;
+  }
+  .hash {
+    .small;
+    width: 110px;
+  }
+  .date {
+    .small;
+    width: 100px;
+  }
+  .mid > .log-container {
+    position: relative;
+    > .extra-container {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+
 /* undo Bootstrap chrome/webkit blue outline on focus in navbar */
 .navbar-inverse .navbar-nav > li > a:focus {
   outline: 0;