Briq
/
django-admin-interface
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed horizontal and vertical selector style in inlines

pull/32/head
Fabio Caccamo 2017-10-04 12:09:48 +02:00
parent ef1eefb084
commit d05009ce44
1 changed files with 80 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
admin_interface/templates/admin_interface/css/admin-interface-fix.css
View File

@ -181,6 +181,11 @@ body.admin-interface .paginator a.showall:visited {
width: auto; width: auto;
padding: 0px; padding: 0px;
} }
/* fix inline horizontal scroll caused by checkbox-row */
.admin-interface form .form-row > div.checkbox-row {
width: 100%;
}
} }
@ -265,13 +270,22 @@ body.admin-interface .paginator a.showall:visited {
text-align:right; text-align:right;
} }
.admin-interface .inline-group .tabular tr td {
vertical-align: top;
}
.admin-interface .inline-group .tabular tr td.delete { .admin-interface .inline-group .tabular tr td.delete {
text-align:right; text-align:right;
padding-right:15px; padding-right:15px;
vertical-align: top;
}
.admin-interface .inline-group .tabular tr td input[type="checkbox"] {
margin: 7px 0px;
} }
.admin-interface .inline-group .tabular tr td.delete a.inline-deletelink { .admin-interface .inline-group .tabular tr td.delete a.inline-deletelink {
margin-top:2px; margin-top:4px;
overflow:hidden; overflow:hidden;
text-indent:9999px; text-indent:9999px;
} }
@ -297,57 +311,76 @@ body.admin-interface .paginator a.showall:visited {
} }
/* improve responsive selector */ /* improve responsive selector */
.admin-interface .selector.stacked {
width: 480px; /* fix [stacked, not-stacked] equalize horizontal and vertical select padding for selector (stacked and not) */
.admin-interface .selector .selector-available select,
.admin-interface .selector .selector-chosen select {
padding: 7px 10px;
display: block;
}
/* fix [not-stacked] selector */
.admin-interface .selector:not(.stacked) {
width: auto;
margin-right: 10px; margin-right: 10px;
} }
.admin-interface .selector.stacked .selector-chooser { /* fix [not-stacked] equalize selectors height by adding the height of the .selector-available filter-bar */
margin-left: calc(50% - 25px);
}
@media (min-width: 767px) and (max-width: 1124px){
.admin-interface .selector {
width: 610px;
display: block;
}
.admin-interface .selector .selector-available,
.admin-interface .selector .selector-chosen {
width: 285px;
flex: 0 1 auto;
}
.admin-interface .selector .selector-filter {
display: flex;
align-items: center;
}
.admin-interface .selector .selector-filter label {
margin: 0;
}
.admin-interface .selector .selector-available input {
width: auto;
flex: 1 1;
}
.admin-interface .selector select {
width: 100%;
}
}
@media (max-width: 767px){
.admin-interface .selector.stacked {
margin-right: 0px;
}
.admin-interface .selector.stacked .selector-available select {
margin-bottom: 0px;
}
}
/* equalize selectors height by adding the height of the .selector-available filter-bar */
.admin-interface .selector:not(.stacked) .selector-chosen select { .admin-interface .selector:not(.stacked) .selector-chosen select {
height: calc(46px + 17.2em) !important; height: calc(46px + 17.2em) !important;
} }
/* equalize horizontal and vertical select padding */ @media (max-width: 1024px){
.admin-interface .selector .selector-available select, .admin-interface .related-widget-wrapper-link + .selector:not(.stacked) {
.admin-interface .selector .selector-chosen select { width: 100%;
padding: 7px 10px; }
}
@media (min-width: 767px) and (max-width: 1124px){
.admin-interface .selector:not(.stacked) .selector-available,
.admin-interface .selector:not(.stacked) .selector-chosen {
width: 285px;
flex: 0 1 auto;
}
.admin-interface .selector:not(.stacked) .selector-filter {
display: flex;
align-items: center;
}
.admin-interface .selector:not(.stacked) .selector-filter label {
margin: 0;
}
.admin-interface .selector:not(.stacked) .selector-available input {
width: auto;
flex: 1 1;
}
.admin-interface .selector:not(.stacked) select {
width: 100%;
}
}
/* fix [not-stacked] in tabular inline context */
.admin-interface .tabular.inline-related .selector:not(.stacked) {
width: 795px;
float: none;
display: inline-block;
margin-right: 22px;
}
.admin-interface .tabular.inline-related .form-row .related-widget-wrapper-link:first-child {
float: right;
display: inline-block;
}
/* fix [stacked] in tabular inline context */
.admin-interface .tabular.inline-related .selector.stacked {
width: 480px;
float: none;
display: inline-block;
margin-right: 22px;
}
/* fix [stacked] chooser align center */
.admin-interface .selector.stacked .selector-chooser {
margin-left:calc(50% - 30px);
} }