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

(theatre mode): moved styling to css file

Browse source
This commit is contained in:
Seraph91P 2024-08-14 09:29:59 +02:00
parent 4985f3084e
commit 7b7b51a9f5
6 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/assets/index.css
View file

@ -1,3 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.content-container {
@apply flex bg-crust flex-col p-6 rounded-lg w-full text-contrast;
}
.content-container-theatre {
@apply md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw];
}
.content-container-normal {
@apply md:w-[70vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px];
}

2
src/components/ActionButtons.vue
View file

@ -5,7 +5,7 @@
<v-icon name="md-download-round"></v-icon>
</button>
</a>
<button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
<button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="hidden xl:inline px-2 py-1.5 rounded-lg bg-purple">
<v-icon name="fa-expand"></v-icon>
</button>
<button v-if="showShare" @click="$emit('toggleShareModal')" class="px-2 py-1.5 rounded-lg bg-purple">

16
src/components/TheatreModeToggle.vue
View file

@ -1,16 +0,0 @@
<template>
<button @click="toggleTheatreMode" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
<v-icon name="fa-expand"></v-icon>
</button>
</template>
<script lang="ts">
export default {
emits: ['toggle'],
methods: {
toggleTheatreMode() {
this.$emit('toggle')
}
}
}
</script>

6
src/views/ClipView.vue
View file

@ -100,10 +100,8 @@ export default {
<VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
<div
:class="[
'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
isTheatreMode
? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]'
: 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
'content-container',
isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
]"
>
<div class="w-full mx-auto rounded-lg mb-5">

6
src/views/UserView.vue
View file

@ -110,10 +110,8 @@ export default {
<vue-title :title="data.username"></vue-title>
<div
:class="[
'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
isTheatreMode
? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]'
: 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
'content-container',
isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
]"
>
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">

6
src/views/VodView.vue
View file

@ -105,10 +105,8 @@ export default {
<vue-title :title="'VOD - ' + data.title"></vue-title>
<div
:class="[
'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
isTheatreMode
? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]'
: 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
'content-container',
isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
]"
>
<div class="w-full mx-auto rounded-lg mb-5">