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

Docs/Refs landing page styles

Browse Source
This commit is contained in:
mDuo13
2019-05-01 16:51:06 -07:00
parent 4ecf076bb4
commit fd96404bce
7 changed files with 184 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/devportal.css
View File

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

34
assets/vendor/bootstrap.css vendored
View File

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

6
dactyl-config.yml
View File

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

60
tool/template-landing-docs.html
View File

@@ -6,18 +6,18 @@
<section class="container-fluid bg-white p-3 p-sm-4">
<h1 class="main-page-header">XRP Ledger Documentation</h1>
<p class="blurb">Dive into our documentation and start integrating with the XRP Ledger.</p>
<p class="blurb">Browse by category, or skip straight to the <a href="#full-doc-index">full documentation index</a>.</p>
</section>
<section class="container-fluid bg-light p-3 p-sm-4">
<div class="card-deck">
<section class="container-fluid card-grid card-grid-3xN">
{% 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 %}
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">{{doc_type_top.name}}</h3>
<div class="card-header">
<h3 class="card-title"><a href="{{doc_type_top.html}}">{{doc_type_top.name}}</a></h3>
</div><!--/.card-header-->
<div class="card-body">
{% if page.blurb is defined %}
@@ -29,7 +29,7 @@
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a class="btn btn-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
<a class="btn btn-outline-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}}</a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
@@ -37,57 +37,7 @@
{% set _ = doc_types.append(page.doc_type) %}
{% endif %}
{% endfor %}
</div><!--/.card-deck-->
<div class="card-deck pt-3 pt-sm-4">
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Get Started</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ul>
<li><a href="websocket-api-tool.html">Make a call to the rippled API</a></li>
<li><a href="xrp-test-net-faucet.html">Access the XRP Ledger Test Net</a></li>
<li><a href="concepts.html">Understand XRP Ledger Concepts</a></li>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Popular Docs</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
<li><a href="public-rippled-methods.html">rippled API Public Methods Reference</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="install-rippled.html">Install rippled</a></li>
<li><a href="rippleapi-reference.html">RippleAPI for JavaScript Reference</a></li>
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Recently Updated</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
{% for link in target.recently_updated %}
{% set linkpage = pages|selectattr("html", 'defined_and_equalto', link.html)|first %}
<li><a href="{{linkpage.html}}">{{linkpage.name}}{% if link.date is defined %} <span class="recently-updated-date">({{link.date}})</span>{% endif %}</a></li>
{% endfor %}
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
</div><!--/.card-deck-->
</section>
<section class="container-fluid p-3 p-sm-4">

58
tool/template-landing-references.html
View File

@@ -6,59 +6,24 @@
<section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
<h1 class="main-page-header">References</h1>
<p class="blurb">{{currentpage.blurb}}</p>
<p class="blurb">Or, skip ahead to the <a href="#full-reference-index">Full Reference Index</a>.</p>
</section>
<section class="container-fluid bg-light p-3 px-sm-4 pb-sm-4">
<h2><a href="rippled-api.html">rippled API Reference</a></h2>
<p class="blurb">Use the <code>rippled</code> API to communicate with a <code>rippled</code> server, the core peer-to-peer server that manages the XRP Ledger.</p>
<div class="card-deck pt-3 pt-sm-4">
{% 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 %}
<section class="container-fluid card-grid card-grid-4xN">
{# 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 %}
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">{{page.name}}</h3>
<div class="card-header">
<h3 class="card-title"><a href="{{page.html}}">{{page.name}}</a></h3>
</div><!--/.card-header-->
<div class="card-body">
<p class="blurb">{{page.blurb}}</p>
{% if page.curated_anchors is defined %}
<div class="curated-links">
<ul>
{% for link in page.curated_anchors %}
<li class="level-1"><a href="{{page.html}}{{link.anchor}}">{{link.name}}</a></li>
{% endfor %}
</ul>
</div><!--/.curated-links-->
{% else %}
{% set depth = 1 %}
{% set parent_page = page %}
{% include 'template-page-children.html' %}
{% endif %}
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a class="btn btn-secondary" href="{{page.html}}">View All {{page.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
{# go to new row after admin methods #}
{% if page.html == "admin-rippled-methods.html" %}
</div><!--/.card-deck-->
<div class="card-deck pt-3 pt-sm-4">
{% endif %}
{% endif %}
{% endfor %}
</div><!--/.card-deck-->
</section>
<section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
<h2>Other XRP Ledger Interfaces</h2>
<p class="blurb">Here are a few other ways to interact with the XRP Ledger.</p>
<div class="card-deck pt-3 pt-sm-4">
{% 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 %}
<div class="card">
@@ -85,8 +50,17 @@
{% endif %}
{% endfor %}
</div><!--/.card-deck-->
</section>
<section class="container-fluid p-3 p-sm-4">
<h2 id="full-doc-index">Full Reference Index</h2>
<div class="row">
<div class="col-md-8">
{% set parent_page = currentpage %}
{% set depth = 5 %}
{% include 'template-page-children.html' %}
</div>
</div>
</section>
{% endblock %}

25
tool/template-page-children.html
View File

@@ -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! #}
{% if ns.count_printed < count_limit %}
<li class="level-{{indent_level}}"><a href="{{onepage.html}}">{{onepage.name}}</a>{% if show_blurbs and onepage.blurb is defined and indent_level == 1%}<p class="blurb child-blurb">{{onepage.blurb}}</p>{% endif %}</li>
{% 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,6 +59,7 @@
{# possible direct child or grandchild due to skipped level #}
{% if onepage.category not in printed_next_levels %}
{% 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 %}
@@ -58,19 +67,25 @@
{% 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) }}
{{ 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 %}
{% endif %}
{% else %}
{% if ns.count_printed < count_limit %}
<!-- Template WARNING: no category for page '{{onepage.name}}'? -->
<li class="level-{{indent_level}}"><a href="{{onepage.html}}">{{onepage.html}}</a>{% if show_blurbs and onepage.blurb is defined and indent_level == 1 %}<p class="blurb child-blurb">{{onepage.blurb}}</p>{% endif %}</li>
{% 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 %}
{% 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 %}
@@ -94,9 +109,11 @@
<!-- ERROR: child-pages template reached unexpected next_level_field case. -->
{% endif %}
{{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit) }}
{{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit, count_limit) }}
{% endif %}
{% set _ = printed_next_levels.append(onepage[next_level_field]) %}
{% set ns.count_printed = ns.count_printed + 1 %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
@@ -109,6 +126,6 @@
<div class="children-display">
<ul>
{{ print_children(parent_page, childpages, 1, level_2, depth) }}
{{ print_children(parent_page, childpages, 1, level_2, depth, count) }}
</ul>
</div>

51
tool/xrpl.scss
View File

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