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 =
|
attribute =
|
||||||
name: 'switch_to'
|
name: 'switch_to'
|
||||||
display: 'Action'
|
display: 'Action'
|
||||||
|
className: 'actionCell'
|
||||||
translation: true
|
translation: true
|
||||||
header.push attribute
|
header.push attribute
|
||||||
header
|
header
|
||||||
|
@ -61,9 +62,9 @@ class Index extends App.Controller
|
||||||
callbackAttributes = (value, object, attribute, header, refObject) ->
|
callbackAttributes = (value, object, attribute, header, refObject) ->
|
||||||
text = App.i18n.translateInline("View from user's perspective")
|
text = App.i18n.translateInline("View from user's perspective")
|
||||||
value = ' '
|
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.class = ''
|
||||||
attribute.parentClass = 'no-padding'
|
attribute.parentClass = 'actionCell no-padding'
|
||||||
attribute.link = ''
|
attribute.link = ''
|
||||||
attribute.title = App.i18n.translateInline('Switch to')
|
attribute.title = App.i18n.translateInline('Switch to')
|
||||||
value
|
value
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<th style="width: 22px"></th>
|
<th style="width: 22px"></th>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% for item in @header: %>
|
<% 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 %>
|
<% end %>
|
||||||
<% if @destroy: %>
|
<% if @destroy: %>
|
||||||
<th><%- @T('Delete') %></th>
|
<th><%- @T('Delete') %></th>
|
||||||
|
|
|
@ -150,7 +150,7 @@
|
||||||
|
|
||||||
<th>Lastname</th>
|
<th>Lastname</th>
|
||||||
|
|
||||||
<th>Aktionen</th>
|
<th class="actionCell">Aktionen</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
|
|
||||||
<td><span>Niklas</span></td>
|
<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>
|
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
|
|
||||||
<td><span>Hubermeyerschmidt</span></td>
|
<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>
|
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -186,7 +186,7 @@
|
||||||
|
|
||||||
<td><span>Braun</span></td>
|
<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>
|
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -198,7 +198,7 @@
|
||||||
|
|
||||||
<td><span>Blanko</span></td>
|
<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>
|
<div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -4088,8 +4088,7 @@ footer {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-list {
|
.table.user-list {
|
||||||
table-layout: auto;
|
|
||||||
|
|
||||||
tr:hover .switchView {
|
tr:hover .switchView {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
@ -4097,6 +4096,15 @@ footer {
|
||||||
|
|
||||||
.switchView {
|
.switchView {
|
||||||
visibility: hidden;
|
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