11 files changed, 110 insertions, 72 deletions
diff --git a/assets/sass/_dropdown.sass b/assets/sass/_dropdown.sass
index dd0aecc3..8e7eb24b 100644
--- a/assets/sass/_dropdown.sass
+++ b/assets/sass/_dropdown.sass
@@ -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
diff --git a/assets/sass/_filter_box.sass b/assets/sass/_filter_box.sass
index f8c541ab..33a09696 100644
--- a/assets/sass/_filter_box.sass
+++ b/assets/sass/_filter_box.sass
@@ -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
diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass
index 83c65c50..e89fdc24 100644
--- a/assets/sass/_form.sass
+++ b/assets/sass/_form.sass
@@ -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
diff --git a/assets/sass/_input_addon.sass b/assets/sass/_input_addon.sass
new file mode 100644
index 00000000..9d05f1ab
--- /dev/null
+++ b/assets/sass/_input_addon.sass
@@ -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
diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
index 5813f3bb..66ed04f0 100644
--- a/assets/sass/_mixins.sass
+++ b/assets/sass/_mixins.sass
@@ -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
diff --git a/assets/sass/_page_header.sass b/assets/sass/_page_header.sass
index 0ea1a8f6..bb1975a2 100644
--- a/assets/sass/_page_header.sass
+++ b/assets/sass/_page_header.sass
@@ -33,3 +33,7 @@
   li
     display: inline
     padding-right: 15px
+    .active a
+      font-weight: bold
+      color: color('dark')
+      text-decoration: none
diff --git a/assets/sass/_project_header.sass b/assets/sass/_project_header.sass
new file mode 100644
index 00000000..9369791a
--- /dev/null
+++ b/assets/sass/_project_header.sass
@@ -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
diff --git a/assets/sass/_project_views_switcher.sass b/assets/sass/_project_views_switcher.sass
index 86aa2619..4ead9e2b 100644
--- a/assets/sass/_project_views_switcher.sass
+++ b/assets/sass/_project_views_switcher.sass
@@ -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
diff --git a/assets/sass/_task_board.sass b/assets/sass/_task_board.sass
index 17632f08..3f33f0cb 100644
--- a/assets/sass/_task_board.sass
+++ b/assets/sass/_task_board.sass
@@ -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
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 6e069240..497904d6 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -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)
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
index fe31a6f9..ce06fd8c 100644
--- a/assets/sass/app.sass
+++ b/assets/sass/app.sass
@@ -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