From fd96404bceca49574c9503d6e8f989fb1795634f Mon Sep 17 00:00:00 2001 From: mDuo13 Date: Wed, 1 May 2019 16:51:06 -0700 Subject: [PATCH] Docs/Refs landing page styles --- assets/css/devportal.css | 18 ++-- assets/vendor/bootstrap.css | 34 +++++-- dactyl-config.yml | 6 +- tool/template-landing-docs.html | 60 ++----------- tool/template-landing-references.html | 122 ++++++++++---------------- tool/template-page-children.html | 91 +++++++++++-------- tool/xrpl.scss | 51 ++++++++--- 7 files changed, 184 insertions(+), 198 deletions(-) diff --git a/assets/css/devportal.css b/assets/css/devportal.css index 587da5b40a..96dc52678c 100644 --- a/assets/css/devportal.css +++ b/assets/css/devportal.css @@ -482,6 +482,7 @@ a.current { } .landing .level-1, +.landing .level-2, .landing .curated-links li { font-weight: 400; font-size: 14px; @@ -506,17 +507,10 @@ a.current { margin: 0 -8px 0 -8px; font-weight: 400; } -.landing .card .level-2 a:hover { - background-color: #D8EEFC; - text-decoration: none; -} -.landing .card .level-2 a:hover:after { - content: "\f105"; /* fontawesome angle-right */ - font-family: FontAwesome; - position: absolute; - right: 0; - top: 8px; - color: #0D294E; + +.landing .card .blurb + .children-display, +.landing .card .blurb + .curated-links { + margin-top: 1rem; } .level-1:first-child { @@ -903,6 +897,7 @@ a.current { .btn:not(.external-link)::after, .landing .card .level-1 a::after, +.landing .card .level-2 a::after, .landing .card .curated-links li a::after, .content .children-display li a::after { content: " ➝"; @@ -918,6 +913,7 @@ a.current { .btn:not(.external-link):hover::after, .landing .card .level-1 a:hover::after, +.landing .card .level-2 a:hover::after, .landing .card .curated-links li a:hover::after, .landing a.card:hover .btn::after, .content .children-display li a:hover::after { diff --git a/assets/vendor/bootstrap.css b/assets/vendor/bootstrap.css index ef3238367d..a4a55de80d 100644 --- a/assets/vendor/bootstrap.css +++ b/assets/vendor/bootstrap.css @@ -7161,12 +7161,14 @@ h1, h2, h3, h4, h5 { font-family: 'Space Mono', monospace; font-weight: 700; } +.landing section { + border-bottom: 1px solid #1B1818; } + .card-grid { display: grid; gap: 1px; background-color: #dedede; - padding: 0; - border-bottom: 1px solid #dedede; } + padding: 0; } .card-grid.card-grid-2x2 { /* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */ grid-template-columns: 2fr 1fr 1fr; @@ -7182,26 +7184,44 @@ h1, h2, h3, h4, h5 { /* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */ grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr; } + .card-grid.card-grid-2x1 .section-hero { + grid-row-end: span 1; } @media (max-width: 991.98px) { .card-grid.card-grid-2x1 { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; grid-template-rows: 1fr; } } - .card-grid.card-grid-2x1 .section-hero { - grid-row-end: span 1; } .card-grid.card-grid-2x4 { /* left half is a hero area; right half is a 2x4 grid. Total grid is 4x4 */ grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; } + .card-grid.card-grid-2x4 .section-hero { + grid-row-end: span 4; } @media (max-width: 991.98px) { .card-grid.card-grid-2x4 { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); } .card-grid.card-grid-2x4 .section-hero { - grid-row-end: span 2; } } - .card-grid.card-grid-2x4 .section-hero { - grid-row-end: span 4; } + grid-row-end: span 1; } } + .card-grid.card-grid-4xN { + /* 4 equal columns and any number of auto-sized rows. */ + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-auto-rows: auto; + /* No "hero" blocks expected here. */ } + @media (max-width: 991.98px) { + .card-grid.card-grid-4xN { + /* Switch to 1-column layout on smaller widths */ + grid-template-columns: 1fr; } } + .card-grid.card-grid-3xN { + /* 3 equal columns and any number of auto-sized rows. */ + grid-template-columns: 1fr 1fr 1fr; + grid-auto-rows: auto; + /* No "hero" blocks expected here. */ } + @media (max-width: 991.98px) { + .card-grid.card-grid-3xN { + /* Switch to 1-column layout on smaller widths */ + grid-template-columns: 1fr; } } .card-grid .align-bottom { justify-content: flex-end; } .card-grid .card { diff --git a/dactyl-config.yml b/dactyl-config.yml index 43277f1282..cb0c542f66 100644 --- a/dactyl-config.yml +++ b/dactyl-config.yml @@ -1277,7 +1277,7 @@ pages: template: template-landing-references.html html: references.html sidebar: disabled - blurb: Look up the ins-and-outs of XRP Ledger APIs, including sample requests and responses. + blurb: Complete references for different interfaces to the XRP Ledger. targets: - local @@ -1289,7 +1289,7 @@ pages: doc_type: References supercategory: rippled API template: template-landing-children.html - blurb: Use the rippled API to communicate with a rippled server, the core peer-to-peer server that manages the XRP Ledger. + blurb: Communicate directly with rippled, the core peer-to-peer server that manages the XRP Ledger. targets: - local @@ -2765,7 +2765,7 @@ pages: funnel: Docs doc_type: References category: Data API - blurb: Access more XRP Ledger data, including transaction history and analytics. + blurb: RESTful interface to XRP Ledger analytics and historical data. curated_anchors: - name: Methods anchor: "#api-method-reference" diff --git a/tool/template-landing-docs.html b/tool/template-landing-docs.html index 8073d8aef1..f6b17dd62f 100644 --- a/tool/template-landing-docs.html +++ b/tool/template-landing-docs.html @@ -6,18 +6,18 @@

XRP Ledger Documentation

Dive into our documentation and start integrating with the XRP Ledger.

+

Browse by category, or skip straight to the full documentation index.

-
-
+
{% set doc_types = [] %} {% for page in pages %} {% if page.doc_type is defined and page.doc_type not in doc_types %} {% set doc_type_top = pages|selectattr('doc_type', 'defined_and_equalto', page.doc_type)|first %}
-
-

{{doc_type_top.name}}

+
+

{{doc_type_top.name}}

{% if page.blurb is defined %} @@ -29,7 +29,7 @@
- View All {{doc_type_top.name}} + View All {{doc_type_top.name}}
@@ -37,57 +37,7 @@ {% set _ = doc_types.append(page.doc_type) %} {% endif %} {% endfor %} -
-
-
-
-

Get Started

-
-
-
- -
-
-
- -
-
-

Popular Docs

-
-
-
-
    -
  1. rippled API Public Methods Reference
    2. -
  2. Accounts
    3. -
  3. Install rippled
    4. -
  4. RippleAPI for JavaScript Reference
    5. -
-
-
-
- -
-
-

Recently Updated

-
-
-
-
    - {% for link in target.recently_updated %} - {% set linkpage = pages|selectattr("html", 'defined_and_equalto', link.html)|first %} -
  1. {{linkpage.name}}{% if link.date is defined %} ({{link.date}}){% endif %}
    2. - {% endfor %} -
-
-
-
- -
diff --git a/tool/template-landing-references.html b/tool/template-landing-references.html index 4742042219..d91ce38586 100644 --- a/tool/template-landing-references.html +++ b/tool/template-landing-references.html @@ -6,87 +6,61 @@

References

{{currentpage.blurb}}

+

Or, skip ahead to the Full Reference Index.

-
-

rippled API Reference

-

Use the rippled API to communicate with a rippled server, the core peer-to-peer server that manages the XRP Ledger.

-
- {% for page in pages|selectattr("supercategory", 'defined_and_equalto', "rippled API")|list %} - {% if loop.index != 1 and page == pages|selectattr("category", 'defined_and_equalto', page.category)|first %} -
-
-

{{page.name}}

-
-
-

{{page.blurb}}

- {% if page.curated_anchors is defined %} -
-
    - {% for link in page.curated_anchors %} -
  • {{link.name}}
    • - {% endfor %} -
-
- {% else %} - {% set depth = 1 %} - {% set parent_page = page %} - {% include 'template-page-children.html' %} - {% endif %} -
-
-
- View All {{page.name}} -
-
-
+
+ {# hardcoded rippled API block first since it's the only one with a supercategory #} + {% set page = pages|selectattr("supercategory", 'defined_and_equalto', "rippled API")|first %} +
+
+

{{page.name}}

+
+
+

{{page.blurb}}

+ {% set depth = 1 %} + {% set parent_page = page %} + {% include 'template-page-children.html' %} +
+
- {# go to new row after admin methods #} - {% if page.html == "admin-rippled-methods.html" %} -
-
- {% endif %} - {% endif %} - {% endfor %} + {% for page in pages|selectattr("doc_type", 'defined_and_equalto', "References")|selectattr("supercategory", "undefined_or_ne", "rippled API") %} + {% if loop.index != 1 and page == pages|selectattr("category", 'defined_and_equalto', page.category)|first %} +
+
+

{{page.name}}

+
+
+

{{page.blurb}}

+ {% if page.curated_anchors is defined %} +
+
    + {% for link in page.curated_anchors %} +
  • {{link.name}}
    • + {% endfor %} +
+
+ {% endif %} -
+ {% set depth = 1 %} + {% set parent_page = page %} + {% include 'template-page-children.html' %} +
+
+ {% endif %} + {% endfor %}
-
- -

Other XRP Ledger Interfaces

-

Here are a few other ways to interact with the XRP Ledger.

-
- - {% for page in pages|selectattr("doc_type", 'defined_and_equalto', "References")|selectattr("supercategory", "undefined_or_ne", "rippled API") %} - {% if loop.index != 1 and page == pages|selectattr("category", 'defined_and_equalto', page.category)|first %} -
-
-

{{page.name}}

-
-
-

{{page.blurb}}

- {% if page.curated_anchors is defined %} -
-
    - {% for link in page.curated_anchors %} -
  • {{link.name}}
    • - {% endfor %} -
-
- {% endif %} - - {% set depth = 1 %} - {% set parent_page = page %} - {% include 'template-page-children.html' %} -
-
- {% endif %} - {% endfor %} - -
- +
+

Full Reference Index

+
+
+ {% set parent_page = currentpage %} + {% set depth = 5 %} + {% include 'template-page-children.html' %} +
+
{% endblock %} diff --git a/tool/template-page-children.html b/tool/template-page-children.html index ccabb35087..3c82b22681 100644 --- a/tool/template-page-children.html +++ b/tool/template-page-children.html @@ -4,6 +4,10 @@ {% if depth is undefined %} {% set depth = 5 %} {% endif %} +{% if count is undefined %} + {# count controls how many direct children to print at each level #} + {% set count = 9999 %} +{% endif %} {% if show_blurbs is undefined %} {% set show_blurbs = False %} @@ -35,14 +39,18 @@ {% set childpages = pages|selectattr(parent_level, 'defined_and_equalto', parent_page[parent_level])|list %} {% endif %} -{% macro print_children(parent, thosepages, indent_level, next_level_field, depth_limit) %} +{% macro print_children(parent, thosepages, indent_level, next_level_field, depth_limit, count_limit) %} {% set printed_next_levels = [] %} + {% set ns=namespace(count_printed = 0) %} {% for onepage in thosepages %} {% if onepage == parent %}{# pass #} {% elif onepage.template == "template-redirect.html" %}{# don't list redirects #} {% elif next_level_field == None or (onepage[next_level_field] is undefined and next_level_field != "supercategory") %} {# direct child, print it! #} -
  • {{onepage.name}}{% if show_blurbs and onepage.blurb is defined and indent_level == 1%}

    {{onepage.blurb}}

    {% endif %}
    • + {% if ns.count_printed < count_limit %} +
  • {{onepage.name}}{% if show_blurbs and onepage.blurb is defined and indent_level == 1%}

    {{onepage.blurb}}

    {% endif %}
    • + {% set ns.count_printed = ns.count_printed + 1 %} + {% endif %} {% elif onepage[next_level_field] is undefined and next_level_field == "supercategory" %} {# special case, might need to skip "supercategory" #} @@ -51,52 +59,61 @@ {# possible direct child or grandchild due to skipped level #} {% if onepage.category not in printed_next_levels %} - {% set next_level_children = thosepages|selectattr("category", - 'defined_and_equalto', onepage.category)|list %} - {% set next_level_parent = next_level_children|first %} -
  • {{next_level_parent.name}}{% if show_blurbs and next_level_parent.blurb is defined and indent_level == 1 %}

    {{next_level_parent.blurb}}

    {% endif %}
    • - {% if indent_level+1 <= depth_limit and next_level_field != None %} - {# Recurse! #} - {% set field_after = "subcategory" %} - {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit) }} + {% if ns.count_printed < count_limit %} + {% set next_level_children = thosepages|selectattr("category", + 'defined_and_equalto', onepage.category)|list %} + {% set next_level_parent = next_level_children|first %} +
  • {{next_level_parent.name}}{% if show_blurbs and next_level_parent.blurb is defined and indent_level == 1 %}

    {{next_level_parent.blurb}}

    {% endif %}
    • + {% if indent_level+1 <= depth_limit and next_level_field != None %} + {# Recurse! #} + {% set field_after = "subcategory" %} + {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit, count_limit) }} + {% endif %} + {% set _ = printed_next_levels.append(onepage.category) %} + {% set ns.count_printed = ns.count_printed + 1 %} {% endif %} - {% set _ = printed_next_levels.append(onepage.category) %} {% endif %} {% else %} - -
  • {{onepage.html}}{% if show_blurbs and onepage.blurb is defined and indent_level == 1 %}

    {{onepage.blurb}}

    {% endif %}
    • + {% if ns.count_printed < count_limit %} + +
  • {{onepage.html}}{% if show_blurbs and onepage.blurb is defined and indent_level == 1 %}

    {{onepage.blurb}}

    {% endif %}
    • + {% set ns.count_printed = ns.count_printed + 1 %} + {% endif %} {% endif %} {% elif onepage[next_level_field] is defined %} {# might be a grandchild or lower #} {% if onepage[next_level_field] not in printed_next_levels %} - {% set next_level_children = thosepages|selectattr(next_level_field,'defined')|selectattr(next_level_field, - 'defined_and_equalto', onepage[next_level_field])|list %} - {% set next_level_parent = next_level_children|first %} -
  • {{next_level_parent.name}}{% if show_blurbs and next_level_parent.blurb is defined and indent_level == 1 %}

    {{next_level_parent.blurb}}

    {% endif %}
    • - {% if (indent_level+1 <= depth_limit and next_level_field != None) - or (next_level_field == "supercategory" and depth_limit == 1.5) %} - {# Recurse! #} + {% if ns.count_printed < count_limit %} + {% set next_level_children = thosepages|selectattr(next_level_field,'defined')|selectattr(next_level_field, + 'defined_and_equalto', onepage[next_level_field])|list %} + {% set next_level_parent = next_level_children|first %} +
  • {{next_level_parent.name}}{% if show_blurbs and next_level_parent.blurb is defined and indent_level == 1 %}

    {{next_level_parent.blurb}}

    {% endif %}
    • + {% if (indent_level+1 <= depth_limit and next_level_field != None) + or (next_level_field == "supercategory" and depth_limit == 1.5) %} + {# Recurse! #} - {# figure out what level to use next #} - {% if next_level_field == "subcategory" %} - {% set field_after = None %} - {% elif next_level_field == "category" %} - {% set field_after = "subcategory" %} - {% elif next_level_field == "supercategory" %} - {% set field_after = "category" %} - {% elif next_level_field == "doc_type" %} - {% set field_after = "supercategory" %} - {% elif next_level_field == "funnel" %} - {% set field_after = "doc_type" %} - {% else %} - + {# figure out what level to use next #} + {% if next_level_field == "subcategory" %} + {% set field_after = None %} + {% elif next_level_field == "category" %} + {% set field_after = "subcategory" %} + {% elif next_level_field == "supercategory" %} + {% set field_after = "category" %} + {% elif next_level_field == "doc_type" %} + {% set field_after = "supercategory" %} + {% elif next_level_field == "funnel" %} + {% set field_after = "doc_type" %} + {% else %} + + {% endif %} + + {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit, count_limit) }} {% endif %} - - {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit) }} + {% set _ = printed_next_levels.append(onepage[next_level_field]) %} + {% set ns.count_printed = ns.count_printed + 1 %} {% endif %} - {% set _ = printed_next_levels.append(onepage[next_level_field]) %} {% endif %} {% endif %} {% endfor %} @@ -109,6 +126,6 @@
      - {{ print_children(parent_page, childpages, 1, level_2, depth) }} + {{ print_children(parent_page, childpages, 1, level_2, depth, count) }}
    diff --git a/tool/xrpl.scss b/tool/xrpl.scss index 8daea7af6c..843e7271fc 100644 --- a/tool/xrpl.scss +++ b/tool/xrpl.scss @@ -64,17 +64,20 @@ h1, h2, h3, h4, h5 { font-weight: 700; } +.landing section { + border-bottom: 1px solid map-get($theme-colors, primary); +} + .card-grid { display: grid; gap: 1px; background-color: #dedede; padding: 0; - border-bottom: 1px solid #dedede; &.card-grid-2x2 { - /* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */ + /* left half is a hero area; right half is a 2x2 grid. */ grid-template-columns: 2fr 1fr 1fr; - grid-template-rows: 1fr 1fr; + grid-template-rows: auto auto; .section-hero { grid-row-end: span 2; @@ -88,19 +91,19 @@ h1, h2, h3, h4, h5 { } &.card-grid-2x1 { - /* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */ + /* left half is a hero area; right half is a 2x1 grid. */ grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr; + .section-hero { + grid-row-end: span 1; + } + @include media-breakpoint-down(md) { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; grid-template-rows: 1fr; } - - .section-hero { - grid-row-end: span 1; - } } &.card-grid-2x4 { @@ -108,18 +111,44 @@ h1, h2, h3, h4, h5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; + .section-hero { + grid-row-end: span 4; + } + @include media-breakpoint-down(md) { /* Switch to 1-column layout on smaller widths */ grid-template-columns: 1fr; grid-template-rows: repeat(5, auto); .section-hero { - grid-row-end: span 2; + grid-row-end: span 1; } } + } - .section-hero { - grid-row-end: span 4; + &.card-grid-4xN { + /* 4 equal columns and any number of auto-sized rows. */ + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-auto-rows: auto; + + /* No "hero" blocks expected here. */ + + @include media-breakpoint-down(md) { + /* Switch to 1-column layout on smaller widths */ + grid-template-columns: 1fr; + } + } + + &.card-grid-3xN { + /* 3 equal columns and any number of auto-sized rows. */ + grid-template-columns: 1fr 1fr 1fr; + grid-auto-rows: auto; + + /* No "hero" blocks expected here. */ + + @include media-breakpoint-down(md) { + /* Switch to 1-column layout on smaller widths */ + grid-template-columns: 1fr; } }