style reporting

app/assets/javascripts/app/controllers/report.js.coffee

@@ -71,7 +71,7 @@ class Index extends App.ControllerContent
     )
 
     new Sidebar(
-      el:     @el.find('.sidebar')
+      el:     @el.find('.js-aside')
       config: @config
       params: @params
     )
@@ -87,6 +87,8 @@ class Graph extends App.ControllerContent
   constructor: ->
     super
 
+    return
+
     # rerender view
     @bind 'ui:report:rerender', =>
       @render()
@@ -449,7 +451,7 @@ class Sidebar extends App.Controller
   events:
     'click .js-profileSelector': 'selectProfile'
     'click .js-backendSelector': 'selectBackend'
-    'click .panel-title':        'selectMetric'
+    'click .panel-heading':        'selectMetric'
 
   constructor: ->
     super

app/assets/javascripts/app/views/report/main.jst.eco

@@ -1,29 +1,32 @@
-<div class="sidebar"></div>
-
 <div class="main flex">
 
-  <div class="page-header clearfix">
-    <h1 class="pull-left"><%- @T( 'Reporting' ) %> <small></small></h1>
-    <div class="js-timeRangePicker pull-right" style="margin-top: 20px;"></div>
+  <div class="page-header page-header--center">
+    <div class="page-header-title">
+      <h1><%- @T( 'Reporting' ) %> <small></small></h1>
+    </div>
   </div>
 
-  <div class="page-content"></div>
-
-  <div id="placeholder" class="" style="width:710px;height:450px;"></div>
+  <div class="page-body page-body--two-column">
+    <div class="page-aside js-aside"></div>
 
-  <br>
-  <span class=" muted" id="download-chart" style="font-size: 8px;"></span>
-<!--
-<a href="<%-@download%>" target="_blank" data-type="attachment" class="pull-right" id="download-chart">
-<i class="icon-download" title="<%- @Ti('Download') %>"></i>
-</a>
--->
-<!--
-      <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
--->
+    <div class="page-main">
+      <div class="js-timeRangePicker"></div>
+      <div class="page-content">
+        
+        <div id="placeholder" class="" style="height:350px;"></div>
+        <span class=" muted" id="download-chart" style="font-size: 8px;"></span>
+      <!--
+      <a href="<%-@download%>" target="_blank" data-type="attachment" class="pull-right" id="download-chart">
+      <i class="icon-download" title="<%- @Ti('Download') %>"></i>
+      </a>
+      -->
+      <!--
+            <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
+      -->
 
-    <div class="js-timePicker"></div>
-    <br>
-    <div class="js-dataDownload"></div>
+        <div class="js-timePicker"></div>
+        <div class="js-dataDownload"></div>
+      </div>
+    </div>
   </div>
 </div>

app/assets/javascripts/app/views/report/sidebar.jst.eco

@@ -1,19 +1,22 @@
 <div class="panel-group" id="accordion">
   <% for key, metric of @metrics: %>
     <div class="panel panel-default" data-metric="<%= metric.name %>">
-      <div class="panel-heading">
-        <div class="panel-title">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<%= metric.name %>">
-            <%- @T(metric.display) %>
-          </a>
-        </div>
-      </div>
+      <a class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse-<%= metric.name %>">
+        <span class="panel-title">
+          <%- @T(metric.display) %>
+        </span>
+      </a>
       <div id="collapse-<%= metric.name %>" class="panel-collapse collapse <% if metric.name is @params.metric: %>in<% end %>">
         <div class="panel-body">
           <ul class="type area_select">
             <% for backend in metric.backend: %>
-              <li style="display: block; margin-left: -12px;"><input class="js-backendSelector" type="checkbox" value="<%= backend.name %>" <% if @params.backendSelected[backend.name]: %>checked<% end %>/>
-                <%- @T(backend.display) %>
+              <li>
+                <label class="inline-label checkbox-replacement">
+                  <input class="js-backendSelector" type="checkbox" value="<%= backend.name %>"<%- ' checked' if @params.backendSelected[backend.name] %>>
+                  <%- @Icon('checkbox', 'icon-unchecked') %>
+                  <%- @Icon('checkbox-checked', 'icon-checked') %>
+                  <span class="label-text"><%- @T(backend.display) %></span>
+                </label>
               </li>
             <% end %>
           </ul>
