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

feat(user): changed tags to be more responisve and made room for the action buttons

Browse source
This commit is contained in:
Seraph91P 2024-08-13 11:29:36 +02:00
parent ad0578d2c0
commit 4985f3084e
1 changed files with 44 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
src/views/UserView.vue
View file

@ -130,71 +130,60 @@ export default {
/>
<div class="w-full flex-wrap md:p-3">
<div class="inline-flex md:w-4/5">
<div class="w-20 h-20 relative">
<img
:src="data.pfp"
class="rounded-full border-4 p-0.5 w-auto h-20"
:style="`border-color: ${data.colorHex};`"
/>
<span
v-if="data.isLive"
class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
>{{ $t('main.live') }}</span
>
</div>
<div class="ml-3 content-between">
<div class="">
<h1 class="text-2xl md:text-4xl font-bold inline-block">{{ data.username }}</h1>
<a v-if="$route.query['audio-only'] !== 'true'" href="?audio-only=true">
<v-icon name="bi-headphones" class="ml-1 w-8 h-8 inline-block"></v-icon>
</a>
<a v-else :href="$route.params.username.toString()">
<v-icon name="bi-camera-video-fill" class="ml-1 w-8 h-8 inline-block"></v-icon>
</a>
<div class="flex flex-col md:flex-row justify-between">
<div class="md:w-3/5">
<div class="inline-flex">
<div class="w-20 h-20 relative">
<img
:src="data.pfp"
class="rounded-full border-4 p-0.5 w-auto h-20"
:style="`border-color: ${data.colorHex};`"
/>
<span
v-if="data.isLive"
class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
>{{ $t('main.live') }}</span>
</div>
<div class="ml-3 content-between">
<div>
<h1 class="text-2xl md:text-4xl font-bold inline-block">{{ data.username }}</h1>
<a v-if="$route.query['audio-only'] !== 'true'" href="?audio-only=true">
<v-icon name="bi-headphones" class="ml-1 w-8 h-8 inline-block"></v-icon>
</a>
<a v-else :href="$route.params.username.toString()">
<v-icon name="bi-camera-video-fill" class="ml-1 w-8 h-8 inline-block"></v-icon>
</a>
</div>
<div v-if="data.stream" class="w-full md:w-[17rem]">
<p class="text-sm font-bold text-neutral self-end">
{{ truncate(data.stream.title, 130) }}
</p>
</div>
</div>
</div>
<div v-if="data.stream" class="w-[14rem] md:w-[17rem]">
<p class="text-sm font-bold text-neutral self-end">
{{ truncate(data.stream.title, 130) }}
</div>
<div class="md:w-2/5 mt-4 md:mt-0">
<div v-if="!data.isLive" class="w-full">
<p class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red">
OFFLINE
</p>
</div>
<div v-else class="w-full">
<ul class="flex flex-wrap justify-end gap-2 text-xs font-bold" v-if="getSetting('streamTagsVisible')">
<li v-for="tag in data.stream!.tags" :key="tag" class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md">
{{ tag }}
</li>
</ul>
</div>
</div>
</div>
<div class="flex-col md:inline-flex md:w-1/5 float-right h-full text-right">
<div v-if="!data.isLive" class="w-full">
<p
class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red"
>
OFFLINE
</p>
</div>
<div v-else class="w-full">
<ul
class="text-xs font-bold text-left md:text-right space-x-1 space-y-1 overflow-y-auto"
v-if="getSetting('streamTagsVisible')"
>
<li
v-for="tag in data.stream!.tags"
:key="tag"
class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md"
>
{{ tag }}
</li>
</ul>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex justify-between items-center mt-4">
<div class="pt-2 inline-flex">
<follow-button :username="data.login"></follow-button>
<p class="align-baseline font-bold ml-3">
{{ abbreviate(data.followers) }} {{ $t('main.followers') }}
</p>
</div>
<action-buttons
:showDownload="false"
:showTheatreMode="true"
@ -220,3 +209,4 @@ export default {
></twitch-chat>
</div>
</template>