admin pages: add page-content and style containing labels

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -6,41 +6,43 @@
           <h1><%- @T( @head ) %></h1>
         </div>
 
-        <ul class="tabs type-tabs">
+        <div class="page-content">
+          <ul class="tabs type-tabs">
 
-          <li class="tab u-textTruncate" data-type="phone-in">
-            <%- @Icon('received-calls', 'tab-icon') %>
-            <%- @T('Received Call') %>
-          </li>
+            <li class="tab u-textTruncate" data-type="phone-in">
+              <%- @Icon('received-calls', 'tab-icon') %>
+              <%- @T('Received Call') %>
+            </li>
 
-          <li class="tab u-textTruncate" data-type="phone-out">
-            <%- @Icon('outbound-calls', 'tab-icon') %>
-            <%- @T('Outbound Call') %>
-          </li>
+            <li class="tab u-textTruncate" data-type="phone-out">
+              <%- @Icon('outbound-calls', 'tab-icon') %>
+              <%- @T('Outbound Call') %>
+            </li>
 
-         <li class="tab u-textTruncate" data-type="email-out">
-            <%- @Icon('email', 'tab-icon') %>
-            <%- @T('Send Email') %>
-          </li>
-        </ul>
+           <li class="tab u-textTruncate" data-type="email-out">
+              <%- @Icon('email', 'tab-icon') %>
+              <%- @T('Send Email') %>
+            </li>
+          </ul>
 
-        <form role="form" class="ticket-create">
-          <input type="hidden" name="formSenderType"/>
-          <input type="hidden" name="form_id" value="<%= @form_id %>"/>
+          <form role="form" class="ticket-create">
+            <input type="hidden" name="formSenderType"/>
+            <input type="hidden" name="form_id" value="<%= @form_id %>"/>
 
-          <div class="ticket-form-top"></div>
-          <div class="article-form-top"></div>
+            <div class="ticket-form-top"></div>
+            <div class="article-form-top"></div>
 
-          <div class="formset-inset">
-            <div class="ticket-form-middle horizontal two-columns"></div>
-            <div class="ticket-form-bottom"></div>
-          </div>
+            <div class="formset-inset">
+              <div class="ticket-form-middle horizontal two-columns"></div>
+              <div class="ticket-form-bottom"></div>
+            </div>
 
-          <div class="form-controls">
-            <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
-            <button type="submit" class="btn btn--success js-submit align-right"><%- @T('Create') %></button>
-          </div>
-        </form>
+            <div class="form-controls">
+              <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T('Cancel & Go Back') %></a>
+              <button type="submit" class="btn btn--success js-submit align-right"><%- @T('Create') %></button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   </div>

app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco

@@ -18,4 +18,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>

app/assets/javascripts/app/views/calendar/index.jst.eco

@@ -10,77 +10,80 @@
     <a class="btn btn--success js-new"><%- @T('New Calendar') %></a>
   </div>
 </div>
+<div class="page-content">
+  <% if _.isEmpty(@calendars): %>
+  <div class="page-description">
+    <%- @description %>
+  </div>
+  <% end %>
 
