Mercurial > kallithea
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;