Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 13:22:58 -05:00
Code Issues Activity

UI Centering fixes (i finally read a flexbox guide :3) #67

Browse source
This commit is contained in:
dragongoose 2023-11-27 19:38:20 -05:00
parent 0bce68762d
commit f213b2dbb5
No known key found for this signature in database
GPG key ID: 01397EEC371CDAA5
3 changed files with 9 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/CategoryView.vue
View file

@ -135,7 +135,7 @@ export default {
</div> </div>
<div class="max-w-[58rem] mx-auto"> <div class="max-w-[58rem] mx-auto">
<ul> <ul class="flex flex-wrap justify-evenly">
<li <li
v-for="stream in data.streams" v-for="stream in data.streams"
:key="stream.title" :key="stream.title"

4
src/views/FollowingView.vue
View file

@ -47,8 +47,8 @@ export default {
<template> <template>
<loading-screen v-if="!data && status != 'error'"></loading-screen> <loading-screen v-if="!data && status != 'error'"></loading-screen>
<div class="md:max-w-[50rem] w-full mx-auto text-contrast flex justify-center"> <div class="md:max-w-[50rem] w-full mx-auto text-contrast flex justify-center">
<ul class="m-2"> <ul class="m-2 flex flex-wrap justify-center">
<li v-for="streamer in data" class="md:inline-flex"> <li v-for="streamer in data" class="">
<div class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]"> <div class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]">
<img :src="streamer.pfp" class="w-16 rounded-full" /> <img :src="streamer.pfp" class="w-16 rounded-full" />
<div class="justify-between flex flex-col ml-2"> <div class="justify-between flex flex-col ml-2">

23
src/views/HomepageView.vue
View file

@ -117,27 +117,16 @@ export default {
<div class="relative"> <div class="relative">
<label for="searchBar" class="hidden">{{ $t('main.search') }}</label> <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
<v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon> <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
<input <input type="text" id="searchBar" name="searchBar" :placeholder="$t('main.search')" v-model="filterTags"
type="text" @keypress="filterSearches(filterTags)" @keyup="filterSearches(filterTags)"
id="searchBar" class="rounded-md p-1 pl-8 placeholder:text-white" />
name="searchBar"
:placeholder="$t('main.search')"
v-model="filterTags"
@keypress="filterSearches(filterTags)"
@keyup="filterSearches(filterTags)"
class="rounded-md p-1 pl-8 placeholder:text-white"
/>
</div> </div>
</div> </div>
</div> </div>
<ul ref="categoryList"> <ul ref="categoryList" class="flex flex-wrap justify-evenly">
<li <li v-for="category in data" :key="category.name" ref="categoryItem"
v-for="category in data" class="m-2 hover:scale-105 transition-transform">
:key="category.name"
ref="categoryItem"
class="inline-flex m-2 hover:scale-105 transition-transform"
>
<category-preview :category-data="category"></category-preview> <category-preview :category-data="category"></category-preview>
</li> </li>
</ul> </ul>