danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fixing some issue with simple view

Browse source
This commit is contained in:
arabcoders 2025-09-26 00:57:58 +03:00
parent 42bcaa32db
commit e82e7b1bf5
2 changed files with 70 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ui/app/components/Settings.vue
View file

@ -13,18 +13,17 @@
<div class="column is-6">
<div class="field">
<label class="label is-unselectable">Page View</label>
<label class="label is-unselectable">
<span class="icon"><i class="fa-solid fa-computer" /></span>
Page View
</label>
<div class="control">
<label for="ui_advanced" class="radio">
<input id="ui_advanced" type="radio" v-model="simpleMode" :value="false">
<span class="icon"><i class="fa-solid fa-computer" /></span>
Regular View
</label>
<label for="ui_simple" class="radio">
<input id="ui_simple" type="radio" v-model="simpleMode" :value="true">
<span class="icon"><i class="fa-solid fa-mobile-screen-button" /></span>
Simple View (Experimental)
</label>
<div class="control">
<input id="random_bg" type="checkbox" class="switch is-success" v-model="simpleMode">
<label for="random_bg" class="is-unselectable">
&nbsp;{{ simpleMode ? 'Simple View (Experimental)' : 'Regular View (Default)' }}
</label>
</div>
</div>
<p class="help is-bold has-text-danger">
<span class="icon"> <i class="fa-solid fa-info-circle" /></span>

71
ui/app/components/Simple.vue
View file

@ -81,7 +81,7 @@
</span>
</figure>
</figure>
<div class="media-content">
<div class="media-content is-grid">
<p class="title is-6 mb-0 queue-title">
<NuxtLink target="_blank" :href="entry.item.url">{{ entry.item.title }}</NuxtLink>
</p>
@ -106,7 +106,7 @@
</p>
</div>
</article>
<div v-if="'queue' === entry.source" class="buttons are-small is-right is-flex-wrap-wrap mt-3">
<div v-if="'queue' === entry.source" class="buttons are-small queue-actions mt-3">
<button v-if="canStart(entry.item)" class="button is-success is-light" type="button"
@click="startQueueItem(entry.item)">
<span class="icon"><i class="fas fa-circle-play" /></span>
@ -123,7 +123,7 @@
</button>
</div>
<div v-else class="buttons are-small is-right is-flex-wrap-wrap mt-3">
<div v-else class="buttons are-small queue-actions mt-3">
<a v-if="getDownloadLink(entry.item)" class="button is-link" :href="getDownloadLink(entry.item)"
:download="getDownloadName(entry.item)">
<span class="icon"><i class="fas fa-download" /></span>
@ -571,15 +571,27 @@ const filter_presets = (flag: boolean = true) => presets.value.filter(item => it
box-shadow: 0 14px 30px rgba(10, 10, 10, 0.12);
}
.queue-card .card-content {
display: flex;
flex-direction: column;
height: 100%;
}
.queue-card .media-left {
margin-right: 1rem;
}
.queue-thumb {
position: relative;
width: 9rem;
width: 12rem;
max-width: 100%;
border-radius: 0.5rem;
overflow: hidden;
}
.queue-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
@ -595,31 +607,45 @@ const filter_presets = (flag: boolean = true) => presets.value.filter(item => it
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
background: rgba(0, 0, 0, 0);
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
transition: background-color 0.2s ease;
pointer-events: none;
}
.queue-thumb.is-clickable:hover .queue-thumb__overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.45);
}
.queue-title {
max-width: 18rem;
white-space: nowrap;
overflow: hidden;
}
.queue-title a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.queue-description {
max-height: 4.5rem;
min-height: 2.5rem;
overflow: hidden;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
overflow-wrap: anywhere;
}
.queue-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.5rem;
margin-top: auto;
}
.queue-fade-enter-active,
@ -653,9 +679,32 @@ const filter_presets = (flag: boolean = true) => presets.value.filter(item => it
transform: translateY(18vh);
}
.queue-card .media {
flex-direction: column;
align-items: flex-start;
}
.queue-card .media-left {
margin-right: 0;
margin-bottom: 1rem;
width: 100%;
}
.queue-thumb {
width: 100%;
max-width: 100%;
}
.queue-card .media-content {
width: 100%;
}
.queue-title {
width: 100%;
}
.queue-actions {
width: 100%;
justify-content: flex-end;
}
}