added responsive design

tracim/tracim/public/assets/css/dashboard.css

@@ -46,6 +46,10 @@ body {
     color: #DDD;
 }
 
+.navbar-brand {
+  padding: 0 0 0 5px;
+}
+
 /*
  * Sidebar
  */
@@ -54,36 +58,18 @@ body {
 .sidebar {
   display: none;
 }
-@media (min-width: 768px) {
-  .sidebar {
-    position: fixed;
-    top: 51px;
-    bottom: 0;
-    left: 0;
-    width: 260px;
-    z-index: 1000;
-    display: block;
-    padding: 20px;
-    overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-/*    background-color: #333;
-      color: #FFF;*/
-    background-color: #555;
-      color: #DDD;
-    border-right: 1px solid #CCC;
 
-  }
+.content__wrapper {
+  width: auto;
+  margin: 0;
 }
+
 .fixed-width-sidebar {
-  width: auto;
+  width: auto !important;
   min-width: 260px;
   max-width: 50%;
 }
 
-.content__wrapper {
-  width: auto;
-  margin: 0 260px; /* When changing this value, also change the corresponding in main.js */
-}
 .content__data {
   padding: 0 15px;
 }
@@ -93,8 +79,8 @@ body {
   right: 0;
   overflow-x: visible;
   overflow-y: auto;
-    background-color: #F5F5F5;
-    border-left: 1px solid #CCC;
+  background-color: #F5F5F5;
+  border-left: 1px solid #CCC;
 }
 .navbar-right {
   margin-right: 0px;
@@ -120,7 +106,6 @@ body {
 .header__navbar__switch-mode {
   float: right;
   display: inline-block;
-  padding: 15px;
   cursor: pointer;
 }
 .header__navbar__switch-mode > i {
@@ -468,10 +453,6 @@ span.info.readonly {
   font-size: 14px;
 }
 
-.content__home {
-  padding: 0 15px;
-}
-
 .workspace__wrapper {
   padding: 0 15px;
 }
@@ -538,6 +519,7 @@ div.mce-fullscreen {
   border-bottom-width: 0px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
+  max-width: 36%;
   text-align: center;
   font-weight: bold;
   vertical-align: bottom;
@@ -607,3 +589,143 @@ div.mce-fullscreen {
   background-color: #bce8f1;
   color: #31708f;
 }
+
+@media (max-width: 999px) {
+  body {
+    padding-top: 40px;
+  }
+  .navbar {
+    min-height: 40px;
+  }
+  .navbar, .navbar-brand > img {
+    height: 40px;
+  }
+  #search-form {
+    margin: 0;
+    padding: 8px 5px;
+  }
+  #search-form input {
+    padding: 3px 10px;
+    line-height: 15px;
+    font-size: 13px;
+    height: auto;
+  }
+  .navbar-nav > li > a, .header__navbar__switch-mode {
+    padding: 10px 5px;
+    font-size: 13px;
+    line-height: 20px;
+  }
+  #sidebar-right .btn {
+    font-size: 13px;
+    padding: 5px;
+  }
+  .content__home__tab__item, .content__home__tab__item.active {
+    padding-left: 15px;
+    padding-right: 15px;
+    max-width: 165px;
+  }
+  .content__home__tab__item-news {
+    right: -20px;
+  }
+}
+
+@media (max-width: 767px) {
+  .navbar-brand {
+    height: auto;
+  }
+  .navbar-toggle {
+    margin: 0;
+  }
+  .navbar-collapse {
+    background-color: #555;
+  }
+  .navbar-nav > li > a {
+    padding: 3px 10px;
+  }
+  #search-form {
+    padding: 8px 10px 0px 10px;
+  }
+  .navbar-nav .open .dropdown-menu > li > a {
+    color: #ddd;
+  }
+  .navbar-right {
+    margin-right: -15px;
+  }
+  .content__wrapper {
+    margin: 0;
+  }
+  .content__wrapper {
+    margin: 0;
+  }
+  .content__home__tab__item {
+    width: 32%;
+  }
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    display: block;
+    position: fixed;
+    top: 41px;
+    bottom: 0;
+    left: 0;
+    width: 130px;
+    padding: 10px;
+    z-index: 1000;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #555;
+    color: #DDD;
+    border-right: 1px solid #CCC;
+  }
+  .content__wrapper.edit-mode-margin {
+    margin: 0 130px;
+  }
+  .fixed-width-sidebar {
+    min-width: 130px;
+  }
+  .content__home {
+    padding: 0 5px;
+  }
+}
+@media (min-width: 1000px) {
+  .sidebar {
+    width: 170px;
+    top: 51px;
+  }
+  .content__wrapper.edit-mode-margin {
+    margin: 0 170px;
+  }
+  .fixed-width-sidebar {
+    min-width: 170px;
+  }
+  #sidebar-right .btn {
+    font-size: 16px;
+    padding: 10px;
+  }
+  .content__home {
+    padding: 0 5px;
+  }
+  .header__navbar__switch-mode {
+    padding: 15px;
+  }
+}
+@media (min-width: 1200px) {
+  .sidebar {
+    width: 260px;
+    padding: 20px;
+  }
+  #sidebar-right .btn {
+    font-size: 1.2em;
+    padding: 10px;
+  }
+  .content__wrapper.edit-mode-margin {
+    margin: 0 260px;
+  }
+  .fixed-width-sidebar {
+    min-width: 260px;
+  }
+  .content__home {
+    padding: 0 15px;
+  }
+}

