Cleaned up sidebar styles, etc.

This commit is contained in:
mDuo13
2021-04-19 16:48:44 -07:00
parent 030b3062bf
commit d5c2b99a21
12 changed files with 316 additions and 298 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1259,7 +1259,7 @@ pages:
- name: Consensus Network
html: consensus-network.html
parent: decentralized-exchange.html
parent: concepts.html
funnel: Build
doc_type: Concepts
category: Consensus Network

View File

@@ -12,6 +12,17 @@ h3 a:hover,
color: $primary;
}
.curated-links a,
.children-display a,
a.card,
.xrpl-footer a {
color: $white;
&:hover {
color: $primary;
}
}
/* Content text styling ----------------------------------------------------- */
.content {

View File

@@ -22,17 +22,31 @@
font-size: 1rem;
}
ul {
padding-left: 0;
margin-bottom: 0;
}
li {
font-size: 0.75rem;
list-style-type: none;
margin-left: 0;
}
.card-body {
margin-top: -15px;
}
.card-header h5 i {
.card-header {
background: none;
border-bottom: none;
border-top: none;
padding: 8px;
h5 i {
margin-left: 0.2em;
}
}
.card-grid .card {
padding: 24px 48px 48px 48px;
@@ -46,6 +60,10 @@
}
}
.curated-links li, .level-1 {
margin-top: 12px;
}
.absolute_bottom_footer span {
margin-right: 25px;
font-size: 0.75rem;

View File

@@ -1,19 +1,5 @@
.landing .curated-links a,
.landing .children-display a,
.landing a.card,
.xrpl-footer a {
color: $white;
&:hover {
color: $primary;
}
}
.card-grid .section-hero.card {
padding-left: 0;
}
/* Landing Pages ------------------------------------------------------------ */
.landing {
.container-fluid.section-hero {
padding: 48px 0;
@@ -31,7 +17,7 @@
}
/* Common list modules (children, curated links) ---------------------------- */
/* Common list modules (children, curated links) -------------------------- */
.curated-links ul,
.curated-links ol,
.children-display ul {
@@ -54,30 +40,30 @@
margin-left: 16px;
}
.landing .level-1,
.landing .level-2,
.landing .curated-links li {
.level-1,
.level-2,
.curated-links li {
margin-top: 0;
}
.landing .card .level-1 a,
.landing .card .curated-links li a {
.card .level-1 a,
.card .curated-links li a {
padding: 8px;
display: block;
margin: 0 -8px 0 -8px;
}
.landing .card .level-2 {
.card .level-2 {
position: relative;
}
.landing .card .level-2 a {
.card .level-2 a {
padding: 8px 8px 8px 28px;
display: block;
margin: 0 -8px 0 -8px;
}
.landing .card .blurb + .children-display,
.landing .card .blurb + .curated-links {
.card .blurb + .children-display,
.card .blurb + .curated-links {
margin-top: 1rem;
}
@@ -107,16 +93,15 @@
list-style-type: square;
}
/* Misc. ------------------------------------------------------------------ */
@include media-breakpoint-down(md) {
.landing .card {
.card {
padding-left: 0px;
}
}
/* Landing Pages ------------------------------------------------------------ */
.landing .display-4 {
.display-4 {
margin-bottom: 1.5rem;
}
@@ -133,40 +118,32 @@
overflow-x: auto;
}
.landing .card li,
.xrpl-footer .card li {
.card li {
list-style-type: none;
margin-left: 0;
}
.landing section:first-of-type {
section:first-of-type {
padding-top: 0;
border-top-width: 0;
}
.card-grid .card-body {
padding: 8px;
padding-bottom: 24px;
}
.landing .card-header,
.landing .card-footer,
.xrpl-footer .card-header {
.card-header,
.card-footer {
background: none;
border-bottom: none;
border-top: none;
}
.landing .card-header,
.xrpl-footer .card-header {
.card-header {
padding: 8px;
}
.landing .card-footer {
.card-footer {
padding: 8px;
}
.landing .card-body > p {
.card-body > p {
padding: 0;
margin-bottom: 0;
}
@@ -185,7 +162,7 @@
}
.landing .card .card-img-top {
.card .card-img-top {
width: 60px;
height: 60px;
margin-left: 0;
@@ -198,12 +175,13 @@
}
/* Full-link cards */
.landing a.card {
a.card {
border: 1px solid transparent;
}
.landing a.card:hover {
a.card:hover {
text-decoration: none;
}
.landing a.card:hover h3 {
a.card:hover h3 {
text-decoration: underline;
}
}

View File

@@ -1,3 +1,7 @@
body {
position: relative; // Makes scrollspy work better
}
section {
position: relative;
}
@@ -156,9 +160,19 @@ section {
@include media-breakpoint-down(md) {
padding: 20px;
}
.card-body {
padding: 8px;
padding-bottom: 24px;
}
}
&.section-hero {
padding-left: 0;
}
}
/* Grid Box Vertical numbers ------------------------------------------------ */
.flag-vertical {
color: $gray-200;

View File

@@ -1,4 +1,4 @@
/* Left/right nav color scheme ------------------------------- */
/* Left/right nav fonts & colors scheme ------------------------------------- */
aside li a {
color: $white;
text-decoration: none;
@@ -19,55 +19,18 @@ aside .active > a:hover {
color: $primary;
font-weight: 700;
}
aside a.active-parent {
aside a.active-parent,
aside .active-parent > a {
font-weight: 700;
}
.command-list li a,
.page-toc li a {
display: block;
margin-top: 5px;
padding: 4px 15px 4px 35px;
text-indent: -20px;
font-size: 0.9rem;
}
#page-toc-wrapper .card-body,
.command-list {
border-left: 1px solid $white;
}
.page-toc .level-1 a {
.page-toc .level-1 a,
.command-list .separator {
font-weight: 700;
font-family: "Space Mono", monospace;
color: $white;
}
.page-toc .level-3 {
padding-left: 16px;
border-left: 1px solid $white;
margin-bottom: 0;
padding-bottom: 5px;
}
.page-toc .level-3 a {
margin-top: 0;
padding-bottom: 5px;
}
.command-list li a:hover,
.page-toc li a:hover {
text-decoration: none;
border-left: 1px solid $primary;
padding-left: 34px;
}
.command-list .active a {
border-left: 2px solid $primary;
padding-left: 33px;
}
.right-sidebar {
padding: 44px 0 24px 48px;
}
/* Left navigation -----------------------------------------------------------*/
.nav-toggler {
@@ -145,50 +108,82 @@ aside a.active-parent {
/* Right navigation --------------------------------------------------------- */
#page-toc-wrapper .card {
position: sticky;
max-height: 85vh;
top: 48px;
overflow: auto;
padding: 44px 0 48px 24px;
border: none;
}
.command-list {
padding: 16px;
}
.right-sidebar {
padding: 44px 0 24px 48px;
#page-toc-wrapper .card-header {
border-bottom: none;
.toc-header {
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
padding: 1rem 0;
#page-toc-wrapper .card-header h4 {
h4 {
line-height: 20px;
font-size: 1.2em;
padding: 0;
margin: 0;
}
}
}
#page-toc-wrapper .card-body {
padding: 0 0 0 16px;
#page-toc-wrapper {
position: sticky;
max-height: 85vh;
top: 48px;
overflow: auto;
padding: 0;
border: none;
.card-body {
padding: 0;
list-style-type: none;
}
}
.page-toc li,
.command-list li {
.page-toc,
.command-list {
padding-left: 0;
border-left: 1px solid $white;
li {
list-style-type: none;
margin-bottom: 8px;
margin-left: 0;
padding: 0;
&.separator {
padding: .25rem 1rem;
}
.page-toc .level-1 a,
.command-list .separator {
font-weight: 700;
font-family: "Space Mono", monospace;
a {
display: block;
margin-top: 5px;
padding: .25rem 1rem;
font-size: 0.9rem;
&:hover,
.active {
text-decoration: none;
border-left: 1px solid $primary;
margin-left: -1px;
}
.page-toc .level-2,
.command-list .method {
margin-left: 0;
}
&.active a,
&.active a:hover {
border-left: 2px solid $primary;
padding-left: calc(1rem - 1px);
margin-left: -1px;
}
}
.level-3 {
margin-left: 16px;
border-left: 1px solid $white;
margin-bottom: 0;
padding-bottom: 5px;
a {
margin-top: 0;
padding-bottom: 5px;
}
}
}

View File

@@ -77,7 +77,7 @@
</head>
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"

View File

@@ -30,12 +30,14 @@
{% endblock %}
{% block right_sidebar %}
<div class="card" id="page-toc-wrapper">
<div class="card-header">
<div id="page-toc-wrapper">
<div class="toc-header">
<h4>{% trans %}In this document{% endtrans %}</h4>
</div>
<ul class="card-body page-toc">
{{ sidebar_content }}
<ul class="page-toc nav flex-column" role="directory">
{% for h in headers %}{% if h.level < 4 %}
<li class="nav-item level-{{h.level}}"><a class="nav-link" href="#{{h.id}}">{{h.text}}</a></li>
{% endif %}{% endfor %}
</ul>
</div>
{% endblock %}

View File

@@ -1,6 +1,6 @@
{% extends "template-base.html" %}
{% block mainclasses %}landing-children padded-main{% endblock %}
{% block mainclasses %}landing landing-children padded-main{% endblock %}
{% block main %}
{% if content %}

View File

@@ -1,12 +1,12 @@
{% extends "template-base.html" %}
{% block right_sidebar %}
<div class="card">
<div class="card-header">
<div class="command-list-wrapper">
<div class="toc-header">
<h4>API Methods</h4>
</div>
<ul class="command-list card-body" id='command_list'>
<ul class="command-list" id='command_list'>
</ul>
</div>
{% endblock %}

View File

@@ -1,11 +1,11 @@
{% extends "template-base.html" %}
{% block right_sidebar %}
<div class="card">
<div class="card-header">
<div class="command-list-wrapper">
<div class="toc-header">
<h4>API Methods</h4>
</div>
<ul class="card-body command-list" id="command_list"></ul>
<ul class="command-list" id="command_list"></ul>
</div>
{% endblock %}