diff --git a/src/components/Platforms/Platform.vue b/src/components/Platforms/Platform.vue index dd5dcb66..35a8c321 100644 --- a/src/components/Platforms/Platform.vue +++ b/src/components/Platforms/Platform.vue @@ -85,14 +85,13 @@ export default { .platform { padding: $gp; display: flex; - margin-bottom: $gp / 2; + margin-bottom: $gp; align-items: center; justify-content: center; - border-radius: $border-radius; + border-radius: $border-radius / 2; overflow: hidden; - width: 100%; - max-width: 120px; - height: 80px; + width: 200px; + height: 100px; &.clickable { cursor: pointer; @@ -100,14 +99,19 @@ export default { @media($small) { padding: $gp / 2; - width: calc(calc(100% / 3) - 7px) !important; + width: 100%; + height: 60px; } img { - width: 100%; + width: 80%; height: auto; - max-height: 100%; + @media($small) { + width: auto; + height: 70px; + max-height: 60%; + } } .game-count { diff --git a/src/pages/Platforms.vue b/src/pages/Platforms.vue index f7876a8e..67c734c7 100755 --- a/src/pages/Platforms.vue +++ b/src/pages/Platforms.vue @@ -73,33 +73,9 @@ export default { initGrid() { msnry = new Masonry('.platforms', { itemSelector: '.platform', - gutter: 10, + gutter: 16, }); }, - - groupLabel(label) { - return label === '0' - ? this.$t('platforms.computersArcade') - : `${this.ordinalSuffix(label)} ${this.$t('platforms.generation')}`; - }, - - ordinalSuffix(value) { - const j = value % 10; - const k = value % 100; - - if (j === 1 && k !== 11) { - return `${value}${this.$t('platforms.st')}`; - } - - if (j === 2 && k !== 12) { - return `${value}${this.$t('platforms.nd')}`; - } - if (j === 3 && k !== 13) { - return `${value}${this.$t('platforms.rd')}`; - } - - return `${value}${this.$t('platforms.th')}`; - }, }, }; @@ -110,31 +86,16 @@ export default { .platforms-page { color: $color-dark-gray; min-height: calc(100vh - #{$navHeight}); - padding: 0 $gp; + padding: $gp / 2 $gp; &.dark { color: $color-gray; - - .group-label { - background-color: $color-darkest-gray; - } } } .platforms { display: flex; flex-direction: column; - - &.reverse { - flex-direction: column-reverse; - } - } - - .group-label { - position: sticky; - top: 0; - padding: $gp / 3 0; - background-color: $color-gray; } footer {