changeset 7105:97ea346aa4bd

less: use .label and .label-* style instead of custom .*tag This reduces the code and makes it more consistent. Visualy this results in bold texts (which in case of small fonts is easier to read) and a bit more padding left and right. For a proper spacing, this requires to remove whitespaces before and after the texts inside the labels. Since the name changed from tag to label, also rename the variables and functions.
author domruf <dominikruf@gmail.com>
date Wed, 25 Oct 2017 21:38:43 +0200
parents 350f4730e2a3
children 5aa71718b223
files kallithea/controllers/admin/settings.py kallithea/lib/base.py kallithea/lib/db_manage.py kallithea/lib/helpers.py kallithea/model/forms.py kallithea/model/repo.py kallithea/public/less/kallithea-labels.less kallithea/public/less/kallithea-tags.less kallithea/public/less/main.less kallithea/templates/admin/settings/settings_visual.html kallithea/templates/base/base.html kallithea/templates/base/perms_summary.html kallithea/templates/changelog/changelog_table.html kallithea/templates/changeset/changeset.html kallithea/templates/changeset/changeset_range.html kallithea/templates/data_table/_dt_elements.html kallithea/templates/pullrequests/pullrequest_show.html kallithea/templates/summary/summary.html kallithea/tests/functional/test_home.py kallithea/tests/functional/test_summary.py kallithea/tests/other/test_libs.py
diffstat 21 files changed, 159 insertions(+), 319 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/controllers/admin/settings.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/controllers/admin/settings.py	Wed Oct 25 21:38:43 2017 +0200
@@ -266,7 +266,7 @@
                 settings = [
                     ('show_public_icon', 'show_public_icon', 'bool'),
                     ('show_private_icon', 'show_private_icon', 'bool'),
-                    ('stylify_metatags', 'stylify_metatags', 'bool'),
+                    ('stylify_metalabels', 'stylify_metalabels', 'bool'),
                     ('repository_fields', 'repository_fields', 'bool'),
                     ('dashboard_items', 'dashboard_items', 'int'),
                     ('admin_grid_items', 'admin_grid_items', 'int'),
--- a/kallithea/lib/base.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/lib/base.py	Wed Oct 25 21:38:43 2017 +0200
@@ -391,7 +391,7 @@
         ## DB stored
         c.visual.show_public_icon = str2bool(rc_config.get('show_public_icon'))
         c.visual.show_private_icon = str2bool(rc_config.get('show_private_icon'))
-        c.visual.stylify_metatags = str2bool(rc_config.get('stylify_metatags'))
+        c.visual.stylify_metalabels = str2bool(rc_config.get('stylify_metalabels'))
         c.visual.page_size = safe_int(rc_config.get('dashboard_items', 100))
         c.visual.admin_grid_items = safe_int(rc_config.get('admin_grid_items', 100))
         c.visual.repository_fields = str2bool(rc_config.get('repository_fields'))
--- a/kallithea/lib/db_manage.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/lib/db_manage.py	Wed Oct 25 21:38:43 2017 +0200
@@ -457,7 +457,7 @@
             ('ga_code', '', 'unicode'),
             ('show_public_icon', True, 'bool'),
             ('show_private_icon', True, 'bool'),
-            ('stylify_metatags', False, 'bool'),
+            ('stylify_metalabels', False, 'bool'),
             ('dashboard_items', 100, 'int'), # TODO: call it page_size
             ('admin_grid_items', 25, 'int'),
             ('show_version', True, 'bool'),
--- a/kallithea/lib/helpers.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/lib/helpers.py	Wed Oct 25 21:38:43 2017 +0200
@@ -1058,20 +1058,20 @@
         if stylize:
             seen = match_obj.group('seen')
             if seen:
-                return '<div class="metatag" data-tag="see">see =&gt; %s</div>' % seen
+                return '<div class="label label-meta" data-tag="see">see =&gt; %s</div>' % seen
             license = match_obj.group('license')
             if license:
-                return '<div class="metatag" data-tag="license"><a href="http:\/\/www.opensource.org/licenses/%s">%s</a></div>' % (license, license)
+                return '<div class="label label-meta" data-tag="license"><a href="http:\/\/www.opensource.org/licenses/%s">%s</a></div>' % (license, license)
             tagtype = match_obj.group('tagtype')
             if tagtype:
                 tagvalue = match_obj.group('tagvalue')
-                return '<div class="metatag" data-tag="%s">%s =&gt; <a href="/%s">%s</a></div>' % (tagtype, tagtype, tagvalue, tagvalue)
+                return '<div class="label label-meta" data-tag="%s">%s =&gt; <a href="/%s">%s</a></div>' % (tagtype, tagtype, tagvalue, tagvalue)
             lang = match_obj.group('lang')
             if lang:
-                return '<div class="metatag" data-tag="lang">%s</div>' % lang
+                return '<div class="label label-meta" data-tag="lang">%s</div>' % lang
             tag = match_obj.group('tag')
             if tag:
-                return '<div class="metatag" data-tag="%s">%s</div>' % (tag, tag)
+                return '<div class="label label-meta" data-tag="%s">%s</div>' % (tag, tag)
         return match_obj.group(0)
 
     def _urlify(s):
--- a/kallithea/model/forms.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/model/forms.py	Wed Oct 25 21:38:43 2017 +0200
@@ -363,7 +363,7 @@
         filter_extra_fields = False
         show_public_icon = v.StringBoolean(if_missing=False)
         show_private_icon = v.StringBoolean(if_missing=False)
-        stylify_metatags = v.StringBoolean(if_missing=False)
+        stylify_metalabels = v.StringBoolean(if_missing=False)
 
         repository_fields = v.StringBoolean(if_missing=False)
         lightweight_journal = v.StringBoolean(if_missing=False)
--- a/kallithea/model/repo.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/model/repo.py	Wed Oct 25 21:38:43 2017 +0200
@@ -174,7 +174,7 @@
                            cs_cache.get('message'))
 
         def desc(desc):
