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 {
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 {

43
src/pages/Platforms.vue
View file

@ -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')}`;
},
},
};
</script>
@ -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 {