Colored styling for labels

dactyl-config.yml

@@ -34,6 +34,7 @@ default_filters:
     - status_badges
     - include_svg
     - css_tables
+    - slug
 
 callout_class: "devportal-callout"
 callout_types:
@@ -3305,6 +3306,7 @@ pages:
         html: by-label.html
         parent: docs.html
         template: template-all-labels.html
+        sidebar: left_only
         blurb: Browse by topic.
         top_nav_omit: true
         filters:

styles/_status-labels.scss

@@ -17,11 +17,16 @@
 
 /* "Topic by Label" browsing ------------------------------------------------ */
 
-.labels-wrap ul::before {
+.labels-wrap {
+  ul::before {
     content: "\f02c";
     font-family: FontAwesome;
+    font-size: 1.5rem;
+  }
+  .list-inline-item {
+    margin-top: 0.5rem;
+  }
 }
-
 .pg-category {
   color: $gray-400;
 
@@ -32,8 +37,104 @@
   }
 }
 
+.label {
+  border-radius: 1rem / 50%;
+  border-width: 0;
+  padding: .4rem .8rem;
+  font-weight: bold;
+  text-decoration: none !important;
+  text-align: center;
+  white-space: nowrap;
+
+  background-color: $gray-800;
+  color: $gray-100;
+  &:hover {
+    color: $gray-200;
+    background-color: $gray-700;
+  }
+
+  &.label-accounts,
+  &.label-payment-channels {
+    background-color: $blue-purple-800;
+    color: $blue-purple-100;
+    &:hover {
+      background-color: $blue-purple-700;
+      color: $blue-purple-200;
+    }
+  }
+
+  &.label-blockchain,
+  &.label-xrp {
+    background-color: $green-800;
+    color: $green-100;
+    &:hover {
+      background-color: $green-700;
+      color: $green-200;
+    }
+  }
+
+  &.label-checks,
+  &.label-rippled  {
+    background-color: $red-purple-800;
+    color: $red-purple-100;
+    &:hover {
+      background-color: $red-purple-700;
+      color: $red-purple-200;
+    }
+  }
+
+  &.label-cross-currency,
+  &.label-security {
+    background-color: $yellow-800;
+    color: $yellow-100;
+    &:hover {
+      background-color: $yellow-700;
+      color: $yellow-200;
+    }
+  }
+
+  &.label-decentralized-exchange,
+  &.label-smart-contracts {
+    background-color: $blue-800;
+    color: $blue-100;
+    &:hover {
+      background-color: $blue-700;
+      color: $blue-200;
+    }
+  }
+
+  &.label-escrow,
+  &.label-tokens {
+    background-color: $orange-800;
+    color: $orange-100;
+    &:hover {
+      background-color: $orange-700;
+      color: $orange-200;
+    }
+  }
+
+  &.label-fees,
+  &.label-payments{
+    background-color: $magenta-800;
+    color: $magenta-100;
+    &:hover {
+      background-color: $magenta-700;
+      color: $magenta-200;
+    }
+  }
+}
+
 .tag-cloud {
 
+  // display: grid;
+  // grid-auto-flow: row;
+  // grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  //
+  // .list-inline-item {
+  //   a {
+  //     display: block;
+  //   }
+  // }
   // .size-5 {
   //   font-size: 2.5rem;
   // }

tool/filter_slug.py

@@ -0,0 +1,26 @@
+##################################################
+## Slug Function
+## Author: Rome Reginelli
+## Copyright: Ripple Labs, 2021
+##
+## Exports a slug function to be used in templates
+## to convert arbitrary text to something suitable
+## for use as a CSS class, URL, etc.
+##################################################
+import re
+
+# Unicode-friendly function for making IDs and similar. Removes any non-word
+# characters except -, replaces whitespace with - reduces duplicate dashes,
+# and lowercases text
+def idify(utext):
+    """Make a string ID-friendly (but more unicode-friendly)"""
+    utext = re.sub(r'[^\w\s-]', '', utext).strip().lower()
+    utext = re.sub(r'[\s-]+', '-', utext)
+    if not len(utext):
+        # IDs and similar must not be an empty string
+        return '_'
+    return utext
+
+export = {
+    "slug": idify
+}

tool/template-all-labels.html

@@ -9,9 +9,9 @@
     {% for page in pages %}
       {% if page.landing_for is defined %}
           <li class="list-inline-item">
-            <a class="btn btn-outline-primary size-{{lblsize[page.landing_for]}}" href="{% if "//" not in page.html %}{{target.prefix}}{% endif %}{{page.html}}" title="{{page.blurb}}">
+            <a class="label label-{{slug(page.landing_for)}}" href="{% if "//" not in page.html %}{{target.prefix}}{% endif %}{{page.html}}" title="{{page.blurb}}">
             {{page.name}}
-              <span class="badge badge-primary pl-1">{{label_count(pages, page.landing_for)}}</span>
+              <span class="badge badge-pill badge-dark ml-1">{{label_count(pages, page.landing_for)}}</span>
             </a>
           </li>
       {% endif %}

tool/template-base.html

@@ -97,7 +97,7 @@
       {% endif %}
 
       <!-- main column -->
-      <main class="main {% if currentpage.sidebar is defined and currentpage.sidebar == "disabled" %}col-md-12{% else %}col-md-7 col-lg-6{% endif %} order-md-3  {% block mainclasses %}{% endblock %}" role="main" id="main_content_body">
+      <main class="main {% if currentpage.sidebar is defined and currentpage.sidebar == "disabled" %}col-md-12{% elif currentpage.sidebar == "left_only" %}col-lg-9 col-md-7{% else %}col-md-7 col-lg-6{% endif %} order-md-3  {% block mainclasses %}{% endblock %}" role="main" id="main_content_body">
           {% block breadcrumbs %}
             {% include 'breadcrumbs.html' %}
           {% endblock %}

tool/template-label-list.html

@@ -6,11 +6,11 @@
   {% set label_landing = pages|selectattr("landing_for", "defined_and_equalto", label)|first %}
   {% if label_landing %}
     <li class="list-inline-item">
-      <a href="{% if "//" not in label_landing.html %}{{target.prefix}}{% endif %}{{label_landing.html}}" class="badge badge-primary">{{label}}</a>
+      <a href="{% if "//" not in label_landing.html %}{{target.prefix}}{% endif %}{{label_landing.html}}" class="label label-{{slug(label)}}">{{label}}</a>
     </li>
   {% else %}
     <li class="list-inline-item">
-      <span class="badge badge-secondary">{{label}}</span>
+      <span class="label label-{{slug(label)}}">{{label}}</span>
       <!-- TEMPLATE WARNING: no label landing found for "{{label}}" -->
     </li>
   {% endif %}