Skip to content

Commit

Permalink
EZP-30071: Implement responsive table in Sub-items (#138)
Browse files Browse the repository at this point in the history 
* EZP-30071: Implement responsive table in Sub-items

* Fix columns toggler popup which bulge out of the location-view container div

* No hardcoded panel height

* Fix button icon alignment
  • Loading branch information
@tischsoic
tischsoic authored and Łukasz Serwatka committed Feb 27, 2019
1 parent 5f1c666 commit 60f22ab
Show file tree
Hide file tree
Showing 17 changed files with 530 additions and 91 deletions.
2 changes: 1 addition & 1 deletion Resources/public/js/ContentTree.module.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/ContentTree.module.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/MultiFileUpload.module.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/MultiFileUpload.module.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/SubItems.module.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/SubItems.module.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/UniversalDiscovery.module.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/public/js/UniversalDiscovery.module.js.map
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions Resources/public/scss/modules/_sub.items.list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
@import 'sub-items-list/grid.view.item';
@import 'sub-items-list/grid.view';
@import 'sub-items-list/no.items';
@import 'sub-items-list/table.view.columns.toggler.list.element';
@import 'sub-items-list/table.view.columns.toggler';
@import 'sub-items-list/table.view.item';
@import 'sub-items-list/table.view';
@import 'sub-items-list/view.switcher.button';
Expand Down
19 changes: 19 additions & 0 deletions Resources/public/scss/modules/sub-items-list/_table.view.columns.toggler.list.element.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.c-table-view-columns-toggler-list-element {
cursor: pointer;

.form-check-inline {
display: flex;
justify-content: flex-start;
align-items: center;
padding: calculateRem(12px) calculateRem(4px);
margin-right: calculateRem(12px);
line-height: 0;
}

&__label {
white-space: nowrap;
user-select: none;
font-size: calculateRem(14px);
cursor: pointer;
}
}
38 changes: 38 additions & 0 deletions Resources/public/scss/modules/sub-items-list/_table.view.columns.toggler.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.c-table-view-columns-toggler {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;

&__btn {
display: flex;
justify-content: center;
padding: calculateRem(5px);
height: calculateRem(32px);
width: calculateRem(32px);
}

&__panel {
border-radius: calculateRem(4px);
background: $ez-white;
position: absolute;
z-index: 10;
padding: calculateRem(4px) calculateRem(14px);
top: calculateRem(36px);
right: calculateRem(17px);
font-weight: normal;
box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ez-black, 0.45);

&--above-btn {
bottom: calculateRem(36px);
top: auto;
}
}

&__list {
padding: 0;
margin: 0;
list-style: none;
}
}
40 changes: 27 additions & 13 deletions Resources/public/scss/modules/sub-items-list/_table.view.item.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
.c-table-view-item {
& + & {
border-top: calculateRem(1px) solid $ez-ground-primary;
}

&__translation {
display: block;
}
Expand All @@ -14,12 +10,15 @@
}

&__cell {
border-top: calculateRem(1px) solid $ez-ground-primary;
padding-left: calculateRem(16px);
padding-top: calculateRem(13px);
font-size: calculateRem(14px);
line-height: calculateRem(20px);
vertical-align: top;

&--translations {
max-width: calculateRem(100px);
&--content-type {
min-width: calculateRem(130px);
}

&--name .c-table-view-item__text-wrapper {
Expand All @@ -31,18 +30,25 @@
}

&--checkbox {
width: 5%;
position: absolute;
left: 0;
width: calculateRem(30px);
border-top: calculateRem(1px) solid $ez-ground-primary;
line-height: 0;
padding-top: calculateRem(16px);
margin-top: -0.5px; // Fixes borders alignment on Safari and Edge
}

&--icon {
padding: 0 calculateRem(8px) 0 calculateRem(16px);
padding-right: calculateRem(8px);
width: calculateRem(24px);
text-align: right;
vertical-align: middle;
line-height: 0;
height: calculateRem(47px);
padding-top: calculateRem(14px);

.ez-icon {
fill: $ez-black;
fill: $ez-color-base-medium;
}
}

Expand All @@ -51,11 +57,19 @@
}

&--priority {
padding-top: 0;
width: calculateRem(80px);
}

&--actions {
width: calculateRem(100px);
position: absolute;
display: flex;
align-items: center;
right: 0;
height: calculateRem(47px);
width: calculateRem(70px);
padding: 0;
margin-top: -0.5px; // Fixes borders alignment on Safari and Edge
}
}

