Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Bulk actions: add mobile layout

Browse source
This commit is contained in:
Felix Niklas 2021-03-29 16:02:23 +02:00 committed by Martin Edenhofer
parent b91ffc4213
commit 6e17591f27
2 changed files with 69 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco
View file

@ -5,7 +5,7 @@
</div> </div>
<div class="hide bulkAction-secondStep js-confirm-step"> <div class="hide bulkAction-secondStep js-confirm-step">
<div id="form-ticket-bulk-comment" class="form-inline"></div> <div id="form-ticket-bulk-comment" class="form-inline"></div>
<div class="horizontal"> <div class="bulkAction-secondStep-bottom">
<div id="form-ticket-bulk-typeVisibility" class="form-inline"></div> <div id="form-ticket-bulk-typeVisibility" class="form-inline"></div>
<div class="bulkAction-controls"> <div class="bulkAction-controls">
<a class="btn btn--text btn--secondary js-cancel"><%- @T( 'Go Back' ) %></a> <a class="btn btn--text btn--secondary js-cancel"><%- @T( 'Go Back' ) %></a>

71
app/assets/stylesheets/zammad.scss
View file

@ -3813,8 +3813,7 @@ footer {
.bulkAction { .bulkAction {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: $sidebarWidth + $navigationWidth; @include bidi-style(left, $sidebarWidth + $navigationWidth, right, 0);
right: 0;
min-width: $minWidth - $sidebarWidth - $navigationWidth; min-width: $minWidth - $sidebarWidth - $navigationWidth;
background: white; background: white;
z-index: 1; z-index: 1;
@ -3824,14 +3823,30 @@ footer {
0 -3px rgba(0,0,0,.01); 0 -3px rgba(0,0,0,.01);
@include small-desktop { @include small-desktop {
left: $navigationWidth; @include bidi-style(left, $navigationWidth, right, 0);
min-width: $minWidth - $sidebarWidth; min-width: $minWidth - $sidebarWidth;
} }
@include phone {
@include bidi-style(left, $mobileNavigationWidth, right, 0);
min-width: 0;
.navigation:hover ~ &,
.navigation.is-hovered ~ &,
.navigation:active ~ & {
@include bidi-style(left, $mobileNavigationWidthOpen, right, 0);
}
}
} }
.bulkAction-firstStep { .bulkAction-firstStep {
display: flex; display: flex;
align-items: center; align-items: center;
@include phone {
flex-direction: column;
align-items: flex-end;
}
} }
.bulkAction-firstStep .has-error { .bulkAction-firstStep .has-error {
@ -3842,10 +3857,22 @@ footer {
.bulkAction-secondStep { .bulkAction-secondStep {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&-bottom {
display: flex;
@include phone {
display: block;
}
}
} }
.bulkAction .btn { .bulkAction .btn {
margin: 0 16px; margin: 0 16px;
@include phone {
margin: 10px;
}
} }
.bulkAction .btn--text { .bulkAction .btn--text {
@ -3855,6 +3882,12 @@ footer {
.bulkAction-controls { .bulkAction-controls {
margin-top: 10px; margin-top: 10px;
@include bidi-style(margin-left, auto, margin-right, 0); @include bidi-style(margin-left, auto, margin-right, 0);
@include phone {
margin-top: 0;
display: flex;
justify-content: space-between;
}
} }
.panel { .panel {
@ -5888,6 +5921,14 @@ footer {
.form-inline { .form-inline {
display: flex; display: flex;
@include phone {
flex-wrap: wrap;
.alert {
flex-basis: 100%;
}
}
} }
.form-inline .input-group-addon, .form-inline .input-group-addon,
@ -5902,6 +5943,11 @@ footer {
position: relative; position: relative;
height: 60px; height: 60px;
flex: 1 1 auto; flex: 1 1 auto;
@include phone {
width: 50%;
margin-bottom: 0;
}
&.datetime { &.datetime {
min-width: 140px; min-width: 140px;
@ -5958,6 +6004,17 @@ footer {
border-right: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0;
} }
.form-inline .form-group,
.form-inline.form-inline--enclosed .form-group {
@include phone {
border-bottom: 1px solid #f0f0f0;
&:nth-child(even) {
border-right-width: 0;
}
}
}
.form-inline .input-group-addon { .form-inline .input-group-addon {
width: auto; width: auto;
padding: 0; padding: 0;
@ -6017,6 +6074,14 @@ footer {
.bulkAction-secondStep .form-group { .bulkAction-secondStep .form-group {
min-width: 140px; min-width: 140px;
@include phone {
min-width: 0;
&.textarea {
border-bottom-width: 0;
}
}
} }
.bulkAction-secondStep .form-inline .textarea.form-group { .bulkAction-secondStep .form-inline .textarea.form-group {