ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

Improve mobile responsiveness

Browse Source
This commit is contained in:
dragongoose 2023-04-11 13:52:19 -04:00
parent bf59294081
commit 81e93339b3
No known key found for this signature in database
GPG Key ID: 50DB99B921579009
1 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/CategoryView.vue
View File

@ -24,7 +24,7 @@ export default {
`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}` `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
) )
const rawData = await res.json() const rawData = await res.json()
if (rawData.status === "ok") { if (rawData.status === 'ok') {
this.data = rawData.data this.data = rawData.data
} else { } else {
this.data = { status: 'error' } this.data = { status: 'error' }
@ -56,11 +56,39 @@ export default {
<error-message v-else-if="data.status === 'error' || !data"></error-message> <error-message v-else-if="data.status === 'error' || !data"></error-message>
<div v-else class="flex flex-col max-w-5xl mx-auto"> <div v-else class="flex flex-col max-w-5xl mx-auto">
<div class="flex space-x-4 p-3"> <div class="flex p-3 flex-col">
<div class="inline-flex space-x-4">
<img :src="data.cover" class="self-start rounded-md" /> <img :src="data.cover" class="self-start rounded-md" />
<div> <div>
<h1 class="font-bold text-5xl text-white">{{ data.name }}</h1> <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
<div class="hidden md:block">
<div>
<div class="inline-flex my-1 space-x-3">
<p class="font-bold text-white text-lg">
Followers: {{ abbreviate(data.followers) }}
</p>
<p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
</div>
<ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span
class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
>{{ tag }}</span
>
</li>
</ul>
</div>
</div>
<p class="text-md text-gray-400 overflow-y-auto hidden md:block">
{{ data.description }}
</p>
</div>
</div>
<div class="md:hidden">
<div>
<div class="inline-flex my-1 space-x-3"> <div class="inline-flex my-1 space-x-3">
<p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p> <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
<p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p> <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
@ -68,15 +96,16 @@ export default {
<ul class="mb-5"> <ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex"> <li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{ <span
tag class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
}}</span> >{{ tag }}</span
>
</li> </li>
</ul> </ul>
<p class="text-md text-gray-400 overflow-y-auto">{{ data.description }}</p>
</div> </div>
</div> </div>
<p class="text-md text-gray-400 overflow-y-auto md:hidden">{{ data.description }}</p>
</div>
<div class="max-w-[58rem] mx-auto"> <div class="max-w-[58rem] mx-auto">
<ul> <ul>