@@ -24,10 +27,15 @@
 </div>
 
 <h3><%- @T('Profiles') %></h3>
-<ul>
+<ul class="checkbox-list">
   <% for profile in @profiles: %>
-    <li style="display: block; margin-left: -12px;"><input class="js-profileSelector" type="radio" name="profile" value="<%= profile.id %>"  <% if @params.profileSelected[profile.id]: %>checked<% end %>/>
-      <%= profile.name %>
+    <li>
+      <label class="inline-label radio-replacement">
+        <input class="js-profileSelector" type="radio" value="<%= profile.id %>"<%- ' checked' if @params.profileSelected[profile.id] %>>
+        <%- @Icon('radio', 'icon-unchecked') %>
+        <%- @Icon('radio-checked', 'icon-checked') %>
+        <span class="label-text"><%= profile.name %></span>
+      </label>
     </li>
   <% end %>
 </ul>

app/assets/javascripts/app/views/report/time_picker.jst.eco

@@ -1,35 +1,32 @@
 <div class="">
   <% if @params.timeRange is 'day': %>
-    <div class="btn-group" role="group" aria-label="">
+    <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeDay: %>
-        <button type="button" class="btn btn-default js-timePickerDay <% if @params.day is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button>
+        <div class="btn btn--text js-timePickerDay<%- ' btn--positive' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
-    <br>
   <% end %>
 
   <% if @params.timeRange is 'day' || @params.timeRange is 'month': %>
-    <div class="btn-group" role="group" aria-label="">
+    <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeMonth: %>
-        <button type="button" class="btn btn-default js-timePickerMonth <% if @params.month is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button>
+        <div class="btn btn--text js-timePickerMonth<%- ' btn--positive' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
-    <br>
   <% end %>
 
   <% if @params.timeRange is 'week': %>
-    <div class="btn-group" role="group" aria-label="">
+    <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeWeek: %>
-        <button type="button" class="btn btn-default js-timePickerWeek <% if @params.week is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button>
+        <div class="btn btn--text js-timePickerWeek<%- ' btn--positive' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
-    <br>
   <% end %>
 
   <% if @params.timeRange isnt 'realtime': %>
-    <div class="btn-group" role="group" aria-label="">
+    <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeYear: %>
-        <button type="button" class="btn btn-default js-timePickerYear <% if @params.year is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button>
+        <div class="btn btn--text js-timePickerYear<%- ' btn--positive' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>

app/assets/javascripts/app/views/report/time_range_picker.jst.eco

@@ -1,7 +1,7 @@
-<div class="btn-group">
-  <button type="button" class="btn js-timeRange" data-type="year"><%- @T('Year') %></button>
-  <button type="button" class="btn js-timeRange" data-type="month"><%- @T('Month') %></button>
-  <button type="button" class="btn js-timeRange" data-type="week"><%- @T('Week') %></button>
-  <button type="button" class="btn js-timeRange" data-type="day"><%- @T('Day') %></button>
-  <button type="button" class="btn js-timeRange" data-type="realtime"><%- @T('Realtime') %></button>
+<div class="tabs">
+  <div class="tab js-timeRange active" data-type="year"><%- @T('Year') %></div>
+  <div class="tab js-timeRange" data-type="month"><%- @T('Month') %></div>
+  <div class="tab js-timeRange" data-type="week"><%- @T('Week') %></div>
+  <div class="tab js-timeRange" data-type="day"><%- @T('Day') %></div>
+  <div class="tab js-timeRange" data-type="realtime"><%- @T('Realtime') %></div>
 </div>

app/assets/stylesheets/bootstrap.css

@@ -2254,33 +2254,6 @@ tbody.collapse.in {
     left: 0;
   }
 }
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-.btn-group > .btn,
-.btn-group-vertical > .btn {
-  position: relative;
-  float: left;
-}
-.btn-group > .btn:hover,
-.btn-group-vertical > .btn:hover,
-.btn-group > .btn:focus,
-.btn-group-vertical > .btn:focus,
-.btn-group > .btn:active,
-.btn-group-vertical > .btn:active,
-.btn-group > .btn.active,
-.btn-group-vertical > .btn.active {
-  z-index: 2;
-}
-.btn-group .btn + .btn,
-.btn-group .btn + .btn-group,
-.btn-group .btn-group + .btn,
-.btn-group .btn-group + .btn-group {
-  margin-left: -1px;
-}
 .btn-toolbar {
   margin-left: -5px;
 }

