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

Make filter box and project header more responsive

Browse Source
This commit is contained in:
Frederic Guillot
2016-08-08 21:54:45 -04:00
parent fd0bea2187
commit 195fae86d6
17 changed files with 193 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
assets/sass/_dropdown.sass
View File

@@ -23,7 +23,7 @@ ul.dropdown-submenu-open
display: block
margin: 0
padding: 8px 10px
font-size: $dropdown-text-size
font-size: size('compact')
border-bottom: 1px solid #f8f8f8
cursor: pointer
&.no-hover

43
assets/sass/_filter_box.sass
View File

@@ -1,43 +1,2 @@
@import variables
.filter-box
display: inline-block
position: relative
font-size: 0
margin-bottom: 20px
.project-header .filter-box
margin: 0
.filter-box
form
margin: 0
input[type="text"]
margin: 0
font-size: 16px
height: 28px
border-color: #ddd
border-top-left-radius: 5px
border-bottom-left-radius: 5px
vertical-align: top
&:focus
color: color('dark')
border-color: rgba(82, 168, 236, 0.8)
outline: 0
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
div.dropdown
background: #fafafa
display: inline-block
font-size: 16px
border: 1px solid #ddd
border-left: none
margin: 0
padding: 0
padding-left: 5px
padding-right: 8px
height: 29px
&:last-child
border-top-right-radius: 5px
border-bottom-right-radius: 5px
a
line-height: 27px
max-width: 800px

2
assets/sass/_form.sass
View File

@@ -9,7 +9,7 @@ label
margin-top: 10px
input
&[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]
&[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
color: color('light')
border: 1px solid #ccc
width: 300px

30
assets/sass/_input_addon.sass Normal file
View File

@@ -0,0 +1,30 @@
.input-addon
display: flex
.input-addon-field
flex: 1
font-size: size('normal')
color: color('light')
.input-addon-item
background-color: rgba(147, 128, 108, 0.1)
color: #666
font: inherit
font-weight: normal
.dropdown
.fa-caret-down
display: none
.input-addon-field, .input-addon-item
border: 1px solid rgba(147, 128, 108, 0.25)
padding: 4px 0.75em
&:not(:first-child)
border-left: 0
.input-addon-field:first-child, .input-addon-item:first-child
border-radius: 5px 0 0 5px
.input-addon-field:last-child, .input-addon-item:last-child
border-radius: 0 5px 5px 0

4
assets/sass/_mixins.sass
View File

@@ -1,5 +1,9 @@
@import variables
@mixin custom-device($width)
@media (max-width: #{$width})
@content
@mixin xs-device
@media (max-width: #{$xs-device-width})
@content

4
assets/sass/_page_header.sass
View File

@@ -33,3 +33,7 @@
li
display: inline
padding-right: 15px
.active a
font-weight: bold
color: color('dark')
text-decoration: none

36
assets/sass/_project_header.sass Normal file
View File

@@ -0,0 +1,36 @@
.project-header
@include grid(100)
.dropdown-component
@include grid_width(5/100)
@include md-device
@include grid_width(8/100)
@include sm-device
@include grid_width(1)
.views-switcher-component
@include grid_width(38/100)
@include custom-device(1300px)
@include grid_width(45/100)
@include md-device
@include grid_width(92/100)
@include sm-device
@include grid_width(1)
.filter-box-component
margin: 0
@include grid_width(55/100)
@include custom-device(1300px)
@include grid_width(50/100)
@include md-device
@include grid_width(1)
margin-top: 10px
.filter-box
max-width: 100%
@include sm-device
@include grid_width(1)
margin-top: 10px
.filter-box
max-width: 100%
form
margin: 0

52
assets/sass/_project_views_switcher.sass
View File

@@ -1,37 +1,43 @@
@import variables
@import mixins
$breakdown-switcher: 560px
.views
display: inline-block
margin-left: 10px
margin-right: 10px
font-size: size('compact')
@include custom-device($breakdown-switcher)
width: 100%
@include sm-device
margin-top: 10px
font-size: size('normal')
li
white-space: nowrap
background: #fafafa
border-left: 1px solid #ddd
border-top: 1px solid #ddd
border-bottom: 1px solid #ddd
padding: 5px 8px
border: 1px solid #ddd
border-right: none
padding: 4px 8px
display: inline
@include custom-device($breakdown-switcher)
display: block
margin-top: 5px
border-radius: 5px
border: 1px solid #ddd
&.active a
font-weight: bold
color: color('dark')
text-decoration: none
&:first-child
border-top-left-radius: 5px
border-bottom-left-radius: 5px
&:last-child
border-right: 1px solid #ddd
border-top-right-radius: 5px
border-bottom-right-radius: 5px
a
color: color('medium')
text-decoration: none
&:hover
color: color('primary')
text-decoration: underline
.menu-inline li.active a
font-weight: bold
color: color('dark')
text-decoration: none
.views li
&.active a
font-weight: bold
color: color('dark')
text-decoration: none
&:first-child
border-top-left-radius: 5px
border-bottom-left-radius: 5px
&:last-child
border-right: 1px solid #ddd
border-top-right-radius: 5px
border-bottom-right-radius: 5px

2
assets/sass/_task_board.sass
View File

@@ -6,7 +6,7 @@
border: 1px solid #000
padding: 2px
word-wrap: break-word
font-size: $board-text-size
font-size: size('compact')
div
&.task-board-recent

5
assets/sass/_variables.sass
View File

@@ -17,12 +17,9 @@ $button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
$dropdown-text-size: 0.9em
$board-text-size: 0.9em
$board-task-limit-color: #DF5353
@function size($key)

2
assets/sass/app.sass
View File

@@ -4,6 +4,7 @@
@import title
@import table
@import form
@import input_addon
@import alert
@import button
@import tooltip
@@ -23,6 +24,7 @@
@import filter_box
@import project
@import project_overview
@import project_header
@import project_views_switcher
@import dashboard
@import board