Skip to content

Commit

Permalink
Merge pull request #471 from godunno/bugfix/responsive-menu
Browse files Browse the repository at this point in the history 
Adds responsive menu.
  • Loading branch information
@ltartari
ltartari committed Mar 10, 2015
2 parents 9de7ed6 + 96343df commit 30c5ccc
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 53 deletions.
50 changes: 25 additions & 25 deletions app/assets/stylesheets/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
$rem-base: 16px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import "foundation/functions";
@import 'foundation/functions';

// $experimental: true;

Expand Down Expand Up @@ -523,8 +523,8 @@ $header-font-color: $primary-color;
// $input-font-size: rem-calc(14);
// $input-bg-color: #fff;
// $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
$input-border-color: #D7D7D7;
$input-focus-border-color: #3C90C5;
$input-border-color: #d7d7d7;
$input-focus-border-color: #3c90c5;
// $input-border-style: solid;
// $input-border-width: 1px;
// $input-border-radius: $global-radius;
Expand Down Expand Up @@ -672,42 +672,42 @@ $input-focus-border-color: #3C90C5;

// $include-html-off-canvas-classes: $include-html-classes;

// $tabbar-bg: #333;
$tabbar-bg: $primary-color;
// $tabbar-height: rem-calc(45);
// $tabbar-line-height: $tabbar-height;
// $tabbar-color: #fff;
$tabbar-color: $dark-grey-color;
// $tabbar-middle-padding: 0 rem-calc(10);

// Off Canvas Divider Styles
// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);

// Off Canvas Tab Bar Headers
// $tabbar-header-color: #fff;
$tabbar-header-color: $dark-grey-color;
// $tabbar-header-weight: $font-weight-bold;
// $tabbar-header-line-height: $tabbar-height;
// $tabbar-header-margin: 0;

// Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250);
// $off-canvas-bg: #333;
$off-canvas-bg: darken($primary-color, 10%);

// Off Canvas Menu List Variables
// $off-canvas-label-padding: 0.3rem rem-calc(15);
// $off-canvas-label-color: #999;
$off-canvas-label-color: $dark-grey-color;
// $off-canvas-label-text-transform: uppercase;
// $off-canvas-label-font-weight: $font-weight-bold;
// $off-canvas-label-bg: #444;
$off-canvas-label-bg: rgba(255, 255, 255, .05);
// $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%);
// $off-canvas-label-border-bottom: none;
// $off-canvas-label-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15);
// $off-canvas-link-color: rgba(#fff, 0.7);
$off-canvas-link-color: $dark-grey-color;
// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);

// Off Canvas Menu Icon Variables
// $tabbar-menu-icon-color: #fff;
// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
$tabbar-menu-icon-color: $dark-grey-color;
$tabbar-menu-icon-hover: $dark-grey-color;

// $tabbar-menu-icon-text-indent: rem-calc(35);
// $tabbar-menu-icon-width: $tabbar-height;
Expand Down Expand Up @@ -904,7 +904,7 @@ $progress-bar-color: $background-light-grey-color;

// We use these to set the meter colors
// $progress-meter-color: $primary-color;
$progress-meter-color: #008CBA;
$progress-meter-color: #008cba;
// $progress-meter-secondary-color: $secondary-color;
// $progress-meter-success-color: $success-color;
// $progress-meter-alert-color: $alert-color;
Expand Down Expand Up @@ -1085,7 +1085,7 @@ $reveal-max-width: 100vw;
// These control the background color for the table and even rows
// $table-bg: #fff;
// $table-even-row-bg: #f9f9f9 ;
$table-even-row-bg: white;
$table-even-row-bg: $white;

// These control the table cell border style
// $table-border-style: solid;
Expand Down Expand Up @@ -1196,19 +1196,19 @@ $topbar-height: rem-calc(65);
$topbar-title-font-size: rem-calc(25);

// Style the top bar dropdown elements
$topbar-dropdown-bg: #FFF;
$topbar-dropdown-bg: $white;
$topbar-dropdown-link-color: $primary-color;
$topbar-dropdown-link-bg: #FFF;
$topbar-dropdown-link-bg: $white;
$topbar-dropdown-link-color-hover: $secondary-color;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: #000;
$topbar-dropdown-toggle-color: $black;
// $topbar-dropdown-toggle-alpha: 0.4;

