mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-31 21:38:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #374 from acelaya-forks/feature/responsive-table

Browse source 
Feature/responsive table
This commit is contained in:
Alejandro Celaya 2020-12-30 20:09:42 +01:00 committed by GitHub
commit 0822cebb10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -21,6 +21,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
* [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled.
* [#366](https://github.com/shlinkio/shlink-web-client/issues/366) Fixed text in visits menu jumping to next line in some tablet resolutions.
* [#367](https://github.com/shlinkio/shlink-web-client/issues/367) Removed conflicting overflow in visits table for mobile devices.
* [#365](https://github.com/shlinkio/shlink-web-client/issues/365) Fixed weird rendering of short URLs list in tablets.
## [3.0.0] - 2020-12-22

2
src/short-urls/ShortUrlsList.tsx
View file

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

2
src/short-urls/ShortUrlsTable.scss
View file

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

9
src/short-urls/helpers/ShortUrlsRow.scss
View file

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

1
src/utils/base.scss
View file

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