mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-18 02:35:49 +00:00
Top nav: incomplete layout
This commit is contained in:
mDuo13
File diff suppressed because one or more lines are too long
6
assets/img/icons/contribute.svg
Normal file
6
assets/img/icons/contribute.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="3.03467" y="14.3295" width="37.4253" height="25.7931" fill="#E0E0E1"/>
|
||||
<rect x="3.03467" y="2.69727" width="37.4253" height="7.75479" fill="#E0E0E1"/>
|
||||
<path d="M44 10.3984V3.95312C44 1.82076 42.2652 0.0859375 40.1328 0.0859375H3.86719C1.73482 0.0859375 0 1.82076 0 3.95312V10.3984H44ZM29.7344 5.24219H37.4688C38.1807 5.24219 38.7578 5.81934 38.7578 6.53125C38.7578 7.24316 38.1807 7.82031 37.4688 7.82031H29.7344C29.0225 7.82031 28.4453 7.24316 28.4453 6.53125C28.4453 5.81934 29.0225 5.24219 29.7344 5.24219ZM16.8438 5.24219C17.5557 5.24219 18.1328 5.81934 18.1328 6.53125C18.1328 7.24316 17.5557 7.82031 16.8438 7.82031C16.1318 7.82031 15.5547 7.24316 15.5547 6.53125C15.5547 5.81934 16.1318 5.24219 16.8438 5.24219ZM11.6875 5.24219C12.3994 5.24219 12.9766 5.81934 12.9766 6.53125C12.9766 7.24316 12.3994 7.82031 11.6875 7.82031C10.9756 7.82031 10.3984 7.24316 10.3984 6.53125C10.3984 5.81934 10.9756 5.24219 11.6875 5.24219ZM6.53125 5.24219C7.24316 5.24219 7.82031 5.81934 7.82031 6.53125C7.82031 7.24316 7.24316 7.82031 6.53125 7.82031C5.81934 7.82031 5.24219 7.24316 5.24219 6.53125C5.24219 5.81934 5.81934 5.24219 6.53125 5.24219Z" fill="black"/>
|
||||
<path d="M0 12.9766V40.0469C0 42.1792 1.73482 43.9141 3.86719 43.9141H40.1328C42.2652 43.9141 44 42.1792 44 40.0469V12.9766H0ZM15.0709 31.3059C15.6269 31.7506 15.7169 32.5618 15.2722 33.1177C14.8276 33.6736 14.0162 33.7638 13.4604 33.319L7.01508 28.1628C6.37063 27.6474 6.3702 26.6654 7.01508 26.1496L13.4604 20.9933C14.0161 20.5486 14.8274 20.6387 15.2722 21.1946C15.7169 21.7505 15.6269 22.5618 15.0709 23.0064L9.88384 27.1562L15.0709 31.3059ZM27.052 18.6406L19.3176 36.6875C19.0372 37.3417 18.2796 37.6451 17.625 37.3645C16.9707 37.0841 16.6675 36.3262 16.948 35.6719L24.6824 17.625C24.9629 16.9707 25.7207 16.6676 26.375 16.948C27.0293 17.2284 27.3325 17.9862 27.052 18.6406ZM36.9849 28.1628L30.5396 33.3191C29.9846 33.7632 29.1732 33.6745 28.7278 33.1178C28.2831 32.5619 28.3731 31.7506 28.9291 31.306L34.1162 27.1562L28.9291 23.0066C28.3731 22.5619 28.2831 21.7507 28.7278 21.1948C29.1724 20.6388 29.9837 20.5487 30.5396 20.9935L36.9849 26.1498C37.6294 26.6651 37.6298 27.647 36.9849 28.1628Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
6
assets/img/icons/docs.svg
Normal file
6
assets/img/icons/docs.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38.7578 11.6016L29.7344 9.02344L27.1562 0H9.10938C6.97357 0 5.24219 1.73138 5.24219 3.86719V40.1328C5.24219 42.2686 6.97357 44 9.10938 44H34.8906C37.0264 44 38.7578 42.2686 38.7578 40.1328V11.6016Z" fill="black"/>
|
||||
<path d="M38.7578 11.6016H29.7344C28.3164 11.6016 27.1562 10.4414 27.1562 9.02344V0C27.4914 0 27.8266 0.128906 28.0585 0.386805L38.371 10.6993C38.6289 10.9312 38.7578 11.2664 38.7578 11.6016Z" fill="#646467"/>
|
||||
<path opacity="0.9" d="M28.882 14.3516H31.6995L25.8275 19.8549C24.774 20.8082 23.4038 21.3361 21.983 21.3361C20.5622 21.3361 19.1921 20.8082 18.1386 19.8549L12.2666 14.3516H15.0841L19.5342 18.512C20.1987 19.1219 21.0679 19.4603 21.9699 19.4603C22.8719 19.4603 23.741 19.1219 24.4056 18.512L28.882 14.3516Z" fill="#F5F5F7"/>
|
||||
<path opacity="0.9" d="M15.0563 29.6237H12.2388L18.1371 24.094C19.1848 23.129 20.5571 22.5933 21.9815 22.5933C23.406 22.5933 24.7783 23.129 25.826 24.094L31.7243 29.6237H28.9068L24.4304 25.4106C23.7659 24.8007 22.8967 24.4623 21.9947 24.4623C21.0927 24.4623 20.2235 24.8007 19.559 25.4106L15.0563 29.6237Z" fill="#F5F5F7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -3,6 +3,8 @@ html: get-started-using-http-websocket-apis.html
|
||||
parent: get-started.html
|
||||
blurb: Unleash the full power of the XRP Ledger's native APIs.
|
||||
cta_text: Get Started
|
||||
top_nav_name: HTTP / WebSocket
|
||||
top_nav_grouping: Get Started
|
||||
labels:
|
||||
- Development
|
||||
---
|
||||
|
||||
@@ -6,7 +6,7 @@ doc_type: Tutorials
|
||||
category: Get Started
|
||||
blurb: Build a simple Java app that interacts with the XRP Ledger.
|
||||
cta_text: Build an XRP Ledger-connected app
|
||||
top_nav_name: JavaScript
|
||||
top_nav_name: Java
|
||||
top_nav_grouping: Get Started
|
||||
filters:
|
||||
- include_code
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
html: get-started-using-node-js.html
|
||||
parent: get-started.html
|
||||
blurb: Build an entry-level JavaScript application for querying the XRP Ledger in Node.js.
|
||||
top_nav_name: JavaScript
|
||||
top_nav_grouping: Get Started
|
||||
labels:
|
||||
- Development
|
||||
---
|
||||
|
||||
@@ -3,6 +3,8 @@ html: get-started-using-python.html
|
||||
parent: get-started.html
|
||||
blurb: Build a simple Python app that interacts with the XRP Ledger.
|
||||
cta_text: Build an XRP Ledger-connected app
|
||||
top_nav_name: Python
|
||||
top_nav_grouping: Get Started
|
||||
filters:
|
||||
- include_code
|
||||
labels:
|
||||
|
||||
@@ -48,7 +48,7 @@ cover_page:
|
||||
|
||||
languages:
|
||||
- code: en
|
||||
display_name: Eng
|
||||
display_name: English
|
||||
prefix: "/"
|
||||
- code: ja
|
||||
display_name: 日本語
|
||||
@@ -311,6 +311,8 @@ pages:
|
||||
- get-started-using-node-js.html
|
||||
- get-started-using-java.html
|
||||
- get-started-using-http-websocket-apis.html
|
||||
top_nav_hero_image: assets/img/icons/docs.svg
|
||||
blurb: Dive into XRP Ledger technology and start integrating.
|
||||
targets:
|
||||
- en
|
||||
|
||||
@@ -326,6 +328,8 @@ pages:
|
||||
- get-started-using-node-js.html
|
||||
- get-started-using-java.html
|
||||
- get-started-using-http-websocket-apis.html
|
||||
top_nav_hero_image: assets/img/icons/docs.svg
|
||||
blurb: Dive into XRP Ledger technology and start integrating. #TODO: translate
|
||||
targets:
|
||||
- ja
|
||||
|
||||
@@ -3679,7 +3683,8 @@ pages:
|
||||
parent: index.html
|
||||
template: page-community.html.jinja
|
||||
sidebar: disabled
|
||||
blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
|
||||
blurb: Contribute to XRPL.org
|
||||
top_nav_hero_image: assets/img/icons/contribute.svg
|
||||
targets:
|
||||
- en
|
||||
|
||||
@@ -3690,6 +3695,7 @@ pages:
|
||||
template: page-community.html.jinja
|
||||
sidebar: disabled
|
||||
blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
|
||||
top_nav_hero_image: assets/img/icons/contribute.svg
|
||||
targets:
|
||||
- ja
|
||||
|
||||
|
||||
@@ -112,7 +112,7 @@ $text-muted: $gray-200;
|
||||
$breadcrumb-bg: $black;
|
||||
$breadcrumb-active-color: $gray-400;
|
||||
|
||||
$dropdown-bg: rgba(0,0,0,0.9);
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-divider-bg: $black;
|
||||
$dropdown-border-color: $gray-900;
|
||||
$dropdown-color: $secondary;
|
||||
|
||||
@@ -219,5 +219,5 @@
|
||||
margin: 1.5rem 0;
|
||||
padding: 1rem;
|
||||
border: 2px solid $white;
|
||||
background: $dropdown-bg;
|
||||
background: $dark;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,10 @@ section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main_content_wrapper { // Push below fixed nav
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
// Normally-padded pages
|
||||
.padded-landing,
|
||||
.sidebar-primary #main_content_wrapper {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Top navigation ----------------------------------------------------------- */
|
||||
.top-nav {
|
||||
margin: 20px 4px 0 4px;
|
||||
background-color: $gray-900;
|
||||
|
||||
// Logo
|
||||
.navbar-brand {
|
||||
@@ -20,18 +20,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Fancy dropdown behavior ---------------------------------------------------
|
||||
.top-nav-dropdown {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
// Main Links ----------------------------------------------------------------
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
color: $white; // TODO: change to black-050
|
||||
font-size: 1rem;
|
||||
line-height: 52px;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
|
||||
&.active a {
|
||||
font-weight: 700;
|
||||
@@ -47,7 +43,6 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(lg) {
|
||||
padding: 1rem 1.15rem;
|
||||
|
||||
&.github-edit {
|
||||
padding-left: 40px;
|
||||
@@ -78,13 +73,6 @@
|
||||
.dropdown-toggle {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
position: absolute;
|
||||
border-color: $gray-500 transparent transparent transparent;
|
||||
border-width: 8px 5px 0 5px;
|
||||
top: 40%;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown.show {
|
||||
.dropdown-toggle {
|
||||
color: $gray-500;
|
||||
@@ -93,64 +81,113 @@
|
||||
.dropdown-menu {
|
||||
border-width: 0;
|
||||
|
||||
.dropdown-item {
|
||||
line-height: 262%;
|
||||
padding: 0 .875rem;
|
||||
|
||||
&.top-level-2 {
|
||||
padding-left: 2rem
|
||||
h5 {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: $gray-400;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
.dropdown-hero {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
> img {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background-color: $gray-800;
|
||||
border-radius: $border-radius-sm;
|
||||
flex-grow: 0;
|
||||
padding: .75rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: $gray-300;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Desktop version
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 0 7.5rem;
|
||||
|
||||
.dropdown-toggle.with-caret::after {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
border-top: 8px solid $primary;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-bottom: 0;
|
||||
transition: 0.2s;
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-toggle.with-caret::after {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-toggle {
|
||||
color: $gray-500;
|
||||
position: relative;
|
||||
.dropdown:hover .dropdown-toggle span,
|
||||
.dropdown:active .dropdown-toggle span {
|
||||
border-bottom: 2px solid $blue-purple-400;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-width: 1px;
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 0.5rem 0.75rem;
|
||||
min-width: 250px;
|
||||
border-radius: 0 0 $border-radius-lg $border-radius-lg;
|
||||
padding: 2.5rem;
|
||||
|
||||
&.show {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
|
||||
.dropdown-hero {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
// "About" dropdown placement
|
||||
.col-for-xrp-ledger {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
.col-for-xrp {
|
||||
grid-column: 2;
|
||||
}
|
||||
.col-for-sustainability {
|
||||
grid-column: 2;
|
||||
}
|
||||
.col-for-about {
|
||||
grid-row: 1;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
// "Docs" dropdown placement
|
||||
.col-for-article-types {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.col-for-online-tools {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
.col-for-get-started {
|
||||
grid-column: 2;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
// "Community" dropdown placement
|
||||
// TODO
|
||||
}
|
||||
|
||||
&.smaller-dropdown {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
line-height: 44px;
|
||||
line-height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Search bar & controls -----------------------------------------------------
|
||||
#navbar-search {
|
||||
.navbar-form {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.input-group-text,
|
||||
.input-group > .input-group-append > .btn {
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
$navbar-padding-y: 0;
|
||||
$nav-link-padding-x: 1.25rem;
|
||||
$nav-link-padding-y: 1rem;
|
||||
$navbar-nav-link-padding-x: 1.25rem;
|
||||
$navbar-brand-padding-y: 1rem;
|
||||
$navbar-nav-link-padding-x: 2rem;
|
||||
$navbar-nav-link-padding-y: 1rem;
|
||||
$border-radius: 0;
|
||||
$border-radius-lg: 8px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="container-fluid">
|
||||
<nav class="top-nav navbar navbar-expand-lg navbar-dark row">
|
||||
<a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="44" alt="{{target.display_name}}" /></a>
|
||||
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top row">
|
||||
<a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="40" alt="{{target.display_name}}" /></a>
|
||||
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@@ -10,21 +10,43 @@
|
||||
{% set printed_groupings = [] %}
|
||||
{% if top_page.children|selectattr('top_nav_omit', 'undefined_or_ne', True)|list|length %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="topnav_{{top_page.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% if top_page.top_nav_name is defined %}{{top_page.top_nav_name}}{% else %}{{top_page.name}}{% endif %}</a>
|
||||
<div class="top-nav-dropdown dropdown-menu" aria-labelledby="topnav_{{top_page.html}}"><div class="row">
|
||||
<!-- TODO: link for the parent page here, handle non -->
|
||||
{% for link in top_page.children if not link.top_nav_omit %}
|
||||
<a class="nav-link dropdown-toggle" href="#" id="topnav_{{top_page.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{% if top_page.top_nav_name is defined %}{{top_page.top_nav_name}}{% else %}{{top_page.name}}{% endif %}</span></a>
|
||||
<div class="dropdown-menu" aria-labelledby="topnav_{{top_page.html}}">
|
||||
{% if top_page.top_nav_hero_image is defined %}
|
||||
<a class="dropdown-item dropdown-hero" href="{{top_page.html}}">
|
||||
<img src="{{top_page.top_nav_hero_image}}" alt="{{top_page.name}} icon" />
|
||||
<div class="dropdown-hero-text">
|
||||
<h4>{{top_page.name}}</h4>
|
||||
<p>{{top_page.blurb}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="navcol col-for-{{slug(top_page.top_nav_grouping)}}">
|
||||
<h5 class="dropdown-item">{{top_page.top_nav_grouping}}</h5>
|
||||
{% set _ = printed_groupings.append(top_page.top_nav_grouping) %}
|
||||
<a class="dropdown-item {% if currentpage == top_page %} active{% endif %}" href="{{top_page.html}}">{{top_page.name}}</a>
|
||||
{% endif %}
|
||||
{% set dropdownchildren = top_page.children|list %}
|
||||
{% for linkhtml in top_page.top_nav_shortcuts %}
|
||||
{% set _ = dropdownchildren.append(pages|selectattr("html", "defined_and_equalto", linkhtml)|first) %}
|
||||
{% endfor %}
|
||||
{% for link in dropdownchildren if not link.top_nav_omit %}
|
||||
{% if link.top_nav_grouping is defined and link.top_nav_grouping not in printed_groupings %}
|
||||
<h5>{{link.top_nav_grouping}}</h5>
|
||||
{% if printed_groupings %}
|
||||
</div><!--./col-->
|
||||
{% endif %}
|
||||
<div class="navcol col-for-{{slug(link.top_nav_grouping)}}">
|
||||
<h5 class="dropdown-item">{{link.top_nav_grouping}}</h5>
|
||||
{% set _ = printed_groupings.append(link.top_nav_grouping) %}
|
||||
{% endif %}
|
||||
<a class="dropdown-item {% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
|
||||
{% endfor %}
|
||||
</div></div>
|
||||
</div><!--./col-->
|
||||
</div><!--/.dropdown-menu-->
|
||||
</li>
|
||||
{% elif not top_page.top_nav_omit %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{top_page.html}}">{{top_page.name}}</a>
|
||||
<a class="nav-link" href="{{top_page.html}}"><span>{{top_page.name}}</span></a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
@@ -39,11 +61,8 @@
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-inline">
|
||||
<div class="input-group">
|
||||
<label class="input-group-prepend" for="topsearchbar"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search site...{% endtrans %}</span></label>
|
||||
<label class="input-group-prepend" for="topsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
|
||||
<input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
|
||||
<div class="input-group-append d-none d-lg-flex">
|
||||
<button type="button" class="btn btn-default" data-toggle="dropdown" data-target="topnav-search-dropdown-toggle"><i class="fa fa-times"></i><span class="sr-only">{% trans %}Close Search{% endtrans %}</span></button>
|
||||
</div>
|
||||
</div><!--/.input-group-->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user