kallithea Changeset - 6188d37b9d72

Changeset - 6188d37b9d72

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Mads Kiilerich - 7 years ago 2019-03-22 02:11:45
mads@kiilerich.com

style: adjust vertical spacing inside comment chunks

Use less spacing after comment panels inside comment sections (10px from
@kallithea-panel-margin instead of 20px) to hint that the comments are related
... and also to avoid using too much vertical space.

Also show Comment/Cancel buttoms closer to the comment form ("well") they are
related to.

2 files changed with 6 insertions and 1 deletions:

kallithea/front-end/style.less

kallithea/templates/changeset/changeset_file_comment.html

0 comments (0 inline, 0 general)

kallithea/front-end/style.less

➞

Show inline comments

@@ @@ -69,48 +69,50 @@ nav.navbar.mainmenu > .navbar-header > . @@
     margin-bottom: -@kallithea-logo-bottom;
     margin-top: -12px;
+  }
+}
 /* code highlighting */
 /* don't use bootstrap style for code blocks */
 .code-highlighttable pre {
   background: inherit;
   border: 0;
+}
 /* every direct child of a panel, that is not .panel-heading, should auto
  * overflow to prevent overflowing of elements like text boxes and tables */
 .panel > :not(.panel-heading){
   overflow-x: auto;
   min-height: 0.01%;
+}
 /* allow other exceptions to automatic overflow-x */
 .panel > .overflow-x-visible {
   overflow-x: visible;
+}
 /* margin below PR comments */
 .comment > .panel,
 /* margin below top level panels */
 #main > .panel {
   margin-bottom: @kallithea-panel-margin;
+}
 /* search highlighting */
 div.search-code-body pre .match {
   background-color: @highlight-color;
+}
 div.search-code-body pre .break {
   background-color: @highlight-line-color;
   width: 100%;
   display: block;
+}
 /* use @alert-danger-text for form error messages and .alert-danger for the input element */
 .form-group .error-message {
   color: @alert-danger-text;
   display: inline-block;
   padding-top: 5px;
   &:empty{
     display: none;
+  }
+}
@@ @@ -526,48 +528,51 @@ div.form div.form-group div.highlight, @@
   padding: 10px 0;
   color: #666;
+}
 .automatic-comment {
   font-style: italic;
+}
 /** comment form **/
 .status-block {
   margin: 5px;
   clear: both;
+}
 .panel-heading .pull-left input[type=checkbox],
 .panel-heading .pull-right input[type=checkbox] {
   position: relative;
   top: 4px;
   margin: -10px 2px 0;
+}
 /** indent actual inline comments - not general comments **/
 td.inline-comments {
   padding: @kallithea-panel-margin;
+}
 .inline-comments .comments-number {
   padding: 0px 0px 10px 0px;
+}
 .comment-inline-well {
   margin-bottom: @kallithea-panel-margin;
+}
 input.status_change_checkbox,
 input.status_change_radio {
   margin: 0 0 5px 15px;
+}
 @keyframes animated-comment-background {
 % {
     background-position: 0 0;
+  }
 % {
     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%);

kallithea/templates/changeset/changeset_file_comment.html

➞

Show inline comments

@@ @@ -61,49 +61,49 @@ @@
               ${request.authuser.full_name_or_username}
           </span>
           <span class="comment-submission-status">
               ${_('Submitting ...')}
           </span>
       </div>
       <div class="panel-body">
            <div class="automatic-comment" style="display: none;">
              <p>
                ${_("Status change")}: <span class="comment-status-label"></span>
                <i class="icon-circle"></i>
              </p>
            </div>
            <div class="comment-text">
              <div class="formatted-fixed">
              </div>
            </div>
       </div>
     </div>
   </div>
   <div class="ac">
   %if request.authuser.username != 'default':
     ${h.form('#', class_='inline-form')}
       <div class="well well-sm clearfix">
+      <div class="well well-sm clearfix comment-inline-well">
         <div class="comment-help">
           <span class="text-muted">${_('Comments are in plain text. Use @username to notify another user.')|n}</span>
         </div>
         <textarea name="text" class="form-control"></textarea>
         <div id="status_block_container" class="status-block general-only hidden">
                 %if c.pull_request is None:
                   ${_('Set changeset status')}:
                 %else:
                   ${_('Vote for pull request status')}:
                 %endif
                 <span class="general-only cs-only">
                 </span>
                 <label class="radio-inline">
                     <input type="radio" class="status_change_radio" name="changeset_status" id="changeset_status_unchanged" value="" checked="checked" />
                     ${_('No change')}
                 </label>
                 %for status, lbl in c.changeset_statuses:
                     <label class="radio-inline">
                         <input type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">
                         ${lbl}<i class="icon-circle changeset-status-${status}"></i>
                     </label>
                 %endfor

0 comments (0 inline, 0 general)