Expand Down Expand Up @@ -87,9 +101,9 @@

&__priority-actions {
position: absolute;
left: 7ch;
left: calculateRem(-84px);
top: calculateRem(2px);
width: calculateRem(90px);
width: calculateRem(84px);
}

&__priority-value {
Expand Down
104 changes: 88 additions & 16 deletions Resources/public/scss/modules/sub-items-list/_table.view.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,99 @@
border-collapse: collapse;
width: 100%;

&__wrapper {
position: relative;
}

&__scroller {
margin-left: calculateRem(28px);
margin-right: calculateRem(68px);
overflow-x: auto;
}

&__columns-toggler {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

&__columns-toggler-btn {
padding: calculateRem(5px);
height: calculateRem(32px);
width: calculateRem(32px);
}

&__columns-toggler-panel {
border-radius: calculateRem(4px);
background: $ez-white;
position: absolute;
z-index: 10;
padding: calculateRem(4px) calculateRem(14px);
top: calculateRem(36px);
right: calculateRem(17px);
font-weight: normal;
box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ez-black, 0.45);
}

&__columns-toggler-list {
padding: 0;
margin: 0;
list-style: none;
}

&__columns-toggler-option {
cursor: pointer;

.form-check-inline {
display: flex;
justify-content: flex-start;
align-items: center;
padding: calculateRem(12px) calculateRem(4px);
margin-right: calculateRem(12px);
line-height: 0;
}
}

&__columns-toggler-option-label {
white-space: nowrap;
user-select: none;
font-size: calculateRem(14px);
cursor: pointer;
}

&__cell {
&--head {
padding-left: 16px;
padding-left: calculateRem(16px);
font-weight: 700;
}

&:last-of-type {
padding-right: 100px;
}
&--checkbox {
position: absolute;
padding: 0;
left: 0;
height: calculateRem(43px);
width: calculateRem(30px);
padding-left: calculateRem(16px);
}

&--sortable {
cursor: pointer;
padding-right: calculateRem(12px);
}

&--name {
padding-left: 0;
}

&--actions {
position: absolute;
right: 0;
height: calculateRem(43px);
width: calculateRem(70px);
padding: 0;
}
}

&__label {
Expand All @@ -36,32 +112,28 @@
}
}

&__row {
border-bottom: 1px solid #a8c8d5;
}

&__body {
.c-no-items {
padding-top: 7px;
padding-left: 39px;
padding-top: calculateRem(7px);
padding-left: calculateRem(39px);
}
}

&__head {
&--sort-by-name.c-table-view__head--sort-desc .c-table-view__cell--name .c-table-view__label:after,
&--sort-by-date.c-table-view__head--sort-desc .c-table-view__cell--date .c-table-view__label:after,
&--sort-by-priority.c-table-view__head--sort-desc .c-table-view__cell--priority .c-table-view__label:after {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 5px solid #333;
border-left: calculateRem(3px) solid transparent;
border-right: calculateRem(3px) solid transparent;
border-top: calculateRem(5px) solid $ez-black;
}

&--sort-by-name.c-table-view__head--sort-asc .c-table-view__cell--name .c-table-view__label:after,
&--sort-by-date.c-table-view__head--sort-asc .c-table-view__cell--date .c-table-view__label:after,
&--sort-by-priority.c-table-view__head--sort-asc .c-table-view__cell--priority .c-table-view__label:after {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 5px solid #333;
border-left: calculateRem(3px) solid transparent;
border-right: calculateRem(3px) solid transparent;
border-bottom: calculateRem(5px) solid $ez-black;
}
}
}
Loading

0 comments on commit 60f22ab

Please sign in to comment.