Increased breakpoint in which short URLs table collapses

This commit is contained in:
Alejandro Celaya 2020-12-30 20:05:04 +01:00
parent c0098ac7fd
commit a22274f382
4 changed files with 8 additions and 6 deletions

View file

@ -78,7 +78,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
return ( return (
<> <>
<div className="d-block d-md-none mb-3"> <div className="d-block d-lg-none mb-3">
<SortingDropdown <SortingDropdown
items={SORTABLE_FIELDS} items={SORTABLE_FIELDS}
orderField={order.orderField} orderField={order.orderField}

View file

@ -1,7 +1,7 @@
@import '../utils/base'; @import '../utils/base';
.short-urls-table__header { .short-urls-table__header {
@media (max-width: $smMax) { @media (max-width: $responsiveTableBreakpoint) {
display: none; display: none;
} }
} }

View file

@ -2,7 +2,7 @@
@import '../../utils/mixins/vertical-align'; @import '../../utils/mixins/vertical-align';
.short-urls-row { .short-urls-row {
@media (max-width: $smMax) { @media (max-width: $responsiveTableBreakpoint) {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid $lightGrey; border-bottom: 1px solid $lightGrey;
@ -13,7 +13,7 @@
.short-urls-row__cell.short-urls-row__cell { .short-urls-row__cell.short-urls-row__cell {
vertical-align: middle !important; vertical-align: middle !important;
@media (max-width: $smMax) { @media (max-width: $responsiveTableBreakpoint) {
display: block; display: block;
width: 100%; width: 100%;
position: relative; position: relative;
@ -22,7 +22,7 @@
&:before { &:before {
content: attr(data-th); content: attr(data-th);
font-weight: bold; font-weight: 700;
} }
&:last-child { &:last-child {
@ -55,9 +55,10 @@
.short-urls-row__copy-hint { .short-urls-row__copy-hint {
@include vertical-align(translateX(10px)); @include vertical-align(translateX(10px));
box-shadow: 0 3px 15px rgba(0, 0, 0, .25); box-shadow: 0 3px 15px rgba(0, 0, 0, .25);
@media (max-width: $smMax) { @media (max-width: $responsiveTableBreakpoint) {
@include vertical-align(translateX(calc(-100% - 20px))); @include vertical-align(translateX(calc(-100% - 20px)));
} }
} }

View file

@ -7,6 +7,7 @@ $mdMax: 991px;
$lgMin: 992px; $lgMin: 992px;
$lgMax: 1199px; $lgMax: 1199px;
$xlgMin: 1200px; $xlgMin: 1200px;
$responsiveTableBreakpoint: $mdMax;
// Colors // Colors
$mainColor: #4696e5; $mainColor: #4696e5;