kallithea Changeset - 11f829761032

Changeset - 11f829761032

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Mads Kiilerich - 8 years ago 2018-04-23 00:44:13
mads@kiilerich.com

repos: clean up table button markup to give proper spacing

Before, it used multiple divs with pull-left to make plain buttons and buttons
within forms render horizontally. But by doing so, they were rendered without
any space between the buttons.

Instead, style forms after buttons to be shown inline. The whitespace will thus
give the necessary spacing.

The redundant divs are thus removed.

2 files changed with 9 insertions and 26 deletions:

kallithea/public/less/style.less

kallithea/templates/data_table/_dt_elements.html

0 comments (0 inline, 0 general)

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -110,140 +110,145 @@ div.search-code-body pre .break { @@
   display: inline-block;
   padding-top: 5px;
   &:empty{
     display: none;
+  }
+}
 input.error {
   .alert-danger;
+}
 /* datatable */
 .dataTables_left {
   .pull-left;
+}
 .dataTables_right {
   .pull-right;
+}
 /* make all datatable paginations small */
 .dataTables_paginate .pagination {
   .pagination-sm;
+}
 /* show column sort icons in our font ... and before column header */
 table.dataTable {
   .sorting_asc:before {
     font-family: "kallithea";
     content: "\23f6";
     padding-right: 8px;
+  }
   .sorting_desc:before {
     font-family: "kallithea";
     content: "\23f7";
     padding-right: 8px;
+  }
   .sorting:before {
     font-family: "kallithea";
     content: "\2195";
     padding-right: 8px;
     opacity: 0.5;
+  }
   .sorting_asc:after,
   .sorting_desc:after,
   .sorting:after {
     content: "" !important;
+  }
+}
 /* _dt_elements.html styling - some submit buttons have their own form but should still be shown inline */
 table.dataTable td > .btn + form {
   display: inline;
+}
 table.dataTable .dt_repo_pending {
   opacity: 0.5;
+}
 /* language bars (summary page) */
 #lang_stats {
   .progress-bar {
     min-width: 15px;
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
+  }
   td {
     padding: 1px 0 !important;
+  }
+}
 /* use pointer cursor for expand_commit */
 .expand_commit .icon-align-left {
   cursor: pointer;
   color: #999;
+}
 /* don't break author, date and comment cells into multiple lines in changeset table */
 table.changesets {
   .author,
   .date,
   .comments {
     white-space: nowrap;
+  }
+}
 /* textareas should be at least 100px high and 400px wide */
 textarea.form-control {
   min-height: 100px;
   min-width: 400px;
+}
 /* add some space between the code-browser icons and the file names */
 .browser-dir > i[class^='icon-'],
 .submodule-dir > i[class^='icon-'],
 .browser-file > i[class^='icon-'] {
   padding-right: 0.3em;
+}
 .dt_repo_pending {
   opacity: 0.5;
+}
 div.panel-primary {
   border: none;
+}
 /* no extra vertical margin */
 #content div.panel ul.pagination {
   margin: 0;
+}
 /* remove margin below footer */
 .navbar.footer {
   margin-bottom: 0;
+}
 .user-menu {
   padding: 0 !important;
+}
 #quick_login {
   width: 360px;
   margin-top: 15px;
   min-height: 110px;
+}
 #quick_login input#username,
 #quick_login input#password {
   display: block;
   margin: 5px 0 10px;
+}
 #quick_login .password_forgotten a,
 #quick_login .register a {
   padding: 0 !important;
   line-height: 25px !important;
   float: left;
   clear: both;
+}
 #quick_login .submit {
   float: right;
+}
 #quick_login .submit input#sign_in {
   margin-top: 5px;
+}
 #quick_login > .pull-left {
   width: 170px;
+}
 #quick_login > .pull-right {
   width: 140px;
+}
 #quick_login .full_name {
   font-weight: bold;

kallithea/templates/data_table/_dt_elements.html

➞

