Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added responsive styles and UI interactions

pull/3/head
Scott Anderson 2019-01-03 16:59:31 -07:00
parent 29da9dc357
commit c7330b6cac
14 changed files with 191 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/content-interactions.js
View File

@ -28,6 +28,14 @@ $(".children-toggle").click(function(e) {
$(this).siblings('.children').toggleClass('open');
})
//////////////////////////// Mobile Contents Toggle ////////////////////////////
$('#contents-toggle-btn').click(function(e) {
e.preventDefault();
$(this).toggleClass('open');
$('#nav-tree').toggleClass('open');
})
//////////////////////////////// Tabbed Content ////////////////////////////////
function tabbedContent(container, tab, content) {

41
assets/styles/layouts/_layout-article.scss
View File

@ -163,11 +163,12 @@
//////////////////////////////////// Tables ////////////////////////////////////
table {
display: inline-block;
margin: 1rem 0 3rem;
border-spacing: 0;
color: $article-text;
max-width: 100%;
overflow: scroll;
overflow-x: auto;
box-shadow: 1px 3px 10px $article-shadow;
border-radius: ($border-radius * 1.5);
@ -460,5 +461,41 @@
}
}
}
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(small) {
.article {
padding: 1.5rem 1.5rem 3rem;
h1 { margin: .35rem 0 2rem; font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.3rem; }
pre {
padding: 1.2em;
}
blockquote,
.note,
.warn,
#enterprise-msg {
padding: 1.35rem 1.25rem .1rem 1.25rem;
margin: .5rem 0 1rem;
}
.enterprise {
padding: 0 0 .01rem .85rem;
margin-left: -.85rem;
.enterprise-flag {
left: -.25rem;
}
}
}
}

12
assets/styles/layouts/_layout-global.scss
View File

@ -11,7 +11,7 @@
font-style: italic;
}
$klavika: 'Klavika-Light', 'Titillium Web', 'Roboto', sans-serif;
$klavika: 'Klavika-Light', 'Titillium Web', 'Roboto', sans-serif;
html {
height: 100%;
@ -35,3 +35,13 @@ a {
display: flex;
flex-grow: 1;
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(medium) {
.page-wrapper {
flex-direction: column;
}
}

89
assets/styles/layouts/_layout-sidebar.scss
View File

@ -1,7 +1,7 @@
.sidebar {
display: block;
flex-grow: 1;
padding: 0 1em 1em 1em;
padding: 0 1em;
max-width: 25%;
&--search {
@ -20,7 +20,7 @@
input {
background: $article-bg;
border-radius: $border-radius;
border: 1px solid $search-border;
border: 1px solid $sidebar-search-border;
padding: .5em 2.15rem .5rem .5rem;
width: 100%;
color: $article-text;
@ -28,8 +28,8 @@
transition-duration: .2s;
&:focus {
outline: none;
border: 1px solid $search-highlight;
box-shadow: 0px 0px 7px rgba($search-highlight, .65);
border: 1px solid $sidebar-search-highlight;
box-shadow: 0px 0px 7px rgba($sidebar-search-highlight, .65);
border-radius: $border-radius;
}
&::placeholder {
@ -40,9 +40,60 @@
}
}
.contents-toggle {
display: flex;
justify-content: space-between;
margin: .25rem 0;
color: $sidebar-contents;
font-weight: bold;
font-style: italic;
p { margin: .65rem 0 .65rem .25rem; }
#contents-toggle-btn {
margin-top: .2rem;
height: 26px;
width: 26px;
display: inline-block;
position: relative;
&:before, &:after {
content: "";
display: block;
position: absolute;
top: 13px;
right: 5px;
width: 16px;
height: 2px;
border-radius: 1px;
background: $sidebar-contents;
transition: all .3s;
}
&:before {
transform: rotate(0deg);
}
&:after {
transform: rotate(90deg)
}
&:hover {
&:before, &:after {
background: $sidebar-contents-hover;
}
}
&.open {
&:before { transform: rotate(180deg); }
&:after { transform: rotate(180deg); }
}
}
}
#nav-tree {
list-style: none;
padding-left: 1.5rem;
margin-bottom: 1rem;
ul {
list-style: none;
@ -140,3 +191,33 @@
}
}
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(medium) {
.sidebar {
max-width: 100%;
#nav-tree {
max-height: 0;
overflow: hidden;
margin: 0;
transition: max-height .2s ease-out;
&.open {
max-height: 2000px;
transition: max-height .2s ease-out;
overflow: auto;
margin-bottom: 2rem;
}
}
}
}
@include media(large_min) {
.sidebar .contents-toggle {
display: none;
}
}

18
assets/styles/layouts/_layout-topnav.scss
View File

@ -104,10 +104,13 @@
font-size: 1.8rem;
color: rgba($topnav-link, .5);
background: none;
height: 0;
height: 30px;
width: 30px;
margin-top: 2px;
border: none;
transition: color .2s;
appearance: none;
overflow: visible;
&:focus {
outline: none;
}
@ -118,9 +121,12 @@
&#theme-switch-dark { display: $theme-switch-dark; }
&#theme-switch-light { display: $theme-switch-light; }
}
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(small) {
.icon-influx-logotype { display: none; }
}

