diff --git a/src/assets/scss/_global-components.scss b/src/assets/scss/_global-components.scss index 2723fc5d..ccf47022 100644 --- a/src/assets/scss/_global-components.scss +++ b/src/assets/scss/_global-components.scss @@ -708,6 +708,58 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten( @include break-mobile-sm { grid-template-columns: 1fr; } } +// Bottom actions and pagination +.actions-bottom { + border-top: 1px solid $border-color; + position: fixed; + bottom: 0; + right: 0; + left: 0; + background: $base-background-color; + padding: 0.75rem; + z-index: 1000; + &-grid { + display: grid; + grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); + align-items: center; + column-gap: 2rem; + max-width: $view-maxWidth; + margin: 0 auto; + } + .button { + display: block; + margin-bottom: 0; + width: 100%; + } +} +.pagination-bottom { + justify-self: end; + ul { &.pagination { li { a { font-size: $font-size-sm; } } } } +} +.pagination-wrap { + float: right; + @include break-mobile-sm { + float: unset; + text-align: center; + } +} + +@include break-mobile-sm { + .posts { + .actions-bottom { + .actions-bottom-grid { + grid-template-columns: 1fr auto; + align-items: center; + justify-items: center; + column-gap: 1rem; + } + .pagination-bottom { + justify-self: end; + } + } + } +} + .pagination-slide { grid-template-columns: minmax(0, 3fr) minmax($sidebarWidth, 1fr); max-width: $view-maxWidth; diff --git a/src/components/users/UserPosts.vue b/src/components/users/UserPosts.vue index 83517dcb..51e91e65 100644 --- a/src/components/users/UserPosts.vue +++ b/src/components/users/UserPosts.vue @@ -323,12 +323,4 @@ export default { .username { display: none; } } } - -.pagination-wrap { - float: right; - @include break-mobile-sm { - float: unset; - text-align: center; - } -} diff --git a/src/views/Posts.vue b/src/views/Posts.vue index e926da6b..648bebe2 100644 --- a/src/views/Posts.vue +++ b/src/views/Posts.vue @@ -1631,71 +1631,6 @@ ad-viewer { } } - -// Bottom actions and pagination -.actions-bottom { - border-top: 1px solid $border-color; - position: fixed; - bottom: 0; - right: 0; - left: 0; - background: $base-background-color; - padding: 0.75rem; - z-index: 1000; - - &-grid { - display: grid; - grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); - align-items: center; - column-gap: 2rem; - max-width: $view-maxWidth; - margin: 0 auto; - } - - .button { - display: block; - margin-bottom: 0; - width: 100%; - } -} -.pagination-bottom { - justify-self: end; - - ul { - &.pagination { - li { - a { - font-size: $font-size-sm;; - } - } - } - } -} - -@include break-mobile-sm { - .posts { - .actions-bottom { - .actions-bottom-grid { - grid-template-columns: 1fr auto; - align-items: center; - justify-items: center; - column-gap: 1rem; - } - - .pagination-bottom { - justify-self: end; - // position: fixed; - // bottom: 3rem; - // left: 0; - // right: 0; - // background-color: #fff; - // border-top: 1px solid $border-color; - // text-align: center; - } - } - } -} - // Posts Layout Mobile @include break-max-large {