ticket zoom edit and sidebar basics
This commit is contained in:
Felix Niklas
parent
9b3bf66ffd
commit
01fa923889
3 changed files with 222 additions and 104 deletions
|
|
@ -1,33 +1,100 @@
|
|||
<div class="main flex relative no-padding">
|
||||
<div class="flex-overflow vertical">
|
||||
<div class="page-header ticket-zoom horizontal">
|
||||
<div class="flex vertical center">
|
||||
<div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="ticket-title"></div>
|
||||
<div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
|
||||
</div>
|
||||
<div class="page-header-meta">
|
||||
<% if @C( 'LastOverview' ) && @nav: %>
|
||||
<div class="pull-right">
|
||||
<span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
|
||||
<% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
|
||||
<li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
|
||||
</ul>
|
||||
<div class="fit ticket-zoom vertical">
|
||||
<div class="flex relative">
|
||||
<div class="main no-padding">
|
||||
<div class="flex-overflow sidebar-tabs--spacing">
|
||||
<div class="page-header horizontal">
|
||||
<div class="flex vertical center">
|
||||
<div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
|
||||
<div class="ticket-title"></div>
|
||||
<div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="page-header-meta">
|
||||
<% if @C( 'LastOverview' ) && @nav: %>
|
||||
<div class="pull-right">
|
||||
<span class="pagination-count"><%= @C( 'LastOverviewPosition' ) %>/<%= @C( 'LastOverviewTotal' ) %></span>
|
||||
<% base_url ="#ticket/view/#{ @C('LastOverview') }/#{ @C('LastOverviewPosition') }/" %>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="<% if @C('LastOverviewPosition') <= 1: %>disabled<% end %>"><a href="<%- base_url %>previous" title="<%- @Ti( 'previous Ticket in Overview' ) %>">«</a></li>
|
||||
<li class="<% if @C('LastOverviewPosition') is @C('LastOverviewTotal'): %>disabled<% end %>"><a href="<%- base_url %>next" title="<%- @Ti( 'next Ticket in Overview' ) %>">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ticket-article"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ticket-edit sidebar-tabs--spacing"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ticket-article"></div>
|
||||
|
||||
<div class="ticket-edit"></div>
|
||||
<div class="sidebar-holder vertical">
|
||||
<div class="sidebar bottom-form-shadow flex">
|
||||
<div class="horizontal center">
|
||||
<h2 class="flex contain-text">Ticket Einstellungen</h2>
|
||||
<div class="close-sidebar centered clickable">
|
||||
<div class="arrow-right icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<form>
|
||||
|
||||
</form>
|
||||
<div class="widgets"></div>
|
||||
<div class="action"></div>
|
||||
</div>
|
||||
<div class="sidebar-tabs vertical justified">
|
||||
<div class="active sidebar-tab centered">
|
||||
<div class="dark message icon"></div>
|
||||
</div>
|
||||
<div class="sidebar-tab centered">
|
||||
<div class="dark person icon"></div>
|
||||
</div>
|
||||
<div class="sidebar-tab centered">
|
||||
<div class="dark group icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="widgets"></div>
|
||||
<div class="action"></div>
|
||||
<form class="bottom-form form-inline horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_state_id" class="input-group-addon">State</label>
|
||||
<select id="update_ticket_1_state_id" class="form-control" name="state_id">
|
||||
<option value="4">closed</option>
|
||||
<option value="1" selected="">new</option>
|
||||
<option value="2">open</option>
|
||||
<option value="3">pending</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_priority_id" class="input-group-addon">Priority</label>
|
||||
<select id="update_ticket_1_priority_id" class="form-control" name="priority_id">
|
||||
<option value="1">1 low</option>
|
||||
<option value="2" selected="">2 normal</option>
|
||||
<option value="3">3 high</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_group_id" class="input-group-addon">Group</label>
|
||||
<select id="update_ticket_1_group_id" class="form-control" name="group_id">
|
||||
<option value="4">FillGroup::450863</option>
|
||||
<option value="3">FillGroup::918672</option>
|
||||
<option value="2">Twitter</option>
|
||||
<option value="1" selected="">Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_owner_id" class="input-group-addon">Owner</label>
|
||||
<select id="update_ticket_1_owner_id" class="form-control" name="owner_id">
|
||||
<option value="">-</option>
|
||||
<option value="3">Felix Niklas</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" class="btn primary submit" value="update">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,49 +1,8 @@
|
|||
<div class="horizontal bubble-grid edit <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="horizontal bubble-grid new-article <% if @formChanged: %>form-changed<% end %>">
|
||||
<div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||
<div class="flex text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="edit-ticket-properties form-inline" role="form">
|
||||
<div class="horizontal">
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_state_id" class="input-group-addon">State</label>
|
||||
<select id="update_ticket_1_state_id" class="form-control" name="state_id">
|
||||
<option value="4">closed</option>
|
||||
<option value="1" selected="">new</option>
|
||||
<option value="2">open</option>
|
||||
<option value="3">pending</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_priority_id" class="input-group-addon">Priority</label>
|
||||
<select id="update_ticket_1_priority_id" class="form-control" name="priority_id">
|
||||
<option value="1">1 low</option>
|
||||
<option value="2" selected="">2 normal</option>
|
||||
<option value="3">3 high</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_group_id" class="input-group-addon">Group</label>
|
||||
<select id="update_ticket_1_group_id" class="form-control" name="group_id">
|
||||
<option value="4">FillGroup::450863</option>
|
||||
<option value="3">FillGroup::918672</option>
|
||||
<option value="2">Twitter</option>
|
||||
<option value="1" selected="">Users</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="update_ticket_1_owner_id" class="input-group-addon">Owner</label>
|
||||
<select id="update_ticket_1_owner_id" class="form-control" name="owner_id">
|
||||
<option value="">-</option>
|
||||
<option value="3">Felix Niklas</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" class="btn primary submit" value="update">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -502,6 +502,7 @@ label {
|
|||
|
||||
.content {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content.fit {
|
||||
|
|
@ -1235,6 +1236,30 @@ ol.tabs li {
|
|||
background-position: -26px -299px;
|
||||
}
|
||||
|
||||
.arrow-right.icon {
|
||||
width: 12px;
|
||||
height: 11px;
|
||||
background-position: -36px -299px;
|
||||
}
|
||||
|
||||
.dark.group.icon {
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
background-position: 0 -311px;
|
||||
}
|
||||
|
||||
.dark.message.icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-position: -23px -311px;
|
||||
}
|
||||
|
||||
.dark.person.icon {
|
||||
width: 11px;
|
||||
height: 24px;
|
||||
background-position: -42px -311px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
||||
|
|
@ -1378,33 +1403,6 @@ footer {
|
|||
0 -3px rgba(0,0,0,.01);
|
||||
}
|
||||
|
||||
.sidebar .action {
|
||||
padding: 6px 8px 6px;
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
right: 0px;
|
||||
border-top: 1px solid #eeeeee;
|
||||
width: 120px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.sidebar .action {
|
||||
width: 234px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.sidebar .action {
|
||||
width: 254px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar .action {
|
||||
width: 274px;
|
||||
}
|
||||
}
|
||||
|
||||
.show_toogle {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
|
|
@ -2321,6 +2319,24 @@ footer {
|
|||
}
|
||||
|
||||
.ticket-zoom {
|
||||
overflow: hidden;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.ticket-zoom .main {
|
||||
right: 280px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .main {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ticket-zoom .page-header {
|
||||
margin-top: 62px;
|
||||
margin-bottom: 46px;
|
||||
border-bottom: none;
|
||||
|
|
@ -2363,7 +2379,7 @@ footer {
|
|||
|
||||
.text-bubble {
|
||||
padding: 10px 20px;
|
||||
margin-right: 70px;
|
||||
margin-right: 55px;
|
||||
white-space: pre-wrap;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
|
|
@ -2375,18 +2391,18 @@ footer {
|
|||
.customer.ticket-article-item .text-bubble {
|
||||
background: #e5f0f5;
|
||||
margin-right: 0;
|
||||
margin-left: 70px;
|
||||
margin-left: 55px;
|
||||
border-color: hsl(199,38%,92%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.edit .text-bubble {
|
||||
.new-article .text-bubble {
|
||||
padding: 0;
|
||||
border-color: #b3b3b3;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.edit textarea {
|
||||
.new-article textarea {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 10px 20px;
|
||||
|
|
@ -2397,15 +2413,15 @@ footer {
|
|||
transition: 500ms;
|
||||
}
|
||||
|
||||
.edit textarea:focus {
|
||||
.new-article textarea:focus {
|
||||
height: 105px;
|
||||
}
|
||||
|
||||
.edit textarea:focus + .bubble-placeholder {
|
||||
.new-article textarea:focus + .bubble-placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit .bubble-arrow:after {
|
||||
.new-article .bubble-arrow:after {
|
||||
border-color: #b3b3b3;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -2461,13 +2477,89 @@ footer {
|
|||
|
||||
.ticket-edit {
|
||||
margin-top: auto;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
|
||||
.edit-ticket-properties {
|
||||
margin-top: 37px;
|
||||
.bottom-form {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ticket-zoom .sidebar {
|
||||
width: 280px;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.ticket-zoom .sidebar h2 {
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
.close-sidebar {
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.sidebar.bottom-form-shadow {
|
||||
box-shadow:
|
||||
0 -1px rgba(0,0,0,.005) inset,
|
||||
0 -2px rgba(0,0,0,.005) inset,
|
||||
0 -3px rgba(0,0,0,.005) inset,
|
||||
0 -4px rgba(0,0,0,.005) inset;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
.ticket-zoom.state--sidebar-hidden .sidebar-holder {
|
||||
transform: translateX(280px);
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
position: absolute;
|
||||
left: -55px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar-tabs--spacing {
|
||||
padding-right: 62px;
|
||||
}
|
||||
|
||||
.test {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
width: 56px;
|
||||
height: 60px;
|
||||
background: hsl(197,20%,93%);
|
||||
border-top: 1px solid hsl(202,12%,87%);
|
||||
border-left: 1px solid hsl(202,12%,87%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-tab:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-tab:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom: 1px solid hsl(202,12%,87%);
|
||||
}
|
||||
|
||||
.sidebar-tab .icon {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.sidebar-tab.active .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
----------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue