Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-24 12:13:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Platform pages tweaks

Browse source
This commit is contained in:
Roman Cervantes 2019-09-10 14:33:34 -07:00
parent 1f925bb180
commit 4b172cef53
2 changed files with 14 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Platforms/Platform.vue
View file

@ -85,14 +85,13 @@ export default {
.platform { .platform {
padding: $gp; padding: $gp;
display: flex; display: flex;
margin-bottom: $gp / 2; margin-bottom: $gp;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: $border-radius; border-radius: $border-radius / 2;
overflow: hidden; overflow: hidden;
width: 100%; width: 200px;
max-width: 120px; height: 100px;
height: 80px;
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
@ -100,14 +99,19 @@ export default {
@media($small) { @media($small) {
padding: $gp / 2; padding: $gp / 2;
width: calc(calc(100% / 3) - 7px) !important; width: 100%;
height: 60px;
} }
img { img {
width: 100%; width: 80%;
height: auto; height: auto;
max-height: 100%; @media($small) {
width: auto;
height: 70px;
max-height: 60%;
}
} }
.game-count { .game-count {

43
src/pages/Platforms.vue
View file

@ -73,33 +73,9 @@ export default {
initGrid() { initGrid() {
msnry = new Masonry('.platforms', { msnry = new Masonry('.platforms', {
itemSelector: '.platform', 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')}`;
},
}, },
}; };
</script> </script>
@ -110,31 +86,16 @@ export default {
.platforms-page { .platforms-page {
color: $color-dark-gray; color: $color-dark-gray;
min-height: calc(100vh - #{$navHeight}); min-height: calc(100vh - #{$navHeight});
padding: 0 $gp; padding: $gp / 2 $gp;
&.dark { &.dark {
color: $color-gray; color: $color-gray;
.group-label {
background-color: $color-darkest-gray;
}
} }
} }
.platforms { .platforms {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.reverse {
flex-direction: column-reverse;
}
}
.group-label {
position: sticky;
top: 0;
padding: $gp / 3 0;
background-color: $color-gray;
} }
footer { footer {