app/assets/stylesheets/zammad.scss

@@ -408,6 +408,7 @@ blockquote {
     
     &:active {
       color: hsl(203,65%,40%);
+      background: none;
     }
 
     &.btn--secondary {
@@ -541,6 +542,30 @@ blockquote {
   }
 }
 
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  
+  &.btn-group--full {
+    display: flex;
+  }
+
+  & + .btn-group {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid hsl(240,2%,92%);  
+  }
+
+  .btn + .btn {
+    margin-left: 0;
+  }
+
+  .btn--text {
+    padding: 6px 10px 5px; /* reporting main.eco */
+    display: inline-block;
+  }
+}
+
 .buttonDropdown {
   display: flex;
   align-items: center;
@@ -712,6 +737,18 @@ table {
   vertical-align: middle;
 }
 
+.checkbox-list {
+  list-style: none;
+  margin-bottom: 15px;
+  padding: 3px 12px;
+  font-size: 14px;
+  line-height: 25px;
+  color: hsl(60,1%,34%);
+  background: white;
+  border: 1px solid hsl(0, 0%, 90%);
+  border-radius: 3px;
+}
+
 .checkbox-replacement,
 .radio-replacement {
   padding: 0;
@@ -772,10 +809,6 @@ table {
   float: right;
 }
 
-.panel-title {
-  font-size: 14px;
-}
-
 #task {
   position: fixed;
   display: table;
@@ -1627,6 +1660,10 @@ kbd {
   flex-wrap: wrap;
 }
 
+.page-header--center {
+  justify-content: center;
+}
+
 .page-header-title h1 {
   margin-top: 9px;
   margin-bottom: 7px;
@@ -1652,6 +1689,29 @@ kbd {
   }
 }
 
+.page-body--two-column {
+  display: flex;
+}
+
+.page-aside {
+  padding-right: 20px;
+  border-right: 1px solid hsl(0,0%,90%);
+  margin-right: 20px;
+  width: 240px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.page-main {
+  flex: 1;
+}
+
+.page-content {
+  background: white;
+  border: 1px solid hsl(240,3%,92%);
+  border-radius: 3px;
+  padding: 10px;
+}
 
 .page-loading {
   min-height: 500px;
@@ -1849,11 +1909,13 @@ ol.tabs li {
 }
 
 .tabs {
+  display: flex;
   padding: 0;
   margin-bottom: 20px;
   color: #b8b8b8;
   border: 1px solid rgba(0,8,14,.08);
   border-radius: 3px;
+  background: white;
 }
 
   .tabs-condensed .tab {
@@ -1866,8 +1928,8 @@ ol.tabs li {
   }
 
   .tab {
-    height: 40px;
-    padding: 10px 20px;
+    height: 35px;
+    padding: 8px 20px;
     text-align: center;
     border-right: 1px solid rgba(0,8,14,.08);
     flex: 1 1 auto;
@@ -1893,8 +1955,12 @@ ol.tabs li {
     margin: 25px auto 20px;
     font-size: 15px;
     font-weight: 300;
-    background: white;
     border-radius: 8px;
+    
+    .tab {
+      height: 40px;
+      padding: 10px 20px;
+    }
   }
 
   .dashboard .wide-tabs {
@@ -2194,6 +2260,37 @@ footer {
     margin-left: auto;
   }
 
+.panel {
+  box-shadow: none;
+  color: hsl(60,1%,34%);
+}
+
+.panel-default > .panel-heading {
+  padding-bottom: 8px;
+  font-weight: normal;
+  text-transform: uppercase;
+  font-size: 12px;
+  line-height: 17px;
+  letter-spacing: 0.05em;
+  background: hsl(197, 20%, 93%);
+  background: hsl(197,20%,93%);
+  border-color: hsl(198,18%,86%);
+}
+
+.panel-title {
+  font-size: inherit;
+}
+
+.panel-group .panel-heading {
+  display: block;
+}
+
+.panel-body ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
 .show_toogle {
   font-size: 10px;
   line-height: 12px;