-<% if _.isEmpty(@calendars): %>
-<%- @description %>
-<% end %>
-
-<% for calendar in @calendars: %>
-<div class="action" data-id="<%- calendar.id %>">
-  <div class="action-flow action-flow--row">
-    <div class="action-row">
-      <div class="action-flow action-flow--noWrap">
-        <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @T('Last sync at') %>: <%= @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
-          <% if calendar.last_log: %>
-            <%- @Icon('status', 'error inline') %>
-          <% else: %>
-            <%- @Icon('status', 'ok inline') %>
-          <% end %></span><% end %> <%= calendar.name %></h2>
-        <% if calendar.default: %>
-          <div class="action-label">Default</div>
-        <% end %>
+  <% for calendar in @calendars: %>
+  <div class="action" data-id="<%- calendar.id %>">
+    <div class="action-flow action-flow--row">
+      <div class="action-row">
+        <div class="action-flow action-flow--noWrap">
+          <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @T('Last sync at') %>: <%= @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
+            <% if calendar.last_log: %>
+              <%- @Icon('status', 'error inline') %>
+            <% else: %>
+              <%- @Icon('status', 'ok inline') %>
+            <% end %></span><% end %> <%= calendar.name %></h2>
+          <% if calendar.default: %>
+            <div class="action-label">Default</div>
+          <% end %>
+        </div>
+      </div>
+      <% if calendar.last_log: %><div class="action-row"><div class="alert alert--danger"><%= calendar.last_log %></div></div><% end %>
+      <div class="action-row">
+        <div class="label"><%- @T('Time zone') %></div> <%= calendar.timezone %>
+      </div>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Business Hours') %></div>
+        <table class="table table-fluid">
+          <tr>
+            <td><%- @T('Monday') %></td><td><% if !calendar.business_hours['mon'].active || _.isEmpty(calendar.business_hours['mon'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['mon'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Tuesday') %></td><td><% if !calendar.business_hours['tue'].active || _.isEmpty(calendar.business_hours['tue'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['tue'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Wednesday') %></td><td><% if !calendar.business_hours['wed'].active || _.isEmpty(calendar.business_hours['wed'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['wed'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Thursday') %></td><td><% if !calendar.business_hours['thu'].active || _.isEmpty(calendar.business_hours['thu'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['thu'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Friday') %></td><td><% if !calendar.business_hours['fri'].active || _.isEmpty(calendar.business_hours['fri'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['fri'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Saturday') %></td><td><% if !calendar.business_hours['sat'].active || _.isEmpty(calendar.business_hours['sat'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sat'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+          <tr>
+            <td><%- @T('Sunday') %></td><td><% if !calendar.business_hours['sun'].active || _.isEmpty(calendar.business_hours['sun'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sun'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
+          </tr>
+        </table>
+      </div>
+      <div class="action-block action-block--flex">
+        <div class="label"><%- @T('Holidays') %></div>
+        <table class="table">
+          <% if _.isEmpty(calendar.public_holidays_preview): %>-<% end %>
+          <% for holiday, meta of calendar.public_holidays_preview: %>
+            <tr <% if !meta.active: %>class="is-inactive"<% end %>>
+              <td style="width: 96px"><%- @Tdate(holiday) %>
+              <td><%= meta.summary %>
+          <% end %>
+        </table>
       </div>
     </div>
-    <% if calendar.last_log: %><div class="action-row"><div class="alert alert--danger"><%= calendar.last_log %></div></div><% end %>
-    <div class="action-row">
-      <div class="label"><%- @T('Time zone') %></div> <%= calendar.timezone %>
-    </div>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Business Hours') %></div>
-      <table class="table table-fluid">
-        <tr>
-          <td><%- @T('Monday') %></td><td><% if !calendar.business_hours['mon'].active || _.isEmpty(calendar.business_hours['mon'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['mon'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Tuesday') %></td><td><% if !calendar.business_hours['tue'].active || _.isEmpty(calendar.business_hours['tue'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['tue'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Wednesday') %></td><td><% if !calendar.business_hours['wed'].active || _.isEmpty(calendar.business_hours['wed'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['wed'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Thursday') %></td><td><% if !calendar.business_hours['thu'].active || _.isEmpty(calendar.business_hours['thu'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['thu'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Friday') %></td><td><% if !calendar.business_hours['fri'].active || _.isEmpty(calendar.business_hours['fri'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['fri'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Saturday') %></td><td><% if !calendar.business_hours['sat'].active || _.isEmpty(calendar.business_hours['sat'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sat'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-        <tr>
-          <td><%- @T('Sunday') %></td><td><% if !calendar.business_hours['sun'].active || _.isEmpty(calendar.business_hours['sun'].timeframes): %>-<% else: %><% for frame in calendar.business_hours['sun'].timeframes: %><%= frame[0] %>-<%= frame[1] %> </td><td><% end %><% end %></td>
-        </tr>
-      </table>
-    </div>
-    <div class="action-block action-block--flex">
-      <div class="label"><%- @T('Holidays') %></div>
-      <table class="table">
-        <% if _.isEmpty(calendar.public_holidays_preview): %>-<% end %>
-        <% for holiday, meta of calendar.public_holidays_preview: %>
-          <tr <% if !meta.active: %>class="is-inactive"<% end %>>
-            <td style="width: 96px"><%- @Tdate(holiday) %>
-            <td><%= meta.summary %>
-        <% end %>
-      </table>
+    <div class="action-controls">
+      <% if !calendar.default: %>
+        <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
+        <div class="sla-toggle btn btn--secondary js-default"><%- @T('Set as Default') %></div>
+      <% else: %>
+        <div class="btn btn--danger btn--secondary is-disabled"><%- @T('Delete') %></div>
+      <% end %>
+      <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
     </div>
   </div>
-  <div class="action-controls">
-    <% if !calendar.default: %>
-      <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
-      <div class="sla-toggle btn btn--secondary js-default"><%- @T('Set as Default') %></div>
-    <% else: %>
-      <div class="btn btn--danger btn--secondary is-disabled"><%- @T('Delete') %></div>
-    <% end %>
-    <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
-  </div>
-</div>
-<% end %>
+  <% end %>
+</div>

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -3,7 +3,7 @@
     <h1><%- @T('Chat Widget') %></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
   
   <h2><%- @T('Designer') %></h2>
@@ -197,6 +197,5 @@ $(function() {
     </tbody>
   </table>
 <% end %>
-  <hr>
 
 </div>

app/assets/javascripts/app/views/channel/form.jst.eco

@@ -3,7 +3,7 @@
     <h1><%- @T('Form') %> <small></small></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
 
   <div class="js-settings"></div>

app/assets/javascripts/app/views/customer_ticket_create.jst.eco

@@ -6,24 +6,25 @@
           <h1><%- @T( 'New Ticket' ) %></h1>
         </div>
 
-        <form role="form" class="ticket-create">
-          <input type="hidden" name="form_id" value="<%= @form_id %>"/>
+        <div class="page-content">
+          <form role="form" class="ticket-create">
+            <input type="hidden" name="form_id" value="<%= @form_id %>"/>
 
-          <div class="ticket-form-top"></div>
-          <div class="article-form-top"></div>
+            <div class="ticket-form-top"></div>
+            <div class="article-form-top"></div>
 
-          <div class="formset-inset">
-            <div class="ticket-form-middle horizontal two-columns"></div>
-            <div class="ticket-form-bottom"></div>
-          </div>
+            <div class="formset-inset">
+              <div class="ticket-form-middle horizontal two-columns"></div>
+              <div class="ticket-form-bottom"></div>
+            </div>
 
 
-          <div class="form-controls">
-            <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
-            <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
-          </div>
-        </form>
-
+            <div class="form-controls">
+              <a class="btn btn--text btn--subtle js-cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+              <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   </div>

app/assets/javascripts/app/views/generic/admin/index.jst.eco

@@ -14,4 +14,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>

app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco

@@ -16,6 +16,7 @@
       <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
     </div>
   </div>
-  <div class="nav-tab-content"></div>
-
+  <div class="page-content">
+    <div class="nav-tab-content"></div>
+  </div>
 </div>

app/assets/javascripts/app/views/generic/tabs.jst.eco

@@ -3,9 +3,11 @@
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
 </div>
-<ul class="nav nav-tabs" role="tablist">
-  <% for tab in @tabs: %>
-    <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
-  <% end %>
-</ul>
-<div class="tab-content"></div>
+<div class="page-content">
+  <ul class="nav nav-tabs" role="tablist">
+    <% for tab in @tabs: %>
+      <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
+    <% end %>
+  </ul>
+  <div class="tab-content"></div>
+</div>

app/assets/javascripts/app/views/maintenance.jst.eco

@@ -1,21 +1,30 @@
-<div class="page-header-title">
-  <h1><%- @T('Maintenance Message') %><small></small></h1>
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T('Maintenance Message') %><small></small></h1>
+  </div>
 </div>
-<form id="maintenanceForm">
-  <div class="form-group">
-    <label for="maintenance-title"><%- @T('Title') %></label>
-    <div class="controls">
-      <input type="text" id="maintenance-title" name="head" class="form-control" required>
+<div class="page-content">
+  <form id="maintenanceForm">
+    <div class="form-group">
+      <label for="maintenance-title"><%- @T('Title') %></label>
+      <div class="controls">
+        <input type="text" id="maintenance-title" name="head" class="form-control" required>
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label for="maintenance-message"><%- @T('Message') %></label>
-    <div class="controls">
-    <textarea id="maintenance-message" name="message" class="form-control" rows="8" required></textarea>
+    <div class="form-group">
+      <label for="maintenance-message"><%- @T('Message') %></label>
+      <div class="controls">
+      <textarea id="maintenance-message" name="message" class="form-control" rows="8" required></textarea>
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label><input name="reload" type="checkbox" value="1"> <%- @T('Reload application') %></label>
-  </div>
-  <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
-</form>
+    <div class="form-group">
+      <label class="inline-label checkbox-replacement">
+        <input name="reload" type="checkbox" value="1">
+        <%- @Icon('checkbox', 'icon-unchecked') %>
+        <%- @Icon('checkbox-checked', 'icon-checked') %>
+        <span class="label-text"><%- @T('Reload application') %></span>
+      </label>
+    </div>
+    <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
+  </form>
+</div>