tracim/tracim/public/assets/js/main.js

@@ -41,12 +41,12 @@ $(document).ready(function () {
   $('.header__navbar').on('click', '.header__navbar__switch-mode.switch-read-mode', function () {
     $(this).removeClass('switch-read-mode').addClass('switch-work-mode').html('<i class="fa fa-edit fa-fw"></i> ' + __('btnWorkMode'))
     $('#sidebar-left, #sidebar-right').hide()
-    $('.content__wrapper').css({margin: '0'})
+    $('.content__wrapper').removeClass('edit-mode-margin')
   })
   $('.header__navbar').on('click', '.header__navbar__switch-mode.switch-work-mode', function () {
     $(this).removeClass('switch-work-mode').addClass('switch-read-mode').html('<i class="fa fa-eye fa-fw"></i> ' + __('btnReadMode'))
     $('#sidebar-left, #sidebar-right').show()
-    $('.content__wrapper').css({margin: '0 260px'})
+    $('.content__wrapper').addClass('edit-mode-margin')
   })
 
   // add select2 for admin/workspace/<id> for user selection

tracim/tracim/templates/home.mak

@@ -40,7 +40,6 @@
             % endif
         </div>
         <div class="content__home__tab__item unread">
-            <i class="fa fa-fw fa-eye-slash"></i>${_('Not Read')}
             % if fake_api.last_unread.nb > 0:
               <div class="content__home__tab__item-news fa-stack">
                 <i class="fa fa-bookmark fa-stack-1x"></i>
@@ -53,6 +52,7 @@
                 </i>
               </div>
             % endif
+            <i class="fa fa-fw fa-eye-slash"></i>${_('Not Read')}
         </div>
         <div class="content__home__tab__item workspace">
             <i class="fa fa-bank"></i>${_('My workspaces')}

tracim/tracim/templates/index.mak

@@ -17,12 +17,12 @@
             </div>
 
             <div class="row">
-                <div class="col-sm-offset-3 col-sm-2">
+                <div class="col-sm-offset-3 col-sm-2 hidden-xs">
                     <a class="thumbnail">
                         <img src="${CFG.WEBSITE_HOME_IMAGE_URL}" alt="">
                     </a>
                     <p>${CFG.WEBSITE_HOME_TAG_LINE|n}</p>
-                    
+
 
                 </div>
                 <div class="col-sm-4">

tracim/tracim/templates/master_anonymous.mak

@@ -30,7 +30,7 @@
         <div class="container-fluid">
             ${self.main_menu()}
             ${self.content_wrapper()}
-            <div id="tracim-footer-separator"></div>
+            <div id="tracim-footer-separator hidden-xs"></div>
         </div>
         ${self.footer()}
 
@@ -67,7 +67,7 @@
 <%def name="title()"></%def>
 
 <%def name="footer()">
-    <div class="pod-footer footer hidden-tablet hidden-phone text-center">
+    <div class="pod-footer footer hidden-tablet hidden-phone text-center hidden-xs">
         <p>
             <a href="http://trac.im">${_('Create your own collaborative workspace on trac.im')}</a> &mdash;
             copyright &copy; 2013 - ${h.current_year()} tracim project.
@@ -81,13 +81,10 @@
         <div class="container-fluid">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                    <i class="fa fa-bars"></i>
                 </button>
                 <a class="navbar-brand" href="${tg.url('/')}">
-                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" style="margin: -13px 0.5em 0 -13px;"/>
+                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" />
                 </a>
             </div>
         </div>

tracim/tracim/templates/master_authenticated.mak

@@ -60,7 +60,7 @@
 <%def name="title()">  </%def>
 
 <%def name="footer()">
-    <div class="pod-footer footer hidden-tablet hidden-phone text-center">
+    <div class="pod-footer footer hidden-tablet hidden-phone text-center hidden-xs">
         <p>
             <a href="http://trac.im">${_('Create your own collaborative workspace on trac.im')}</a> &mdash;
             copyright &copy; 2013 - ${h.current_year()} tracim project.
@@ -101,15 +101,11 @@
 
         <div class="">
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                    <i class="fa fa-bars"></i>
                 </button>
                 <a class="navbar-brand" href="${tg.url('/')}">
-##                  <img src="${tg.url('/assets/img/tracim.png')}" class="pull-left" style="border: 1px solid #F5F5F5; height: 48px; margin: -13px 0.5em 0 0;"/>
-                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" style="height: 48px; margin: -13px 0.5em 0 -13px;"/>
+                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" />
                 </a>
             </div>
 
@@ -132,8 +128,8 @@
 
                         <form id="search-form" class="navbar-form navbar-left" role="search" action="${tg.url('/search?')}">
                             <div class="form-group">
-                                <input type="text" class="form-control" placeholder="${_('Search for...')}" name="keywords" value="${','.join(search.keywords) if search else ''}">
-                                <i class="fa fa-search t-less-visible" style="margin-left: -2em;" onclick="$('#search-form').submit()"></i>
+                                <input type="text" class="form-control" placeholder="${_('Search for...')}" name="keywords" value="${','.join(search.keywords) if search else ''}" />
+                                <i class="fa fa-search t-less-visible hidden-xs" style="margin-left: -2em;" onclick="$('#search-form').submit()"></i>
                             </div>
                             ## <button type="submit" class="btn btn-default">${_('Search')}</button>
                         </form>
@@ -194,7 +190,7 @@
 ##                    </li>
                 </ul>
 
-                <div class="header__navbar__switch-mode switch-read-mode">
+                <div class="header__navbar__switch-mode switch-read-mode hidden-xs">
                     ${TIM.FA('fa-eye')} ${_('Read mode')}
                 </div>
 

tracim/tracim/templates/master_authenticated_left_treeview.mak

@@ -32,7 +32,7 @@
     </div> <!-- # End of side bar right -->
     ## SIDEBAR RIGHT [END]
 
-    <div class="content__wrapper">
+    <div class="content__wrapper edit-mode-margin">
         ${self.TITLE_ROW()}
         ${self.body()}
     </div>

tracim/tracim/templates/master_authenticated_left_treeview_right_toolbar.mak

@@ -23,7 +23,7 @@
     </div> <!-- # End of side bar right -->
     ## SIDEBAR RIGHT [END]
 
-    <div class="content__wrapper">
+    <div class="content__wrapper edit-mode-margin">
         ${self.TITLE_ROW()}
         ${self.body()}
     </div>

tracim/tracim/templates/master_no_toolbar_no_login.mak

@@ -81,7 +81,7 @@
 <%def name="title()">  </%def>
 
 <%def name="footer()">
-    <div class="footer hidden-tablet hidden-phone text-center">
+    <div class="footer hidden-tablet hidden-phone text-center hidden-xs">
         <p class="pod-blue">
             <i>pod &mdash; ${_("collaborate today, capitalize for tomorrow")}</i>
 
@@ -97,13 +97,10 @@
         <div class="container-fluid">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
+                    <i class="fa fa-bars"></i>
                 </button>
                 <a class="navbar-brand" href="#">
-                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" style="border: 1px solid #F5F5F5; height: 48px; margin: -13px 0.5em 0 0;"/>
+                  <img src="${tg.url('/assets/img/logo.png')}" class="pull-left" />
                 </a>
             </div>
             <div class="navbar-collapse collapse">