-            return h.urlify_text(desc, truncate=80, stylize=c.visual.stylify_metatags)
+            return h.urlify_text(desc, truncate=80, stylize=c.visual.stylify_metalabels)
 
         def state(repo_state):
             return _render("repo_state", repo_state)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/kallithea/public/less/kallithea-labels.less	Wed Oct 25 21:38:43 2017 +0200
@@ -0,0 +1,93 @@
+.label-meta {
+  color: #000;
+}
+.label-meta[data-tag="dead"] {
+  background-color: #E44;
+}
+.label-meta[data-tag="stale"] {
+  background-color: #EA4;
+}
+.label-meta[data-tag="featured"] {
+  background-color: #AEA;
+}
+.label-meta[data-tag="requires"] {
+  background-color: #9CF;
+}
+.label-meta[data-tag="recommends"] {
+  background-color: #BDF;
+}
+.label-meta[data-tag="lang"] {
+  background-color: #FAF474;
+}
+.label-meta[data-tag="license"] {
+  border: solid 1px #9CF;
+  background-color: #DEF;
+}
+.label-meta[data-tag="see"] {
+  border: solid 1px #CBD;
+  background-color: #EDF;
+}
+a.label-metameta[data-tag="license"]:hover {
+  background-color: @kallithea-theme-main-color;
+  color: #FFF;
+  text-decoration: none;
+}
+
+/* permission labels */
+.label-admin {
+  background-color: #B94A48;
+  color: #ffffff;
+}
+.label-write {
+  background-color: #DB7525;
+  color: #ffffff;
+}
+.label-read {
+  background-color: #468847;
+  color: #ffffff;
+}
+.label-none {
+  background-color: #bfbfbf;
+  color: #ffffff;
+}
+
+/* changeset labels */
+.label-merge {
+  background-color: #fca062;
+  color: #ffffff;
+  text-transform: uppercase;
+}
+.label-repo {
+  border: 1px solid #56A546;
+  color: #46A546;
+  text-transform: uppercase;
+  padding: .2em .3em 0;
+}
+#context-bar .label-repo {
+  border-color: white;
+  color: white;
+}
+.label-bookmark {
+  border: 1px solid #46A546;
+  color: #46A546;
+}
+.label-tag {
+  border: 1px solid #62cffc;
+  color: #62cffc;
+}
+.label-bumped,
+.label-divergent,
+.label-extinct,
+.label-unstable {
+  background-color: #f00;
+  border-color: #600;
+  color: #fff;
+}
+.label-phase {
+  border: 1px solid #1F14CE;
+  color: #1F14CE;
+}
+.label-branch {
+  border: 1px solid #d9e8f8;
+  color: #577632;
+}
--- a/kallithea/public/less/kallithea-tags.less	Wed Oct 25 22:53:27 2017 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,230 +0,0 @@
-.metatag {
-  .label;
-  color: #000;
-}
-.metatag[data-tag="dead"] {
-  background-color: #E44;
-}
-.metatag[data-tag="stale"] {
-  background-color: #EA4;
-}
-.metatag[data-tag="featured"] {
-  background-color: #AEA;
-}
-.metatag[data-tag="requires"] {
-  background-color: #9CF;
-}
-.metatag[data-tag="recommends"] {
-  background-color: #BDF;
-}
-.metatag[data-tag="lang"] {
-  background-color: #FAF474;
-}
-.metatag[data-tag="license"] {
-  border: solid 1px #9CF;
-  background-color: #DEF;
-}
-.metatag[data-tag="see"] {
-  border: solid 1px #CBD;
-  background-color: #EDF;
-}
-a.metatag[data-tag="license"]:hover {
-  background-color: @kallithea-theme-main-color;
-  color: #FFF;
-  text-decoration: none;
-}
-
-#perms .perm_tag {
-  position: relative;
-  top: -2px;
-  margin-left: 3px;
-  padding: 3px 3px 1px 3px;
-  font-size: 10px;
-  font-weight: bold;
-  text-transform: uppercase;
-  white-space: nowrap;
-  border-radius: 3px;
-  &.admin {
-    background-color: #B94A48;
-    color: #ffffff;
-  }
-  &.write {
-      background-color: #DB7525;
-      color: #ffffff;
-  }
-  &.read {
-      background-color: #468847;
-      color: #ffffff;
-  }
-  &.none {
-      background-color: #bfbfbf;
-      color: #ffffff;
-  }
-}
-.mergetag {
-  padding: 1px 3px 1px 3px;
-  background-color: #fca062;
-  font-size: 10px;
-  color: #ffffff;
-  text-transform: uppercase;
-  white-space: nowrap;
-  border-radius: 3px;
-  margin-right: 2px;
-}
-.parent {
-  color: #666666;
-  clear: both;
-}
-.logtags {
-  line-height: 2.2em;
-}
-.phasetag,
-.bumpedtag,
-.divergenttag,
-.extincttag,
-.unstabletag,
-.repotag,
-.branchtag,
-.logtags .tagtag,
-.logtags .booktag {
-  margin: 0px 2px;
-}
-.phasetag,
-.bumpedtag,
-.divergenttag,
-.extincttag,
-.unstabletag,
-.repotag,
-.branchtag,
-.tagtag,
-.booktag,
-.spantag {
-  padding: 1px 3px 1px 3px;
-  font-size: 10px;
-  color: @kallithea-theme-main-color;
-  white-space: nowrap;
-  border-radius: 4px;
-  border: 1px solid #d9e8f8;
-}
-table#changesets .phasetag,
-table#changesets .bumpedtag,
-table#changesets .divergenttag,
-table#changesets .extincttag,
-table#changesets .unstabletag,
-table#changesets .branchtag,
-table#changesets .tagtag,
-table#changesets .booktag {
-  margin-right: 0.5em;
-}
-.phasetag,
-.bumpedtag,
-.divergenttag,
-.extincttag,
-.unstabletag,
-.repotag,
-.branchtag,
-.tagtag,
-.booktag {
-  float: left;
-  display: inline-block;
-}
-.logtags .phasetag,
-.logtags .bumpedtag,
-.logtags .divergenttag,
-.logtags .extincttag,
-.logtags .unstabletag,
-.logtags .branchtag,
-.logtags .tagtag,
-.logtags .booktag,
-.mergetag,
-.merge {
-  float: right;
-  line-height: 1em;
-  margin: 1px 1px !important;
-  display: block;
-}
-.repotag {
-  border-color: #56A546;
-  color: #46A546;
-  font-size: 8px;
-  text-transform: uppercase;
-}
-#context-bar .repotag,
-.repo-icons .repotag {
-  border-color: white;
-  color: white;
-  margin-top: 3px;
-}
-.repo-icons .repotag {
-  margin-top: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-.booktag {
-  border-color: #46A546;
-  color: #46A546;
-}
-.tagtag {
-  border-color: #62cffc;
-  color: #62cffc;
-}
-.bumpedtag,
-.divergenttag,
-.extincttag,
-.unstabletag {
-  background-color: #f00;
-  border-color: #600;
-  color: #fff;
-}
-.phasetag {
-  border-color: #1F14CE;
-  color: #1F14CE;
-}
-.logtags .branchtag a:hover,
-.logtags .branchtag a,
-.branchtag a,
-.branchtag a:hover {
-  text-decoration: none;
-  color: inherit;
-}
-.logtags .tagtag {
-  padding: 1px 3px 1px 3px;
-  background-color: #62cffc;
-  font-size: 10px;
-  color: #ffffff;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.tagtag a,
-.tagtag a:hover,
-.logtags .tagtag a,
-.logtags .tagtag a:hover {
-  text-decoration: none;
-  color: inherit;
-}
-.logbooks .booktag,
-.logbooks .booktag,
-.logtags .booktag,
-.logtags .booktag {
-  padding: 1px 3px 1px 3px;
-  background-color: #46A546;
-  font-size: 10px;
-  color: #ffffff;
-  white-space: nowrap;
-  border-radius: 3px;
-}
-.logbooks .booktag,
-.logbooks .booktag a,
-.right .logtags .booktag,
-.logtags .booktag a {
-  color: #ffffff;
-}
-.logbooks .booktag,
-.logbooks .booktag a:hover,
-.logtags .booktag,
-.logtags .booktag a:hover,
-.booktag a,
-.booktag a:hover {
-  text-decoration: none;
-  color: inherit;
-}
--- a/kallithea/public/less/main.less	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/public/less/main.less	Wed Oct 25 21:38:43 2017 +0200
@@ -17,7 +17,7 @@
 
 /* kallithea styles */
 @import "kallithea-variables.less";
-@import "kallithea-tags.less";
+@import "kallithea-labels.less";
 @import "yui-ac.less";
 @import "kallithea-select2.less";
 @import "kallithea-diff.less";
--- a/kallithea/templates/admin/settings/settings_visual.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/admin/settings/settings_visual.html	Wed Oct 25 21:38:43 2017 +0200
@@ -86,25 +86,25 @@
             </div>
 
             <div class="form-group">
-                <label class="control-label" for="stylify_metatags">${_('Meta Tagging')}:</label>
+                <label class="control-label" for="stylify_metalabels">${_('Meta Tagging')}:</label>
                 <div>
                     <div class="checkbox">
                         <label>
-                            ${h.checkbox('stylify_metatags','True')}
+                            ${h.checkbox('stylify_metalabels','True')}
                             ${_('Parses meta tags from the repository description field and turns them into colored tags.')}
                         </label>
                     </div>
                     <div class="help-block">
                         ${_('Stylify recognised meta tags:')}
                         <ul class="list-unstyled"> <!-- Fix style here -->
-                            <li>[featured] <span class="metatag" data-tag="featured">featured</span></li>
-                            <li>[stale] <span class="metatag" data-tag="stale">stale</span></li>
-                            <li>[dead] <span class="metatag" data-tag="dead">dead</span></li>
-                            <li>[lang =&gt; lang] <span class="metatag" data-tag="lang">lang</span></li>
-                            <li>[license =&gt; License] <span class="metatag" data-tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
-                            <li>[requires =&gt; Repo] <span class="metatag" data-tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
-                            <li>[recommends =&gt; Repo] <span class="metatag" data-tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
-                            <li>[see =&gt; URI] <span class="metatag" data-tag="see">see =&gt; <a href="#">URI</a> </span></li>
+                            <li>[featured] <span class="label label-meta" data-tag="featured">featured</span></li>
+                            <li>[stale] <span class="label label-meta" data-tag="stale">stale</span></li>
+                            <li>[dead] <span class="label label-meta" data-tag="dead">dead</span></li>
+                            <li>[lang =&gt; lang] <span class="label label-meta" data-tag="lang">lang</span></li>
+                            <li>[license =&gt; License] <span class="label label-meta" data-tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
+                            <li>[requires =&gt; Repo] <span class="label label-meta" data-tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
+                            <li>[recommends =&gt; Repo] <span class="label label-meta" data-tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
+                            <li>[see =&gt; URI] <span class="label label-meta" data-tag="see">see =&gt; <a href="#">URI</a> </span></li>
                         </ul>
                     </div>
                  </div>
--- a/kallithea/templates/base/base.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/base/base.html	Wed Oct 25 21:38:43 2017 +0200
@@ -81,12 +81,12 @@
   </ul>
 </%def>
 
-<%def name="repotag(repo)">
+<%def name="repolabel(repo)">
   %if h.is_hg(repo):
-    <span class="repotag" title="${_('Mercurial repository')}">hg</span>
+    <span class="label label-repo" title="${_('Mercurial repository')}">hg</span>
   %endif
   %if h.is_git(repo):
-    <span class="repotag" title="${_('Git repository')}">git</span>
+    <span class="label label-repo" title="${_('Git repository')}">git</span>
   %endif
 </%def>
 
@@ -97,7 +97,7 @@
     <div class="container-fluid">
     <div class="navbar-header">
       <div class="navbar-brand">
-        ${repotag(c.db_repo)}
+        ${repolabel(c.db_repo)}
 
         ## public/private
         %if c.db_repo.private:
@@ -433,10 +433,10 @@
                 if(obj_dict && state.type == 'repo'){
                     tmpl += '<span class="repo-icons">';
                     if(obj_dict['repo_type'] === 'hg'){
-                        tmpl += '<span class="repotag" title="${_('Mercurial repository')}">hg</span> ';
+                        tmpl += '<span class="label label-repo" title="${_('Mercurial repository')}">hg</span> ';
                     }
                     else if(obj_dict['repo_type'] === 'git'){
-                        tmpl += '<span class="repotag" title="${_('Git repository')}">git</span> ';
+                        tmpl += '<span class="label label-repo" title="${_('Git repository')}">git</span> ';
                     }
                     if(obj_dict['private']){
                         tmpl += '<i class="icon-keyhole-circled"></i>';
--- a/kallithea/templates/base/perms_summary.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/base/perms_summary.html	Wed Oct 25 21:38:43 2017 +0200
@@ -11,10 +11,10 @@
             %if section != 'global':
               <div class="pull-right">
                 ${_('Show')}:
-                <label>${h.checkbox('perms_filter_none_%s' % section, 'none', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'none'})}<span class="perm_tag none">${_('None')}</span></label>
-                <label>${h.checkbox('perms_filter_read_%s' % section, 'read', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'read'})}<span class="perm_tag read">${_('Read')}</span></label>
-                <label>${h.checkbox('perms_filter_write_%s' % section, 'write', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'write'})}<span class="perm_tag write">${_('Write')}</span></label>
-                <label>${h.checkbox('perms_filter_admin_%s' % section, 'admin', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'admin'})}<span class="perm_tag admin">${_('Admin')}</span></label>
+                <label>${h.checkbox('perms_filter_none_%s' % section, 'none', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'none'})}<span class="label label-none">${_('None')}</span></label>
+                <label>${h.checkbox('perms_filter_read_%s' % section, 'read', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'read'})}<span class="label label-read">${_('Read')}</span></label>
+                <label>${h.checkbox('perms_filter_write_%s' % section, 'write', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'write'})}<span class="label label-write">${_('Write')}</span></label>
+                <label>${h.checkbox('perms_filter_admin_%s' % section, 'admin', 'checked', class_='perm_filter filter_%s' % section, **{'data-section':section, 'data-perm_type':'admin'})}<span class="label label-admin">${_('Admin')}</span></label>
               </div>
             %endif
         </div>