Show inline comments

 ## DATA TABLE RE USABLE ELEMENTS
 ## usage:
 ## <%namespace name="dt" file="/data_table/_dt_elements.html"/>
 <%namespace name="base" file="/base/base.html"/>
 <%def name="repo_name(name,rtype,rstate,private,fork_of,short_name=False)">
     <%
     def get_name(name,short_name=short_name):
       if short_name:
         return name.split('/')[-1]
       else:
         return name
     %>
   <div class="dt_repo ${'dt_repo_pending' if rstate == 'repo_state_pending' else ''}">
     ${base.repolabel(rtype)}
     <a href="${h.url('summary_home', repo_name=name)}">
         ${get_name(name)}
     </a>
     %if private and c.visual.show_private_icon:
       <i class="icon-lock" title="${_('Private repository')}"></i>
     %elif not private and c.visual.show_public_icon:
       <i class="icon-globe" title="${_('Public repository')}"></i>
     %endif
     %if fork_of:
       <a href="${h.url('summary_home',repo_name=fork_of.repo_name)}"><i class="icon-fork"></i></a>
     %endif
     %if rstate == 'repo_state_pending':
       <i class="icon-wrench" title="${_('Repository creation in progress...')}"></i>
     %endif
   </div>
 </%def>
 <%def name="last_change(last_change)">
   <span data-toggle="tooltip" title="${h.fmt_date(last_change)}" date="${last_change}">${h.age(last_change)}</span>
 </%def>
 <%def name="revision(name,rev,tip,author,last_msg)">
   <div>
   %if rev >= 0:
       <a data-toggle="popover" title="${author | entity}" data-content="${last_msg | entity}" class="changeset_hash" href="${h.url('changeset_home',repo_name=name,revision=tip)}">${'r%s:%s' % (rev,h.short_id(tip))}</a>
   %else:
       ${_('No changesets yet')}
   %endif
   </div>
 </%def>
 <%def name="rss(name)">
   %if request.authuser.username != 'default':
     <a title="${_('Subscribe to %s rss feed')% name}" href="${h.url('rss_feed_home',repo_name=name,api_key=request.authuser.api_key)}"><i class="icon-rss-squared"></i></a>
   %else:
     <a title="${_('Subscribe to %s rss feed')% name}" href="${h.url('rss_feed_home',repo_name=name)}"><i class="icon-rss-squared"></i></a>
   %endif
 </%def>
 <%def name="atom(name)">
   %if request.authuser.username != 'default':
     <a title="${_('Subscribe to %s atom feed')% name}" href="${h.url('atom_feed_home',repo_name=name,api_key=request.authuser.api_key)}"><i class="icon-rss-squared"></i></a>
   %else:
     <a title="${_('Subscribe to %s atom feed')% name}" href="${h.url('atom_feed_home',repo_name=name)}"><i class="icon-rss-squared"></i></a>
   %endif
 </%def>
 <%def name="repo_actions(repo_name)">
   <div>
     <div class="pull-left">
       <a href="${h.url('edit_repo',repo_name=repo_name)}" title="${_('Edit')}" class="btn btn-default btn-xs">
         <i class="icon-pencil"></i>${_('Edit')}
       </a>
     </div>
     <div class="pull-left">
       ${h.form(h.url('delete_repo', repo_name=repo_name))}
         <button name="${'remove_%s' % repo_name}" class="btn btn-default btn-xs"
             onclick="return confirm('${_('Confirm to delete this repository: %s') % repo_name}');">
           <i class="icon-trashcan"></i>${_('Delete')}
         </button>
       ${h.end_form()}
     </div>
   </div>
 </%def>
 <%def name="repo_state(repo_state)">
   <div>
     %if repo_state == u'repo_state_pending':
         <div class="label label-info">${_('Creating')}</div>
     %elif repo_state == u'repo_state_created':
         <div class="label label-success">${_('Created')}</div>
     %else:
         <div class="label label-danger" title="${repo_state}">invalid</div>
     %endif
   </div>
 </%def>
 <%def name="user_actions(user_id, username)">
  <div class="pull-left">
    <a href="${h.url('edit_user',id=user_id)}" title="${_('Edit')}" class="btn btn-default btn-xs">
      <i class="icon-pencil"></i>${_('Edit')}
    </a>
  </div>
  <div class="pull-left">
   ${h.form(h.url('delete_user', id=user_id))}
     <button id="${'remove_user_%s' % user_id}" name="${'remove_user_%s' % repo_name}" class="btn btn-default btn-xs" title="${_('Delete')}"
         onclick="return confirm('${_('Confirm to delete this user: %s') % username}');">
       <i class="icon-trashcan"></i>${_('Delete')}
     </button>
   ${h.end_form()}
  </div>
 </%def>
 <%def name="user_group_actions(user_group_id, user_group_name)">
  <div class="pull-left">
     <a href="${h.url('edit_users_group', id=user_group_id)}" title="${_('Edit')}" class="btn btn-default btn-xs">
       <i class="icon-pencil"></i>${_('Edit')}
     </a>
  </div>
  <div class="pull-left">
     ${h.form(h.url('delete_users_group', id=user_group_id))}
       <button id="${'remove_group_%s' % user_group_id}" name="${'remove_user_%s' % repo_name}" class="btn btn-default btn-xs" title="${_('Delete')}"
           onclick="return confirm('${_('Confirm to delete this user group: %s') % user_group_name}');">
         <i class="icon-trashcan"></i>${_('Delete')}
       </button>
     ${h.end_form()}
  </div>
 </%def>
 <%def name="group_name_html(group_name,name)">
   <div class="dt_repo">
     <i class="icon-folder"></i>
     <a href="${h.url('repos_group_home',group_name=group_name)}">${name}</a>
   </div>
 </%def>
 <%def name="repo_group_actions(repo_group_id, repo_group_name, gr_count)">
  <div class="pull-left">
     <a href="${h.url('edit_repo_group',group_name=repo_group_name)}" title="${_('Edit')}" class="btn btn-default btn-xs">
       <i class="icon-pencil"></i>${_('Edit')}
     </a>
  </div>
  <div class="pull-left">
     ${h.form(h.url('delete_repo_group', group_name=repo_group_name))}
       <button id="${'remove_%s' % repo_group_name}" name="${'remove_%s' % repo_group_name}" class="btn btn-default btn-xs" title="${_('Delete')}"
           onclick="return confirm('${ungettext('Confirm to delete this group: %s with %s repository','Confirm to delete this group: %s with %s repositories',gr_count) % (repo_group_name, gr_count)}')">
         <i class="icon-trashcan"></i>${_('Delete')}
       </button>
     ${h.end_form()}
  </div>
 </%def>
 <%def name="user_name(user_id, username)">
     ${h.link_to(username,h.url('edit_user', id=user_id))}
 </%def>
 <%def name="repo_group_name(repo_group_name, children_groups)">
   <div class="text-nowrap">
   <a href="${h.url('repos_group_home',group_name=repo_group_name)}">
     <i class="icon-folder" title="${_('Repository group')}"></i>${h.literal(' &raquo; '.join(children_groups))}</a>
   </div>
 </%def>
 <%def name="user_group_name(user_group_id, user_group_name)">
   <div class="text-nowrap">
   <a href="${h.url('edit_users_group', id=user_group_id)}">
     <i class="icon-users" title="${_('User group')}"></i>${user_group_name}</a>
   </div>
 </%def>

0 comments (0 inline, 0 general)