// Set the link colors and styles for top-level nav
$topbar-link-color: #71797a;
$topbar-link-color-hover: #fff;
$topbar-link-color-active: #fff;
$topbar-link-color: $dark-grey-color;
$topbar-link-color-hover: $white;
$topbar-link-color-active: $white;
$topbar-link-color-active-hover: $primary-color;
// $topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(15);
Expand All @@ -1230,16 +1230,16 @@ $topbar-link-bg-hover: $primary-color;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
$topbar-dropdown-label-bg: #FFF;
$topbar-dropdown-label-bg: $white;

// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: rem-calc(13);
// $topbar-menu-link-weight: $font-weight-bold;
// $topbar-menu-link-color: #fff;
// $topbar-menu-icon-color: #fff;
// $topbar-menu-link-color-toggled: #888;
// $topbar-menu-icon-color-toggled: #888;
$topbar-menu-link-color: $dark-grey-color;
$topbar-menu-icon-color: $dark-grey-color;
$topbar-menu-link-color-toggled: $white;
$topbar-menu-icon-color-toggled: $white;

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
Expand Down
38 changes: 27 additions & 11 deletions app/views/application/_menu.html.slim
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,35 @@
nav.top-bar data-topbar=""
nav.tab-bar.show-for-small
a.left-off-canvas-toggle.menu-icon
span
| Dunno
nav.top-bar.hide-for-small data-topbar=""
.row
ul.title-area
li.name
h1
a.icons.icon-dunno-logo href="#"
section.top-bar-section
= yield
ul.left
= yield
section.top-bar-section
ul.right
li.has-dropdown.not-click
a {{currentUser().name}}
ul#profile.dropdown
li
a href="#profile/edit" Meu perfil
li
a ng-click="sign_out()" Sair
- if Rails.env.staging?
.row.alert-box.alert.text-center Não utilizar com dados reais! Este é uma versão de testes!
li
a href="#profile/edit"
| {{currentUser().name}}
li
a ng-click="sign_out()"
| Sair
aside.left-off-canvas-menu
ul.off-canvas-list
li
= yield
ul.off-canvas-list
li
label.first
| {{currentUser().name}}
li
a href="#profile/edit"
| Meu perfil
li
a ng-click="sign_out()"
| Sair
13 changes: 7 additions & 6 deletions app/views/layouts/student.html.slim
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ html lang="pt" ng-app="DunnoAppStudent"

body.student-dashboard ng-controller="ApplicationCtrl"
= render 'application/prebootstrap_loading'
= render layout: 'application/menu' do
ul class="left"
li
a href="#courses" Disciplinas

.content ng-view="" cg-busy="wholePageLoading" ng-class="controller"
.off-canvas-wrap data-offcanvas=''
.inner-wrap
= render layout: 'application/menu' do
li
a href="#courses" Disciplinas
.inner-wrap
.content ng-view="" cg-busy="wholePageLoading" ng-class="controller"

footer
/= "Copyright © #{Time.zone.now.year} Dunno".html_safe
Expand Down
26 changes: 15 additions & 11 deletions app/views/layouts/teacher.html.slim
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ html lang="pt" ng-app="DunnoApp"

title Dunno

/ TODO: remove unused fonts to improve page load performance
link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'

= stylesheet_link_tag "application", :media => "all"
Expand All @@ -14,22 +15,25 @@ html lang="pt" ng-app="DunnoApp"

body ng-controller="ApplicationCtrl"
= render 'application/prebootstrap_loading'
= render layout: 'application/menu' do
ul class="left"
li
a href="#events" Aulas
li
a href="#courses" Disciplinas
li
a href="#catalog" Catálogo
.off-canvas-wrap data-offcanvas=''
.inner-wrap
= render layout: 'application/menu' do
li
a href="#events" Aulas
li
a href="#courses" Disciplinas
li
a href="#catalog" Catálogo

.content ng-view="" cg-busy="wholePageLoading" ng-class="controller"
.content ng-view="" cg-busy="wholePageLoading" ng-class="controller"

= render partial: 'application/first_access_modal'
= render partial: 'application/first_access_modal'

footer
/= "Copyright © #{Time.zone.now.year} Dunno".html_safe
= javascript_include_tag "application"

= render 'shared/analytics'
/ TODO: load only in production
= render 'application/google_analytics'
= render 'application/mixpanel'

0 comments on commit 30c5ccc

Please sign in to comment.