@@ -73,7 +73,7 @@
                           %endif
                       </td>
                       <td>
-                           <span class="perm_tag ${section_perm.split('.')[-1]}">${section_perm}</span>
+                           <span class="label label-${section_perm.split('.')[-1]}">${section_perm}</span>
                       </td>
                       %if actions:
                       <td>
--- a/kallithea/templates/changelog/changelog_table.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/changelog/changelog_table.html	Wed Oct 25 21:38:43 2017 +0200
@@ -73,50 +73,32 @@
             </div>
             <div class="extra-container">
               %if cs_comments.get(cs.raw_id):
-                <a class="comments-container comments-cnt" href="${cs_comments[cs.raw_id][0].url()}" data-toggle="tooltip" title="${_('%s comments') % len(cs_comments[cs.raw_id])}">
-                  ${len(cs_comments[cs.raw_id])}
-                  <i class="icon-comment-discussion"></i>
+                <a class="comments-container comments-cnt" href="${cs_comments[cs.raw_id][0].url()}" data-toggle="tooltip" title="${_('%s comments') % len(cs_comments[cs.raw_id])}">${len(cs_comments[cs.raw_id])}<i class="icon-comment-discussion"></i>
                 </a>
               %endif
               %for book in cs.bookmarks:
-                <span class="booktag" title="${_('Bookmark %s') % book}">
-                  ${h.link_to(book,h.url('changeset_home',repo_name=repo_name,revision=cs.raw_id))}
-                </span>
+                <span class="label label-bookmark" title="${_('Bookmark %s') % book}">${h.link_to(book,h.url('changeset_home',repo_name=repo_name,revision=cs.raw_id))}</span>
               %endfor
               %for tag in cs.tags:
