redesign admin objects

This commit is contained in:
Felix Niklas 2015-05-27 14:21:56 +02:00
parent 23b15acf52
commit ec2b4ea215
16 changed files with 133 additions and 73 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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