kallithea Changeset - ba8781f3f2c2

Changeset - ba8781f3f2c2

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

Mads Kiilerich - 8 years ago 2018-02-21 10:58:21
mads@kiilerich.com

less: fix changelog commit message flowing into the labels that are floating to the right of it

For long commit messages, two texts were shown on top of each other and none of
them could be read.

To fix that, give the floating labels a solid white background.

To avoid a hard cut-off of the commit message, use a white box-shadow to the
left of the labels to give a smooth transition.

To avoid the commit message flowing into the td padding to the right of the
labels, make log-container hide overflow.

1 file changed with 3 insertions and 0 deletions:

kallithea/public/less/style.less

0 comments (0 inline, 0 general)

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -625,254 +625,257 @@ input.status_change_radio { @@
 % {
     background-position: 20px 0;
+  }
+}
 .comment-preview.failed .user,
 .comment-preview.failed .panel-body {
   color: #666;
+}
 .comment-preview .comment-submission-status {
   float: right;
+}
 .comment-preview .comment-submission-status .btn-group {
   margin-left: 10px;
+}
 .comment-preview.submitting .panel-body {
   background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);
   background-size: 20px 20px;
   animation: animated-comment-background 0.4s linear infinite;
+}
 /****
 PULL REQUESTS
 *****/
 div.pr-details-title.closed {
   color: #555;
   background: #eee;
+}
 div.pr {
   margin: 0px 15px;
   padding: 4px 4px;
+}
 tr.pr-closed td {
   background-color: #eee !important;
   color: #555 !important;
+}
 span.pr-closed-tag {
   margin-bottom: 1px;
   margin-right: 1px;
   padding: 1px 3px;
   font-size: 10px;
   color: @kallithea-theme-main-color;
   white-space: nowrap;
   border-radius: 4px;
   border: 1px solid #d9e8f8;
   line-height: 1.5em;
+}
 .panel-body .pr-box {
   max-width: 978px;
   margin-right: 15px;
+}
 #s2id_org_ref,
 #s2id_other_ref,
 #s2id_org_repo,
 #s2id_other_repo {
   min-width: 150px;
   margin: 5px;
+}
 #pr-summary > .pr-not-edit {
   min-height: 50px !important;
+}
 #pr-edit-btn {
   margin: 20px 0 0 !important;
   position: absolute;
+}
 /* make 'next iteration' changeset table smaller and scrollable */
 #pr-summary #updaterevs {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
+}
 /****
   PERMS
 *****/
 .perm-gravatar-ac {
   vertical-align: middle;
   padding: 2px;
   width: 14px;
   height: 14px;
+}
 /* avoid gaps between the navbar and browser */
 .navbar.mainmenu {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+}
 .navbar.footer {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+}
 /* show some context of link targets - but only works when the link target
    can be extended with any visual difference */
 div.comment:target:before {
   display: block;
   height: 100px;
   margin: -100px 0 0;
   content: "";
+}
 div.comment:target > .panel {
   border: solid 2px #ee0 !important;
+}
 .lineno:target a {
   border: solid 2px #ee0 !important;
   margin: -2px;
+}
 .btn-image-diff-show,
 .btn-image-diff-swap {
   margin: 5px;
+}
 .img-diff {
   max-width: 45%;
   height: auto;
   margin: 5px;
   /* http://lea.verou.me/demos/css3-patterns.html */
   background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent), linear-gradient(-45deg, #888 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%);
   background-size: 10px 10px;
   background-color: #999;
+}
 .img-preview {
   max-width: 100%;
   height: auto;
   margin: 5px;
+}
 div.comment-prev-next-links div.prev-comment,
 div.comment-prev-next-links div.next-comment {
   display: inline-block;
   min-width: 150px;
   margin: 3px 6px;
+}
 #comments-general-comments div.comment-prev-next-links div.prev-comment,
 #comments-general-comments div.comment-prev-next-links div.next-comment {
   margin-left: 0;
+}
 #content div.panel .changelog-panel > .changelog-heading,
 #content div.panel .changelog-panel > ul.pagination {
   margin-left: 100px;
+}
 /* repo table icons */
 #repos_list_wrap_wrapper {
   /* make icon-folder and repotag the same width */
   .icon-folder:before {
     margin: 0; // default margin would otherwise add to the total width
     width: 24px;
     text-align: left;
+  }
   .label-repo {
     display: inline-block;
     width: 24px;
+  }
+}
 /* changelog table columns */
 .table#changesets {
   table-layout: fixed;
   td {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     vertical-align: baseline;
+  }
   .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 {
     color: @gray-light;
     font-style: italic;
     font-size: 85%;
     text-align: right;
     overflow: visible;
+  }
   .changeset-logical-index,
   .expand_commit,
   .status {
     width: 28px;
+  }
   .author {
     width: 200px;
+  }
   .hash {
     .small;
     width: 110px;
+  }
   .date {
     .small;
     width: 100px;
+  }
   .mid > .log-container {
     position: relative;
     overflow: hidden;
     > .extra-container {
       position: absolute;
       top: 0;
       right: 0;
       background: white;
       box-shadow: -10px 0px 10px 0px white;
+    }
+  }
+}
 /* undo Bootstrap chrome/webkit blue outline on focus in navbar */
 .navbar-inverse .navbar-nav > li > a:focus {
   outline: 0;
+}
 /* use same badge coloring in navbar inverse as in panel-heading */
 .navbar-inverse {
   .badge {
     color: @navbar-inverse-bg;
     background-color: @navbar-inverse-color;
+  }
+}
 /* pygments style */
 div.search-code-body pre .match {
   background-color: @highlight-color;
+}
 div.search-code-body pre .break {
   background-color: @highlight-line-color;
   width: 100%;
   color: #747474;
   display: block;
+}
 div.annotatediv {
   margin-left: 2px;
   margin-right: 4px;
+}
 .code-highlight {
   border-left: 1px solid #ccc;
+}
 .code-highlight pre,
 .linenodiv pre {
   padding: 5px 2px 0px 5px;
   margin: 0;
+}
 .code-highlight pre div:target {
   background-color: #FFFFBE !important;
+}
 .linenos a { text-decoration: none; }
 /* Stylesheets for the context bar */
 #quick_login > .pull-right .list-group-item {
   background-color: @kallithea-theme-main-color;
   border: 0;
+}
 #content #context-pages .follow .show-following,
 #content #context-pages .following .show-follow {
   display: none;
+}
 nav.navbar #quick > li > a,
 #context-pages > ul > li > a {
   height: @navbar-height;
+}

0 comments (0 inline, 0 general)