-                <span class="tagtag" title="${_('Tag %s') % tag}">
-                  ${h.link_to(tag,h.url('changeset_home',repo_name=repo_name,revision=cs.raw_id))}
-                </span>
+                <span class="label label-tag" title="${_('Tag %s') % tag}">${h.link_to(tag,h.url('changeset_home',repo_name=repo_name,revision=cs.raw_id))}</span>
               %endfor
               %if cs.bumped:
-                <span class="bumpedtag" title="Bumped">
-                  Bumped
-                </span>
+                <span class="label label-bumped" title="Bumped">Bumped</span>
               %endif
               %if cs.divergent:
-                <span class="divergenttag" title="Divergent">
-                  Divergent
-                </span>
+                <span class="label label-divergent" title="Divergent">Divergent</span>
               %endif
               %if cs.extinct:
-                <span class="extincttag" title="Extinct">
-                  Extinct
-                </span>
+                <span class="label label-extinct" title="Extinct">Extinct</span>
               %endif
               %if cs.unstable:
-                <span class="unstabletag" title="Unstable">
-                  Unstable
-                </span>
+                <span class="label label-unstable" title="Unstable">Unstable</span>
               %endif
               %if cs.phase:
-                <span class="phasetag" title="Phase">
-                  ${cs.phase}
-                </span>
+                <span class="label label-phase" title="Phase">${cs.phase}</span>
               %endif
               %if show_branch and cs.branch:
