fix switchView button overflow in table

This commit is contained in:
Felix Niklas 2015-06-10 13:24:19 +02:00
parent 07be70bca4
commit e117747ee8
4 changed files with 19 additions and 10 deletions

View file

@ -54,6 +54,7 @@ class Index extends App.Controller
attribute =
name: 'switch_to'
display: 'Action'
className: 'actionCell'
translation: true
header.push attribute
header
@ -61,9 +62,9 @@ class Index extends App.Controller
callbackAttributes = (value, object, attribute, header, refObject) ->
text = App.i18n.translateInline("View from user's perspective")
value = ' '
attribute.raw = ' <span class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> ' + text + '</span>'
attribute.raw = ' <span class="btn btn--primary btn--table switchView" title="' + text + '"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> ' + text + '</span>'
attribute.class = ''
attribute.parentClass = 'no-padding'
attribute.parentClass = 'actionCell no-padding'
attribute.link = ''
attribute.title = App.i18n.translateInline('Switch to')
value

View file

@ -14,7 +14,7 @@
<th style="width: 22px"></th>
<% end %>
<% for item in @header: %>
<th <% if item.style: %>style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
<th<% if item.className: %> class="<%= item.className %>"<% end %><% if item.style: %> style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
<% end %>
<% if @destroy: %>
<th><%- @T('Delete') %></th>

View file

@ -150,7 +150,7 @@
<th>Lastname</th>
<th>Aktionen</th>
<th class="actionCell">Aktionen</th>
</tr>
</thead>
@ -162,7 +162,7 @@
<td><span>Niklas</span></td>
<td class="no-padding">
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -174,7 +174,7 @@
<td><span>Hubermeyerschmidt</span></td>
<td class="no-padding">
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -186,7 +186,7 @@
<td><span>Braun</span></td>
<td class="no-padding">
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
</td>
</tr>
@ -198,7 +198,7 @@
<td><span>Blanko</span></td>
<td class="no-padding">
<td class="actionCell no-padding">
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
</td>
</tr>

View file

@ -4088,8 +4088,7 @@ footer {
display: block;
}
.user-list {
table-layout: auto;
.table.user-list {
tr:hover .switchView {
visibility: visible;
@ -4097,6 +4096,15 @@ footer {
.switchView {
visibility: hidden;
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
// lame hardcoded width of this "View from users' perspective" button td
// i can't find another way to do it. It's not flexible. It sucks
.actionCell {
width: 250px;
}
}