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

merged changes from rome regarding the header and footer

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2020-08-20 23:18:02 -07:00
parent 4381b6479a 6aafa1cf58
commit 6f049323f6
13 changed files with 265 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/devportal.css.map
View File

File diff suppressed because one or more lines are too long

15
assets/js/jump-to-top.js
View File

@@ -1,20 +1,5 @@
$(document).ready(function() {
// Mobile menu.
$('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.toggleClass('show');
$(".menu-overlay").toggleClass('active');
});
$(".menu-overlay").click(function(event) {
$(".navbar-toggler").trigger("click");
});
var TO_TOP_MIN = 50;
var TO_TOP_SPEED = 500;
var TO_TOP_POS = 0;

7
dactyl-config.yml
View File

@@ -6179,6 +6179,13 @@ pages:
- ja
- name: Contribute
funnel: Contribute
html: contribute.html
template: template-contact.html
targets:
- en
- ja
# --------------- end "Docs" section -------------------------------------------
# Use Cases: removing these, to be finished later ------------------------------
# - md: use-cases/use-cases.md

4
styles/_buttons.scss
View File

@@ -3,12 +3,13 @@
border: 2px solid $white;
}
.content a.button:hover {
border: 1px solid $black;
border: 2px solid $black;
}
.btn-outline-secondary {
color: $white;
border-color: $white;
border-width: 2px;
}
#main_content_wrapper .btn-outline-secondary:hover,
@@ -49,7 +50,6 @@ a.button {
/* (Jump to) "Top" button */
.jump-to-top {
background-color: $gray-700;
display: none;
position: fixed;
bottom: 15px;

8
styles/_colors.scss
View File

@@ -108,10 +108,14 @@ $body-color: $white;
$headings-color: $white;
$text-muted: $gray-200;
$breadcrumb-bg: $black;
$dropdown-bg: rgba(34,37,43,0.8);
$dropdown-bg: rgba(0,0,0,0.9);
$dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900;
$dropdown-color: $secondary;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $primary;
$dropdown-link-hover-bg: transparent;
$dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $secondary;
$navbar-dark-active-color: $primary;

2
styles/_landings.scss
View File

@@ -9,7 +9,7 @@
.landing .curated-links a:hover,
.landing .children-display a:hover,
.xrpl-footer a:hover {
color: $black;
color: $primary;
}
.card-grid .section-hero.card {

357
styles/_top-nav.scss
View File

@@ -1,17 +1,100 @@
/* Top navigation ----------------------------------------------------------- */
.top-nav {
// Logo
.navbar .navbar-nav .nav-link {
.navbar-brand {
text-decoration: none;
white-space: pre;
-webkit-transition: opacity 200ms ease, color 200ms ease;
transition: opacity 200ms ease, color 200ms ease;
}
.navbar-brand:hover {
opacity: 0.5;
}
// Main Links ----------------------------------------------------------------
.navbar-nav {
.nav-link {
color: $white;
}
font-size: 1rem;
line-height: 52px;
text-decoration: none;
.dropdown-toggle::after {
border-width: 0;
&:hover {
background-color: transparent;
box-shadow: inset 0 -1px 0 0 #000;
text-decoration: none;
}
&.active a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
&.active-parent a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
}
// Buttons in top nav
.btn-outline-secondary {
font-size: 14px;
line-height: 125%;
margin-top: .5rem;
}
@media(max-width: 991px) {
.wrap-button {
padding: 1.5rem 0;
.btn {
display: inline;
padding: 1rem 1.25rem;
}
}
}
}
// Dropdowns -----------------------------------------------------------------
// (Mobile first)
.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;
}
.dropdown-toggle::after {
border-color: $primary transparent transparent transparent;
}
}
.dropdown-menu {
border-width: 0;
.dropdown-item {
line-height: 262%;
padding: 0 3rem;
&:hover {
color: $primary;
}
}
}
// Desktop version
@media(min-width: 992px) {
.dropdown-toggle::after {
border-width: 0;
top: 80%;
left: 50%;
}
}
.dropdown-toggle.with-caret::after {
.dropdown-toggle.with-caret::after {
position: relative;
top: 4px;
left: 0;
@@ -20,23 +103,19 @@
border-left: 5px solid transparent;
border-bottom: 0;
transition: 0.2s;
}
}
.dropdown.show .dropdown-toggle.with-caret::after {
// border-top: 0;
// border-right: 5px solid transparent;
// border-left: 5px solid transparent;
// border-bottom: 8px solid $primary;
.dropdown.show .dropdown-toggle.with-caret::after {
transform: scaleY(-1);
}
}
.dropdown.show .dropdown-toggle {
.dropdown.show .dropdown-toggle {
color: $gray-500;
position: relative;
}
}
.dropdown.show .dropdown-toggle:not(.with-caret)::after,
.dropdown-toggle:not(.with-caret):hover::after {
.dropdown.show .dropdown-toggle:not(.with-caret)::after,
.dropdown-toggle:not(.with-caret):hover::after {
content: " ";
display: static;
border: 3px solid $primary;
@@ -44,152 +123,128 @@
font-size: 0;
height: 0;
width: 0;
}
}
.navbar .dropdown-menu {
.dropdown-menu {
border-width: 1px;
backdrop-filter: blur(8px);
border-radius: 4px;
border-radius: 8px;
padding: 0.5rem 1rem;
min-width: 250px;
.dropdown-item {
line-height: 262%;
border-bottom: 2px solid $black;
&:last-child {
border-bottom: 0;
line-height: 44px;
}
}
}
&.active, &:hover {
// Search bar & controls -----------------------------------------------------
#navbar-search {
@media(min-width: 992px) {
position: static; // allows search bar to be positioned screen-center
.dropdown-toggle {
position: relative;
}
.dropdown-menu {
padding: 0;
border-radius: 8px;
width: 640px;
left: calc(50% - 320px);
}
.input-group {
width: 100%;
}
#topsearchbox,
.input-group-text,
.input-group > .input-group-append > .btn {
color: $white;
background-color: transparent;
border-width: 0;
}
#topsearchbox {
line-height: 24px;
height: 100%;
width: 100%;
}
.input-group > .input-group-append > .btn {
border-left: 1px solid black;
}
.algolia-autocomplete {
flex-grow: 1;
}
}
// Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: rgba(0,0,0,0.9);
border: 1px solid $gray-900;
border-radius: 8px;
}
.algolia-autocomplete .ds-dropdown-menu::before {
background-color: rgba(0,0,0,0.9);
border-color: $gray-900;
}
.algolia-docsearch-suggestion {
background-color: rgba(0,0,0,0.9);
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white;
border: 0 solid $secondary;
border-bottom-width: 1px;
font-weight: bold;
}
}
}
.navbar-brand {
text-decoration: none;
white-space: pre;
-webkit-transition: opacity 200ms ease, color 200ms ease;
transition: opacity 200ms ease, color 200ms ease;
}
.navbar-brand:hover {
opacity: 0.5;
}
.navbar .navbar-nav .nav-link {
font-size: 1rem;
line-height: 52px;
text-decoration: none;
}
.navbar .navbar-nav .nav-link:hover {
background-color: transparent;
box-shadow: inset 0 -1px 0 0 #000;
text-decoration: none;
}
.navbar .navbar-nav .active a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
.navbar .active-parent a {
font-weight: 700;
box-shadow: inset 0 -1px 0 0 #000;
}
#navbar-search {
position: relative;
margin-right: 0.375rem;
}
#navbar-search .form-inline {
min-width: 224px; /* more room for placeholder text */
}
#topsearchbar {
background-color: $black;
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white;
padding-right: 40px;
width: 100%;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: $gray-200;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white;
background-color: $green-800;
}
}
// Mobile --------------------------------------------------------------------
@media (max-width: 991px) {
.navbar-brand {
padding-left: 15px;
}
.navbar-toggler {
border: 0;
padding: 0;
&:not(.collapsed) {
// Hack: turn white hamburger to approximately $green
filter: brightness(0.5) sepia(1) saturate(5000%) hue-rotate(114deg) brightness(1.96) saturate(87%);
}
}
.navbar-nav .nav-link {
line-height: 150%;
}
.github-edit-wrap .github-edit.nav-link {
background-image: unset;
padding-left: inherit;
}
}
// Language toggle -----------------------------------------------------------
.language-selector {
font-size: 0.875rem;
}
#navbar-search .btn {
position: absolute;
right: 0;
}
/* Top navigation Mobile ----------------------------------------------------------- */
@media (max-width: 991px) {
.navbar .navbar-nav .nav-link {
height: 48px;
}
.github-edit-wrap {
margin: 20px 10px 20px 0;
}
#navbar-search .btn::after {
display: none;
}
.navbar-collapse {
background-color: white;
position: absolute;
top: 200px;
right: 0;
overflow: scroll;
width: 260px;
max-height: 60vh;
margin-right: 24px;
margin-bottom: 108px;
padding: 24px;
-webkit-box-flex: 1;
z-index: 10;
transform: translateX(1000px);
transition-duration: 1s;
}
.navbar-collapse.show {
transform: translateX(0px);
transition-duration: 0.5s;
}
.menu-overlay.active {
transform: translateX(0px);
transition-duration: 0.5s;
}
.menu-overlay {
background-color: black;
bottom: 0;
left: 0;
opacity: 0.88;
filter: alpha(opacity=80);
/* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 5;
transform: translateX(1000px);
transition-duration: 0.5s;
}
}
@media (max-width: 1010px) {
.navbar-brand,
.github-edit-wrap,
#navbar-search {
margin-right: 3px;
}
}
#navbarHolder .language-selector {
font-size: 0.875rem;
}

2
styles/xrpl.scss
View File

@@ -7,7 +7,7 @@ $navbar-nav-link-padding-x: 1.25rem;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
$dropdown-border-width: 0;
$dropdown-border-width: 1px;
// @import "_font-face.scss";
$font-family-monospace: 'Work Sans', monospace;

2
tool/template-base.html
View File

@@ -94,7 +94,7 @@
<script type="text/javascript"> docsearch({
apiKey: '70de5b9b8ef95460f3c6e04054b325b2',
indexName: 'xrpl',
inputSelector: '#topsearchbar',
inputSelector: '#topsearchbox',
algoliaOptions: { 'facetFilters': ["lang:{{target.lang}}"] },
debug: false
});

34
tool/template-footer.html
View File

@@ -15,49 +15,17 @@
{% set count = 5 %}
{% include 'template-page-children.html' %}
</div><!--/.card-body-->
<div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
</div><!--/.card -->
{% set _ = funnels.append(page.funnel) %}
{% endif %}
{% endfor %}
<div class="card">
<div class="card-header">
<h5><a href="https://ripple.com/" target="_blank">Ripple<i class="fa fa-external-link"></i></a></h5>
</div><!--/.card-header-->
<div class="card-body">
<div class="children-display">
<ul>
<li class="level-1"><a href="https://ripple.com/company/careers/" target="_blank">{% trans %}Ripple Careers{% endtrans %} <i class="fa fa-external-link"></i></a></li>
<li class="level-1"><a href="https://github.com/ripple/" target="_blank">{% trans %}Ripple on GitHub{% endtrans %} <i class="fa fa-external-link"></i></a></li>
<li class="level-1"><a href="https://ripple.com/collateral/#xrp" target="_blank">{% trans %}XRP Resources{% endtrans %} <i class="fa fa-external-link"></i></a></li>
</ul>
</div>
</div><!--/.card-body-->
<div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
</div><!--/.card -->
</section>
<section class="container-fluid p-5 pl-sm-0">
<nav role="navigation" class="d-flex mb-3 language-selector">
<img class="language_selector_icon" src="assets/img/icon-language-selector.svg" width="32" height="40" alt="language selection icon" />
<ul class="nav">
{% for lang in config.languages %}
<li class="nav-item">
{% if lang.code == target.name %}
<a class="nav-link active" href="{{lang.prefix}}{{currentpage.html}}"><i class="fa fa-check-circle"></i> {{lang.display_name}}</a>
{% else %}
<a class="nav-link" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
<div class="absolute_bottom_footer">
<span>&copy; XRP Ledger Project 2019</span>
<span>&copy; XRP Ledger Project 2020</span>
<span><a href="https://raw.githubusercontent.com/ripple/ripple-dev-portal/master/LICENSE">{% trans %}License{% endtrans %}</a></span>
</div><!-- /.absolute_bottom_footer -->

2
tool/template-landing-docs.html
View File

@@ -3,7 +3,7 @@
{% block mainclasses %}landing{% endblock %}
{% block main %}
<section class="container-fluid bg-white section-hero pb-4 pt-2">
<section class="container-fluid section-hero pb-4 pt-2">
<h1 class="main-page-header">XRP Ledger Documentation</h1>
<p class="blurb">Dive into our documentation and start integrating with the XRP Ledger.</p>
<p class="blurb">Browse by category, or skip straight to the <a href="#full-doc-index">full documentation index</a>.</p>

27
tool/template-top-nav.html
View File

@@ -1,7 +1,7 @@
<div class="container">
<nav class="navbar navbar-expand-lg row">
<nav class="top-nav navbar navbar-expand-lg navbar-dark row">
<a href="{{target.prefix}}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="44" alt="{{target.display_name}}" /></a>
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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>
<div class="collapse navbar-collapse justify-content-center" id="navbarHolder">
@@ -38,18 +38,26 @@
{% include 'template-github-edit.html' %}
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">Open Search</span></a>
<li class="nav-item dropdown" id="navbar-search">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">{% trans %}Open Search{% endtrans %}</span></a>
<div class="dropdown-menu">
<form class="navbar-form navbar-right" id="navbar-search" role="search">
<form class="navbar-form navbar-right" role="search">
<div class="form-inline">
<label class="sr-only" for="topsearchbar">{% trans %}Search site...{% endtrans %}</label>
<input id="topsearchbar" name="q" type="text" class="form-control" class="top-search" placeholder="{% trans %}Search site...{% endtrans %}">
<button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
<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>
<input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
<div class="input-group-append">
<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>
</div><!--/.dropdown-menu-->
</div><!--/.dropdown-->
</li><!--/.dropdown-->
<li class="nav-item wrap-button">
<a class="btn btn-outline-secondary nav-link" href="get-started-with-the-rippled-api.html">{% trans %}Get Started{% endtrans %}</a>
</li>
</ul><!-- /.navbar-nav -->
@@ -66,6 +74,5 @@
</div><!--/.dropdown-->
</div><!--/.language-selector-->
</div><!--/#navbarHolder-->
<div class="menu-overlay"></div>
</nav>
</div>