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

Improve 3-col layout on narrow viewports

Browse Source
This commit is contained in:
mDuo13
2018-04-25 16:48:07 -07:00
parent c87f79174e
commit 9c8ffdf7c5
2 changed files with 16 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/devportal.css
View File

@@ -372,12 +372,6 @@ pre code {
list-style-type: none; list-style-type: none;
} }
.dev_nav_wrapper {
position: fixed;
width: 100%;
overflow-y: scroll;
top: 130px;
}
td { td {
border: 1px solid #dbdde2; border: 1px solid #dbdde2;
padding: 0.2em; padding: 0.2em;
@@ -713,17 +707,17 @@ th {
max-height: calc(100% - 150px); max-height: calc(100% - 150px);
max-width: 16.66667%; max-width: 16.66667%;
overflow: auto; overflow: auto;
z-index: 10;
} }
/* Responsive design for different viewscreens -------------------------------*/ /* Responsive design for different viewscreens -------------------------------*/
@media (max-width: 768px) { @media (max-width: 768px) {
.dev_nav_wrapper, #page-toc-wrapper {
.sidebar { position: static;
display: block; display: block;
clear: both; clear: both;
overflow-y: inherit; overflow-y: inherit;
position: static;
max-width: 100%; max-width: 100%;
} }
.main { .main {
@@ -799,17 +793,6 @@ th {
#goog-gt-tt { #goog-gt-tt {
display: none; 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 { h1 {
page-break-before: always; page-break-before: always;
} }

22
tool/template-base.html
View File

@@ -70,22 +70,26 @@
<div class="container-fluid" role="document" id="main_content_wrapper"> <div class="container-fluid" role="document" id="main_content_wrapper">
<div class="row"> <div class="row">
{% if currentpage.sidebar != "disabled" %} <!-- Right sidebar first so it's at the beginning for mobile layouts -->
<aside class="sidebar col-md-3 col-xl-2 p-0" role="complementary"> {% if currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only" %}
{% block left_sidebar %} <aside class="right-sidebar col-md-3 col-xl-2 p-0 order-md-last" role="complementary">
{% include "template-sidebar_nav.html" %} {% block right_sidebar %}{% endblock %}
{% endblock %}
</aside> </aside>
{% endif %} {% endif %}
<main class="main {% if currentpage.sidebar == "left_only" %}col-md-9 col-xl-10{% elif currentpage.sidebar == "disabled" %}col-md-12 col-xl-12{% else %}col-md-6 col-xl-8{% endif %} p-0" role="main" id="main_content_body">
<!-- main column -->
<main class="main {% if currentpage.sidebar == "left_only" %}col-md-8 col-xl-10{% elif currentpage.sidebar == "disabled" %}col-md-12 col-xl-12{% else %}col-md-6 col-xl-8{% endif %} p-0" role="main" id="main_content_body">
{% block breadcrumbs %} {% block breadcrumbs %}
{% include 'template-breadcrumbs.html' %} {% include 'template-breadcrumbs.html' %}
{% endblock %} {% endblock %}
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
{% if currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only" %} {% if currentpage.sidebar != "disabled" %}
<aside class="right-sidebar col-md-3 col-xl-2 p-0" role="complementary"> <!-- Left sidebar last so it's at the end for mobile -->
{% block right_sidebar %}{% endblock %} <aside class="sidebar col-md-3 col-xl-2 p-0 order-md-first" role="complementary">
{% block left_sidebar %}
{% include "template-sidebar_nav.html" %}
{% endblock %}
</aside> </aside>
{% endif %} {% endif %}
</div> </div>