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,6 +1,8 @@
|
||||||
<div class="main flex relative no-padding">
|
<div class="fit ticket-zoom vertical">
|
||||||
<div class="flex-overflow vertical">
|
<div class="flex relative">
|
||||||
<div class="page-header ticket-zoom horizontal">
|
<div class="main no-padding">
|
||||||
|
<div class="flex-overflow sidebar-tabs--spacing">
|
||||||
|
<div class="page-header horizontal">
|
||||||
<div class="flex vertical center">
|
<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="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="ticket-title"></div>
|
||||||
|
|
@ -22,12 +24,77 @@
|
||||||
|
|
||||||
<div class="ticket-article"></div>
|
<div class="ticket-article"></div>
|
||||||
|
|
||||||
<div class="ticket-edit"></div>
|
</div>
|
||||||
|
|
||||||
|
<div class="ticket-edit sidebar-tabs--spacing"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar">
|
<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="widgets"></div>
|
||||||
<div class="action"></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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<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="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
|
||||||
<div class="flex text-bubble">
|
<div class="flex text-bubble">
|
||||||
<div class="bubble-arrow"></div>
|
<div class="bubble-arrow"></div>
|
||||||
|
|
@ -6,44 +6,3 @@
|
||||||
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
|
<span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
@ -502,6 +502,7 @@ label {
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content.fit {
|
.content.fit {
|
||||||
|
|
@ -1235,6 +1236,30 @@ ol.tabs li {
|
||||||
background-position: -26px -299px;
|
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
|
* 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);
|
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 {
|
.show_toogle {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
|
|
@ -2321,6 +2319,24 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-zoom {
|
.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-top: 62px;
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
@ -2363,7 +2379,7 @@ footer {
|
||||||
|
|
||||||
.text-bubble {
|
.text-bubble {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
margin-right: 70px;
|
margin-right: 55px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -2375,18 +2391,18 @@ footer {
|
||||||
.customer.ticket-article-item .text-bubble {
|
.customer.ticket-article-item .text-bubble {
|
||||||
background: #e5f0f5;
|
background: #e5f0f5;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 70px;
|
margin-left: 55px;
|
||||||
border-color: hsl(199,38%,92%);
|
border-color: hsl(199,38%,92%);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit .text-bubble {
|
.new-article .text-bubble {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-color: #b3b3b3;
|
border-color: #b3b3b3;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit textarea {
|
.new-article textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
|
@ -2397,15 +2413,15 @@ footer {
|
||||||
transition: 500ms;
|
transition: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit textarea:focus {
|
.new-article textarea:focus {
|
||||||
height: 105px;
|
height: 105px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit textarea:focus + .bubble-placeholder {
|
.new-article textarea:focus + .bubble-placeholder {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit .bubble-arrow:after {
|
.new-article .bubble-arrow:after {
|
||||||
border-color: #b3b3b3;
|
border-color: #b3b3b3;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -2461,13 +2477,89 @@ footer {
|
||||||
|
|
||||||
.ticket-edit {
|
.ticket-edit {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
margin-bottom: 37px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-ticket-properties {
|
.bottom-form {
|
||||||
margin-top: 37px;
|
|
||||||
background: white;
|
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