dan/api_docs
1
0
Fork 0
mirror of https://github.com/danbulant/api_docs synced 2026-05-21 21:28:52 +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) {
if (!language) return;
$("#lang-selector a").removeClass('active');
$("#lang-selector a[data-language-name='" + language + "']").addClass('active');
$(".lang-selector a").removeClass('active');
$(".lang-selector a[data-language-name='" + language + "']").addClass('active');
for (var i=0; i < languages.length; i++) {
$(".highlight." + languages[i]).hide();
}
@ -66,7 +66,7 @@ under the License.
// if we click on a language tab, activate that language
$(function() {
$("#lang-selector a").on("click", function() {
$(".lang-selector a").on("click", function() {
var language = $(this).data("language-name");
pushURL(language);
activateLanguage(language);

13
source/layouts/layout.erb
View file

@ -47,6 +47,17 @@ under the License.
</a>
<div class="tocify-wrapper">
<%= 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 %>
<div class="search">
<input type="text" class="search" id="input-search">
@ -73,7 +84,7 @@ under the License.
</div>
<div class="dark-box">
<% if language_tabs %>
<div id="lang-selector">
<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>

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

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