-                <span class="branchtag" title="${_('Branch %s' % cs.branch)}">
-                  ${h.link_to(cs.branch,h.url('changelog_home',repo_name=repo_name,branch=cs.branch))}
-                </span>
+                <span class="label label-branch" title="${_('Branch %s' % cs.branch)}">${h.link_to(cs.branch,h.url('changelog_home',repo_name=repo_name,branch=cs.branch))}</span>
               %endif
             </div>
           </div>
--- a/kallithea/templates/changeset/changeset.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/changeset/changeset.html	Wed Oct 25 21:38:43 2017 +0200
@@ -57,24 +57,19 @@
                 <div class="pull-right">
                     <span class="logtags">
                         %if len(c.changeset.parents)>1:
-                        <span class="mergetag">${_('Merge')}</span>
+                        <span class="label label-merge">${_('Merge')}</span>
                         %endif
 
                         %for book in c.changeset.bookmarks:
-                        <span class="booktag" title="${_('Bookmark %s') % book}">
-                           ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}
-                        </span>
+                        <span class="label label-bookmark" title="${_('Bookmark %s') % book}">${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
                         %endfor
 
                         %for tag in c.changeset.tags:
-                         <span class="tagtag"  title="${_('Tag %s') % tag}">
-                         ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
+                         <span class="label label-tag"  title="${_('Tag %s') % tag}">${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
                         %endfor
 
                         %if c.changeset.branch:
-                         <span class="branchtag" title="${_('Branch %s') % c.changeset.branch}">
-                         ${h.link_to(c.changeset.branch,h.url('changelog_home',repo_name=c.repo_name,branch=c.changeset.branch))}
-                         </span>
+                         <span class="label label-branch" title="${_('Branch %s') % c.changeset.branch}">${h.link_to(c.changeset.branch,h.url('changelog_home',repo_name=c.repo_name,branch=c.changeset.branch))}</span>
                         %endif
                     </span>
 
--- a/kallithea/templates/changeset/changeset_range.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/changeset/changeset_range.html	Wed Oct 25 21:38:43 2017 +0200
@@ -77,21 +77,21 @@
             <div class="right">
               <span class="logtags">
                 %if len(cs.parents)>1:
-                <span class="mergetag">${_('Merge')}</span>
+                <span class="label label-merge">${_('Merge')}</span>
                 %endif
                 %if h.is_hg(c.db_repo_scm_instance):
                   %for book in cs.bookmarks:
-                  <span class="booktag" title="${_('Bookmark %s') % book}">
+                  <span class="label label-bookmark" title="${_('Bookmark %s') % book}">
                      ${h.link_to(book,h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}
                   </span>
                   %endfor
                 %endif
                 %for tag in cs.tags:
-                    <span class="tagtag" title="${_('Tag %s') % tag}">
+                    <span class="label label-tag" title="${_('Tag %s') % tag}">
                     ${h.link_to(tag,h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}</span>
                 %endfor
                 %if cs.branch:
-                <span class="branchtag" title="${_('Branch %s') % cs.branch}">
+                <span class="label label-branch" title="${_('Branch %s') % cs.branch}">
                    ${h.link_to(cs.branch,h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}
                 </span>
                 %endif
--- a/kallithea/templates/data_table/_dt_elements.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/data_table/_dt_elements.html	Wed Oct 25 21:38:43 2017 +0200
@@ -13,7 +13,7 @@
         return name
     %>
   <div class="dt_repo ${'dt_repo_pending' if rstate == 'repo_state_pending' else ''}">
-    ${base.repotag(rtype)}
+    ${base.repolabel(rtype)}
     <a href="${h.url('edit_repo' if admin else 'summary_home', repo_name=name)}">
         ${get_name(name)}
     </a>
--- a/kallithea/templates/pullrequests/pullrequest_show.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/pullrequests/pullrequest_show.html	Wed Oct 25 21:38:43 2017 +0200
@@ -161,7 +161,7 @@
                         <td>
                           <div class="pull-right">
                             %for tag in cs.tags:
-                              <span class="tagtag" title="${_('Tag %s') % tag}">
+                              <span class="label label-tag" title="${_('Tag %s') % tag}">
                                 ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
                               </span>
                             %endfor
--- a/kallithea/templates/summary/summary.html	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/templates/summary/summary.html	Wed Oct 25 21:38:43 2017 +0200
@@ -63,12 +63,12 @@
                 <label>${_('Clone URL')}:</label>
                 <div id="clone-url">
                   <div id="clone_by_name" class="input-group">
-                    <span class="input-group-addon">${self.repotag(c.db_repo)}</span>
+                    <span class="input-group-addon">${self.repolabel(c.db_repo)}</span>
                     <input class="form-control" size="80" readonly="readonly" value="${c.clone_repo_url}"/>
                     <span class="input-group-addon btn">${_('Show by ID')}</span>
                   </div>
                   <div id="clone_by_id" class="input-group" style="display:none">
-                    <span class="input-group-addon">${self.repotag(c.db_repo)}</span>
+                    <span class="input-group-addon">${self.repolabel(c.db_repo)}</span>
                     <input class="form-control" size="80" readonly="readonly" value="${c.clone_repo_url_id}"/>
                     <span class="input-group-addon btn">${_('Show by Name')}</span>
                   </div>
@@ -77,7 +77,7 @@
 
             <div class="form-group">
               <label>${_('Description')}:</label>
-              <div class="formatted-fixed">${h.urlify_text(c.db_repo.description, stylize=c.visual.stylify_metatags)}</div>
+              <div class="formatted-fixed">${h.urlify_text(c.db_repo.description, stylize=c.visual.stylify_metalabels)}</div>
             </div>
 
             <div class="form-group">
--- a/kallithea/tests/functional/test_home.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/tests/functional/test_home.py	Wed Oct 25 21:38:43 2017 +0200
@@ -21,11 +21,11 @@
         response.mustcontain('Add Repository')
 
         response.mustcontain(
-            """<span class="repotag" title="Git repository">git"""
+            """<span class="label label-repo" title="Git repository">git"""
         )
 
         response.mustcontain(
-            """<span class="repotag" title="Mercurial repository">hg"""
+            """<span class="label label-repo" title="Mercurial repository">hg"""
         )
 
         # html in javascript variable:
--- a/kallithea/tests/functional/test_summary.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/tests/functional/test_summary.py	Wed Oct 25 21:38:43 2017 +0200
@@ -33,7 +33,7 @@
 
         # repo type
         response.mustcontain(
-            """<span class="repotag" title="Mercurial repository">hg"""
+            """<span class="label label-repo" title="Mercurial repository">hg"""
         )
         # public/private
         response.mustcontain(
@@ -59,7 +59,7 @@
 
         # repo type
         response.mustcontain(
-            """<span class="repotag" title="Git repository">git"""
+            """<span class="label label-repo" title="Git repository">git"""
         )
         # public/private
         response.mustcontain(
@@ -84,7 +84,7 @@
 
         # repo type
         response.mustcontain(
-            """<span class="repotag" title="Mercurial repository">hg"""
+            """<span class="label label-repo" title="Mercurial repository">hg"""
         )
         # public/private
         response.mustcontain(
@@ -113,7 +113,7 @@
 
         # repo type
         response.mustcontain(
-            """<span class="repotag" title="Git repository">git"""
+            """<span class="label label-repo" title="Git repository">git"""
         )
         # public/private
         response.mustcontain(
--- a/kallithea/tests/other/test_libs.py	Wed Oct 25 22:53:27 2017 +0200
+++ b/kallithea/tests/other/test_libs.py	Wed Oct 25 21:38:43 2017 +0200
@@ -215,12 +215,12 @@
         )
         from kallithea.lib.helpers import urlify_text
         res = urlify_text(sample, stylize=True)
-        assert '<div class="metatag" data-tag="tag">tag</div>' in res
-        assert '<div class="metatag" data-tag="obsolete">obsolete</div>' in res
-        assert '<div class="metatag" data-tag="stale">stale</div>' in res
-        assert '<div class="metatag" data-tag="lang">python</div>' in res
-        assert '<div class="metatag" data-tag="requires">requires =&gt; <a href="/url">url</a></div>' in res
-        assert '<div class="metatag" data-tag="tag">tag</div>' in res
+        assert '<div class="label label-meta" data-tag="tag">tag</div>' in res
+        assert '<div class="label label-meta" data-tag="obsolete">obsolete</div>' in res
+        assert '<div class="label label-meta" data-tag="stale">stale</div>' in res
+        assert '<div class="label label-meta" data-tag="lang">python</div>' in res
+        assert '<div class="label label-meta" data-tag="requires">requires =&gt; <a href="/url">url</a></div>' in res
+        assert '<div class="label label-meta" data-tag="tag">tag</div>' in res
 
     def test_alternative_gravatar(self):
         from kallithea.lib.helpers import gravatar_url