userZoom layout reference
This commit is contained in:
parent
cfd5b52fb9
commit
3698bb24c5
8 changed files with 515 additions and 73 deletions
|
@ -65,37 +65,37 @@
|
||||||
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
|
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
|
||||||
</div>
|
</div>
|
||||||
<label><%- @T('Tickets') %></label>
|
<label><%- @T('Tickets') %></label>
|
||||||
<ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
|
<ol class="tasks tasks--standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -/->
|
||||||
<li class="task level-1 horizontal">
|
<li class="task level-1">
|
||||||
<div class="icon-holder">
|
<div class="icon-holder">
|
||||||
<div class="priority icon"></div>
|
<div class="priority icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
|
<div class="name">Micro-SIM doesn't work</div>
|
||||||
<div class="time">23 minutes ago</div>
|
<div class="time">23 minutes ago</div>
|
||||||
</div>
|
</div>
|
||||||
<li class="task level-3 horizontal">
|
<li class="task level-3">
|
||||||
<div class="icon-holder">
|
<div class="icon-holder">
|
||||||
<div class="priority icon"></div>
|
<div class="priority icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="u-highlight name u-textTruncate">Superb Service!</div>
|
<div class="name">Superb Service!</div>
|
||||||
<div class="time">43 minutes ago</div>
|
<div class="time">43 minutes ago</div>
|
||||||
</div>
|
</div>
|
||||||
<li class="task level-2 horizontal">
|
<li class="task level-2">
|
||||||
<div class="icon-holder">
|
<div class="icon-holder">
|
||||||
<div class="priority icon"></div>
|
<div class="priority icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
|
<div class="name">Print sheets strip off</div>
|
||||||
<div class="time">1 hour ago</div>
|
<div class="time">1 hour ago</div>
|
||||||
</div>
|
</div>
|
||||||
<li class="task level-3 horizontal">
|
<li class="task level-3">
|
||||||
<div class="icon-holder">
|
<div class="icon-holder">
|
||||||
<div class="priority icon"></div>
|
<div class="priority icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="u-highlight name u-textTruncate">Block not properly wrought</div>
|
<div class="name">Block not properly wrought</div>
|
||||||
<div class="time">2 hour ago</div>
|
<div class="time">2 hour ago</div>
|
||||||
</div>
|
</div>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="main flex center">
|
<div class="dashboard main flex center">
|
||||||
<div class="tabs wide-tabs horizontal">
|
<div class="tabs wide-tabs horizontal">
|
||||||
<div class="tab my-stats active">My Stats</div>
|
<div class="tab my-stats active">My Stats</div>
|
||||||
<div class="tab my-groups">My Group</div>
|
<div class="tab my-groups">My Group</div>
|
||||||
|
@ -9,69 +9,69 @@
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="time stat-widget vertical">
|
<div class="time stat-widget vertical">
|
||||||
<h3>∅ Waiting time today</h3>
|
<h3>∅ Waiting time today</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="stopwatch icon centered">
|
<div class="stopwatch icon centered">
|
||||||
<canvas class="stat-dial"></canvas>
|
<canvas class="stat-dial"></canvas>
|
||||||
<div class="stat-amount"></div>
|
<div class="stat-amount"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-label u-textTruncate">My handling time: 25 minutes</div>
|
<div class="stat-label">My handling time: 25 minutes</div>
|
||||||
<div class="stat-detail u-textTruncate">Average: 13%</div>
|
<div class="stat-detail">Average: 13%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="mood stat-widget vertical">
|
<div class="mood stat-widget vertical">
|
||||||
<h3>Mood</h3>
|
<h3>Mood</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="mood icon bad-state"></div>
|
<div class="mood icon bad-state"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-label u-textTruncate">3% of my tickets escalated.</div>
|
<div class="stat-label">3% of my tickets escalated.</div>
|
||||||
<div class="stat-detail u-textTruncate">Average: 17%</div>
|
<div class="stat-detail">Average: 17%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="channel-distribution stat-widget vertical centered">
|
<div class="channel-distribution stat-widget vertical centered">
|
||||||
<h3>Channel Distribution</h3>
|
<h3>Channel Distribution</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="stats-channel email-channel vertical center">
|
<div class="stats-row email-channel">
|
||||||
<div class="email channel icon"></div>
|
<div class="email channel icon"></div>
|
||||||
<div class="channel-bars horizontal end justify-center">
|
<div class="stat-bars">
|
||||||
<div class="channel-bar primary" style="height: 80%"></div>
|
<div class="stat-bar primary" style="height: 80%"></div>
|
||||||
<div class="channel-bar secondary" style="height: 100%"></div>
|
<div class="stat-bar secondary" style="height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-percentage">34%</div>
|
<div class="stat-label">34%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-channel received-calls-channel vertical center">
|
<div class="stats-row received-calls-channel">
|
||||||
<div class="received-calls channel icon"></div>
|
<div class="received-calls channel icon"></div>
|
||||||
<div class="channel-bars horizontal end justify-center">
|
<div class="stat-bars">
|
||||||
<div class="channel-bar primary" style="height: 53%"></div>
|
<div class="stat-bar primary" style="height: 53%"></div>
|
||||||
<div class="channel-bar secondary" style="height: 47%"></div>
|
<div class="stat-bar secondary" style="height: 47%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-percentage">26%</div>
|
<div class="stat-label">26%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-channel outbound-calls-channel vertical center">
|
<div class="stats-row outbound-calls-channel">
|
||||||
<div class="outbound-calls channel icon"></div>
|
<div class="outbound-calls channel icon"></div>
|
||||||
<div class="channel-bars horizontal end justify-center">
|
<div class="stat-bars">
|
||||||
<div class="channel-bar primary" style="height: 46%"></div>
|
<div class="stat-bar primary" style="height: 46%"></div>
|
||||||
<div class="channel-bar secondary" style="height: 53%"></div>
|
<div class="stat-bar secondary" style="height: 53%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-percentage">24%</div>
|
<div class="stat-label">24%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-channel facebook-channel vertical center">
|
<div class="stats-row facebook-channel">
|
||||||
<div class="facebook channel icon"></div>
|
<div class="facebook channel icon"></div>
|
||||||
<div class="channel-bars horizontal end justify-center">
|
<div class="stat-bars">
|
||||||
<div class="channel-bar primary" style="height: 24%"></div>
|
<div class="stat-bar primary" style="height: 24%"></div>
|
||||||
<div class="channel-bar secondary" style="height: 18%"></div>
|
<div class="stat-bar secondary" style="height: 18%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-percentage">12%</div>
|
<div class="stat-label">12%</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stats-channel twitter-channel vertical center">
|
<div class="stats-row twitter-channel">
|
||||||
<div class="twitter channel icon"></div>
|
<div class="twitter channel icon"></div>
|
||||||
<div class="channel-bars horizontal end justify-center">
|
<div class="stat-bars">
|
||||||
<div class="channel-bar primary" style="height: 13%"></div>
|
<div class="stat-bar primary" style="height: 13%"></div>
|
||||||
<div class="channel-bar secondary" style="height: 16%"></div>
|
<div class="stat-bar secondary" style="height: 16%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="channel-percentage">4%</div>
|
<div class="stat-label">4%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,7 +79,7 @@
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="status stat-widget vertical">
|
<div class="status stat-widget vertical">
|
||||||
<h3>Status</h3>
|
<h3>Status</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="stat-tickets vertical reverse end">
|
<div class="stat-tickets vertical reverse end">
|
||||||
<div class="stat-ticket icon supergood-state"></div>
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
<div class="stat-ticket icon supergood-state"></div>
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
@ -90,28 +90,28 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-all-tickets icon"></div>
|
<div class="stat-all-tickets icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-label u-textTruncate">Tickets of my Group: 78 of 234</div>
|
<div class="stat-label">Tickets of my Group: 78 of 234</div>
|
||||||
<div class="stat-detail u-textTruncate">Average: 22%</div>
|
<div class="stat-detail">Average: 22%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="in-process stat-widget vertical">
|
<div class="in-process stat-widget vertical">
|
||||||
<h3>Tickets in process</h3>
|
<h3>Tickets in process</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="in-process icon supergood-state"></div>
|
<div class="in-process icon supergood-state"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-label u-textTruncate">74% are currently in process</div>
|
<div class="stat-label">74% are currently in process</div>
|
||||||
<div class="stat-detail u-textTruncate">Average: 62%</div>
|
<div class="stat-detail">Average: 62%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="reopening stat-widget vertical">
|
<div class="reopening stat-widget vertical">
|
||||||
<h3>Reopening rate</h3>
|
<h3>Reopening rate</h3>
|
||||||
<div class="stat-graphic flex horizontal centered">
|
<div class="stat-graphic">
|
||||||
<div class="reopening icon ok-state"></div>
|
<div class="reopening icon ok-state"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-label u-textTruncate">7% are being reopened</div>
|
<div class="stat-label">7% are being reopened</div>
|
||||||
<div class="stat-detail u-textTruncate">Average: 6%</div>
|
<div class="stat-detail">Average: 6%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="dropdown dropup actions">
|
<div class="dropdown dropup dropdown--actions">
|
||||||
<button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
|
<button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<% for item in @items: %>
|
<% for item in @items: %>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<div class="u-positionOrigin">
|
<div class="u-positionOrigin">
|
||||||
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
|
<input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
|
||||||
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
<input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
||||||
|
<span class="select-arrow icon"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dropdown-menu" aria-labelledby="customer_id">
|
<div class="dropdown-menu" aria-labelledby="customer_id">
|
||||||
|
|
|
@ -71,7 +71,7 @@
|
||||||
|
|
||||||
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
|
<div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
|
||||||
<input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
<input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
|
||||||
<span class="caret"></span>
|
<span class="select-arrow icon"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dropdown-menu" aria-labelledby="customer_id">
|
<div class="dropdown-menu" aria-labelledby="customer_id">
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
<li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
|
<li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
|
||||||
<li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
|
<li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
|
||||||
<li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
|
<li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
|
||||||
|
<li><a href="#layout_ref/user_zoom">User Profile</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
269
app/assets/javascripts/app/views/layout_ref/user_zoom.jst.eco
Normal file
269
app/assets/javascripts/app/views/layout_ref/user_zoom.jst.eco
Normal file
|
@ -0,0 +1,269 @@
|
||||||
|
<div class="flex userZoom">
|
||||||
|
|
||||||
|
<div class="userZoom-window">
|
||||||
|
<div class="userZoom-section vertical centered">
|
||||||
|
<div class="align-right userZoom-action dropdown dropdown--actions">
|
||||||
|
<div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown">
|
||||||
|
<div class="light cog icon"></div>
|
||||||
|
<label>Aktion</label>
|
||||||
|
<span class="select-arrow icon"></span>
|
||||||
|
</div>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
|
||||||
|
<li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
|
||||||
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Änderungsprotokoll</a>
|
||||||
|
<li role="presentation"><a role="menuitem" tabindex="-1">Benutzer zusammenführen</a>
|
||||||
|
<li role="presentation"><a role="menuitem" tabindex="-1">Benutzer löschen</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||||
|
<h1>Doreen Kubiak</h1>
|
||||||
|
<div class="userZoom-organisation">Steuerbüro C. Kaik</div>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-section">
|
||||||
|
<div class="userZoom-details horizontal wrap">
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Email</label>
|
||||||
|
<a href="mailto:doreen.kubiak@gmail.com">doreen.kubiak@gmail.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Organisation</label>
|
||||||
|
Steuerbüro C. Kaik
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Web</label>
|
||||||
|
<a href="http://ckaik.com" target="_blank">chaik.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Strasse</label>
|
||||||
|
Johannitergasse 2/2
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Telefon</label>
|
||||||
|
+43 5522 36346
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>PLZ, ORT</label>
|
||||||
|
6800 Feldkirch
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Mobile-Nr.</label>
|
||||||
|
+43 699 4565789
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-detailsEntry">
|
||||||
|
<label>Land</label>
|
||||||
|
Österreich
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-section">
|
||||||
|
<!-- if user has organisation -->
|
||||||
|
<div class="tabs wide-tabs horizontal">
|
||||||
|
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
|
||||||
|
<div class="tab js-organisationTickets">Tickets von Steuerbüro C. Kaik</div>
|
||||||
|
</div>
|
||||||
|
<!-- endif -->
|
||||||
|
<div class="userZoom-ticketLists horizontal">
|
||||||
|
<div class="userZoom-ticketList">
|
||||||
|
<label>Offene Tickets (23)</label>
|
||||||
|
<ol class="tasks tasks--standalone">
|
||||||
|
<li class="task level-2">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Micro-SIM doesn't work</div>
|
||||||
|
<div class="time">23 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-2">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Superb Service!</div>
|
||||||
|
<div class="time">43 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-2">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Print sheets strip off</div>
|
||||||
|
<div class="time">1 hour ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-2">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Block not properly wrought</div>
|
||||||
|
<div class="time">2 hour ago</div>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<a href="#">Alle Tickets von Doreen Kubiak …</a>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-ticketList">
|
||||||
|
<label>Bearbeitete Tickets (12)</label>
|
||||||
|
<ol class="tasks tasks--standalone">
|
||||||
|
<li class="task level-1">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Micro-SIM doesn't work</div>
|
||||||
|
<div class="time">23 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-1">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Superb Service!</div>
|
||||||
|
<div class="time">43 minutes ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-1">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Print sheets strip off</div>
|
||||||
|
<div class="time">1 hour ago</div>
|
||||||
|
</div>
|
||||||
|
<li class="task level-1">
|
||||||
|
<div class="icon-holder">
|
||||||
|
<div class="priority icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">Block not properly wrought</div>
|
||||||
|
<div class="time">2 hour ago</div>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<a href="#">Alle Tickets von Steuerbüro C. Kaik …</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-section horizontal two-columns">
|
||||||
|
<div class="column status stat-widget vertical">
|
||||||
|
<h3>Status</h3>
|
||||||
|
<div class="stat-graphic">
|
||||||
|
<div class="stat-tickets vertical reverse end">
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
<div class="stat-ticket icon supergood-state"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-all-tickets icon"></div>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
Achtung: hier müssen wir schauen, dass wir das Widget genauso verwenden wie im Dashboard. Sonst gibt's Verwirrung.
|
||||||
|
-->
|
||||||
|
<div class="stat-label">Tickets of my Group: 78 of 234</div>
|
||||||
|
<div class="stat-detail">Average: 22%</div>
|
||||||
|
</div>
|
||||||
|
<div class="column mood stat-widget vertical">
|
||||||
|
<h3>Stimmung</h3>
|
||||||
|
<div class="stat-graphic">
|
||||||
|
<div class="mood icon supergood-state"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">3% of my tickets escalated.</div>
|
||||||
|
<div class="stat-detail">Average: 17%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="userZoom-section">
|
||||||
|
<div class="frequency stat-widget vertical">
|
||||||
|
<h3>Frequency</h3>
|
||||||
|
<div class="stat-graphic">
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 80%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 34%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Jan</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 53%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 47%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Feb</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 46%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 21%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Mär</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 24%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 18%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Apr</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 13%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 5%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Mai</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 18%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 10%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Jun</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 50%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 8%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Jul</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 67%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 13%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Aug</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 34%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 2%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Sep</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 5%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 0%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Okt</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 25%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 0%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Nov</div>
|
||||||
|
</div>
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-bars">
|
||||||
|
<div class="stat-bar primary" style="height: 80%"></div>
|
||||||
|
<div class="stat-bar secondary" style="height: 5%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">Dez</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-legend">
|
||||||
|
<div class="stat-legendEntry primary"><span class="primary stat-circle"></span>Bearbeitet</div>
|
||||||
|
<div class="stat-legendEntry secondary"><span class="secondary stat-circle"></span>Offen</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -15,8 +15,13 @@ p {
|
||||||
margin: 14px 0;
|
margin: 14px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.u-highlight {
|
||||||
|
color: hsl(194,90%,45%);
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
|
@extend .u-highlight;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.create {
|
a.create {
|
||||||
|
@ -29,10 +34,6 @@ small {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-highlight {
|
|
||||||
color: hsl(194,90%,45%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.u-unclickable {
|
.u-unclickable {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
@ -528,7 +529,7 @@ textarea,
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select.form-control + .select-arrow {
|
.form-control + .select-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -759,7 +760,6 @@ ol.tabs li {
|
||||||
}
|
}
|
||||||
|
|
||||||
.wide-tabs {
|
.wide-tabs {
|
||||||
width: 60%;
|
|
||||||
margin: 25px auto 20px;
|
margin: 25px auto 20px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
@ -767,6 +767,10 @@ ol.tabs li {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard .wide-tabs {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
.wide-tabs .tab:first-child {
|
.wide-tabs .tab:first-child {
|
||||||
border-radius: 8px 0 0 8px;
|
border-radius: 8px 0 0 8px;
|
||||||
}
|
}
|
||||||
|
@ -1304,6 +1308,7 @@ ol.tabs li {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
background-position: -81px -308px;
|
background-position: -81px -308px;
|
||||||
|
margin-top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark.group.icon {
|
.dark.group.icon {
|
||||||
|
@ -1690,29 +1695,35 @@ footer {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks.tasks-standalone {
|
.tasks.tasks--standalone {
|
||||||
background: none;
|
background: none;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-standalone .task {
|
.tasks--standalone .task {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
|
@extend .horizontal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-standalone .icon-holder {
|
.tasks-standalone .name {
|
||||||
|
@extend .u-highlight;
|
||||||
|
@extend .u-textTruncate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tasks--standalone .icon-holder {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-standalone .icon-holder .icon {
|
.tasks--standalone .icon-holder .icon {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-standalone .time {
|
.tasks--standalone .time {
|
||||||
color: hsl(198,19%,72%);
|
color: hsl(198,19%,72%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-standalone .task .priority.icon:after {
|
.tasks--standalone .task .priority.icon:after {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2322,10 +2333,13 @@ footer {
|
||||||
|
|
||||||
.stat-widget {
|
.stat-widget {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
margin: 7px;
|
|
||||||
padding: 13px;
|
padding: 13px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .stat-widget {
|
||||||
|
margin: 7px;
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #e5f0f5;
|
border: 1px solid #e5f0f5;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
@ -2341,16 +2355,22 @@ footer {
|
||||||
|
|
||||||
.stat-widget .stat-label {
|
.stat-widget .stat-label {
|
||||||
color: #444a4f;
|
color: #444a4f;
|
||||||
|
@extend .u-textTruncate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-widget .stat-detail {
|
.stat-widget .stat-detail {
|
||||||
color: #b4b7b9;
|
color: #b4b7b9;
|
||||||
|
@extend .u-textTruncate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-distribution.stat-widget {
|
.channel-distribution.stat-widget {
|
||||||
color: #a1a4a7;
|
color: #a1a4a7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stat-graphic {
|
||||||
|
@extend .flex, .horizontal, .centered;
|
||||||
|
}
|
||||||
|
|
||||||
.time.stat-widget .stat-graphic .icon {
|
.time.stat-widget .stat-graphic .icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -2370,17 +2390,18 @@ footer {
|
||||||
left: 14px;
|
left: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-channel {
|
.stats-row {
|
||||||
padding: 8px 0 7px;
|
padding: 8px 0 7px;
|
||||||
margin-bottom: -7px;
|
margin-bottom: -7px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@extend .vertical, .center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-channel:hover {
|
.stats-row:hover {
|
||||||
background: rgba(0,8,14,.03);
|
background: rgba(0,8,14,.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stats-channel .channel-bars {
|
.stats-row .stat-bars {
|
||||||
height: 73px;
|
height: 73px;
|
||||||
margin: 16px 0 15px;
|
margin: 16px 0 15px;
|
||||||
padding: 2px 12px;
|
padding: 2px 12px;
|
||||||
|
@ -2388,18 +2409,62 @@ footer {
|
||||||
background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px);
|
background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px);
|
||||||
background-position: center bottom;
|
background-position: center bottom;
|
||||||
background-size: 100% 12px;
|
background-size: 100% 12px;
|
||||||
|
@extend .horizontal, .end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-bars .channel-bar {
|
.stat-bars .stat-bar {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
|
color: #a9bcc4;
|
||||||
background: #a9bcc4;
|
background: #a9bcc4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channel-bars .channel-bar.secondary {
|
.stat-widget .secondary {
|
||||||
opacity: .38;
|
opacity: .38;
|
||||||
|
color: #a9bcc4;
|
||||||
|
background: #a9bcc4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stat-legend {
|
||||||
|
margin-top: 30px;
|
||||||
|
@extend .align-right, .horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-legendEntry {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-circle {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
margin-right: 7px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frequency.stat-widget {
|
||||||
|
.stat-bars {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: #a1a4a7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
color: hsl(145,51%,45%);
|
||||||
|
background: hsl(145,51%,45%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.activity.sidebar {
|
.activity.sidebar {
|
||||||
width: 370px;
|
width: 370px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -3550,7 +3615,7 @@ footer {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
min-width: 100%;
|
||||||
color: white;
|
color: white;
|
||||||
background: none;
|
background: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
@ -3559,6 +3624,10 @@ footer {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
@extend .u-clickable;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown ul {
|
.dropdown ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: hsl(234,10%,19%);
|
background: hsl(234,10%,19%);
|
||||||
|
@ -3598,10 +3667,14 @@ footer {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown.actions li {
|
.dropdown.dropdown--actions li {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown.dropdown--actions a {
|
||||||
|
@extend .u-clickable;
|
||||||
|
}
|
||||||
|
|
||||||
.recipientList,
|
.recipientList,
|
||||||
.recipientList-organisationMembers {
|
.recipientList-organisationMembers {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
@ -3622,6 +3695,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipientList-name {
|
.recipientList-name {
|
||||||
|
color: white;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
@ -4083,6 +4157,103 @@ footer {
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.userZoom {
|
||||||
|
padding: 60px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 18px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-window {
|
||||||
|
background: white;
|
||||||
|
max-width: 660px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-section {
|
||||||
|
padding: 20px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-section:not(:last-child) {
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-action {
|
||||||
|
margin-right: -20px;
|
||||||
|
|
||||||
|
.dropdown-toggle {
|
||||||
|
margin-top: -20px;
|
||||||
|
margin-right: -30px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 26px 40px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin: 0 10px;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0.8;
|
||||||
|
cursor: inherit;
|
||||||
|
}
|
||||||
|
.cog.icon {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-organisation {
|
||||||
|
font-size: 16px;
|
||||||
|
@extend .u-highlight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-details {
|
||||||
|
margin-left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-detailsEntry {
|
||||||
|
margin: 8px 0;
|
||||||
|
padding-left: 50px;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-detailsEntry label {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-ticketList {
|
||||||
|
@extend .flex;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom-ticketList {
|
||||||
|
ol {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
@extend .u-highlight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userZoom .frequency.stat-widget {
|
||||||
|
height: 230px;
|
||||||
|
|
||||||
|
.stat-bars {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue