diff --git a/css/_layout.css b/css/_layout.css new file mode 100644 index 0000000..bbde8db --- /dev/null +++ b/css/_layout.css @@ -0,0 +1,15 @@ +#body-user { + div.files-list { + --row-height: 55px; + + @media only screen and (max-width: 1023px) { + --row-height: 65px; + } + } +} + +#content-vue { + margin: 0; + width: 100%; + border-radius: 0; +} diff --git a/css/buttons.css b/css/buttons.css index deb1e76..090e849 100644 --- a/css/buttons.css +++ b/css/buttons.css @@ -159,7 +159,7 @@ } /* mobile and tablet */ - @media only screen and (max-width: 1199px) { + @media only screen and (max-width: 1023px) { min-height: 48px; } } @@ -212,7 +212,7 @@ } /* mobile and tablet */ - @media only screen and (max-width: 1199px) { + @media only screen and (max-width: 1023px) { min-height: 48px; } } @@ -234,7 +234,7 @@ } } - &:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) { + &:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) { background-color: var(--ion-button--icon-only-background-hover); .button-vue__icon span[role=img]>svg { @@ -242,7 +242,7 @@ } } - &:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) { + &:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) { background-color: var(--ion-button--icon-only-background-active); .button-vue__icon span[role=img]>svg { @@ -250,6 +250,18 @@ } } + &.files-list__header-grid-button { + &:hover { + .button-vue__icon span[role=img]>svg { + color: var(--ion-color-blue-b5); + } + } + &:active { + .button-vue__icon span[role=img]>svg { + color: var(--ion-color-typo-mild); + } + } + } &.modal-container__close { margin: 4px; .button-vue__icon span[role=img]>svg { @@ -327,6 +339,10 @@ } } } + + &.files-list__row-size span.button-vue__wrapper { + flex-direction: row-reverse; + } } } diff --git a/css/files.css b/css/files.css index 54e0244..a27cf7a 100644 --- a/css/files.css +++ b/css/files.css @@ -22,7 +22,52 @@ } .files-list__thead, .files-list__thead-overlay { top: 0; + .files-list__row-head .files-list__column--sortable .button-vue__text { + @media only screen and (max-width: 1023px) { + font-size: 16px; + } + } + } + + .files-list__header { + margin-top: 20px; + margin-right: 16px; + margin-bottom: 14px; + @media only screen and (max-width: 1023px) { + margin-top: 15px; + } + } + + thead.files-list__thead tr, + tbody.files-list__tbody.files-list__tbody--list tr, + tfoot.files-list__tfoot tr { + padding-right: 44px; + padding-left: 4px; + } + + .files-list__header-grid-button { + position: absolute; + top: 88px; + right: 20px; + z-index: 33; } + + .files-list__refresh-icon { + position: absolute; + right: 50%; + } + + .breadcrumb nav { + flex-grow: 1; + } + + .files-list__column-sort-button-icon { + svg { + width: 18px; + height: 18px; + } + } + div.files-list__header:has(div.files-list__breadcrumbs), .file-picker { div.files-list__breadcrumbs, .file-picker__breadcrumbs { ul.breadcrumb__crumbs { @@ -81,6 +126,27 @@ } } } + + @media only screen and (max-width: 767px) { + margin-inline: 0; + + div.breadcrumb { + flex-direction: column-reverse; + align-items: flex-start; + + nav { + margin-left: 8px; + } + + div.breadcrumb__actions { + align-self: flex-end; + + &:has(div.v-popper) { + position: sticky; + } + } + } + } } div[data-cy-files-list].files-list { @@ -112,6 +178,19 @@ } } + tfoot.files-list__tfoot tr td.files-list__column.files-list__row-size, + td[data-cy-files-list-row-size].files-list__row-size { + justify-content: normal; + padding-left: 12px; + @media only screen and (max-width: 1199px) { + padding-left: 23px; + } + } + + tbody.files-list__tbody--grid .files-list__row-icon { + transform: scale(.7); + } + /* Context Menu */ div.v-popper--theme-dropdown.v-popper__popper:has(.v-popper__wrapper) { border-radius: 16px; diff --git a/css/navigation.css b/css/navigation.css index 0c5921a..df1bb78 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -7,6 +7,11 @@ .app-navigation__search { display: none; } + + .app-navigation-list { + padding: 20px; + } + div[data-cy-files-navigation].app-navigation:has(nav#app-navigation-vue) { background-color: var(--ion-surface-secondary); .app-navigation-entry { @@ -52,8 +57,11 @@ /* Navigation Toggle Button */ div.app-navigation-toggle-wrapper button { - margin: 6px 0; + margin: 18px 0; background-color: var(--ion-button-sidebar-background); + @media only screen and (max-width: 1023px) { + margin: 12px 0; + } span[role=img]>svg { color: var(--ion-button-sidebar--icon-only-text); }