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

Improve XRP Developer templates

Browse Source 
- better responsive design
- move breadcrumbs into nav-header
- proper terms & privacy policy links
- add "Related Projects" to index
This commit is contained in:
mDuo13
2018-03-01 18:02:09 -08:00
parent 2fe16409f3
commit f9adab70bb
7 changed files with 1079 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
assets/css/devportal.css
View File

@@ -69,9 +69,13 @@
.draft-warning {
background-color: red;
color: white;
padding: 10px 20px;
padding: 2px 6px;
margin: 10px;
float: right;
position: absolute;
top: 34px;
left: calc(calc(calc(100% - 1070px) / 2) + 90px);
font-size: 12px;
font-weight: bold;
}
/* Images should not exceed the main column */
@@ -238,12 +242,13 @@
bottom: 0;
right: 0;
}
.xrp-ledger-dev-portal .navbar-default {
border-bottom: none;
}
.xrp-ledger-dev-portal .wrap.container {
margin-top: 106px;
}
.xrp-ledger-dev-portal.sidebar-primary .sidebar {
padding-right: 0;
padding-left: 0;
}
.xrp-ledger-dev-portal.sidebar-primary .main {
z-index: 5;
border-left: 1px solid #cccccc;
@@ -262,17 +267,11 @@
padding-left: 45px;
}
.xrp-ledger-dev-portal #page-toc-wrapper {
max-width: 200px;
float: right;
position: absolute;
right: -210px;
}
.xrp-ledger-dev-portal .dev_nav_sidebar {
padding-left: 5px;
padding-left: 10px;
padding-top: 0;
list-style-type: none;
max-width: 370px;
margin-bottom: 0;
}
.xrp-ledger-dev-portal .dev_nav_sidebar li:before {
content: "\f105"; /* fontawesome angle-right */
@@ -316,24 +315,53 @@
height: 67px;
visibility: hidden;
}
@media (min-width: 1200px) {
.xrp-ledger-dev-portal #page-toc-wrapper {
float: right;
margin-left: 15px;
}
.draft-warning {
left: calc(calc(calc(100% - 1170px) / 2) + 140px);
}
}
@media (min-width: 1400px) {
.xrp-ledger-dev-portal .container {
margin-right: calc(calc(calc(100% - 1370px) / 2) + 195px);
}
.xrp-ledger-dev-portal #page-toc-wrapper {
max-width: 200px;
position: absolute;
right: -210px;
}
.draft-warning {
left: calc(calc(calc(100% - 1370px) / 2) + 90px);
}
}
@media (max-width: 1200px) {
.xrp-ledger-dev-portal #page-toc-wrapper {
float: right;
margin-left: 15px;
}
.xrp-ledger-dev-portal .dev_nav_wrapper {
max-width: 290px;
}
.draft-warning {
left: calc(calc(calc(100% - 870px) / 2) + 90px);
}
}
@media (max-width: 992px) {
.xrp-ledger-dev-portal #page-toc-wrapper {
position: static;
float: none;
max-width: none;
}
.sidebar-primary .wrap.container {
width: inherit;
margin-right: 0;
}
}
@media (max-width: 992px) {
.xrp-ledger-dev-portal .dev_nav_wrapper {
max-width: 230px;
}
.draft-warning {
left: 140px;
}
}
@media (max-width: 768px) {
.xrp-ledger-dev-portal .dev_nav_wrapper,
@@ -345,17 +373,18 @@
max-width: 100%;
}
.xrp-ledger-dev-portal .main {
position: static;
clear: both;
border-left: none;
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
}
}
@media (min-width: 768px) {
.xrp-ledger-dev-portal .main {
float: right;
.github-edit-wrap {
display: none;
}
.nav {
min-width: 350px;
}
.nav .breadcrumb {
display: none;
}
}
@media (max-width: 480px) {
@@ -490,7 +519,6 @@
}
.navbar-brand {
vertical-align: middle;
text-decoration: none;
}
@@ -502,7 +530,9 @@
.navbar-default .navbar-brand .brand-text {
font-family: open_sansbold, sans-serif;
font-weight: bold;
line-height: 40px;
line-height: 36px;
margin-bottom: -5px;
margin-top: 20px;
}
.navbar-default .navbar-nav > li > a {
@@ -515,10 +545,6 @@
color: #27a2db !important;
}
.dev_nav .breadcrumb {
margin-bottom: 0;
}
.wrap-container {
margin-top: 106px;
}
@@ -549,8 +575,18 @@
}
}
.xrp-ledger-dev-portal .breadcrumb {
margin: 0;
padding: 15px;
background: transparent;
float: left;
vertical-align: middle;
}
.xrp-ledger-dev-portal .breadcrumb li {
margin: 0;
margin-bottom: -4px;
line-height: 36px;
}
.xrp-ledger-dev-portal .breadcrumb > li + li:before {
content: "\f105"; /* fontawesome angle-right */
@@ -667,6 +703,10 @@
}
/* Edit on GitHub link --------- */
.github-edit-wrap {
position: absolute;
right: 0;
}
.github-edit-wrap .github-edit {
background-color: black;
background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
@@ -719,3 +759,39 @@
padding-top: 2em;
border-top: 1px solid #777;
}
.page-build .related-projects {
float: right;
width: 375px;
border: 1px solid #777;
border-radius: 5px;
margin-top: 50px;
}
.page-build .related-projects a {
text-decoration: none;
}
.page-build .related-projects .project {
clear: left;
}
.page-build .related-projects h3 {
margin: 0;
padding: 5px 15px;
border-bottom: 1px dashed #777;
}
.related-projects .project-name {
font-family: open_sanslight, sans-serif;
font-size: 18px;
display: block;
}
.related-projects .login-required {
display: block;
font-size: 12px;
}
.page-build .related-projects p {
margin: 10px;
}
.related-projects .project-icon {
width: 120px;
float: left;
margin-right: 10px;
}

