fix deformed avatar bug in FF
This commit is contained in:
parent
ee6e89e3e9
commit
cb13722b7d
4 changed files with 103 additions and 100 deletions
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
|
||||
<div class="ticket-article">
|
||||
<div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
|
||||
<div class="ticket-article-item customer phone" data-id="1" id="article-1">
|
||||
<div class="article-meta-clip top">
|
||||
<div class="article-content-meta top hide">
|
||||
<div class="article-meta top">
|
||||
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content zIndex-1 horizontal reverse">
|
||||
<div class="article-content zIndex-1">
|
||||
<span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="text-bubble"><div class="bubble-arrow"></div>Welcome!
|
||||
|
@ -98,7 +98,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
|
|||
<small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
|
||||
</div>
|
||||
|
||||
<div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">
|
||||
<div class="ticket-article-item agent note" data-id="23" id="article-23">
|
||||
<div class="article-meta-clip top">
|
||||
<div class="article-content-meta top hide">
|
||||
<div class="article-meta top">
|
||||
|
@ -109,8 +109,8 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content zIndex-1 horizontal">
|
||||
<span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
|
||||
<div class="article-content zIndex-1">
|
||||
<span class="avatar user-popover" data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="text-bubble"><div class="bubble-arrow"></div>Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</div>
|
||||
</div>
|
||||
|
@ -136,7 +136,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
|
|||
<small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
|
||||
</div>
|
||||
|
||||
<div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
|
||||
<div class="ticket-article-item customer phone" data-id="1" id="article-1">
|
||||
<div class="article-meta-clip top">
|
||||
<div class="article-content-meta top hide">
|
||||
<div class="article-meta top">
|
||||
|
@ -147,7 +147,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content zIndex-1 horizontal reverse">
|
||||
<div class="article-content zIndex-1">
|
||||
<span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="text-bubble"><div class="bubble-arrow"></div>Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
|
||||
|
@ -182,7 +182,7 @@ Grüße, Peter</div>
|
|||
<small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
|
||||
</div>
|
||||
|
||||
<div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">
|
||||
<div class="ticket-article-item agent note" data-id="23" id="article-23">
|
||||
<div class="article-meta-clip top">
|
||||
<div class="article-content-meta top hide">
|
||||
<div class="article-meta top">
|
||||
|
@ -193,7 +193,7 @@ Grüße, Peter</div>
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content zIndex-1 horizontal">
|
||||
<div class="article-content zIndex-1">
|
||||
<span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
|
||||
<div class="flex bubble-gap internal-border">
|
||||
<div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP,<br>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<% for article in @articles: %>
|
||||
<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' is-internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
|
||||
<div class="ticket-article-item <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' is-internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
|
||||
|
||||
|
||||
<div class="article-meta-clip top">
|
||||
|
@ -33,14 +33,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
|
||||
<div class="article-content zIndex-1">
|
||||
<% if article.sender.name isnt 'Agent': %>
|
||||
<% position = 'left' %>
|
||||
<% else: %>
|
||||
<% position = 'right' %>
|
||||
<% end %>
|
||||
<%- article.created_by.avatar("40", position) %>
|
||||
<div class="flex bubble-gap">
|
||||
<div class="bubble-gap">
|
||||
<div class="internal-border">
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
|
|
|
@ -2,87 +2,84 @@
|
|||
<input type="hidden" name="type" value="<%= @article.type %>">
|
||||
<input type="hidden" name="internal" value="<%= @article.internal %>">
|
||||
<input type="hidden" name="form_id" value="<%= @article.form_id %>">
|
||||
<div class="bubble-grid horizontal">
|
||||
<div class="editControls">
|
||||
<%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
|
||||
<div class="dark pop-select zIndex-7 editControls-item">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @article.type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<% for atricleType in @articleTypes: %>
|
||||
<div class="pop-selectable u-clickable centered" data-value="<%= atricleType.name %>">
|
||||
<div class="white <%= atricleType.icon %> channel icon"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editControls">
|
||||
<%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
|
||||
<div class="dark pop-select zIndex-7 editControls-item">
|
||||
<div class="pop-selected u-clickable centered">
|
||||
<div class="gray <%- @article.type %> channel icon"></div>
|
||||
</div>
|
||||
<div class="visibility-toggle zIndex-7 u-clickable editControls-item">
|
||||
<div class="internal-visibility centered" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
<div class="public-visibility centered" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
<div class="pop-selector hide">
|
||||
<div class="horizontal">
|
||||
<% for atricleType in @articleTypes: %>
|
||||
<div class="pop-selectable u-clickable centered" data-value="<%= atricleType.name %>">
|
||||
<div class="white <%= atricleType.icon %> channel icon"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex article-content zIndex-5 bubble-gap">
|
||||
<div class="visibility-toggle zIndex-7 u-clickable editControls-item">
|
||||
<div class="internal-visibility centered" title="<%- @T("unset internal") %>">
|
||||
<div class="internal visibility icon"></div>
|
||||
</div>
|
||||
<div class="public-visibility centered" title="<%- @T("set internal") %>">
|
||||
<div class="public visibility icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-content zIndex-5 bubble-gap">
|
||||
<!--
|
||||
<label class="recipients"><%- @T('Recipients') %>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
</label>
|
||||
<label class="recipients"><%- @T('Recipients') %>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
|
||||
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
|
||||
</label>
|
||||
-->
|
||||
<div class="internal-border">
|
||||
<div class="internal-border">
|
||||
|
||||
<div class="input form-group">
|
||||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('To') %></label>
|
||||
</div>
|
||||
<div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control" required="required"></div>
|
||||
<div class="input form-group">
|
||||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('To') %></label>
|
||||
</div>
|
||||
<div class="input form-group">
|
||||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('Cc') %></label>
|
||||
</div>
|
||||
<div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control"></div>
|
||||
<div class="controls"><input id="" type="text" name="to" value="<%= @article.to %>" class="form-control" required="required"></div>
|
||||
</div>
|
||||
<div class="input form-group">
|
||||
<div class="formGroup-label">
|
||||
<label for=""><%- @T('Cc') %></label>
|
||||
</div>
|
||||
<div class="controls"><input id="" type="text" name="cc" value="<%= @article.cc %>" class="form-control"></div>
|
||||
</div>
|
||||
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="js-textarea ticketEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
|
||||
<!-- .text-bubble grows with textarea (and expanding clone) -->
|
||||
<div class="attachments"></div>
|
||||
<div class="article-attachment u-unclickable u-textTruncate">
|
||||
<div class="attachmentPlaceholder">
|
||||
<span class="attachmentPlaceholder-hint"><%- @T('Antwort eingeben oder') %></span>
|
||||
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable">
|
||||
<%- @T('Dateien wählen..') %>
|
||||
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
|
||||
</span>
|
||||
</div>
|
||||
<div class="attachmentUpload hide u-clickable">
|
||||
<div class="horizontal">
|
||||
<div class="u-highlight">
|
||||
<%- @T(' Uploading ') %> (<span class="js-percentage">0</span>%) ...
|
||||
</div>
|
||||
<div class="attachmentUpload-cancel align-right js-cancel u-clickable">
|
||||
<div class="delete icon"></div><%- @T('Cancel Upload') %>
|
||||
</div>
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<div class="js-textarea ticketEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
|
||||
<!-- .text-bubble grows with textarea (and expanding clone) -->
|
||||
<div class="attachments"></div>
|
||||
<div class="article-attachment u-unclickable u-textTruncate">
|
||||
<div class="attachmentPlaceholder">
|
||||
<span class="attachmentPlaceholder-hint"><%- @T('Antwort eingeben oder') %></span>
|
||||
<span class="attachmentPlaceholder-inputHolder u-highlight u-clickable">
|
||||
<%- @T('Dateien wählen..') %>
|
||||
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
|
||||
</span>
|
||||
</div>
|
||||
<div class="attachmentUpload hide u-clickable">
|
||||
<div class="horizontal">
|
||||
<div class="u-highlight">
|
||||
<%- @T(' Uploading ') %> (<span class="js-percentage">0</span>%) ...
|
||||
</div>
|
||||
<div class="attachmentUpload-cancel align-right js-cancel u-clickable">
|
||||
<div class="delete icon"></div><%- @T('Cancel Upload') %>
|
||||
</div>
|
||||
<div class="attachmentUpload-progressBar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="attachmentUpload-progressBar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="fit dropArea">
|
||||
<div class="dropArea-inner fit centered">
|
||||
<%- @T('Drop Files here') %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fit dropArea">
|
||||
<div class="dropArea-inner fit centered">
|
||||
<%- @T('Drop Files here') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
|
@ -2970,6 +2970,13 @@ footer {
|
|||
margin-top: 55px;
|
||||
}
|
||||
|
||||
.ticket-article,
|
||||
.ticket-edit {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 21px;
|
||||
}
|
||||
|
||||
.ticket-title {
|
||||
max-width: 800px;
|
||||
padding: 0 81px;
|
||||
|
@ -2990,24 +2997,20 @@ footer {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.bubble-grid {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 21px;
|
||||
}
|
||||
|
||||
.bubble-gap {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.customer.ticket-article-item .bubble-gap {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
|
||||
.ticket-article-item {
|
||||
padding-bottom: 33px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&.agent .avatar {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -3019,20 +3022,16 @@ footer {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 55px;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
position: relative;
|
||||
margin-right: 55px;
|
||||
padding: 0 55px;
|
||||
}
|
||||
|
||||
.customer.ticket-article-item .article-content {
|
||||
margin-right: 0;
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
.article-content-meta {
|
||||
padding: 0 55px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -3054,7 +3053,7 @@ footer {
|
|||
}
|
||||
|
||||
.article-meta-key {
|
||||
width: 13%;
|
||||
width: 20%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
@ -3094,6 +3093,7 @@ footer {
|
|||
box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* email css reset */
|
||||
|
@ -3211,6 +3211,10 @@ footer {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.article-add {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticket-edit {
|
||||
margin-top: auto;
|
||||
margin-bottom: 36px;
|
||||
|
@ -3230,7 +3234,9 @@ footer {
|
|||
}
|
||||
|
||||
.editControls {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.editControls-item {
|
||||
|
|
Loading…
Reference in a new issue