diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue index 7171127aa..6265fb519 100644 --- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue +++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue @@ -1,11 +1,36 @@ diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue index 5326e055f..fa4dd0aa4 100644 --- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue +++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue @@ -163,12 +163,13 @@ export default Vue.extend({ diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss new file mode 100644 index 000000000..c27b0b5fb --- /dev/null +++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss @@ -0,0 +1,31 @@ +@mixin rank-list-common { + & &-loading-container { + @include v-center(); + justify-content: center; + padding: var(--padding); + border-radius: var(--home-card-radius); + border: 2px dashed #8884; + height: 100%; + } + & &-empty { + @include v-center(12px); + justify-content: center; + .be-button { + padding: 4px 10px 4px 6px !important; + &:hover .be-icon { + transform: rotate(1turn); + } + } + .be-icon { + margin-right: 6px; + transition: 0.5s ease-out; + } + } + + &.loaded { + @include no-scrollbar(); + .animation { + animation-play-state: running; + } + } +} diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts index 8643135ac..f2700f5ce 100644 --- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts +++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts @@ -11,6 +11,7 @@ export interface RankListCard { dynamic?: string } export const rankListCssVars = { + panelWidth: 400, panelHeight: 608, padding: 12, rankItemHeight: 110, @@ -23,3 +24,8 @@ export const rankListCssVars = { thirdCoverHeight: 90, thirdCoverWidth: 139, } +export const compactRankListCssVars = { + panelWidth: 400, + panelHeight: 608, + padding: 12, +}