3
assets/css/ripple.css
View File

@@ -5558,9 +5558,6 @@ body {
.main {
background: #ffffff;
}
.sidebar-primary .wrap.container {
margin: 100px auto;
}
section#comments,
section#respond {
visibility: hidden;

935
assets/img/RippleNet-condensed.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

1
assets/img/ilp_logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

19
tool/template-base.html
View File

@@ -42,10 +42,19 @@
<div class="navbar-header">
<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>
<span class="brand-text">XRP Developers</span>
</a>
</div><!-- /.navbar-header -->
<div class="nav">
{% block breadcrumbs %}
<ul class="breadcrumb">
<li><a href="index.html" style="display: none;">&nbsp;</a></li>
{% if currentpage.category %}
<li class="active"><a class="dev_heading" href="{{ (pages|selectattr('category', 'equalto', currentpage.category)|first).html }}">{{ currentpage.category }}</a></li>
{% endif %}
<li class="active">{{ currentpage.name }}</li>
</ul>
{% endblock %}
<div class="draft-warning">DRAFT PAGE</div>
<div class="github-edit-wrap">
{% if currentpage.md is defined %}
@@ -69,14 +78,6 @@
{% block sidebar %}{% endblock %}
</aside>
<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>

4
tool/template-footer.html
View File

@@ -4,8 +4,8 @@
<div class="col-sm-12 absolute_bottom_footer">
<div class="col-sm-8">
<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>
<span><a href="https://ripple.com/terms-of-use/">Terms</a></span>
<span><a href="https://ripple.com/privacy-policy/">Privacy</a></span>
</div>
</div><!-- /.absolute_bottom_footer -->

22
tool/template-index.html
View File

@@ -18,10 +18,26 @@
{% block breadcrumbs %}{% endblock %}
{% block main %}
<div class="container">
<h2>XRP Ledger Documentation Table of Contents</h2>
</div>
<div class="container build-index">
<aside class="related-projects">
<h3>Related Projects</h3>
<div class="project">
<p><a class="client-portal-link" href="https://clients.ripple.com/">
<img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
<span class="project-name">Ripple Client Portal</span>
<span class="login-required">(login required)</span>
</a></p>
<p>For financial institutions using Ripple's proprietary solutions to send money globally.</p>
</div>
<div class="project">
<p><a class="interledger-link" href="https://interledger.org/">
<img class="project-icon" src="assets/img/ilp_logo.svg" />
<span class="project-name">Interledger</span>
</a></p>
<p>An open protocol suite for connecting all forms of digital money.</p>
</aside>
<h2>XRP Ledger Documentation Table of Contents</h2>
<div class="row">
<div class="col-md-8">
{% for cat in categories %}