🎨

misskey-dev · Dec 15, 2018 · 17b6ab0 · 17b6ab0
1 parent ebceffb
commit 17b6ab0
Showing 1 changed file with 38 additions and 17 deletions.
diff --git 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>
-				</ui-input>
-				<ui-input v-model="emoji.aliases">
-					<span>{{ $t('add-emoji.aliases') }}</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-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>