🎨
This commit is contained in:
		
							parent
							
								
									ebceffba1e
								
							
						
					
					
						commit
						17b6ab0ef0
					
				
					 1 changed files with 38 additions and 17 deletions
				
			
		| 
						 | 
					@ -24,24 +24,28 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	<ui-card>
 | 
						<ui-card>
 | 
				
			||||||
		<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
 | 
							<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
 | 
				
			||||||
		<section v-for="emoji in emojis">
 | 
							<section v-for="emoji in emojis" class="oryfrbft">
 | 
				
			||||||
			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
 | 
								<div>
 | 
				
			||||||
			<ui-horizon-group inputs>
 | 
									<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
 | 
				
			||||||
				<ui-input v-model="emoji.name">
 | 
								</div>
 | 
				
			||||||
					<span>{{ $t('add-emoji.name') }}</span>
 | 
								<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>
 | 
				
			||||||
				<ui-input v-model="emoji.aliases">
 | 
									<ui-horizon-group class="fit-bottom">
 | 
				
			||||||
					<span>{{ $t('add-emoji.aliases') }}</span>
 | 
										<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
 | 
				
			||||||
				</ui-input>
 | 
										<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
 | 
				
			||||||
			</ui-horizon-group>
 | 
									</ui-horizon-group>
 | 
				
			||||||
			<ui-input v-model="emoji.url">
 | 
								</div>
 | 
				
			||||||
				<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>
 | 
					 | 
				
			||||||
		</section>
 | 
							</section>
 | 
				
			||||||
	</ui-card>
 | 
						</ui-card>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
| 
						 | 
					@ -150,4 +154,21 @@ export default Vue.extend({
 | 
				
			||||||
	@media (min-width 500px)
 | 
						@media (min-width 500px)
 | 
				
			||||||
		padding 16px
 | 
							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>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue