- <% if article.from: %>
-
-
- <%- @T( 'From' ) %>
- <%= article.from %>
+
+
@@ -36,37 +38,38 @@
+
+ <% if article.from: %>
+
- <% end %>
- <% if article.to: %>
-
+
+ <% end %>
+ <% if article.to: %>
+ <%- @T( 'From' ) %>
+ <%= article.from %>
+
+
+ <% end %>
+ <% if article.cc: %>
+ <%- @T( 'To' ) %>
+ <%= article.to %>
+
+
+ <% end %>
+ <% if article.subject: %>
+ <%- @T( 'Kopie' ) %>
+ <%= article.cc %>
+
+
+ <% end %>
<%- @T( 'Subject' ) %>
+ <%= article.subject %>
+
-
- <% end %>
- <% if article.cc: %>
- <%- @T( 'To' ) %>
- <%= article.to %>
-
-
- <% end %>
- <% if article.subject: %>
- <%- @T( 'Kopie' ) %>
- <%= article.cc %>
-
-
- <% end %>
<%- @T( 'Subject' ) %>
- <%= article.subject %>
- <%- article.html %>
-
-
-
<%- @T( 'Kanal' ) %>
-
-
- <%- @T(article.type.name) %>
- <% if article.type.name is 'email': %>
- <%- @T( 'raw' ) %>
- <% end %>
+
+
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 0a689a025..a69dc73be 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -30,6 +30,8 @@
//= require_tree ./app/lib/base
+//= require_tree ./app/lib/gsap
+
//= require ./app/index.js.coffee
// IE8 workaround for missing console.log
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 80ccd3054..e05daa724 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -2403,27 +2403,35 @@ footer {
max-width: 800px;
margin: 0 auto;
padding: 0 21px;
+ overflow: hidden;
}
.bubble-grid .avatar {
margin-right: 15px;
+ background: rgba(0,0,0,.05);
}
+.ticket-article-item {
+ padding-bottom: 33px;
+ position: relative;
+}
+
.customer.ticket-article-item .avatar {
margin-right: 0;
margin-left: 15px;
}
- .ticket-article-item {
- margin-top: 33px;
- margin-bottom: 33px;
+ /*
+ clip the article-meta to not stand out on the other side
+ of the text-bubble if the text bubble is small
+ */
+
+ .article-meta-clip {
+ overflow: hidden;
+ position: relative;
+ height: 100%;
}
- .article-content-meta {
- margin-left: 55px;
- margin-right: 55px;
- position: relative;
- }
.article-content {
margin-right: 55px;
}
@@ -2433,22 +2441,14 @@ footer {
margin-left: 55px;
}
- .article-content-meta .more,
- .article-content-meta .close-details,
- .article-action {
- margin: 5px 12px;
- color: hsl(200,87%,45%);
- font-size: 12px;
- text-decoration: underline;
- cursor: pointer;
- -webkit-user-select: none;
- user-select: none;
- }
-
- .article-content-meta .close-details {
+ .article-content-meta {
+ padding: 0 55px;
position: absolute;
- right: 5px;
- bottom: -33px;
+ width: 100%;
+ }
+ .article-content {
+ position: relative;
+ z-index: 1;
}
.article-meta {
@@ -2489,18 +2489,26 @@ footer {
padding: 10px 20px;
white-space: pre-wrap;
background: white;
- border-radius: 5px;
+ border-radius: 2px;
border: 1px solid hsl(240,4%,95%);
box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
position: relative;
}
+ .ticket-article-item.state--folde-out .text-bubble {
+ border-color: hsl(0,0%,90%);
+ }
+
.customer.ticket-article-item .text-bubble {
background: #e5f0f5;
border-color: hsl(199,38%,92%);
box-shadow: none;
}
+ .customer.ticket-article-item.state--folde-out .text-bubble {
+ border-color: hsl(199,44%,85%);
+ }
+
.ticket-article-item .text-bubble.internal {
background: #f2def2;
border-color: #eed3d7;
@@ -2511,6 +2519,7 @@ footer {
padding: 0;
border-color: #b3b3b3;
white-space: normal;
+ border-radius: 5px;
}
.new-article textarea {
@@ -2591,18 +2600,26 @@ footer {
}
.article-action {
- text-align: center;
padding: 5px;
+ margin: 5px 12px;
+ color: black;
+ font-size: 12px;
+ text-align: center;
+ opacity: 0.5;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
}
+ .article-action:hover {
+ color: black;
+ text-decoration: none;
+ opacity: 1;
+ }
+
.article-action .icon {
margin-right: 10px;
vertical-align: bottom;
- opacity: 0.33;
- }
-
- .article-action:hover .icon {
- opacity: 0.75;
}
.ticket-edit {
+
- <% if article.attachments: %>
-
+
-
+
<%- @T( 'Kanal' ) %>
+
+
+ <%- @T(article.type.name) %>
+ <% if article.type.name is 'email': %>
+ <%- @T( 'raw' ) %>
+ <% end %>
+
- <% for attachment in article.attachments: %>
- <%= attachment.filename %>
+ <% if article.attachments: %>
+
- <% end %>
- <% if article.actions: %>
-
+ <% for attachment in article.attachments: %>
+ <%= attachment.filename %>
+ <% end %>
+
<% end %>
-
- <% for action in article.actions: %>
-
- <%- @T( action.name ) %>
-
+ <% if article.actions: %>
+
- <% end %>
-
+ <% for action in article.actions: %>
+
+ <%- @T( action.name ) %>
+
+ <% end %>
+
<% end %>
<%- @T('close details') %>