AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the sidebar relative/responsive

Browse Source
This commit is contained in:
Frederic Guillot
2015-02-07 16:42:38 -05:00
parent d3205f1de4
commit 36bbd04c52
3 changed files with 35 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/css/app.css
View File

@@ -1904,20 +1904,16 @@ a.task-board-nobody {
font-size: 1.1em; font-size: 1.1em;
}/* sidebar */ }/* sidebar */
.sidebar-container { .sidebar-container {
margin-top: 30px; clear: both;
position: relative;
} }
.sidebar-content { .sidebar-content {
margin-left: 280px; margin-left: 23%;
} }
.sidebar { .sidebar {
position: absolute; width: 20%;
left: 0px; float: left;
top: 0;
max-width: 250px;
min-width: 200px;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
border: 1px solid #ddd; border: 1px solid #ddd;
@@ -1929,7 +1925,20 @@ a.task-board-nobody {
list-style-type: square; list-style-type: square;
margin-left: 30px; margin-left: 30px;
line-height: 1.8em; line-height: 1.8em;
}/* responsive design */ }
@media only screen and (max-width: 767px) {
.sidebar {
width: 96.5%;
float: none;
}
.sidebar-content {
margin: 0;
margin-top: 20px;
}
}
/* responsive design */
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
li.hide-tablet, li.hide-tablet,
@@ -1941,10 +1950,6 @@ a.task-board-nobody {
font-size: 0.85em; font-size: 0.85em;
} }
.sidebar-content {
margin-left: 255px;
}
.form-tab { .form-tab {
max-width: 404px; max-width: 404px;
} }
@@ -1974,22 +1979,10 @@ a.task-board-nobody {
@media only screen and (max-width: 1024px) and (orientation: landscape) { @media only screen and (max-width: 1024px) and (orientation: landscape) {
body {
font-size: 0.7em;
}
header { header {
padding-bottom: 4px; padding-bottom: 4px;
} }
.sidebar {
max-width: 220px;
}
.sidebar-content {
margin-left: 225px;
}
div.chosen-container { div.chosen-container {
font-size: 0.9em; font-size: 0.9em;
} }

16
assets/css/src/responsive.css
View File

@@ -10,10 +10,6 @@
font-size: 0.85em; font-size: 0.85em;
} }
.sidebar-content {
margin-left: 255px;
}
.form-tab { .form-tab {
max-width: 404px; max-width: 404px;
} }
@@ -43,22 +39,10 @@
@media only screen and (max-width: 1024px) and (orientation: landscape) { @media only screen and (max-width: 1024px) and (orientation: landscape) {
body {
font-size: 0.7em;
}
header { header {
padding-bottom: 4px; padding-bottom: 4px;
} }
.sidebar {
max-width: 220px;
}
.sidebar-content {
margin-left: 225px;
}
div.chosen-container { div.chosen-container {
font-size: 0.9em; font-size: 0.9em;
} }

24
assets/css/src/sidebar.css
View File

@@ -1,19 +1,15 @@
/* sidebar */ /* sidebar */
.sidebar-container { .sidebar-container {
margin-top: 30px; clear: both;
position: relative;
} }
.sidebar-content { .sidebar-content {
margin-left: 280px; margin-left: 23%;
} }
.sidebar { .sidebar {
position: absolute; width: 20%;
left: 0px; float: left;
top: 0;
max-width: 250px;
min-width: 200px;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
border: 1px solid #ddd; border: 1px solid #ddd;
@@ -26,3 +22,15 @@
margin-left: 30px; margin-left: 30px;
line-height: 1.8em; line-height: 1.8em;
} }
@media only screen and (max-width: 767px) {
.sidebar {
width: 96.5%;
float: none;
}
.sidebar-content {
margin: 0;
margin-top: 20px;
}
}