From 1a4b1206967d576cc93e98cb86c711e3ef166daa Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 20 Oct 2015 17:16:29 +0200 Subject: [PATCH] style reporting --- .../app/controllers/report.js.coffee | 6 +- .../javascripts/app/views/report/main.jst.eco | 45 +++---- .../app/views/report/sidebar.jst.eco | 32 +++-- .../app/views/report/time_picker.jst.eco | 19 ++- .../views/report/time_range_picker.jst.eco | 12 +- app/assets/stylesheets/bootstrap.css | 27 ----- app/assets/stylesheets/zammad.scss | 111 ++++++++++++++++-- 7 files changed, 166 insertions(+), 86 deletions(-) diff --git a/app/assets/javascripts/app/controllers/report.js.coffee b/app/assets/javascripts/app/controllers/report.js.coffee index f6564eec9..99b203042 100644 --- a/app/assets/javascripts/app/controllers/report.js.coffee +++ b/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 diff --git a/app/assets/javascripts/app/views/report/main.jst.eco b/app/assets/javascripts/app/views/report/main.jst.eco index d1c5bc958..87778862e 100644 --- a/app/assets/javascripts/app/views/report/main.jst.eco +++ b/app/assets/javascripts/app/views/report/main.jst.eco @@ -1,29 +1,32 @@ -
-
-
-

<%- @T( 'Reporting' ) %>

-
+
+
+

<%- @T( 'Reporting' ) %>

+
-
+
+
-
+
+
+
+ +
+ + + -
- - - - -
-
-
+
+
+
+
diff --git a/app/assets/javascripts/app/views/report/sidebar.jst.eco b/app/assets/javascripts/app/views/report/sidebar.jst.eco index fed8f34bb..85e476e38 100644 --- a/app/assets/javascripts/app/views/report/sidebar.jst.eco +++ b/app/assets/javascripts/app/views/report/sidebar.jst.eco @@ -1,19 +1,22 @@
<% for key, metric of @metrics: %>
-
-
- - <%- @T(metric.display) %> - -
-
+ + + <%- @T(metric.display) %> + +
    <% for backend in metric.backend: %> -
  • checked<% end %>/> - <%- @T(backend.display) %> +
  • +
    • <% end %>
@@ -24,10 +27,15 @@

<%- @T('Profiles') %>

-
    +
      <% for profile in @profiles: %> -
    • checked<% end %>/> - <%= profile.name %> +
    • +
      • <% end %>
    diff --git a/app/assets/javascripts/app/views/report/time_picker.jst.eco b/app/assets/javascripts/app/views/report/time_picker.jst.eco index 707fc5220..6a1fd810c 100644 --- a/app/assets/javascripts/app/views/report/time_picker.jst.eco +++ b/app/assets/javascripts/app/views/report/time_picker.jst.eco @@ -1,35 +1,32 @@
    <% if @params.timeRange is 'day': %> -
    +
    <% for item in @timeRangeDay: %> - +
    <%= item.display %>
    <% end %>
    -
    <% end %> <% if @params.timeRange is 'day' || @params.timeRange is 'month': %> -
    +
    <% for item in @timeRangeMonth: %> - +
    <%= item.display %>
    <% end %>
    -
    <% end %> <% if @params.timeRange is 'week': %> -
    +
    <% for item in @timeRangeWeek: %> - +
    <%= item.display %>
    <% end %>
    -
    <% end %> <% if @params.timeRange isnt 'realtime': %> -
    +
    <% for item in @timeRangeYear: %> - +
    <%= item.display %>
    <% end %>
    <% end %> diff --git a/app/assets/javascripts/app/views/report/time_range_picker.jst.eco b/app/assets/javascripts/app/views/report/time_range_picker.jst.eco index 6102afc5c..14487d6f7 100644 --- a/app/assets/javascripts/app/views/report/time_range_picker.jst.eco +++ b/app/assets/javascripts/app/views/report/time_range_picker.jst.eco @@ -1,7 +1,7 @@ -
    - - - - - +
    +
    <%- @T('Year') %>
    +
    <%- @T('Month') %>
    +
    <%- @T('Week') %>
    +
    <%- @T('Day') %>
    +
    <%- @T('Realtime') %>
    \ No newline at end of file diff --git a/app/assets/stylesheets/bootstrap.css b/app/assets/stylesheets/bootstrap.css index ac66a06a7..6ebfba4ce 100644 --- a/app/assets/stylesheets/bootstrap.css +++ b/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; } diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index bbd98205c..18a4c6b44 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/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;