From 17b6ab0ef038d211072efe9c0388d4b0e5e41375 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 15 Dec 2018 16:48:28 +0900
Subject: [PATCH] :art:

---
 src/client/app/admin/views/emoji.vue | 55 +++++++++++++++++++---------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue
index cf0f643209..8abc118c11 100644
--- a/src/client/app/admin/views/emoji.vue
+++ b/src/client/app/admin/views/emoji.vue
@@ -24,24 +24,28 @@
 
 	<ui-card>
 		<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
-		<section v-for="emoji in emojis">
-			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
-			<ui-horizon-group inputs>
-				<ui-input v-model="emoji.name">
-					<span>{{ $t('add-emoji.name') }}</span>
+		<section v-for="emoji in emojis" class="oryfrbft">
+			<div>
+				<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
+			</div>
+			<div>
+				<ui-horizon-group>
+					<ui-input v-model="emoji.name">
+						<span>{{ $t('add-emoji.name') }}</span>
+					</ui-input>
+					<ui-input v-model="emoji.aliases">
+						<span>{{ $t('add-emoji.aliases') }}</span>
+					</ui-input>
+				</ui-horizon-group>
+				<ui-input v-model="emoji.url">
+					<i slot="icon"><fa icon="link"/></i>
+					<span>{{ $t('add-emoji.url') }}</span>
 				</ui-input>
-				<ui-input v-model="emoji.aliases">
-					<span>{{ $t('add-emoji.aliases') }}</span>
-				</ui-input>
-			</ui-horizon-group>
-			<ui-input v-model="emoji.url">
-				<i slot="icon"><fa icon="link"/></i>
-				<span>{{ $t('add-emoji.url') }}</span>
-			</ui-input>
-			<ui-horizon-group class="fit-bottom">
-				<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
-				<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
-			</ui-horizon-group>
+				<ui-horizon-group class="fit-bottom">
+					<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
+					<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
+				</ui-horizon-group>
+			</div>
 		</section>
 	</ui-card>
 </div>
@@ -150,4 +154,21 @@ export default Vue.extend({
 	@media (min-width 500px)
 		padding 16px
 
+	.oryfrbft
+		@media (min-width 500px)
+			display flex
+
+		> div:first-child
+			@media (max-width 500px)
+				padding-bottom 16px
+
+			> img
+				vertical-align bottom
+
+		> div:last-child
+			flex 1
+
+			@media (min-width 500px)
+				padding-left 16px
+
 </style>