fix design for tabs in home page in mobile view + fixed font awesome icons size

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

 .navbar-right {
   margin-right: 0px;
 }
+.dropdown-toggle {
+  margin-right: 15px;
+}
 
 /* Sidebar navigation */
 .nav-sidebar {
   .navbar-nav .open .dropdown-menu > li > a {
     color: #ddd;
   }
+  .navbar-toggle {
+    margin-right: 15px;
+  }
   .navbar-right {
     margin-right: -15px;
   }
   .content__wrapper {
     margin: 0;
   }
+  .content__title__subtitle-home-hidden-xs > div > p { /* remove the "welcome username" msg from homepage  */
+    display: none;
+  }
   .content__home__tab__item {
-    width: 32%;
+    display: block;
+    width: auto;
+    max-width: 100%;
+    border-radius: 0px;
+  }
+  .content__home__tab__item, .content__home__tab__item.active {
+    max-width: 100%;
+    border: 0px;
+  }
+  .content__home__tab-wrapper {
+    border: 10px solid;
+    border-width: 0px 0px 0px 10px;
+  }
+  .content__home__tab-wrapper.recent_activity {
+    border-color: #faebcc;
+  }
+  .content__home__tab-wrapper.unread {
+    border-color: #d6e9c6;
+  }
+  .content__home__tab-wrapper.workspace {
+    border-color: #bce8f1;
+  }
+  .panel-warning, .panel-success, .panel-info {
+    border-top-width: 0px;
+    border-left-width: 10px;
   }
 }
 

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

     $('.content__home__tab__item.unread, .content__home__tab__item.recent_activity, .content__home__tab__item.workspace').removeClass('active')
     homeTabList.forEach(function (item) { $(item).css('display', 'none') })
   })
-  $('.content__home__tab__item.unread').click(function () {
-    $(this).addClass('active')
-    $('#unread-content-panel').css('display', 'block') })
   $('.content__home__tab__item.recent_activity').click(function () {
-    $(this).addClass('active')
+    $(this).addClass('active').parent().removeClass('unread recent_activity workspace').addClass('recent_activity')
     $('#recent-activity-panel').css('display', 'block')
   })
+  $('.content__home__tab__item.unread').click(function () {
+    $(this).addClass('active').parent().removeClass('unread recent_activity workspace').addClass('unread')
+    $('#unread-content-panel').css('display', 'block')
+  })
   $('.content__home__tab__item.workspace').click(function () {
-    $(this).addClass('active')
+    $(this).addClass('active').parent().removeClass('unread recent_activity workspace').addClass('workspace')
     $('#workspaces-panel').css('display', 'block')
   })
 

tracim/tracim/templates/home.mak

 
 <%def name="TITLE_ROW()">
     <div class="content__title">
-        ${ROW.TITLE_ROW(_('My Dashboard'), 'fa-home', '', 't-user-color', _('Welcome to your home, {username}.').format(username=fake_api.current_user.name))}
+        ${ROW.TITLE_ROW(_('My Dashboard'), 'fa-home', 'content__title__subtitle-home-hidden-xs', 't-user-color', _('Welcome to your home, {username}.').format(username=fake_api.current_user.name))}
     </div>
 </%def>
 
 </%def>
 
 <div class="content__home">
-    <div class="content__home__tab-wrapper">
+    <div class="content__home__tab-wrapper recent_activity">
         <div class="content__home__tab__item recent_activity active">
             <i class="fa fa-fw fa-line-chart"></i>${_('Recent Activity')}
             % if fake_api.last_actives.contents[0]:

tracim/tracim/templates/master_authenticated.mak

                             <a href="${tg.url('/home')}">${TIM.FA('fa-home fa-lg')} ${_('My Home')}</a>
                         </li>
                         <li class="header__navbar__list__item">
-                            <a href="${tg.url('/calendar')}">${TIM.FA('fa-calendar')} ${_('Calendar')}</a>
+                            <a href="${tg.url('/calendar')}">${TIM.FA('fa-calendar fa-fw')} ${_('Calendar')}</a>
                         </li>
                         ${NAVBAR_MENU.ADMIN_ITEMS()}
                     </ul>
 
                         % if fake_api.current_user.profile.id>=8: #2:
                             <li class="dropdown">
-                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">${TIM.FA('fa-lg fa-cogs')} ${_('Admin')} <b class="caret"></b></a>
+                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">${TIM.FA('fa-lg fa-cogs fa-fw')} ${_('Admin')} <b class="caret"></b></a>
                               <ul class="dropdown-menu">
-                                <li><a href="${tg.url('/admin/users')}">${TIM.FA('fa-users tracim-less-visible')} ${_('Users')}</a></li>
-                                <li><a href="${tg.url('/admin/workspaces')}">${TIM.FA('fa-bank tracim-less-visible')} ${_('Workspaces')}</a></li>
+                                <li><a href="${tg.url('/admin/users')}">${TIM.FA('fa-users fa-fw tracim-less-visible')} ${_('Users')}</a></li>
+                                <li><a href="${tg.url('/admin/workspaces')}">${TIM.FA('fa-bank fa-fw tracim-less-visible')} ${_('Workspaces')}</a></li>
 ## TODO - D.A. - 2014-10-20 - Restore global configuration screen
 ##                                <li class="divider" role="presentation"></li>
 ##                                <li><a href="${tg.url('/admin/configuration')}">${TIM.ICO(16, 'categories/preferences-system')} ${_('Global configuration')}</a></li>
 
                         % if False and h.is_debug_mode():
                             <li class="dropdown text-danger" >
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">${TIM.FA('fa-warning t-orange')} Debug <b class="caret"></b></a>
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">${TIM.FA('fa-warning t-orange fa-fw')} Debug <b class="caret"></b></a>
                                 <ul class="dropdown-menu">
                                     <li><a class="text-danger" href=""><strong>${_('you MUST desactivate debug in production')}</strong></a></li>
                                     <li class="divider" role="presentation"></li>
                                     <li><a href="${tg.url('/debug/environ')}">${TIM.FA('fa-globe fa-fw t-less-visible')} request.environ</a></li>
                                     <li><a href="${tg.url('/debug/identity')}">${TIM.FA('fa-user fa-fw t-less-visible')} request.identity</a></li>
                                     <li class="divider" role="presentation"></li>
-                                    <li><a href="${tg.url('/debug/iconset-fa')}">${TIM.FA('fa-file-image-o t-less-visible')} Icon set - Font Awesome</a></li>
-                                    <li><a href="${tg.url('/debug/iconset-tango')}">${TIM.FA('fa-file-image-o t-less-visible')} Icon set - Tango Icons</a></li>
+                                    <li><a href="${tg.url('/debug/iconset-fa')}">${TIM.FA('fa-file-image-o fa-fw t-less-visible')} Icon set - Font Awesome</a></li>
+                                    <li><a href="${tg.url('/debug/iconset-tango')}">${TIM.FA('fa-file-image-o fa-fw t-less-visible')} Icon set - Tango Icons</a></li>
                                 </ul>
                             </li>
                         % endif
                         <li class="dropdown">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                ${TIM.FA('fa-lg fa-user')} ${fake_api.current_user.name}
+                                ${TIM.FA('fa-lg fa-fw fa-user')} ${fake_api.current_user.name}
 
                             </a>
                             <ul class="dropdown-menu pull-right">
                 </ul>
 
                 <div class="header__navbar__switch-mode switch-read-mode hidden-xs">
-                    ${TIM.FA('fa-eye')} ${_('Read mode')}
+                    ${TIM.FA('fa-eye fa-fw')} ${_('Read mode')}
                 </div>
 
             </div>