userZoom layout reference

This commit is contained in:
Felix Niklas 2014-11-07 14:37:02 +01:00
parent cfd5b52fb9
commit 3698bb24c5
8 changed files with 515 additions and 73 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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: %>

View file

@ -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">

View file

@ -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">

View file

@ -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>

View 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>

View file

@ -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;
}
}
/* /*