From 81d7582317926f239f080a4930cfca7dca70f815 Mon Sep 17 00:00:00 2001
From: Felix Gliesche <felix.gliesche@plan.io>
Date: Fri, 22 May 2015 19:17:18 +0200
Subject: [PATCH] Responsive layout

---
 app/helpers/application_helper.rb |   3 +-
 app/views/layouts/base.html.erb   |  44 ++-
 public/javascripts/responsive.js  |  83 ++++++
 public/stylesheets/responsive.css | 595 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 723 insertions(+), 2 deletions(-)
 create mode 100644 public/javascripts/responsive.js
 create mode 100644 public/stylesheets/responsive.css
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3f607b8..34e51cb 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -337,6 +337,7 @@ module ApplicationHelper
         { :value => project_path(:id => p, :jump => current_menu_item) }
       end

+      content_tag( :span, nil, :class => 'jump-box-arrow') +
       select_tag('project_quick_jump_box', options, :onchange => 'if (this.value != \'\') { window.location = this.value; }')
     end
   end
@@ -1256,7 +1257,7 @@ module ApplicationHelper

   # Returns the javascript tags that are included in the html layout head
   def javascript_heads
-    tags = javascript_include_tag('jquery-1.11.1-ui-1.11.0-ujs-3.1.3', 'application')
+    tags = javascript_include_tag('jquery-1.11.1-ui-1.11.0-ujs-3.1.3', 'application', 'responsive')
     unless User.current.pref.warn_on_leaving_unsaved == '0'
       tags << "\n".html_safe + javascript_tag("$(window).load(function(){ warnLeavingUnsaved('#{escape_javascript l(:text_warn_on_leaving_unsaved)}'); });")
     end
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 434f46c..b8cafa1 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -3,11 +3,12 @@
 <head>
 <meta charset="utf-8" />
 <title><%= html_title %></title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="<%= Redmine::Info.app_name %>" />
 <meta name="keywords" content="issue,bug,tracker" />
 <%= csrf_meta_tag %>
 <%= favicon %>
-<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', :media => 'all' %>
+<%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %>
 <%= stylesheet_link_tag 'rtl', :media => 'all' if l(:direction) == 'rtl' %>
 <%= javascript_heads %>
 <%= heads_for_theme %>
@@ -17,6 +18,44 @@
 </head>
 <body class="<%= body_css_classes %>">
 <div id="wrapper">
+
+<div class="flyout-menu js-flyout-menu">
+
+
+    <% if User.current.logged? || !Setting.login_required? %>
+        <div class="flyout-menu__search">
+            <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
+            <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
+            <%= label_tag 'flyout-search', '&#9906;'.html_safe, :class => 'search-magnifier search-magnifier--flyout' %>
+            <%= text_field_tag 'q', @question, :id => 'flyout-search', :class => 'small js-search-input', :placeholder => l(:label_search) %>
+            <% end %>
+        </div>
+    <% end %>
+
+    <% if User.current.logged? %>
+        <div class="flyout-menu__avatar <% if !Setting.gravatar_enabled? %>flyout-menu__avatar--no-avatar<% end %>">
+            <% if Setting.gravatar_enabled? %>
+                <%= link_to(avatar(User.current, :size => "80"), user_path(User.current)) %>
+            <% end %>
+            <%= link_to_user(User.current, :format => :username) %>
+        </div>
+    <% end %>
+
+    <% if display_main_menu?(@project) %>
+        <h3><%= l(:label_project) %></h3>
+        <span class="js-project-menu"></span>
+    <% end %>
+
+    <h3><%= l(:label_general) %></h3>
+    <span class="js-general-menu"></span>
+
+    <span class="js-sidebar flyout-menu__sidebar"></span>
+
+    <h3><%= l(:label_profile) %></h3>
+    <span class="js-profile-menu"></span>
+
+</div>
+
 <div id="wrapper2">
 <div id="wrapper3">
 <div id="top-menu">
@@ -28,6 +67,9 @@
 </div>

 <div id="header">
+
+    <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a>
+
     <% if User.current.logged? || !Setting.login_required? %>
     <div id="quick-search">
         <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
diff --git a/public/javascripts/responsive.js b/public/javascripts/responsive.js
new file mode 100644
index 0000000..4c6c3be
--- /dev/null
+++ b/public/javascripts/responsive.js
@@ -0,0 +1,83 @@
+// generic layout specific responsive stuff goes here
+
+function openFlyout() {
+  $('html').addClass('flyout-is-active');
+  $('#wrapper2').on('click', function(e){
+    e.preventDefault();
+    e.stopPropagation();
+    closeFlyout();
+  });
+}
+
+function closeFlyout() {
+  $('html').removeClass('flyout-is-active');
+  $('#wrapper2').off('click');
+}
+
+
+function isMobile() {
+  return $('.js-flyout-menu-toggle-button').is(":visible");
+}
+
+function setupFlyout() {
+  var mobileInit = false,
+    desktopInit = false;
+
+  /* click handler for mobile menu toggle */
+  $('.js-flyout-menu-toggle-button').on('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if($('html').hasClass('flyout-is-active')) {
+      closeFlyout();
+    } else {
+      openFlyout();
+    }
+  });
+
+  /* bind resize handler */
+  $(window).resize(function() {
+    initMenu();
+  })
+
+  /* menu init function for dom detaching and appending on mobile / desktop view */
+  function initMenu() {
+
+    var _initMobileMenu = function() {
+      /* only init mobile menu, if it hasn't been done yet */
+      if(!mobileInit) {
+
+        $('#main-menu > ul').detach().appendTo('.js-project-menu');
+        $('#top-menu > ul').detach().appendTo('.js-general-menu');
+        $('#sidebar > *').detach().appendTo('.js-sidebar');
+        $('#account ul').detach().appendTo('.js-profile-menu');
+
+        mobileInit = true;
+        desktopInit = false;
+      }
+    }
+
+    var _initDesktopMenu = function() {
+      if(!desktopInit) {
+
+        $('.js-project-menu > ul').detach().appendTo('#main-menu');
+        $('.js-general-menu ul').detach().appendTo('#top-menu');
+        $('.js-sidebar > *').detach().appendTo('#sidebar');
+        $('.js-profile-menu ul').detach().appendTo('#account');
+
+        desktopInit = true;
+        mobileInit = false;
+      }
+    }
+
+    if(isMobile()) {
+      _initMobileMenu();
+    } else {
+      _initDesktopMenu();
+    }
+  }
+
+  // init menu on page load
+  initMenu();
+}
+
+$(document).ready(setupFlyout);
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
new file mode 100644
index 0000000..a01d126
--- /dev/null
+++ b/public/stylesheets/responsive.css
@@ -0,0 +1,595 @@
+/*----------------------------------------*\
+  RESPONSIVE CSS
+\*----------------------------------------*/
+
+
+/*
+
+    CONTENTS
+
+    A) BASIC MOBILE RESETS
+    B) HEADER & TOP MENUS
+    C) MAIN CONTENT & SIDEBAR
+    D) TOGGLE BUTTON & FLYOUT MENU
+
+*/
+
+
+/* Hide new elements (toggle button and flyout menu) above 900px */
+.mobile-toggle-button,
+.flyout-menu
+{
+    display: none;
+}
+
+/*
+    redmine's body is set to min-width: 900px
+    add first breakpoint here and start adding responsiveness
+*/
+
+@media all and (max-width: 899px)
+{
+    /*----------------------------------------*\
+        A) BASIC MOBILE RESETS
+    \*----------------------------------------*/
+
+    /*
+        apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+        this helps us to better deal with percentages and padding / margin
+    */
+    *,
+    *:before,
+    *:after
+    {
+        -webkit-box-sizing: border-box;
+           -moz-box-sizing: border-box;
+                box-sizing: border-box;
+    }
+
+    body,
+    html
+    {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    html
+    {
+        overflow-y: auto; /* avoid 2nd scrollbar on desktop */
+    }
+
+    body
+    {
+        overflow-x: hidden; /* hide horizontal overflow */
+
+        min-width: 0; /* reset the min-width of 900px */
+    }
+
+
+    body,
+    input,
+    select,
+    textarea,
+    button
+    {
+        font-size: 14px;  /* Set font-size for standard elements to 14px */
+    }
+
+
+    select
+    {
+        max-width: 100%;  /* prevent long names within select menues from breaking content */
+    }
+
+
+    #wrapper
+    {
+        position: relative;
+
+        max-width: 100%;
+    }
+
+    #wrapper,
+    #wrapper2
+    {
+        margin: 0;
+    }
+
+    /*----------------------------------------*\
+        B) HEADER & TOP MENUS
+    \*----------------------------------------*/
+
+    #header
+    {
+        width: 100%;
+        height: 64px; /* the height of our header on mobile */
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+
+        border: none;
+        background-color: #628db6;
+    }
+
+    /* Hide project name on mobile (project name is still visible in select menu) */
+    #header h1
+    {
+        display: none !important;
+    }
+
+    /* reset #header a color for mobile toggle button */
+    #header a.mobile-toggle-button
+    {
+        color: #f8f8f8;
+    }
+
+
+    /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
+    #top-menu,
+    #header #main-menu
+    {
+        display: none;
+    }
+
+    /* the quick search within header holding search form and #project_quick_jump_box box*/
+    #header #quick-search
+    {
+        float: none;
+        clear: none; /* there are themes which set clear property, this resets it */
+
+        max-width: 100%; /* reset max-width */
+        margin: 0;
+
+        background: inherit;
+    }
+
+    /* this represents the dropdown arrow to left of the mobile project menu */
+    #header .jump-box-arrow:before
+    {
+        /* set a font-size in order to achive same result in different themes */
+        font-family: Verdana, sans-serif;
+        font-size: 2em;
+        line-height: 64px;
+
+        position: absolute;
+        left: 0;
+
+        width: 2em;
+        padding: 0 .5em;
+        /* achieve dropdwon arrow by scaling a caret character */
+
+        content: '^';
+        -webkit-transform: scale(1,-.8);
+            -ms-transform: scale(1,-.8);
+                transform: scale(1,-.8);
+        text-align: right;
+        pointer-events: none;
+
+        opacity: .6;
+    }
+
+    /* styles for combobox within quick-search (#project_quick_jump_box) */
+    #header #quick-search select
+    {
+        font-size: 1.5em;
+        font-weight: bold;
+        line-height: 1.2;
+
+        position: absolute;
+        top: 15px;
+        left: 0;
+
+        float: left;
+
+        width: 100%;
+        max-width: 100%;
+        height: 2em;
+        height: 35px;
+        padding: 5px;
+        padding-right: 72px;
+        padding-left: 50px;
+
+        text-indent: .01px;
+
+        color: inherit;
+        border: 0;
+        -webkit-border-radius: 0;
+                border-radius: 0;
+        background: none;
+        -webkit-box-shadow: none;
+                box-shadow: none;
+        /* hide default browser arrow */
+
+        -webkit-appearance: none;
+           -moz-appearance: none;
+    }
+
+    #header #quick-search form
+    {
+        display: none;
+    }
+
+    /*----------------------------------------*\
+        C) MAIN CONTENT & SIDEBAR
+    \*----------------------------------------*/
+
+    #main
+    {
+        padding: 0;
+    }
+
+    #main.nosidebar #content,
+    div#content
+    {
+        width: 100%;
+        min-height: 0; /* reset min-height of #content */
+        margin: 0;
+    }
+
+
+    /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
+    #sidebar,
+    #sidebar-switch-panel
+    {
+        display: none;
+    }
+
+    .splitcontentleft
+    {
+        width: 100%; /* use full width */
+    }
+
+    .splitcontentright
+    {
+        width: 100%; /* use full width */
+    }
+
+    /*----------------------------------------*\
+        D) TOGGLE BUTTON & FLYOUT MENU
+    \*----------------------------------------*/
+
+    /* Mobile toggle button */
+
+    .mobile-toggle-button
+    {
+        font-size: 42px;
+        line-height: 64px;
+
+        position: relative;
+        z-index: 10;
+
+        display: block; /* remove display: none; of non-mobile version */
+        float: right;
+
+        width: 60px;
+        height: 64px;
+        margin-top: 0;
+
+        text-align: center;
+
+        border-left: 1px solid #ddd;
+    }
+
+    .mobile-toggle-button:hover,
+    .mobile-toggle-button:active
+    {
+        text-decoration: none;
+    }
+
+    .mobile-toggle-button:after
+    {
+        font-family: Verdana, sans-serif;
+
+        display: block;
+
+        margin-top: -3px;
+
+        content: '\2261';
+    }
+
+    /* search magnifier icon */
+    .search-magnifier
+    {
+        font-family: Verdana;
+
+        cursor: pointer;
+        -webkit-transform: rotate(-45deg);
+           -moz-transform: rotate(45deg);
+             -o-transform: rotate(45deg);
+
+        color: #bbb;
+    }
+
+    .search-magnifier--flyout
+    {
+        font-size: 25px;
+        line-height: 54px;
+
+        position: absolute;
+        z-index: 1;
+        left: 12px;
+    }
+
+
+    /* Flyout Menu */
+
+    .flyout-menu
+    {
+        position: absolute;
+        right: -250px;
+
+        display: block; /* remove display: none; of non-mobile version */
+        overflow-x: hidden;
+
+        width: 250px;
+        height: 100%;
+        margin: 0;      /* reset margin for themes that define it */
+        padding: 0;     /* reset padding for themes that define it */
+
+        color: white;
+        background-color: #3e5b76;
+    }
+
+
+    /* avoid zoom on search input focus for ios devices */
+    .flyout-menu input[type='text']
+    {
+        font-size: 16px;
+    }
+
+    .flyout-menu h3
+    {
+        font-size: 11px;
+        line-height: 19px;
+
+        height: 20px;
+        margin: 0;
+        padding: 0;
+
+        letter-spacing: .1em;
+        text-transform: uppercase;
+
+        color: white;
+        border-top: 1px solid #506a83;
+        border-bottom: 1px solid #506a83;
+        background-color: #628db6;
+    }
+
+    .flyout-menu h4
+    {
+        color: white;
+    }
+
+    .flyout-menu h3,
+    .flyout-menu h4,
+    .flyout-menu > p,
+    .flyout-menu > a,
+    .flyout-menu ul li a,
+    .flyout-menu__search,
+    .flyout-menu__sidebar > div,
+    .flyout-menu__sidebar > p,
+    .flyout-menu__sidebar > a,
+    .flyout-menu__sidebar > form,
+    .flyout-menu > div,
+    .flyout-menu > form
+    {
+        padding-left: 8px;
+    }
+
+    .flyout-menu .flyout-menu__avatar
+    {
+        margin-top: -1px; /* move avatar up 1px */
+        padding-left: 0;
+    }
+
+    .flyout-menu__sidebar > form
+    {
+        display: block;
+    }
+
+    .flyout-menu__sidebar > form h3
+    {
+        margin-left: -8px;
+    }
+
+    .flyout-menu__sidebar > form label
+    {
+        display: inline-block;
+
+        margin: 8px 0;
+    }
+
+    .flyout-menu__sidebar > form br  br
+    {
+        display: none;
+    }
+
+    .flyout-menu ul
+    {
+        margin: 0;
+        padding: 0;
+
+        list-style: none;
+    }
+
+    .flyout-menu ul li a
+    {
+        line-height: 40px;
+
+        display: block;
+        overflow: hidden;
+
+        height: 40px;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        border-top: 1px solid rgba(255,255,255,.1);
+    }
+
+    .flyout-menu ul li:first-child a
+    {
+        line-height: 39px;
+
+        height: 39px;
+
+        border-top: none;
+    }
+
+    .flyout-menu a
+    {
+        color: white;
+    }
+
+    .flyout-menu ul li a:hover
+    {
+        text-decoration: none;
+    }
+
+    .flyout-menu ul li a.new-object,
+    .new-object ~ .menu-children
+    {
+        display: none;
+    }
+
+    /* Left flyout search container */
+    .flyout-menu__search
+    {
+        line-height: 54px;
+
+        height: 64px;
+        padding-top: 3px;
+        padding-right: 8px;
+    }
+
+    .flyout-menu__search input[type='text']
+    {
+        line-height: 2;
+
+        width: 100%;
+        height: 38px;
+        padding-left: 27px;
+
+        vertical-align: middle;
+
+        border: none;
+        -webkit-border-radius: 3px;
+                border-radius: 3px;
+        background-color: #fff;
+    }
+
+    .flyout-menu__avatar
+    {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+
+        width: 100%;
+
+        border-top: 1px solid rgba(255,255,255,.1);
+    }
+
+
+    .flyout-menu__avatar img.gravatar
+    {
+        width: 40px;
+        height: 40px;
+        padding: 0;
+
+        vertical-align: top;
+
+        border-width: 0;
+    }
+
+    .flyout-menu__avatar a
+    {
+        line-height: 40px;
+
+        height: auto;
+        height: 40px;
+
+        text-decoration: none;
+
+        color: white;
+    }
+
+    /* avatar */
+    .flyout-menu__avatar a:first-child
+    {
+        line-height: 0;
+
+        width: 40px;
+        padding: 0;
+    }
+
+    .flyout-menu__avatar .user
+    {
+        padding-left: 15px;
+    }
+
+    /* user link when no avatar is present */
+    .flyout-menu__avatar--no-avatar a.user
+    {
+        line-height: 40px;
+
+        padding-left: 8px;
+    }
+
+
+    .flyout-is-active body
+    {
+        overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
+    }
+
+    html.flyout-is-active
+    {
+        overflow: hidden;
+    }
+
+
+    .flyout-is-active  #wrapper
+    {
+        right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */
+
+        height: 100%;
+    }
+
+    .flyout-is-active .mobile-toggle-button:after
+    {
+        content: '\00D7'; /* close glyph */
+    }
+
+    .flyout-is-active #wrapper2
+    {
+
+    /*
+     * only relevant for devices with cursor when flyout it active, in order to show,
+     * that whole wrapper content is clickable and closes flyout menu
+     */
+        cursor: pointer;
+    }
+
+
+    #admin-menu
+    {
+        padding-left: 0;
+    }
+
+    #admin-menu li
+    {
+        padding-bottom: 0;
+    }
+
+    #admin-menu a,
+    #admin-menu a.selected
+    {
+        line-height: 40px;
+
+        padding: 0;
+        padding-left: 32px !important;
+
+        background-position: 8px 50%;
+    }
+}
--
1.9.3 (Apple Git-50)

