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

Style breakpoints, etc. cleanup

Browse Source
This commit is contained in:
mDuo13
2018-03-05 16:50:59 -08:00
parent cf0f06b988
commit 941017f7ee
10 changed files with 295 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

490
assets/css/devportal.css
View File

@@ -79,7 +79,7 @@
}
/* Images should not exceed the main column */
.xrp-ledger-dev-portal .content img {
.content img {
max-width: 100%;
height: auto;
}
@@ -130,13 +130,13 @@
/* "Button-style" links should look like buttons, not links */
.xrp-ledger-dev-portal a.button {
a.button {
cursor: pointer;
text-decoration: none !important;
}
/* Code Tabs stuff */
.xrp-ledger-dev-portal .multicode {
.multicode {
color: #000;
margin: 12px 0px 0px 0px;
padding: 0 0 0 0;
@@ -144,15 +144,15 @@
padding-left: 10px;
position: relative;
}
.xrp-ledger-dev-portal .multicode ul {
.multicode ul {
margin: 0 !important;
padding: 0;
}
.xrp-ledger-dev-portal .multicode pre {
.multicode pre {
padding-top: 0;
clear: both;
}
.xrp-ledger-dev-portal .multicode li {
.multicode li {
display: block;
float: left;
overflow: hidden;
@@ -160,12 +160,12 @@
margin-right: 5px;
border-top: 1px solid #DBDDE2;
}
.xrp-ledger-dev-portal .multicode ul > li:before {
.multicode ul > li:before {
background: none;
border: none;
}
.xrp-ledger-dev-portal .multicode a,
.xrp-ledger-dev-portal a.current {
.multicode a,
a.current {
color: black;
background: #DFE2E7;
border: 1px solid #DBDDE2;
@@ -173,18 +173,18 @@
margin: 0px;
text-decoration: none;
}
.xrp-ledger-dev-portal .multicode a.current {
.multicode a.current {
background: #fff;
border-bottom: 1px solid #fff;
color: black;
}
.xrp-ledger-dev-portal .multicode a:hover {
.multicode a:hover {
color: black;
background: white;
}
/* End of code tabs stuff */
.xrp-ledger-dev-portal .button {
.button {
border-radius: 5px;
background-color: #27a2db;
padding: 5px 20px;
@@ -202,45 +202,42 @@
-webkit-transition: .5s;
transition: .5s;
}
.xrp-ledger-dev-portal .button:hover {
.button:hover {
background-color: #43bded;
-o-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.xrp-ledger-dev-portal pre {
pre {
overflow: visible;
word-wrap: normal;
}
.xrp-ledger-dev-portal pre code {
pre code {
white-space: pre;
}
.xrp-ledger-dev-portal .code_sample pre {
.code_sample pre {
background: none;
border: none;
border-radius: 0;
}
.xrp-ledger-dev-portal .code_sample pre code {
.code_sample pre code {
overflow: auto;
max-height: 14em;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
}
.xrp-ledger-dev-portal .code_sample pre code.expanded {
.code_sample pre code.expanded {
overflow: visible;
max-height: none;
position: absolute;
min-width: 661px;
}
.xrp-ledger-dev-portal .code_sample .code_toggler {
.code_sample .code_toggler {
position: absolute;
bottom: 0;
right: 0;
}
.xrp-ledger-dev-portal .wrap.container {
margin-top: 106px;
}
.xrp-ledger-dev-portal.sidebar-primary .sidebar {
padding-right: 0;
padding-left: 0;
@@ -250,7 +247,7 @@
border-left: 1px solid #cccccc;
padding-left: 40px;
}
.xrp-ledger-dev-portal .content {
.content {
padding-bottom: 50px;
}
#dactyl_toc_sidebar a {
@@ -259,34 +256,34 @@
#dactyl_toc_sidebar a:hover {
text-decoration: underline;
}
.xrp-ledger-dev-portal .level-1 {
.level-1 {
margin-top: 15px;
padding-left: 15px;
font-weight: bold;
}
.xrp-ledger-dev-portal .level-1:first-child {
.level-1:first-child {
margin-top: 0;
}
.xrp-ledger-dev-portal .level-2 {
.level-2 {
padding-left: 30px;
}
.xrp-ledger-dev-portal .level-3 {
.level-3 {
padding-left: 45px;
}
.xrp-ledger-dev-portal .level-3 a {
.level-3 a {
color: #888;
}
.xrp-ledger-dev-portal .level-3 a:hover {
.level-3 a:hover {
color: #333;
}
.xrp-ledger-dev-portal .dev_nav_sidebar {
.dev_nav_sidebar {
padding-left: 10px;
padding-top: 0;
list-style-type: none;
margin-bottom: 0;
}
.xrp-ledger-dev-portal .dev_nav_sidebar li:before {
.dev_nav_sidebar li:before {
content: "\f105"; /* fontawesome angle-right */
font-family: FontAwesome;
position: relative;
@@ -294,33 +291,33 @@
margin-right: -5px;
}
.xrp-ledger-dev-portal .dev_nav_wrapper {
.dev_nav_wrapper {
position: fixed;
width: 100%;
overflow-y: scroll;
top: 130px;
}
.xrp-ledger-dev-portal td {
td {
border: 1px solid #dbdde2;
padding: 0.2em;
vertical-align: text-top;
}
.xrp-ledger-dev-portal th {
th {
padding: 0.2em;
}
.xrp-ledger-dev-portal .content a[title="Source"] {
.content a[title="Source"] {
float: right;
padding-left: 20px;
}
.xrp-ledger-dev-portal .content table {
.content table {
clear: right;
}
.xrp-ledger-dev-portal .main h1:before,
.xrp-ledger-dev-portal .main h2:before,
.xrp-ledger-dev-portal .main h3:before,
.xrp-ledger-dev-portal .main h4:before,
.xrp-ledger-dev-portal .main h5:before,
.xrp-ledger-dev-portal .main h6:before,
.main h1:before,
.main h2:before,
.main h3:before,
.main h4:before,
.main h5:before,
.main h6:before,
#main_content_wrapper:before {
display: block;
content: " ";
@@ -329,158 +326,6 @@
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 {
position: fixed;
right: 10px;
top: 80px;
max-width: calc(77% - 970px);
max-height: calc(100% - 150px);
overflow-y: auto;
}
.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;
}
.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,
.xrp-ledger-dev-portal .sidebar {
display: block;
clear: both;
overflow-y: inherit;
position: static;
max-width: 100%;
}
.xrp-ledger-dev-portal .main {
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
}
.github-edit-wrap {
display: none;
}
.nav {
min-width: 350px;
}
.nav .breadcrumb {
display: none;
}
}
@media (max-width: 480px) {
.xrp-ledger-dev-portal html {
overflow-x: hidden !important;
}
}
@media print {
.xrp-ledger-dev-portal {
/* undo code tabs */
/* wrap code, not scroll */
/* Source URLs are too big to float */
/* Show URLs after links - even for anchors */
/* Drop header, footer, google translate */
/* table of contents can't scroll */
/* better margins on main content */
/* crazy print-section-numbering idea */
}
.xrp-ledger-dev-portal .multicode > div {
display: block !important;
}
.xrp-ledger-dev-portal .multicode > ul {
display: none !important;
}
.xrp-ledger-dev-portal .multicode > em,
.xrp-ledger-dev-portal .multicode > p > em {
display: block !important;
page-break-after: avoid;
}
.xrp-ledger-dev-portal .multicode > p {
display: block !important;
}
.xrp-ledger-dev-portal pre {
white-space: pre-wrap;
max-height: none !important;
overflow: visible;
page-break-inside: auto;
word-wrap: break-word;
}
.xrp-ledger-dev-portal pre code {
white-space: pre-wrap !important;
}
.xrp-ledger-dev-portal .content a[title="Source"] {
float: none;
}
.xrp-ledger-dev-portal header,
.xrp-ledger-dev-portal footer {
display: none;
}
.xrp-ledger-dev-portal #goog-gt-tt {
display: none;
}
.xrp-ledger-dev-portal .wrap.container {
margin-top: 0 !important;
}
.xrp-ledger-dev-portal .dev_nav_wrapper {
position: static !important;
}
.xrp-ledger-dev-portal .sidebar:before {
display: none !important;
}
.xrp-ledger-dev-portal .sidebar {
padding-top: 0 !important;
display: block !important;
float: none !important;
}
.xrp-ledger-dev-portal h1 {
page-break-before: always;
}
.xrp-ledger-dev-portal .main {
float: none !important;
width: 85% !important;
border-left: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
overflow: visible !important;
}
}
/*------------- Code Tabs -----------------------------------------*/
.multicode {
color: #000;
@@ -536,6 +381,7 @@
.navbar-brand {
text-decoration: none;
white-space: pre;
}
.navbar-default .logo {
@@ -572,6 +418,7 @@
#main_content_wrapper {
margin-top: 67px;
padding-left: 0;
padding-right: 0;
}
.jump-to-top {
@@ -591,25 +438,26 @@
}
}
.xrp-ledger-dev-portal .breadcrumb {
.breadcrumb {
margin: 0;
padding: 15px;
padding-left: 5px;
background: transparent;
float: left;
vertical-align: middle;
}
.xrp-ledger-dev-portal .breadcrumb li {
.breadcrumb li {
margin: 0;
margin-bottom: -4px;
line-height: 36px;
}
.xrp-ledger-dev-portal .breadcrumb > li + li:before {
.breadcrumb > li + li:before {
content: "\f105"; /* fontawesome angle-right */
font-family: FontAwesome;
padding-right: 5px;
}
.xrp-ledger-dev-portal .breadcrumb > li.active {
.breadcrumb > li.active {
color: #666;
}
@@ -722,41 +570,49 @@
.github-edit-wrap {
position: absolute;
right: 0;
background-image: linear-gradient(180deg, #fafafa 0%, #ddd 90%);
border: 1px solid #ccc;
border-radius: 5px;
margin: 15px;
}
.github-edit-wrap:hover {
border-color: #777;
}
.github-edit-wrap:active {
background-image: linear-gradient(180deg, #ddd 0%, #fafafa 90%);
}
.github-edit-wrap .github-edit {
background-color: black;
background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
background-position: left center;
/* background-color: black; */
background-image: url(../vendor/github-marks/GitHub-Mark-32px.png);
background-size: 24px 24px;
background-position: left 5px center;
background-repeat: no-repeat;
color: white;
border-radius: 8px;
margin: 10px;
float: right;
padding: 10px 20px 10px 38px;
padding: 8px 8px 8px 34px;
color: #777;
text-decoration: none;
}
.github-edit-wrap .github-edit:hover {
text-decoration: underline;
font-size: 13px;
display: block;
}
.build-index .top {
text-indent: -20px;
}
.build-index ul {
.portal-index ul {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 0;
}
.build-index ul li {
.portal-index li {
font-size: 14px;
list-style: outside none none;
padding: 5px;
padding-left: 25px;
text-indent: 20px;
}
.build-index .dev_heading {
.portal-index li.top {
text-indent: 0;
}
.portal-index .dev_heading {
font-family: "Open Sans",sans-serif;
letter-spacing: 0.04em;
font-weight: 600;
@@ -764,7 +620,7 @@
text-decoration: none;
color: #202020;
}
.build-index a.dev_heading:hover {
.portal-index a.dev_heading:hover {
color: #27a2db;
text-decoration: underline;
}
@@ -776,20 +632,21 @@
border-top: 1px solid #777;
}
.page-build .related-projects {
float: right;
.related-projects {
position: absolute;
top: 70px;
right: 15px;
width: 375px;
border: 1px solid #777;
border-radius: 5px;
margin-top: 50px;
}
.page-build .related-projects a {
.related-projects a {
text-decoration: none;
}
.page-build .related-projects .project {
.related-projects .project {
clear: left;
}
.page-build .related-projects h3 {
.related-projects h3 {
margin: 0;
padding: 5px 15px;
border-bottom: 1px dashed #777;
@@ -803,7 +660,7 @@
display: block;
font-size: 12px;
}
.page-build .related-projects p {
.related-projects p {
margin: 10px;
}
.related-projects .project-icon {
@@ -811,3 +668,188 @@
float: left;
margin-right: 10px;
}
/* Responsive design for different viewscreens -------------------------------*/
@media (min-width: 1200px) {
#page-toc-wrapper {
float: right;
margin-left: 15px;
}
.draft-warning {
left: calc(calc(calc(100% - 1170px) / 2) + 140px);
}
}
@media (min-width: 1400px) {
.container {
margin-right: calc(calc(calc(100% - 1370px) / 2) + 195px);
}
#page-toc-wrapper {
position: fixed;
right: 10px;
top: 80px;
max-width: calc(75% - 970px);
max-height: calc(100% - 150px);
overflow-y: auto;
}
.draft-warning {
left: calc(calc(calc(100% - 1370px) / 2) + 140px);
}
}
@media (max-width: 1200px) {
#page-toc-wrapper {
float: right;
margin-left: 15px;
}
.dev_nav_wrapper {
max-width: 290px;
}
.draft-warning {
left: calc(calc(calc(100% - 870px) / 2) + 90px);
}
}
@media (max-width: 992px) {
#page-toc-wrapper {
position: static;
float: none;
max-width: none;
}
.dev_nav_wrapper {
max-width: 230px;
}
.draft-warning {
left: 140px;
}
/* Move "Related Projects" to bottom */
.related-projects {
position: static;
width: auto;
border: none;
margin-top: 0;
}
.related-projects .project-icon {
display: none;
}
.related-projects h3 {
padding: inherit;
border-bottom: none;
margin-top: 50px;
}
.related-projects .project-name,
.related-projects .login-required {
display: inline;
font-size: inherit;
}
.related-projects p {
margin-left: 25px;
}
.related-projects .project-summary {
padding-left: 20px;
}
}
@media (max-width: 768px) {
#main_content_wrapper {
margin-top: 0;
}
.navbar-fixed-top {
position: static;
margin-bottom: -70px;
}
.dev_nav_wrapper,
.sidebar {
display: block;
clear: both;
overflow-y: inherit;
position: static;
max-width: 100%;
}
.main {
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
}
.github-edit-wrap {
display: none;
}
.nav {
min-width: 350px;
}
.nav .breadcrumb .crumb-top:before {
display: none;
}
}
@media (max-width: 480px) {
html {
overflow-x: hidden !important;
}
}
@media print {
{
/* undo code tabs */
/* wrap code, not scroll */
/* Source URLs are too big to float */
/* Show URLs after links - even for anchors */
/* Drop header, footer, google translate */
/* table of contents can't scroll */
/* better margins on main content */
/* crazy print-section-numbering idea */
}
.multicode > div {
display: block !important;
}
.multicode > ul {
display: none !important;
}
.multicode > em,
.multicode > p > em {
display: block !important;
page-break-after: avoid;
}
.multicode > p {
display: block !important;
}
pre {
white-space: pre-wrap;
max-height: none !important;
overflow: visible;
page-break-inside: auto;
word-wrap: break-word;
}
pre code {
white-space: pre-wrap !important;
}
.content a[title="Source"] {
float: none;
}
header,
footer {
display: none;
}
#goog-gt-tt {
display: none;
}
.dev_nav_wrapper {
position: static !important;
}
.sidebar:before {
display: none !important;
}
.sidebar {
padding-top: 0 !important;
display: block !important;
float: none !important;
}
h1 {
page-break-before: always;
}
.main {
float: none !important;
width: 85% !important;
border-left: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
overflow: visible !important;
}
}

1
assets/css/ripple.css
View File

@@ -3189,7 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 992px) {

BIN
assets/vendor/github-marks/GitHub-Mark-32px.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/vendor/github-marks/GitHub-Mark-Light-120px-plus.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
assets/vendor/github-marks/GitHub-Mark-Light-32px.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
assets/vendor/github-marks/GitHub-Mark-Light-64px.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

15
tool/template-base.html
View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>{{ currentpage.name }} - XRP Ledger Developer Portal</title>
<title>{{ currentpage.name }} - XRP Ledger Dev Portal</title>
<!--[if lt IE 9]>
<script src="/dist/js/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -40,19 +40,16 @@
<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">
<span class="brand-text">XRP Developers</span>
</a>
<a href="index.html" class="navbar-brand"><img src="assets/img/dev-logo.png" class="logo" width="36" height="36" /><span class="brand-text">XRP Ledger Dev Portal</span></a>
</div><!-- /.navbar-header -->
<div class="nav">
{% block breadcrumbs %}
<ul class="breadcrumb">
<li><a href="index.html" style="display: none;">&nbsp;</a></li>
<li class="crumb-top"><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>
<li class="active crumb-category"><a href="{{ (pages|selectattr('category', 'equalto', currentpage.category)|first).html }}">{{ currentpage.category }}</a></li>
{% endif %}
<li class="active">{{ currentpage.name }}</li>
<li class="active crumb-current">{{ currentpage.name }}</li>
</ul>
{% endblock %}
<div class="draft-warning">DRAFT PAGE</div>
@@ -77,7 +74,7 @@
<aside class="sidebar" role="complementary">
{% block sidebar %}{% endblock %}
</aside>
<main class="main" role="main">
<main class="main" role="main" id="main_content_body">
{% block main %}{% endblock %}
</main>
</div>

1
tool/template-footer.html
View File

@@ -6,6 +6,7 @@
<span>&copy; 2013 - 2018 Ripple. All Rights Reserved.</span>
<span><a href="https://ripple.com/terms-of-use/">Terms</a></span>
<span><a href="https://ripple.com/privacy-policy/">Privacy</a></span>
<span><a href="https://raw.githubusercontent.com/ripple/ripple-dev-portal/master/LICENSE">License</a></span>
</div>
</div><!-- /.absolute_bottom_footer -->

45
tool/template-index.html
View File

@@ -8,36 +8,15 @@
<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 bodyclasses %}client-portal-docs page-build no-sidebar{% endblock %}
{% block bodyclasses %}xrp-ledger-dev-portal no-sidebar{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block main %}
<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="container portal-index">
<h2>XRP Ledger Documentation</h2>
<div class="row">
<div class="col-md-8">
{% for cat in categories %}
@@ -54,6 +33,24 @@
</div>
</div>
<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 class="project-summary">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 class="project-summary">An open protocol suite for connecting all forms of digital money.</p>
</aside>
<!-- Disclaimer block -->
<div class="container build-disclaimer">
<p>

2
tool/template-sidebar_nav.html
View File

@@ -16,7 +16,7 @@
{% for page in pages %}
{% if page.category == cat %}
{% if page == currentpage %}
<li><a class="active" href="{{ page.html }}">{{ page.name }}</a></li>
<li><a class="active" href="#main_content_body">{{ page.name }}</a></li>
{% else %}
<li><a href="{{ page.html }}">{{ page.name }}</a></li>
{% endif %}