Change sidebar style

ChangeLog

@@ -22,6 +22,7 @@ New features:
 
 Improvements:
 
+* Change sidebar style
 * Change task summary layout
 * Use inline popup for subtasks modification
 * Move homepage menus to the user dropdown

Makefile

@@ -4,7 +4,7 @@ CSS_APP = $(addprefix assets/css/src/, $(addsuffix .css, base links title table
 CSS_PRINT = $(addprefix assets/css/src/, $(addsuffix .css, print links table board task comment subtask markdown))
 CSS_VENDOR = $(addprefix assets/css/vendor/, $(addsuffix .css, jquery-ui.min jquery-ui-timepicker-addon.min chosen.min fullcalendar.min font-awesome.min c3.min))
 
-JS_APP = $(addprefix assets/js/src/, $(addsuffix .js, Popover Dropdown Tooltip Markdown Sidebar Search App Screenshot Calendar Board Swimlane Gantt Task Project TaskRepartitionChart UserRepartitionChart CumulativeFlowDiagram BurndownChart AvgTimeColumnChart TaskTimeColumnChart LeadCycleTimeChart CompareHoursColumnChart Router))
+JS_APP = $(addprefix assets/js/src/, $(addsuffix .js, Popover Dropdown Tooltip Markdown Search App Screenshot Calendar Board Swimlane Gantt Task Project TaskRepartitionChart UserRepartitionChart CumulativeFlowDiagram BurndownChart AvgTimeColumnChart TaskTimeColumnChart LeadCycleTimeChart CompareHoursColumnChart Router))
 JS_VENDOR = $(addprefix assets/js/vendor/, $(addsuffix .js, jquery-1.11.3.min jquery-ui.min jquery-ui-timepicker-addon.min jquery.ui.touch-punch.min chosen.jquery.min moment.min fullcalendar.min mousetrap.min mousetrap-global-bind.min jquery.textcomplete))
 JS_LANG = $(addprefix assets/js/vendor/lang/, $(addsuffix .js, cs da de es el fi fr hu id it ja nl nb pl pt pt-br ru sv sr th tr zh-cn))
 

app/Template/analytic/layout.php

@@ -31,8 +31,7 @@
             </li>
         </ul>
     </div>
-    <section class="sidebar-container" id="analytic-section">
+    <section class="sidebar-container">
-
         <?= $this->render($sidebar_template, array('project' => $project)) ?>
 
         <div class="sidebar-content">

app/Template/analytic/sidebar.php

@@ -23,6 +23,4 @@
             <?= $this->url->link(t('Estimated vs actual time'), 'analytic', 'compareHours', array('project_id' => $project['id'])) ?>
         </li>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/app/sidebar.php

@@ -24,6 +24,4 @@
         </li>
         <?= $this->hook->render('template:dashboard:sidebar') ?>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/config/sidebar.php

@@ -36,6 +36,4 @@
         </li>
         <?= $this->hook->render('template:config:sidebar') ?>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/export/sidebar.php

@@ -15,6 +15,4 @@
         </li>
         <?= $this->hook->render('template:export:sidebar') ?>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/project/sidebar.php

@@ -63,6 +63,4 @@
 
         <?= $this->hook->render('template:project:sidebar', array('project' => $project)) ?>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/task/layout.php

@@ -17,7 +17,7 @@
             <?php endif ?>
         </ul>
     </div>
-    <section class="sidebar-container" id="task-section">
+    <section class="sidebar-container">
 
         <?= $this->render($sidebar_template, array('task' => $task)) ?>
 

app/Template/task/sidebar.php

@@ -98,6 +98,4 @@
         <?= $this->hook->render('template:task:sidebar:actions') ?>
     </ul>
     <?php endif ?>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

app/Template/user/sidebar.php

@@ -78,6 +78,4 @@
             </li>
         <?php endif ?>
     </ul>
-    <div class="sidebar-collapse"><a href="#" title="<?= t('Hide sidebar') ?>"><i class="fa fa-chevron-left"></i></a></div>
-    <div class="sidebar-expand" style="display: none"><a href="#" title="<?= t('Expand sidebar') ?>"><i class="fa fa-chevron-right"></i></a></div>
 </div>

assets/css/src/listing.css

@@ -5,7 +5,7 @@
     margin-bottom: 20px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fefefe;
+    background-color: #fcfcfc;
     overflow: auto;
 }
 

assets/css/src/sidebar.css

@@ -1,90 +1,65 @@
-/* sidebar */
 .sidebar-container {
     margin-top: 10px;
-    position: relative;
+    height: 100%;
-    clear: both;
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-box;
+    display: box;
+    -ms-flex-direction: row;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+    -ms-box-orient: horizontal;
+    box-orient: horizontal;
 }
 
 .sidebar-content {
-    margin-left: 23%;
+    padding-left: 10px;
-    width: 76%;
+    -ms-flex: 1;
-    position: absolute;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -ms-box-flex: 1;
+    box-flex: 1;
 }
 
 .sidebar {
-    width: 20%;
+    padding-right: 10px;
-    float: left;
+    border-right: 1px dotted #eee;
-    padding: 10px;
+    font-size: 0.95em;
-    padding-top: 0;
+    width: 240px;
-    border: 1px solid #ddd;
+    -ms-flex: 0 100px;
-    background: #fdfdfd;
+    -webkit-box-flex: 0;
-    border-radius: 5px;
+    -moz-box-flex: 0;
+    -ms-box-flex: 0;
+    box-flex: 0;
+}
+
+.sidebar a {
+    text-decoration: none;
 }
 
 .sidebar li {
-    list-style-type: square;
+    list-style-type: none;
-    margin-left: 30px;
+    line-height: 35px;
-    line-height: 1.8em;
+    border-bottom: 1px dotted #efefef;
+}
+
+.sidebar li:hover {
+    border-left: 5px solid #555;
+    padding-left: 8px;
+}
+
+.sidebar li.active {
+    border-left: 5px solid #333;
+    padding-left: 8px;
 }
 
 .sidebar li.active a {
-    color: #000;
+    color: #333;
     font-weight: bold;
-    text-decoration: none;
 }
 
 .sidebar li.active a:focus,
 .sidebar li.active a:hover {
-    text-decoration: underline;
+    color: #555;
-}
-
-.sidebar-collapsed .sidebar {
-    width: 10px;
-    padding-bottom: 0;
-    float: none;
-}
-
-.sidebar-collapsed .sidebar-content {
-    margin: 0;
-    margin-top: 15px;
-    width: 100%;
-}
-
-.sidebar-collapse {
-    text-align: right;
-}
-
-.sidebar-collapse a,
-.sidebar-expand a {
-    color: #333;
-    text-decoration: none;
-}
-
-.sidebar-collapse a:hover,
-.sidebar-expand a:hover {
-    color: #DF5353;
-}
-
-@media only screen and (max-width: 1024px) {
-    .sidebar {
-        width: 25%;
-    }
-
-    .sidebar-content {
-        margin-left: 30%;
-        width: 70%;
-    }
-}
-
-@media only screen and (max-width: 767px) {
-    .sidebar {
-        width: 95%;
-        float: none;
-    }
-
-    .sidebar-content {
-        margin: 0;
-        margin-top: 15px;
-        width: 100%;
-    }
 }

assets/js/src/App.js

@@ -1,7 +1,6 @@
 function App() {
     this.board = new Board(this);
     this.markdown = new Markdown();
-    this.sidebar = new Sidebar();
     this.search = new Search(this);
     this.swimlane = new Swimlane();
     this.dropdown = new Dropdown();
@@ -33,7 +32,6 @@ App.prototype.listen = function() {
     this.project.listen();
     this.popover.listen();
     this.markdown.listen();
-    this.sidebar.listen();
     this.tooltip.listen();
     this.dropdown.listen();
     this.search.listen();

assets/js/src/Sidebar.js

@@ -1,25 +0,0 @@
-function Sidebar() {
-}
-
-Sidebar.prototype.expand = function(e) {
-    e.preventDefault();
-    $(".sidebar-container").removeClass("sidebar-collapsed");
-    $(".sidebar-collapse").show();
-    $(".sidebar h2").show();
-    $(".sidebar ul").show();
-    $(".sidebar-expand").hide();
-};
-
-Sidebar.prototype.collapse = function(e) {
-    e.preventDefault();
-    $(".sidebar-container").addClass("sidebar-collapsed");
-    $(".sidebar-expand").show();
-    $(".sidebar h2").hide();
-    $(".sidebar ul").hide();
-    $(".sidebar-collapse").hide();
-};
-
-Sidebar.prototype.listen = function() {
-    $(document).on("click", ".sidebar-collapse", this.collapse);
-    $(document).on("click", ".sidebar-expand", this.expand);
-};