fix switchView button overflow in table
This commit is contained in:
parent
07be70bca4
commit
e117747ee8
4 changed files with 19 additions and 10 deletions
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue