redesign admin objects
This commit is contained in:
parent
23b15acf52
commit
ec2b4ea215
16 changed files with 133 additions and 73 deletions
|
@ -1,7 +1,7 @@
|
||||||
<div class="tabsSidebar-holder flex horizontal">
|
<div class="tabsSidebar-holder flex horizontal">
|
||||||
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
|
<div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
|
||||||
<div class="newTicket">
|
<div class="newTicket">
|
||||||
<div class="box">
|
<div class="box box--newTicket">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1><%- @T( @head ) %></h1>
|
<h1><%- @T( @head ) %></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="fit vertical">
|
<div class="fit vertical">
|
||||||
<div class="tableOverview flex scrollable">
|
<div class="tableOverview flex scrollable">
|
||||||
<div class="horizontal">
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<h1><%- @T( @overview.name ) %></h1>
|
<h1><%- @T( @overview.name ) %></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="horizontal flex">
|
<div class="horizontal flex">
|
||||||
<div class="main no-padding flex">
|
<div class="main no-padding flex">
|
||||||
<div class="newTicket">
|
<div class="newTicket">
|
||||||
<div class="box">
|
<div class="box box--newTicket">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1><%- @T( 'New Ticket' ) %></h1>
|
<h1><%- @T( 'New Ticket' ) %></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="horizontal">
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<h1 class="can-move"><%- @T( @overview.name ) %></h1>
|
<h1 class="can-move"><%- @T( @overview.name ) %></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<div class="horizontal">
|
|
||||||
<h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
|
<h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
|
||||||
|
</div>
|
||||||
<div class="page-header-meta">
|
<div class="page-header-meta">
|
||||||
<% if @buttons: %>
|
<% if @buttons: %>
|
||||||
<% for button in @buttons: %>
|
<% for button in @buttons: %>
|
||||||
|
@ -9,6 +10,5 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-overview"></div>
|
<div class="table-overview"></div>
|
|
@ -11,9 +11,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="main flex">
|
<div class="main flex">
|
||||||
|
|
||||||
<div class="page-header horizontal">
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
<h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
|
<h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="nav-tab-content"></div>
|
<div class="nav-tab-content"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
|
@ -2,7 +2,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="main flex">
|
<div class="main flex">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
<h1><%- @T( @head ) %> <small><%- @T( @sub_head ) %></small></h1>
|
<h1><%- @T( @head ) %> <small><%- @T( @sub_head ) %></small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="page-content"></div>
|
<div class="page-content"></div>
|
||||||
</div>
|
</div>
|
|
@ -30,7 +30,7 @@
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header horizontal">
|
<div class="page-header">
|
||||||
<div class="flex vertical center">
|
<div class="flex vertical center">
|
||||||
<span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
|
<span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
|
||||||
<div class="ticket-title">
|
<div class="ticket-title">
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
<h1>Networking <small></small></h1>
|
<h1>Networking <small></small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="">
|
<div class="">
|
||||||
|
|
|
@ -1,34 +1,42 @@
|
||||||
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<h1><%- @T( @head ) %> <small><%- @T( 'Object Manager' ) %></small></h1>
|
<h1><%- @T( @head ) %> <small><%- @T( 'Object Manager' ) %></small></h1>
|
||||||
|
</div>
|
||||||
<div class="page-header-meta">
|
<div class="page-header-meta">
|
||||||
<a class="btn js-restore"><%- @T( 'Restore Attributes to default' ) %></a>
|
<a class="btn js-restore"><%- @T( 'Restore Defaults' ) %></a>
|
||||||
<a class="btn btn--danger js-sync"><%- @T( 'Sync Changes' ) %> <span class="glyphicon glyphicon-lock"></span></a>
|
|
||||||
<a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
|
<a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table class="table table-striped table-hover">
|
<div class="box box--message">
|
||||||
|
<h2>Database Update required</h2>
|
||||||
|
<p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
|
||||||
|
<div class="box-controls">
|
||||||
|
<div class="subtle-link standalone js-discard">Discard Changes</div>
|
||||||
|
<div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box box--message">
|
||||||
|
<div class="box-progress">
|
||||||
|
<div class="box-progress-title"><%- @T('Updating Database') %></div>
|
||||||
|
<div class="box-progress-body">
|
||||||
|
<progress max="100" value="50"></progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="table table-striped table-hover is-disabled">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class=""><%- @T('State') %></th>
|
|
||||||
<th class=""><%- @T('Display') %></th>
|
<th class=""><%- @T('Display') %></th>
|
||||||
<th class=""><%- @T('Name') %></th>
|
<th class=""><%- @T('Name') %></th>
|
||||||
<th class=""><%- @T('Type') %></th>
|
<th class=""><%- @T('Type') %></th>
|
||||||
<th class=""><%- @T('Actions') %></th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<% for item in @items: %>
|
<% for item in @items: %>
|
||||||
<tr class="<% if item.active is false: %>not-active<% end %> js-edit u-clickable" data-id="<%- item.id %>">
|
<tr class="<% if item.active is false: %>is-inactive<% end %> js-edit u-clickable" data-id="<%- item.id %>">
|
||||||
<td><span class="glyphicon <% if item.pending_migration: %>glyphicon-flash<% end %> <% if item.active: %>glyphicon-ok<% else: %>glyphicon-remove<% end %>"></span></td>
|
|
||||||
<td><%= item.display %></td>
|
<td><%= item.display %></td>
|
||||||
<td><%= item.name %></td>
|
<td><%= item.name %></td>
|
||||||
<td><%= item.data_type %></td>
|
<td><%= item.data_type %></td>
|
||||||
<td>
|
|
||||||
<a href="#" class="glyphicon glyphicon-chevron-up js-up"></a><a href="#" class="glyphicon glyphicon-chevron-down js-down"></a>
|
|
||||||
<% if item.editable: %>
|
|
||||||
<a href="#" data-id="<%- item.id %>" data-type="delete" class="glyphicon glyphicon-trash" title="<%- @Ti('Delete') %>"></a>
|
|
||||||
<% end %>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
<% end %>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<div class="horizontal">
|
|
||||||
<h1><%- @T( 'Avatar' ) %></h1>
|
<h1><%- @T( 'Avatar' ) %></h1>
|
||||||
|
</div>
|
||||||
<div class="page-header-meta">
|
<div class="page-header-meta">
|
||||||
<% if @webcamSupport: %>
|
<% if @webcamSupport: %>
|
||||||
<div class="btn btn--success js-openCamera"><%- @T('Camera') %></div>
|
<div class="btn btn--success js-openCamera"><%- @T('Camera') %></div>
|
||||||
|
@ -8,7 +9,6 @@
|
||||||
<div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
|
<div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="avatar-gallery">
|
<div class="avatar-gallery">
|
||||||
<% for avatar in @avatars: %>
|
<% for avatar in @avatars: %>
|
||||||
<div class="avatar-holder">
|
<div class="avatar-holder">
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="overview-navigator"></div>
|
<div class="overview-navigator"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="overview-navigator horizontal"></div>
|
<div class="overview-navigator horizontal"></div>
|
||||||
<div class="page-header horizontal">
|
<div class="page-header">
|
||||||
<div class="flex vertical center">
|
<div class="flex vertical center">
|
||||||
<div class="js-avatar"></div>
|
<div class="js-avatar"></div>
|
||||||
<div class="ticket-title"></div>
|
<div class="ticket-title"></div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="horizontal">
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<h1><%- @T('Translations') %> <small></small></h1>
|
<h1><%- @T('Translations') %> <small></small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
|
<div class="page-header-title">
|
||||||
<h1>Trigger <small>Management</small></h1>
|
<h1>Trigger <small>Management</small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span3">
|
<div class="span3">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="horizontal">
|
<div class="page-header">
|
||||||
<div class="page-header-title">
|
<div class="page-header-title">
|
||||||
<h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
|
<h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,6 +14,7 @@ body {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
background: hsl(210,17%,98%);
|
background: hsl(210,17%,98%);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
color: hsl(198,19%,72%);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
@ -457,7 +458,6 @@ table {
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
display: table;
|
display: table;
|
||||||
color: hsl(198,19%,72%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table .table-row {
|
.table .table-row {
|
||||||
|
@ -503,6 +503,15 @@ table {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table tr.is-inactive {
|
||||||
|
opacity: 0.5;
|
||||||
|
text-decoration: line-through;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.table .icon-trash {
|
.table .icon-trash {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
fill: hsl(240,1%,77%);
|
fill: hsl(240,1%,77%);
|
||||||
|
@ -935,11 +944,12 @@ textarea,
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
|
margin: 0 0 15px;
|
||||||
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.page-header-title {
|
flex-wrap: wrap;
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-title h1 {
|
.page-header-title h1 {
|
||||||
|
@ -947,13 +957,12 @@ textarea,
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-meta {
|
.page-header-meta {
|
||||||
margin-top: 6px;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
padding-left: 9px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-self: flex-start;
|
|
||||||
|
|
||||||
.btn {
|
.btn + .btn {
|
||||||
margin: 0 0 2px 9px;
|
margin-left: 9px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1461,13 +1470,6 @@ footer {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
.not-active {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
.not-active a {
|
|
||||||
color: #bbb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.translation {
|
.translation {
|
||||||
border: 1px dotted #F92;
|
border: 1px dotted #F92;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -2089,10 +2091,6 @@ footer {
|
||||||
margin: 21px 0 12px;
|
margin: 21px 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.NavBarAdmin + .main p {
|
|
||||||
color: hsl(198,19%,72%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-stacked > li + li {
|
.nav-stacked > li + li {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
@ -2741,7 +2739,6 @@ footer {
|
||||||
|
|
||||||
.ticketZoom .page-header {
|
.ticketZoom .page-header {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3620,7 +3617,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.newTicket {
|
.newTicket {
|
||||||
padding: 34px;
|
padding: 14px 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newTicket .sidebar {
|
.newTicket .sidebar {
|
||||||
|
@ -3638,22 +3635,31 @@ footer {
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
background: white;
|
background: white;
|
||||||
margin: 0 auto;
|
margin: 20px 0;
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
padding: 12px 24px 20px;
|
padding: 20px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box.box--newTicket {
|
||||||
max-width: 658px;
|
max-width: 658px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box .page-header {
|
.box .page-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin-bottom: 12px;
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box h1 {
|
.box h1 {
|
||||||
|
margin-top: 12px;
|
||||||
color: hsl(60,1%,34%);
|
color: hsl(60,1%,34%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box h2 {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.box .two-columns {
|
.box .two-columns {
|
||||||
margin-left: -4px;
|
margin-left: -4px;
|
||||||
margin-right: -4px;
|
margin-right: -4px;
|
||||||
|
@ -3665,6 +3671,44 @@ footer {
|
||||||
width: calc(50% - 8px);
|
width: calc(50% - 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-controls {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box--yellow {
|
||||||
|
background: hsl(47,100%,93%);
|
||||||
|
border-color: hsl(47,100%,75%);
|
||||||
|
color: hsl(47,20%,67%);
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
color: hsl(47,3%,28%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-progress {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-progress-title {
|
||||||
|
color: hsl(47,3%,28%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-progress-body {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
progress {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.formset-inset {
|
.formset-inset {
|
||||||
margin: 34px -24px 24px;
|
margin: 34px -24px 24px;
|
||||||
padding: 19px 24px 24px;
|
padding: 19px 24px 24px;
|
||||||
|
|
Loading…
Reference in a new issue