From bfc3382d6d498372f761849572cf9d8b1d1d92a3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 25 Nov 2018 05:10:48 +0900
Subject: [PATCH] :art:

---
 .../components/games/reversi/reversi.game.vue | 22 ++++++++++---------
 .../app/common/views/components/ui/button.vue | 16 +++++++++-----
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index 14c0c0891..927337f01 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -50,15 +50,13 @@
 	</div>
 
 	<div class="player" v-if="game.isEnded">
-		<div>
-			<button @click="logPos = 0" :disabled="logPos == 0"><fa icon="angle-double-left"/></button>
-			<button @click="logPos--" :disabled="logPos == 0"><fa icon="angle-left"/></button>
-		</div>
 		<span>{{ logPos }} / {{ logs.length }}</span>
-		<div>
-			<button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button>
-			<button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button>
-		</div>
+		<ui-horizon-group>
+			<ui-button @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></ui-button>
+			<ui-button @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></ui-button>
+			<ui-button @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></ui-button>
+			<ui-button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></ui-button>
+		</ui-horizon-group>
 	</div>
 
 	<div class="info">
@@ -75,6 +73,7 @@ import i18n from '../../../../../i18n';
 import * as CRC32 from 'crc-32';
 import Reversi, { Color } from '../../../../../../../games/reversi/core';
 import { url } from '../../../../../config';
+import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
@@ -99,7 +98,8 @@ export default Vue.extend({
 			o: null as Reversi,
 			logs: [],
 			logPos: 0,
-			pollingClock: null
+			pollingClock: null,
+			faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight
 		};
 	},
 
@@ -449,7 +449,9 @@ export default Vue.extend({
 		padding-bottom 16px
 
 	> .player
-		padding-bottom 32px
+		padding 0 16px 32px 16px
+		margin 0 auto
+		max-width 500px
 
 		> span
 			display inline-block
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index d7d65ad87..9376b3e72 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -79,6 +79,10 @@ export default Vue.extend({
 
 	*
 		pointer-events none
+		user-select none
+
+	&:disabled
+		opacity 0.7
 
 	&:focus
 		&:after
@@ -107,30 +111,30 @@ export default Vue.extend({
 		color var(--text)
 		background var(--buttonBg)
 
-		&:hover
+		&:not(:disabled):hover
 			background var(--buttonHoverBg)
 
-		&:active
+		&:not(:disabled):active
 			background var(--buttonActiveBg)
 
 		&.primary
 			color var(--primaryForeground)
 			background var(--primary)
 
-			&:hover
+			&:not(:disabled):hover
 				background var(--primaryLighten5)
 
-			&:active
+			&:not(:disabled):active
 				background var(--primaryDarken5)
 
 	&:not(.fill)
 		color var(--primary)
 		background none
 
-		&:hover
+		&:not(:disabled):hover
 			color var(--primaryDarken5)
 
-		&:active
+		&:not(:disabled):active
 			background var(--primaryAlpha03)
 
 </style>