dan/api_docs
1
0
Fork 0
mirror of https://github.com/danbulant/api_docs synced 2026-05-26 13:22:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add language tabs to navbar on phone

Browse source
This commit is contained in:
Robert Lord 2014-06-12 01:32:25 -07:00
parent d77f1e7b9f
commit 1478579c59
3 changed files with 56 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/javascripts/app/lang.js
View file

@ -22,8 +22,8 @@ under the License.
function activateLanguage(language) { function activateLanguage(language) {
if (!language) return; if (!language) return;
$("#lang-selector a").removeClass('active'); $(".lang-selector a").removeClass('active');
$("#lang-selector a[data-language-name='" + language + "']").addClass('active'); $(".lang-selector a[data-language-name='" + language + "']").addClass('active');
for (var i=0; i < languages.length; i++) { for (var i=0; i < languages.length; i++) {
$(".highlight." + languages[i]).hide(); $(".highlight." + languages[i]).hide();
} }
@ -66,7 +66,7 @@ under the License.
// if we click on a language tab, activate that language // if we click on a language tab, activate that language
$(function() { $(function() {
$("#lang-selector a").on("click", function() { $(".lang-selector a").on("click", function() {
var language = $(this).data("language-name"); var language = $(this).data("language-name");
pushURL(language); pushURL(language);
activateLanguage(language); activateLanguage(language);

13
source/layouts/layout.erb
View file

@ -47,6 +47,17 @@ under the License.
</a> </a>
<div class="tocify-wrapper"> <div class="tocify-wrapper">
<%= image_tag "logo.png" %> <%= image_tag "logo.png" %>
<% if language_tabs %>
<div class="lang-selector">
<% language_tabs.each do |lang| %>
<% if lang.is_a? Hash %>
<a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>
<% else %>
<a href="#" data-language-name="<%= lang %>"><%= lang %></a>
<% end %>
<% end %>
</div>
<% end %>
<% if current_page.data.search %> <% if current_page.data.search %>
<div class="search"> <div class="search">
<input type="text" class="search" id="input-search"> <input type="text" class="search" id="input-search">
@ -73,7 +84,7 @@ under the License.
</div> </div>
<div class="dark-box"> <div class="dark-box">
<% if language_tabs %> <% if language_tabs %>
<div id="lang-selector"> <div class="lang-selector">
<% language_tabs.each do |lang| %> <% language_tabs.each do |lang| %>
<% if lang.is_a? Hash %> <% if lang.is_a? Hash %>
<a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a> <a href="#" data-language-name="<%= lang.keys.first %>"><%= lang.values.first %></a>

67
source/stylesheets/screen.css.scss
View file

@ -42,7 +42,7 @@ html, body {
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
.tocify-wrapper { .tocify-wrapper {
@include transition(width ease-in-out 0.3s); @include transition(left ease-in-out 0.3s);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: fixed; position: fixed;
@ -55,6 +55,10 @@ html, body {
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
.lang-selector {
display: none; // only on mobile
}
// This is the logo at the top of the ToC // This is the logo at the top of the ToC
&>img { &>img {
display: block; display: block;
@ -244,38 +248,41 @@ html, body {
bottom: 0; bottom: 0;
} }
#lang-selector { .lang-selector {
position: fixed; position: fixed;
width: 100%;
z-index: 50; z-index: 50;
font-weight: bold;
background-color: $lang-select-bg;
border-bottom: 5px solid $lang-select-active-bg; border-bottom: 5px solid $lang-select-active-bg;
a { }
display: block; }
float:left;
color: $lang-select-text;
text-decoration: none;
padding: 0 10px;
line-height: 30px;
&:active { .lang-selector {
background-color: $lang-select-pressed-bg; background-color: $lang-select-bg;
color: $lang-select-pressed-text; width: 100%;
} font-weight: bold;
a {
display: block;
float:left;
color: $lang-select-text;
text-decoration: none;
padding: 0 10px;
line-height: 30px;
&.active { &:active {
background-color: $lang-select-active-bg; background-color: $lang-select-pressed-bg;
color: $lang-select-active-text; color: $lang-select-pressed-text;
}
} }
&:after { &.active {
content: ''; background-color: $lang-select-active-bg;
clear: both; color: $lang-select-active-text;
display: block;
} }
} }
&:after {
content: '';
clear: both;
display: block;
}
} }
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
@ -534,10 +541,10 @@ html, body {
@media (max-width: $tablet-width) { @media (max-width: $tablet-width) {
.tocify-wrapper { .tocify-wrapper {
width: 0; left: -$nav-width;
&.open { &.open {
width: $nav-width; left: 0;
} }
} }
@ -559,6 +566,14 @@ html, body {
margin-right: 0; margin-right: 0;
} }
.tocify-wrapper .lang-selector {
display: block;
}
.page-wrapper .lang-selector {
display: none;
}
%right-col { %right-col {
width: auto; width: auto;
float: none; float: none;