1
assets/styles/styles-default.scss
View File

@ -2,6 +2,7 @@
// Import Tools
@import "tools/icomoon";
@import "tools/media-query-mixins.scss";
// Import default dark theme
@import "themes/theme-dark.scss";

6
assets/styles/themes/_theme-dark.scss
View File

@ -26,8 +26,10 @@ $theme-switch-light: inline-block !default;
$theme-switch-dark: none !default;
// Sidebar
$search-border: $g5-pepper !default;
$search-highlight: $b-pool !default;
$sidebar-search-border: $g5-pepper !default;
$sidebar-search-highlight: $b-pool !default;
$sidebar-contents: $g9-mountain !default;
$sidebar-contents-hover: $g20-white !default;
// Article Content
$article-bg: $g3-castle !default;

6
assets/styles/themes/_theme-light.scss
View File

@ -25,8 +25,10 @@ $theme-switch-light: none;
$theme-switch-dark: inline-block;
// Sidebar
$search-border: $g15-platinum;
$search-highlight: $b-pool;
$sidebar-search-border: $g15-platinum;
$sidebar-search-highlight: $b-pool;
$sidebar-contents: $g11-sidewalk !default;
$sidebar-contents-hover: $b-pool !default;
// Article Content
$article-bg: $g20-white;

2
assets/styles/tools/_color-palette.scss
View File

@ -57,7 +57,7 @@ $p-comet: #9394FF;
$p-potassium: #B1B6FF;
$p-moonstone: #C9D0FF;
$p-quartz: #D6D5ED;
$p-violettecreme: #F2F4FF;
$p-violettecreme: #EDF0FF;
// Greens (Dark to Light)
$gr-gypsy: #152B2D;

17
assets/styles/tools/media-query-mixins.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin media($size) {
@if $size == small {
@media (max-width: 600px) { @content ; }
}
@else if $size == medium {
@media (max-width: 980px) { @content ; }
}
@else if $size == large_min {
@media (min-width: 981px) { @content ; }
}
@else if $size == large {
@media (max-width: 1280px) { @content ; }
}
@else if $size == xlarge {
@media (min-width: 1690px) { @content ; }
}
}

2
layouts/partials/footer/javascript.html
View File

@ -2,4 +2,4 @@
{{ $contentInteractions := resources.Get "js/content-interactions.js" }}
{{ $footerjs := slice $versionSelector $contentInteractions | resources.Concat "js/footer.bundle.js" }}
<script type="text/javascript" src="{{ $footerjs.Permalink }}" ></script>
<script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>

2
layouts/partials/header/javascript.html
View File

@ -3,5 +3,5 @@
{{ $themes := resources.Get "js/docs-themes.js" }}
{{ $headerjs := slice $jquery $cookies $themes | resources.Concat "js/header.bundle.js" }}
<script type="text/javascript" src="{{ $headerjs.Permalink }}" ></script>
<script type="text/javascript" src="{{ $headerjs.RelPermalink }}" ></script>
<script type="text/javascript">set_style_from_cookie();</script>

4
layouts/partials/header/stylesheets.html
View File

@ -3,7 +3,7 @@
{{ $PostCSSOptions := (dict "use" "autoprefixer" "noMap" false) }}
{{ $stylesDark := resources.Get "styles/styles-default.scss" | toCSS $cssOptionsDark | postCSS $PostCSSOptions | fingerprint }}
<link rel="stylesheet" title="dark-theme" type="text/css" href="{{ $stylesDark.Permalink }}">
<link rel="stylesheet" title="dark-theme" type="text/css" href="{{ $stylesDark.RelPermalink }}">
{{ $stylesLight := resources.Get "styles/styles-light.scss" | toCSS $cssOptionsLight | postCSS $PostCSSOptions | fingerprint }}
<link rel="alternate stylesheet" title="light-theme" type="text/css" href="{{ $stylesLight.Permalink }}">
<link rel="alternate stylesheet" title="light-theme" type="text/css" href="{{ $stylesLight.RelPermalink }}">

5
layouts/partials/sidebar.html
View File

@ -14,6 +14,11 @@
placeholder="Search {{ $currentVersion }}">
</div>
<div class="contents-toggle">
<p>Contents</p>
<a id="contents-toggle-btn" href="#"></a>
</div>
<ul id="nav-tree">
{{ $menuID := replaceRE "[.]" "_" $currentVersion }}