From 88fc381fb2aebdb73e63ba4f342d0601d198c575 Mon Sep 17 00:00:00 2001
From: Jens Ulferts <j.ulferts@finn.de>
Date: Fri, 27 Feb 2015 14:39:17 +0100
Subject: [PATCH] introduce simple filter styling and apply to calendar

---
 .../stylesheets/content/_simple_filters.md    | 31 +++++++++++++++++
 .../stylesheets/content/_simple_filters.sass  | 34 +++++++++++++++++++
 app/assets/stylesheets/default.css.sass       |  1 +
 .../work_packages/calendars/index.html.erb    | 23 +++++++------
 config/locales/de.yml                         |  5 +++
 config/locales/en.yml                         |  5 +++
 6 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/stylesheets/content/_simple_filters.md
 create mode 100644 app/assets/stylesheets/content/_simple_filters.sass

diff --git a/app/assets/stylesheets/content/_simple_filters.md b/app/assets/stylesheets/content/_simple_filters.md
new file mode 100644
index 0000000000..03bf9c110a
--- /dev/null
+++ b/app/assets/stylesheets/content/_simple_filters.md
@@ -0,0 +1,31 @@
+# Simple filters
+
+```
+@full-width
+
+<fieldset class="simple-filters--container">
+  <legend>Simple Filters</legend>
+  <ul class="simple-filters--filters">
+    <li class="simple-filters--filter">
+      <label for="filter-1" class="simple-filters--filter-name">Project</label>
+      <div class="simple-filters--filter-value">
+        <input id="filter-1" type="text" placeholder="select">
+      </div>
+    </li>
+    <li class="simple-filters--filter">
+      <label for="filter-2" class="simple-filters--filter-name">Status</label>
+      <div class="simple-filters--filter-value">
+        <select id="filter-2" class="simple-filters--select">
+          <option value="=" label="Active" selected="selected">Active</option>
+          <option value="!" label="Archived">Archived</option>
+          <option value="!*" label="All">all</option>
+        </select>
+      </div>
+    </li>
+    <li class="simple-filters--controls">
+      <a class="button -highlight -small" href="#">Apply</a>
+      <a class="button -small icon icon-undo" href="#">Clear</a>
+    </li>
+  </ul>
+</fieldset>
+```
diff --git a/app/assets/stylesheets/content/_simple_filters.sass b/app/assets/stylesheets/content/_simple_filters.sass
new file mode 100644
index 0000000000..2c6f930a97
--- /dev/null
+++ b/app/assets/stylesheets/content/_simple_filters.sass
@@ -0,0 +1,34 @@
+.simple-filters--container
+  border:   1px solid $advanced-filters--border-color
+  padding:  10px
+  margin: 0 1.2em 1rem 0.6em
+
+.simple-filters--filters
+  @extend .advanced-filters--filters
+  @include grid-block
+  @include grid-layout(1)
+
+  @include breakpoint(large)
+    @include grid-layout(2)
+
+  // Cancel out foundations padding which breaks in IE. IE seems to calculate
+  // the padding on top of the flex-basis size. That means when the flex-basis
+  // is 50% and two elements should be within a row and padding is anything but
+  // 0. The elements will in sum take up more than 100% and thus the second
+  // element will move to the next row.
+  .simple-filters--filter,
+    @include breakpoint(large)
+      flex-basis: 47%
+
+@mixin simple-filters--sizing()
+  @include grid-content
+
+.simple-filters--filter
+  @include simple-filters--sizing
+  flex-basis: 48%
+
+.simple-filters--filter-value
+  margin-right: 1rem
+
+.simple-filters--controls
+  margin: 0 1rem
diff --git a/app/assets/stylesheets/default.css.sass b/app/assets/stylesheets/default.css.sass
index 3b98ecc103..a02b13a2d2 100644
--- a/app/assets/stylesheets/default.css.sass
+++ b/app/assets/stylesheets/default.css.sass
@@ -58,6 +58,7 @@
 @import content/watchers
 @import content/work_packages
 @import content/advanced_filters
+@import content/simple_filters
 @import content/work_packages_table
 @import content/attributes_key_value
 @import content/attributes_group
diff --git a/app/views/work_packages/calendars/index.html.erb b/app/views/work_packages/calendars/index.html.erb
index c173638238..ebefd36b7e 100644
--- a/app/views/work_packages/calendars/index.html.erb
+++ b/app/views/work_packages/calendars/index.html.erb
@@ -35,18 +35,19 @@ See doc/COPYRIGHT.rdoc for more details.
       <%= render :partial => 'queries/filters', :locals => {:query => @query} %>
     </div>
   </fieldset>
-  <div class="vertical grid-block">
-    <div class="vertical medium-horizontal grid-block">
-      <div class="grid-content">
+  <fieldset class="simple-filters--container">
+    <legend><%= l('timeframe.show') %></legend>
+    <ul class="simple-filters--filters">
+      <li class="simple-filters--filter">
         <%= label_tag('month', l(:label_month)) %>
-        <%= select_month(@month, { :prefix => "month", :discard_type => true }, class: 'form--select -small') %>
-      </div>
-      <div class="grid-content">
+        <%= select_month(@month, { :prefix => "month", :discard_type => true }, class: 'simple-filters--filter-value') %>
+      </li>
+      <li class="simple-filters--filter">
         <%= label_tag('year', l(:label_year)) %>
-        <%= select_year(@year, { :prefix => "year", :discard_type => true }, class: 'form--select -small') %>
-      </div>
-    </div>
-    <div class="grid-content">
+        <%= select_year(@year, { :prefix => "year", :discard_type => true }, class: 'simple-filters--filter-value') %>
+      </li>
+    </ul>
+    <div class="simple-filters--controls">
       <%= link_to_remote l(:button_apply),
                        { :url => { :set_filter => 1 },
                          :method => :get,
@@ -59,7 +60,7 @@ See doc/COPYRIGHT.rdoc for more details.
                          :update => "content",
                        }, :class => 'button -small icon icon-undo' %>
     </div>
-  </div>
+  </fieldset>
 <% end %>
 <%= error_messages_for 'query' %>
 <% if @query.valid? %>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index a6056ba9ad..6a97bd2dd6 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -1426,6 +1426,11 @@ de:
       time: "%H:%M"
     pm: "nachmittags"
 
+  timeframe:
+    show: "Zeitausschnitt bestimmen"
+    end: "bis"
+    start: "von"
+
   timelines:
     admin_menu:
       color: "Farbe"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8ae2a90856..e5a7467d92 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1412,6 +1412,11 @@ en:
       time: "%I:%M %p"
     pm: "pm"
 
+  timeframe:
+    show: "Show timeframe"
+    end: "to"
+    start: "from"
+
   timelines:
     admin_menu:
       color: "Color"