NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-25 18:08:38 -06:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Fixes #6999: Properly align controls on sm and md breakpoints

Browse Source
This commit is contained in:
Matt 2021-08-20 08:57:10 -07:00
parent 517c0e2fe6
commit a7cb75d73d
5 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

BIN
netbox/project-static/dist/netbox-print.css vendored
View File

Binary file not shown.

21
netbox/project-static/styles/netbox.scss
View File

@ -288,7 +288,7 @@ div.title-container {
justify-content: flex-start; justify-content: flex-start;
// Right-align controls on larger screens. // Right-align controls on larger screens.
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
justify-content: flex-end; justify-content: flex-end;
} }
@ -872,11 +872,22 @@ div.card-overlay {
} }
} }
div.card > div.card-header > div.table-controls { .table-controls {
display: flex; display: flex;
align-items: center;
width: 100%; @include media-breakpoint-up(md) {
max-width: 25%; // `!important` needed because of inherited margin-bottom from `.col`
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.table-configure {
justify-content: flex-start;
@include media-breakpoint-up(md) {
justify-content: flex-end;
}
}
.form-switch.form-check-inline { .form-switch.form-check-inline {
flex: 1 0 auto; flex: 1 0 auto;

6
netbox/templates/inc/table_controls.html
View File

@ -1,5 +1,5 @@
<div class="row mb-3 justify-content-between"> <div class="row mb-3 justify-content-between">
<div class="col col-12 col-lg-4 my-3 my-lg-0 d-flex noprint table-controls"> <div class="table-controls noprint col col-12 col-md-8 col-lg-4">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input <input
type="text" type="text"
@ -9,9 +9,9 @@
/> />
</div> </div>
</div> </div>
<div class="col col-md-3 mb-0 d-flex noprint table-controls"> <div class="table-controls noprint col col-md-3 mb-0">
{% if request.user.is_authenticated and table_modal %} {% if request.user.is_authenticated and table_modal %}
<div class="input-group input-group-sm justify-content-end"> <div class="table-configure input-group input-group-sm">
<button <button
type="button" type="button"
data-bs-toggle="modal" data-bs-toggle="modal"