natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Better reversi labels

This commit is contained in:
syuilo 2018-06-24 13:18:22 +09:00
parent 17792716a7
commit e15643ca46
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/app/common/views/components/reversi.game.vue
View File

@ -30,6 +30,12 @@
<img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt=""> <img v-if="stone === false" :src="`${whiteUser.avatarUrl}?thumbnail&size=128`" alt="">
</div> </div>
</div> </div>
<div class="labels-y" v-if="this.$store.state.settings.reversiBoardLabels">
<div v-for="i in game.settings.map.length">{{ i }}</div>
</div>
</div>
<div class="labels-x" v-if="this.$store.state.settings.reversiBoardLabels">
<span v-for="i in game.settings.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
</div> </div>
</div> </div>
@ -263,12 +269,12 @@ export default Vue.extend({
height 350px height 350px
margin 0 auto margin 0 auto
$label-size = 32px $label-size = 16px
$gap = 4px $gap = 4px
> .labels-x > .labels-x
height $label-size height $label-size
padding-left $label-size padding 0 $label-size
display flex display flex
> * > *
@ -276,6 +282,7 @@ export default Vue.extend({
display flex display flex
align-items center align-items center
justify-content center justify-content center
font-size 12px
&:first-child &:first-child
margin-left -($gap / 2) margin-left -($gap / 2)
@ -296,6 +303,7 @@ export default Vue.extend({
display flex display flex
align-items center align-items center
justify-content center justify-content center
font-size 12px
&:first-child &:first-child
margin-top -($gap / 2) margin-top -($gap / 2)