Update Portal styles & templates

Officially renames it the "XRP Ledger Developer Portal" and
adapts the Ripple Client Portal templates to the XRP Dev Portal:

- Table-of-Contents-like landing page
- Accordion-style side nav except on landing page
- Breadcrumbs except on landing page
- floating (right-side) in-page nav on doc pages
- Adds "Edit on GitHub" link
- Slight modifications to API tool styles
This commit is contained in:
mDuo13
2018-02-28 17:48:02 -08:00
parent 8fd555c12a
commit 2fe16409f3
15 changed files with 564 additions and 515 deletions

View File

@@ -5,7 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>{{ currentpage.name }} - {{ target.display_name }}</title>
<title>{{ currentpage.name }} - XRP Ledger Developer Portal</title>
<!--[if lt IE 9]>
<script src="/dist/js/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="/dist/js/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
@@ -21,54 +27,56 @@
<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap.min.js"></script>
<!-- fontawesome icons -->
<link rel="stylesheet" href="assets/vendor/fontawesome/css/font-awesome.min.css" />
{% block head %}
{% endblock %}
</head>
<body class="page page-template page-template-template-dev-portal page-template-template-dev-portal-php {% if currentpage.sidebar != 'off' %}sidebar-primary{% endif %} wpb-js-composer js-comp-ver-3.6.2 vc_responsive">
<body class="{% block bodyclasses %} xrp-ledger-dev-portal sidebar-primary{% endblock %}">
<header role="banner" class="banner navbar navbar-default navbar-fixed-top initial_header">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand"><img src="assets/img/ripple-logo-color.png" class="logo"></a>
<a href="index.html" class="navbar-brand">
<img src="assets/img/ripple-logo-color.png" class="logo">
<span class="brand-text">XRP Ledger Developer Portal</span>
</a>
</div><!-- /.navbar-header -->
<div class="nav">
<div class="draft-warning">DRAFT PAGE</div>
<div class="github-edit-wrap">
{% if currentpage.md is defined %}
{% set githuburl = "https://github.com/ripple/ripple-dev-portal/edit/master/content/" + currentpage.md %}
{% elif currentpage.template is defined %}
{% set githuburl = "https://github.com/ripple/ripple-dev-portal/edit/master/tool/" + currentpage.template %}
{% else %}
{% set githuburl = "https://github.com/ripple/ripple-dev-portal/" %}
{% endif %}
<a href="{{githuburl}}" class="github-edit">Edit on GitHub</a>
</div><!-- /.github-edit -->
</div><!-- /.nav -->
</div><!-- /.container -->
<div class="subnav dev_nav">
<div class="container">
<ul id="menu-dev-menu" class="menu">
{% for cat in categories %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{cat}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
{% for page in pages %}
{% if page.category == cat %}
<li><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
<li><a href="https://github.com/ripple/ripple-dev-portal" title="GitHub">Site Source</a></li>
</ul><!-- /#dev-menu -->
</div><!-- /.subnav .container -->
</div><!-- /.subnav -->
</header>
<div class="wrap container" role="document">
{% if currentpage.sidebar != 'off' %}
<div class="wrap container" role="document" id="main_content_wrapper">
<aside class="sidebar" role="complementary">
{% block sidebar %}{% endblock %}
</aside>
{% endif %}
<main class="main" role="main">
{% block breadcrumbs %}
<ul class="breadcrumb">
<li><a href="index.html">XRP Ledger Documentation</a></li>
{% if currentpage.category %}
<li class="active">{{ currentpage.category }}</li>
{% endif %}
</ul>
{% endblock %}
{% block main %}{% endblock %}
</main>
</div>

View File

@@ -18,35 +18,26 @@
<script src="assets/js/expandcode.js"></script>
<script src="assets/js/fixsidebarscroll.js"></script>
<!-- fontawesome icons -->
<link rel="stylesheet" href="assets/vendor/fontawesome/css/font-awesome.min.css" />
{% endblock %}
{% block sidebar %}
{% if currentpage.sidebar != 'off' %}
<div class="dev_nav_wrapper">
<div id="cont">
<h5>In this category:</h5>
<ul class="dev_nav_sidebar">
<li class="level-1"><a href="index.html">Category: {{ currentpage.category }}</a></li>
{% for page in pages %}
{% if page.category == currentpage.category %}
<li class="level-2"><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
<hr />
<h5>In this page:</h5>
<ul class="dev_nav_sidebar" id="dactyl_toc_sidebar">
{{ page_toc }}
</ul>
</div>
</div>
{% endif %}
{% if currentpage.sidebar != "disabled" %}
{% include "template-sidebar_nav.html" %}
{% endif %}
{% endblock %}
{% block main %}
<div class='content'>
<h1 class="main-page-header">{{ currentpage.name }}</h1>
<div id="page-toc-wrapper" class="panel panel-default">
<p class="in-this-doc panel-heading">In this document:</p>
<ul class="dev_nav_sidebar panel-body" id="dactyl_toc_sidebar">
{{ sidebar_content }}
</ul>
</div>
<div class='content no-1st-head'>
{{ content }}
</div>
{% endblock %}

View File

@@ -3,7 +3,7 @@
<div class="row">
<div class="col-sm-12 absolute_bottom_footer">
<div class="col-sm-8">
<span>&copy; 2013 - 2017 Ripple Labs, Inc. All Rights Reserved.</span>
<span>&copy; 2013 - 2018 Ripple. All Rights Reserved.</span>
<span><a href="/terms-of-use/">Terms</a></span>
<span><a href="/privacy-policy/">Privacy</a></span>
</div>
@@ -12,3 +12,7 @@
</div><!-- /.row -->
</div><!-- /.container -->
</footer>
<!-- Jump to top button -->
<a href="#main_content_wrapper" class="jump-to-top btn btn-primary btn-lg" role="button" title="Jump to top of page">Top</span></a>
<script type="text/javascript" src="assets/js/jump-to-top.js"></script>

View File

@@ -7,50 +7,45 @@
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="assets/css/landing.css" rel="stylesheet">
{% endblock %}
{% block main %}
<!-- jumbotron -->
<!-- <div class="container theme-showcase" role="main"> -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<img class="large_logo" src="assets/img/dev-logo.png" />
</div>
<div class="col-md-9">
<h4>Welcome to the Developer Center</h4>
<p class="main_callout">
Ripples distributed settlement network is built on open-source technology that anyone can use. Here are the tools developers can use to build solutions around the open-source platform.</p>
</div>
</div>
</div>
<link href="assets/css/landing.css" rel="stylesheet">
{% endblock %}
{% block bodyclasses %}client-portal-docs page-build no-sidebar{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block main %}
<div class="container">
<h2>XRP Ledger Documentation Table of Contents</h2>
</div>
<div class="container build-index">
<div class="row">
<div class="col-md-8">
{% for cat in categories %}
<ul>
<li class="top"><h5><a class="dev_heading" href="{{ (pages|selectattr('category', 'equalto', cat)|first).html }}">{{ cat }}</a></h5></li>
{% for page in pages %}
{% if page.category == cat and page.name != category and not page.toc_omit %}
<li><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
<!-- </div> -->
<!-- main container -->
<div class="container build-index">
<div class="row">
{% for cat in categories %}
<div class="col-md-3">
<ul>
<li class="top"><h5 class="dev_heading">{{ cat }}</h5></li>
{% for page in pages %}
{% if page.category == cat %}
<li><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Disclaimer block -->
<div class="container build-disclaimer">
<p>
These resources are provided for informational purposes only, as illustrative references for your independent development of products or services designed to interface with Ripples open-source technologies. These resources are not intended to direct or influence how you or any other person interacts with Ripples open-source technologies. Ripple <strong><em>does not</em></strong> endorse any specific resource and makes no representations or warranties with respect to the resources listed.
</p>
<p>
Note that anti-money laundering and counter-terrorism financing laws and regulations, such as the U.S. Bank Secrecy Act and regulations issued by the Financial Crimes Enforcement Network (FinCEN), require certain parties to take certain precautions against financial crime. In particular, you may be interested in the 2013 <a href="https://www.fincen.gov/statutes_regs/guidance/html/FIN-2013-G001.html">guidance issued by FinCEN</a> in response to questions concerning the regulatory treatment of persons who use or make a business of exchanging, accepting, or transmitting certain virtual currencies. Additional FinCEN references are available at <a href="https://www.fincen.gov">https://www.fincen.gov</a>.
</p>
</div>
{% endblock %}

View File

@@ -1,6 +1,7 @@
{% extends "template-base.html" %}
{% block sidebar %}
<h2>API Methods</h2>
<ul id='command_list'>
<li class='selected'><a href='#server_info'>server_info</a></li>
<li><a href='#server_state'>server_state</a></li>
@@ -78,7 +79,7 @@
</div>
</div>
{% endblock %}
{% block endbody %}
<link rel='stylesheet' type='text/css' href='assets/css/api-tools.css'/>
<link rel='stylesheet' type='text/css' href='assets/vendor/codemirror.css'/>
@@ -88,4 +89,3 @@
<script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script>
<script type='text/javascript' src='assets/js/apitool-websocket.js'></script>
{% endblock %}

View File

@@ -0,0 +1,33 @@
<div class="guide_toc">
<div id="sidenav_accordion" class="panel-group" role="tablist" aria-multiselectable="true">
{% for cat in categories %}
<div class="panel panel-default{% if currentpage.category == cat %} active{% endif %}">
<div class="panel-heading" role="tab" id="sidenav_cat_head_{{loop.index}}">
<h5 class="panel-title">
<a {% if currentpage.category != cat %}class="collapsed"{% endif %} role="button" data-toggle="collapse" data-parent="#sidenav_accordion" href="#sidenav_collapse_{{loop.index}}" aria-expanded="true" aria-controls="sidenav_collapse_{{loop.index}}">
{{ cat }}
</a>
</h5>
</div><!-- /.panel-heading -->
<div id="sidenav_collapse_{{loop.index}}" class="collapse{% if currentpage.category == cat %} in{% endif %}" role="tabpanel" aria-labelledby="sidenav_cat_head_{{loop.index}}">
<div class="panel-body">
<ul class="sidebar_cat_pagelist">
{% for page in pages %}
{% if page.category == cat %}
{% if page == currentpage %}
<li><a class="active" href="{{ page.html }}">{{ page.name }}</a></li>
{% else %}
<li><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div><!-- /.panel-body -->
</div><!-- /#sidenav_collapse{{loop.index}} -->
</div><!-- /.panel -->
{% endfor %}
</div><!-- /#sidenav_accordion -->
</div><!-- /.guide_toc -->