Improve responsive css

app/Template/app/dashboard.php

@@ -1,5 +1,5 @@
 <section id="main">
-    <div class="page-header">
+    <div class="page-header page-header-mobile">
         <ul>
             <?php if ($this->userSession->isAdmin()): ?>
                 <li><i class="fa fa-plus fa-fw"></i><?= $this->a(t('New project'), 'project', 'create') ?></li>

app/Template/board/filters.php

@@ -55,7 +55,7 @@
             <?= $this->formSelect('category_id', $categories, array(), array(), array('data-placeholder="'.t('Filter by category').'"'), 'apply-filters chosen-select') ?>
         </li>
         <li>
-            <select id="more-filters" multiple data-placeholder="<?= t('More filters') ?>" class="apply-filters chosen-select">
+            <select id="more-filters" multiple data-placeholder="<?= t('More filters') ?>" class="apply-filters chosen-select hide-mobile">
                 <option value=""></option>
                 <option value="filter-due-date"><?= t('Filter by due date') ?></option>
                 <option value="filter-recent"><?= t('Filter recently updated') ?></option>

assets/css/app.css

@@ -722,6 +722,14 @@ nav .active a {
     padding-right: 10px;
     font-size: 0.9em;
 }
+
+@media only screen and (max-width: 640px) {
+
+    .page-header-mobile li {
+        display: block;
+        margin-bottom: 5px;
+    }
+}
 /* board filters */
 .board-filters {
     font-size: 0.95em;
@@ -1370,9 +1378,20 @@ span.task-board-date-overdue {
     line-height: 1.8em;
 }
 
+@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: 96.5%;
+        width: 95%;
         float: none;
     }
 
@@ -1439,6 +1458,14 @@ span.task-board-date-overdue {
         height: 18px;
     }
 }
+
+@media only screen and (max-width: 640px) {
+
+    .hide-mobile {
+        display: none;
+    }
+}
+
 .dropdown {
     position: relative;
 }

assets/css/src/header.css

@@ -93,3 +93,11 @@ nav .active a {
     padding-right: 10px;
     font-size: 0.9em;
 }
+
+@media only screen and (max-width: 640px) {
+
+    .page-header-mobile li {
+        display: block;
+        margin-bottom: 5px;
+    }
+}

assets/css/src/responsive.css

@@ -55,3 +55,11 @@
         height: 18px;
     }
 }
+
+@media only screen and (max-width: 640px) {
+
+    .hide-mobile {
+        display: none;
+    }
+}
+

assets/css/src/sidebar.css

@@ -27,9 +27,20 @@
     line-height: 1.8em;
 }
 
+@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: 96.5%;
+        width: 95%;
         float: none;
     }
 

assets/js/src/dashboard.js

@@ -22,7 +22,7 @@ Kanboard.Dashboard = (function() {
         $("#dashboard-" + $(this).data("toggle")).toggle();
         hideColumns();
 
-        var sections = ["projects", "tasks", "subtasks", "activities"];
+        var sections = ["projects", "tasks", "subtasks", "activities", "calendar"];
         var state = {};
 
         for (var i = 0; i < sections.length; i++) {