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

Add reactivity for mobile

Browse Source
This commit is contained in:
dragongoose 2023-04-10 21:49:02 -04:00
parent 9ebf319211
commit bf59294081
No known key found for this signature in database
GPG Key ID: 50DB99B921579009
5 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/NavbarView.vue
View File

@ -9,7 +9,7 @@ export default {}
</router-link> </router-link>
<div> <div>
<form class="relative"> <form class="relative hidden md:block">
<label for="searchBar" class="hidden">Search</label> <label for="searchBar" class="hidden">Search</label>
<v-icon <v-icon
name="io-search-outline" name="io-search-outline"

4
src/components/StreamPreview.vue
View File

@ -59,7 +59,7 @@ export default {
<template> <template>
<div v-if="streamData"> <div v-if="streamData">
<div class="bg-ctp-crust rounded-lg w-[27rem]"> <div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
<RouterLink :to="'/' + streamData.streamer.name"> <RouterLink :to="'/' + streamData.streamer.name">
<img :src="streamData.preview" class="rounded-lg rounded-b-none" /> <img :src="streamData.preview" class="rounded-lg rounded-b-none" />
</RouterLink> </RouterLink>
@ -68,7 +68,7 @@ export default {
<div class="inline-flex"> <div class="inline-flex">
<img :src="streamData.streamer.pfp" class="rounded-full mr-2" /> <img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
<div class="w-full"> <div class="w-full">
<p class="font-bold w-[22.9rem] truncate">{{ streamData.title }}</p> <p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ streamData.title }}</p>
<div class="inline-flex w-full justify-between"> <div class="inline-flex w-full justify-between">
<p class="text-gray-300">{{ streamData.streamer.name }}</p> <p class="text-gray-300">{{ streamData.streamer.name }}</p>
<p class="self-end float-right"> <p class="self-end float-right">

2
src/components/TwitchChat.vue
View File

@ -83,7 +83,7 @@ export default {
} }
</script> </script>
<template> <template>
<div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col"> <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-[99vw] md:max-w-[15.625rem] flex flex-col">
<!-- SYSTEM MESSAGES --> <!-- SYSTEM MESSAGES -->
<ul <ul

4
src/views/HomepageView.vue
View File

@ -157,14 +157,14 @@ export default {
ref="categoryItem" ref="categoryItem"
class="inline-flex m-2 hover:scale-105 transition-transform" class="inline-flex m-2 hover:scale-105 transition-transform"
> >
<div class="bg-ctp-crust max-w-[13.5rem] rounded-lg"> <div class="bg-ctp-crust w-40 lg:w-[13.5rem] md:w-[13.5rem] rounded-lg">
<router-link :to="`/game/${category.name}`"> <router-link :to="`/game/${category.name}`">
<img :src="category.image" class="rounded-lg rounded-b-none" /> <img :src="category.image" class="rounded-lg rounded-b-none" />
</router-link> </router-link>
<div class="p-2"> <div class="p-2">
<div> <div>
<p class="font-bold text-white text-xl">{{ category.displayName }}</p> <p class="font-bold text-white text-xl sm:text-base md:text-xl">{{ category.displayName }}</p>
<p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p> <p class="text-sm text-white">{{ abbreviate(category.viewers) }} viewers</p>
</div> </div>

10
src/views/UserView.vue
View File

@ -75,14 +75,14 @@ export default {
<error-message v-else-if="data.status === 'error'"></error-message> <error-message v-else-if="data.status === 'error'"></error-message>
<div v-else class="w-full justify-center inline-flex space-x-4 p-4"> <div v-else class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4">
<div class="flex bg-ctp-crust flex-col p-6 rounded-lg max-w-prose min-w-[65ch] text-white"> <div class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] text-white">
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5"> <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
<video-player :options="videoOptions"> </video-player> <video-player :options="videoOptions"> </video-player>
</div> </div>
<div class="w-full flex-wrap p-3"> <div class="w-full flex-wrap p-3">
<div class="inline-flex w-2/3"> <div class="inline-flex md:w-2/3">
<div class="w-20 h-20 relative"> <div class="w-20 h-20 relative">
<img <img
:src="data.pfp" :src="data.pfp"
@ -109,7 +109,7 @@ export default {
</div> </div>
</div> </div>
<div class="inline-flex w-1/3 float-right h-full text-right"> <div class="flex-col md:inline-flex md:w-1/3 float-right h-full text-right">
<div v-if="!data.isLive" class="w-full"> <div v-if="!data.isLive" class="w-full">
<p <p
class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red" class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red"
@ -118,7 +118,7 @@ export default {
</p> </p>
</div> </div>
<div v-else class="w-full"> <div v-else class="w-full">
<ul class="text-xs font-bold text-right space-x-1 space-y-1 overflow-y-auto"> <ul class="text-xs font-bold md:text-right space-x-1 space-y-1 overflow-y-auto">
<li <li
v-for="tag in data.stream.tags" v-for="tag in data.stream.tags"
:key="tag" :key="tag"