minor design update

This commit is contained in:
arabcoders 2025-05-07 21:56:27 +03:00
parent 815bd3c0cf
commit f7abca8d10
8 changed files with 23 additions and 19 deletions

View file

@ -313,3 +313,7 @@ hr {
.is-justify-self-end {
justify-self: end;
}
.is-full-height {
height: 100%;
}

View file

@ -2,7 +2,7 @@
<main class="columns mt-2 is-multiline">
<div class="column is-12">
<form autocomplete="off" id="addForm" @submit.prevent="checkInfo()">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<div class="card-header">
<div class="card-header-title is-text-overflow is-block">
<span class="icon-text">
@ -21,7 +21,7 @@
</div>
</div>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="columns is-multiline is-mobile">
@ -106,7 +106,7 @@
</div>
</div>
<div class="card-footer">
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-fullwidth is-primary" :disabled="addInProgress" type="submit"
:class="{ 'is-loading': addInProgress }" form="addForm">

View file

@ -190,7 +190,7 @@
<div class="columns is-multiline" v-else>
<LateLoader :unrender="true" :min-height="hideThumbnail ? 210 : 410" class="column is-6"
v-for="item in sortCompleted" :key="item._id">
<div class="card"
<div class="card is-flex is-full-height is-flex-direction-column"
:class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
<header class="card-header has-tooltip">
@ -239,7 +239,7 @@
</template>
</figure>
</div>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="columns is-mobile is-multiline">
<div class="column is-12" v-if="item.error">
<div class="is-text-overflow is-pointer" @click="toggle_class($event)">

View file

@ -118,7 +118,7 @@
<div class="columns is-multiline" v-else>
<LateLoader :unrender="true" :min-height="hideThumbnail ? 265 : 475" class="column is-6"
v-for="item in stateStore.queue" :key="item._id">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
@ -148,7 +148,7 @@
</template>
</figure>
</div>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="columns is-multiline is-mobile">
<div class="column is-12">
<div class="progress-bar is-unselectable">

View file

@ -37,7 +37,7 @@
<div class="column is-12" v-if="!toggleForm">
<div class="columns is-multiline" v-if="items.length > 0">
<div class="column is-6" v-for="cond in items" :key="cond.id">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block" v-text="cond.name" />
<div class="card-header-icon">
@ -52,7 +52,7 @@
</button>
</div>
</header>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="content">
<p class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-filter" /></span>
@ -69,7 +69,7 @@
<pre><code>{{ filterItem(cond) }}</code></pre>
</div>
</div>
<div class="card-footer">
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(cond)">
<span class="icon"><i class="fa-solid fa-cog" /></span>

View file

@ -59,7 +59,7 @@ div.is-centered {
<div class="column is-12" v-if="!toggleForm">
<div class="columns is-multiline" v-if="notifications && notifications.length > 0">
<div class="column is-6" v-for="item in notifications" :key="item.id">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block">
{{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
@ -75,7 +75,7 @@ div.is-centered {
</button>
</div>
</header>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="content">
<p>
<span class="icon"><i class="fa-solid fa-list-ul" /></span>
@ -92,7 +92,7 @@ div.is-centered {
<pre><code>{{ filterItem(item) }}</code></pre>
</div>
</div>
<div class="card-footer">
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(item);">
<span class="icon"><i class="fa-solid fa-trash-can" /></span>

View file

@ -54,7 +54,7 @@ div.is-centered {
<div class="column is-12" v-if="!toggleForm">
<div class="columns is-multiline" v-if="presetsNoDefault && presetsNoDefault.length > 0">
<div class="column is-6" v-for="item in presetsNoDefault" :key="item.id">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block" v-text="item.name" />
<div class="card-header-icon">
@ -69,7 +69,7 @@ div.is-centered {
</button>
</div>
</header>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="content">
<p class="is-text-overflow"
v-if="item?.format && false === ['default', 'not_set'].includes(item.format)">
@ -99,7 +99,7 @@ div.is-centered {
<pre><code>{{ filterItem(item) }}</code></pre>
</div>
</div>
<div class="card-footer">
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(item)">
<span class="icon"><i class="fa-solid fa-cog" /></span>

View file

@ -52,7 +52,7 @@ div.is-centered {
<div class="column is-12" v-if="!toggleForm">
<div class="columns is-multiline" v-if="tasks && tasks.length > 0">
<div class="column is-6" v-for="item in tasks" :key="item.id">
<div class="card">
<div class="card is-flex is-full-height is-flex-direction-column">
<header class="card-header">
<div class="card-header-title is-text-overflow is-block">
<NuxtLink target="_blank" :href="item.url">{{ item.name }}</NuxtLink>
@ -63,7 +63,7 @@ div.is-centered {
</a>
</div>
</header>
<div class="card-content">
<div class="card-content is-flex-grow-1">
<div class="content">
<p class="is-text-overflow">
<span class="icon"><i class="fa-solid fa-clock" /></span>
@ -87,7 +87,7 @@ div.is-centered {
</p>
</div>
</div>
<div class="card-footer">
<div class="card-footer mt-auto">
<div class="card-footer-item">
<button class="button is-warning is-fullwidth" @click="editItem(item);">
<span class="icon"><i class="fa-solid fa-cog" /></span>