List settings clean up

This commit is contained in:
Roman Cervantes 2019-08-06 15:18:50 -07:00
parent cf9fcc71eb
commit e4f691b08f
2 changed files with 28 additions and 16 deletions

View file

@ -1,15 +1,15 @@
<template lang="html"> <template lang="html">
<div class="list-settings"> <div class="list-settings">
<section> <h4>{{ $t('list.moveList') }}</h4>
<h4>{{ $t('list.moveList') }}</h4>
<div class="button-grid">
<button <button
class="xsmall primary hollow" class="xsmall primary hollow"
:title="$t('list.moveLeft')" :title="$t('list.moveLeft')"
:disabled="isFirst" :disabled="isFirst"
@click="moveList(activeListIndex, activeListIndex - 1)" @click="moveList(activeListIndex, activeListIndex - 1)"
> >
<i class="fas fa-caret-left" /> <i class="fas fa-arrow-left" />
{{ $t('list.moveLeft') }} {{ $t('list.moveLeft') }}
</button> </button>
@ -21,12 +21,12 @@
@click="moveList(activeListIndex, activeListIndex + 1)" @click="moveList(activeListIndex, activeListIndex + 1)"
> >
{{ $t('list.moveRight') }} {{ $t('list.moveRight') }}
<i class="fas fa-caret-right" /> <i class="fas fa-arrow-right" />
</button> </button>
</section> </div>
<section> <section>
<h4>{{ $t('list.changeView') }}</h4> <h4>{{ $t('list.view') }}</h4>
<div class="button-group"> <div class="button-group">
<button <button
@ -50,7 +50,7 @@
<button <button
v-for="(icon, sortOrder) in sortOrders" v-for="(icon, sortOrder) in sortOrders"
:key="sortOrder" :key="sortOrder"
class="xxsmall primary" class="xsmall primary"
:class="{ hollow: activeList.sortOrder !== sortOrder }" :class="{ hollow: activeList.sortOrder !== sortOrder }"
@click="setListSort(sortOrder)" @click="setListSort(sortOrder)"
> >
@ -128,9 +128,9 @@ export default {
}, },
sortOrders: { sortOrders: {
sortByName: 'fas fa-sort-alpha-down', sortByName: 'fas fa-sort-alpha-down',
sortByRating: 'fas fa-sort-numeric-up', sortByRating: 'fas fa-star',
sortByReleaseDate: 'fas fa-calendar-alt', sortByReleaseDate: 'fas fa-calendar-alt',
sortByCustom: 'fas fa-sort', sortByCustom: 'fas fa-user',
}, },
}; };
}, },
@ -254,6 +254,10 @@ export default {
margin-bottom: $gp; margin-bottom: $gp;
} }
h4 {
margin-bottom: $gp / 2;
}
.actions, footer { .actions, footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -267,5 +271,13 @@ export default {
.button-group { .button-group {
border: 1px solid $color-blue; border: 1px solid $color-blue;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.button-grid {
display: flex;
justify-content: space-between;
margin-bottom: $gp;
} }
</style> </style>

View file

@ -74,16 +74,16 @@
}, },
"input": "Enter your own", "input": "Enter your own",
"add": "Add list", "add": "Add list",
"sortByName": "Alphabetically", "sortByName": "A-Z",
"sortByRating": "Game rating", "sortByRating": "Score",
"sortByReleaseDate": "Release date", "sortByReleaseDate": "Date",
"sortByCustom": "Custom", "sortByCustom": "Custom",
"delete": "Delete list", "delete": "Delete",
"moveLeft": "Move left", "moveLeft": "Move left",
"moveRight": "Move right", "moveRight": "Move right",
"emptyList": "This list is empty", "emptyList": "This list is empty",
"addGame": "Add game", "addGame": "Add game",
"changeView": "Change view", "view": "List view",
"moveList": "Move list", "moveList": "Move list",
"sortList": "Sort list", "sortList": "Sort list",
"coversSizeTitle": "Covers across", "coversSizeTitle": "Covers across",
@ -91,7 +91,7 @@
"single": "Default", "single": "Default",
"wide": "Compact", "wide": "Compact",
"text": "Text only", "text": "Text only",
"grid": "Masonry Grid" "grid": "Grid"
} }
}, },
"settings": { "settings": {
@ -120,7 +120,7 @@
}, },
"ownedLists": "Only show my platforms", "ownedLists": "Only show my platforms",
"sortPlatforms": "Sort platforms alphabetically", "sortPlatforms": "Sort platforms alphabetically",
"ratings": "Hide game ratings", "ratings": "Hide game score",
"signOut": "Sign out", "signOut": "Sign out",
"wallpaper": { "wallpaper": {
"title": "Upload wallpaper", "title": "Upload wallpaper",