ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 03:35:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Colored styling for labels

Browse Source
This commit is contained in:
mDuo13
2021-06-07 15:36:36 -07:00
parent 7b44ea177b
commit f06e1ad447
7 changed files with 139 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

2
dactyl-config.yml
View File

@@ -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:

105
styles/_status-labels.scss
View File

@@ -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;
// }

26
tool/filter_slug.py Normal file
View File

@@ -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
}

4
tool/template-all-labels.html
View File

@@ -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 %}

2
tool/template-base.html
View File

@@ -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 %}

4
tool/template-label-list.html
View File

@@ -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 %}