bug: carousel and adv desc fix (#2562)

* Carousel image fix
* pushed carousel nav to top as well so yt controls are accessible
* Added some extra breathing room for the adv description
This commit is contained in:
Arc 2024-06-26 12:21:34 +01:00 committed by GitHub
parent cbe0861439
commit 7f628948c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 604 additions and 555 deletions

View file

@ -240,7 +240,9 @@
</q-card-actions>
</q-card>
</div>
<q-dialog v-model="showUninstallDialog">
</div>
<q-dialog v-model="showUninstallDialog">
<q-card class="q-pa-lg">
<h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
<p>
@ -275,9 +277,9 @@
></q-btn>
</div>
</q-card>
</q-dialog>
</q-dialog>
<q-dialog v-model="showDropDbDialog">
<q-dialog v-model="showDropDbDialog">
<q-card v-if="selectedExtension" class="q-pa-lg">
<h6 class="q-my-md text-primary" v-text="$t('warning')"></h6>
<p><span v-text="$t('extension_db_drop_warning')"></span><br /></p>
@ -305,9 +307,9 @@
></q-btn>
</div>
</q-card>
</q-dialog>
</q-dialog>
<q-dialog v-model="showManageExtensionDialog">
<q-dialog v-model="showManageExtensionDialog">
<q-card v-if="selectedRelease" class="q-pa-lg lnbits__dialog-card">
<q-card-section>
<div v-if="selectedRelease.paymentRequest">
@ -346,11 +348,7 @@
</div>
</q-card>
<q-card v-else class="q-pa-lg lnbits__dialog-card">
<q-tabs
v-model="manageExtensionTab"
active-color="primary"
align="justify"
>
<q-tabs v-model="manageExtensionTab" active-color="primary" align="justify">
<q-tab
name="releases"
:label="$t('releases')"
@ -399,9 +397,7 @@
<br />
<small v-text="repoName"></small>
<q-tooltip
><span
v-text="selectedExtensionRepos[repoName].repo"
></span
><span v-text="selectedExtensionRepos[repoName].repo"></span
></q-tooltip>
</div>
<div class="col-2"></div>
@ -645,9 +641,9 @@
</div>
</div>
</q-card>
</q-dialog>
</q-dialog>
<q-dialog v-model="showPayToEnableDialog">
<q-dialog v-model="showPayToEnableDialog">
<q-card v-if="selectedExtension" class="q-pa-md">
<q-card-section>
<p>
@ -752,13 +748,13 @@
</div>
</q-card-section>
</q-card>
</q-dialog>
</q-dialog>
<q-dialog v-model="showExtensionDetailsDialog">
<q-dialog v-model="showExtensionDetailsDialog">
<q-card
v-if="selectedExtensionDetails"
class="q-pa-lg"
style="width: 800px; max-width: 80vw"
class="q-pa-sm"
style="width: 800px; max-width: 95vw"
>
<q-card-section>
<div class="row">
@ -769,14 +765,21 @@
type="image"
></q-img>
</div>
<div class="col-7 q-pl-md">
<div class="col-9 q-pl-md gt-xs">
<h3 class="q-my-sm" v-text="selectedExtensionDetails.name"></h3>
<h6
class="q-my-sm"
v-text="selectedExtensionDetails.short_description"
></h6>
</div>
<div class="col-3">
<div class="col-9 q-pl-md lt-sm">
<h5 class="q-my-sm" v-text="selectedExtensionDetails.name"></h5>
<p
class="q-my-sm"
v-text="selectedExtensionDetails.short_description"
></p>
</div>
<div class="col-1">
<q-btn
v-close-popup
flat
@ -789,6 +792,7 @@
<div v-if="selectedExtensionDetails.images?.length" class="row q-my-lg">
<div class="col q-pr-md">
<q-carousel
navigation-position="top"
swipeable
animated
v-model="slide"
@ -833,20 +837,49 @@
</div>
<div class="row">
<div class="col-8 q-pr-sm">
<div class="col-sm-12 col-md-8 q-pr-sm">
<div v-html="selectedExtensionDetails.description_md"></div>
</div>
<div class="col-4 q-pl-sm" style="border-left: 1px solid grey">
<div class="">
<q-btn
size="xs"
<div class="col-sm-12 col-md-4 q-pl-sm">
<q-rating
v-model="maxStars"
disable
size="2.5em"
:max="5"
color="primary"
label="Terms and conditions"
type="a"
:href="selectedExtensionDetails.terms_and_conditions_md"
></q-rating>
<div class="q-mt-md">
<b>
<span v-text="$t('contributors')"></span>
</b>
<small>
<div v-for="contributor of selectedExtensionDetails.contributors">
<a
:href="contributor.uri"
target="_blank"
rel="noopener noreferrer"
></q-btn>
style="color: var(--q-primary); text-decoration: none"
>
<span
v-text="(contributor.name || contributor) + ' - ' + (contributor.role || 'dev')"
></span>
</a>
</div>
</small>
</div>
<div class="row q-pt-md">
<div>
<q-btn
size="sm"
color="primary"
label="Repo"
type="a"
:href="selectedExtensionDetails.repo"
target="_blank"
rel="noopener noreferrer"
class="q-pr-xs"
><q-tooltip>repository</q-tooltip></q-btn
>
</div>
<div class="q-mt-md">
<b>
@ -896,10 +929,10 @@
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</div>
</q-dialog>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
new Vue({

File diff suppressed because one or more lines are too long

View file

@ -554,3 +554,12 @@ video {
.whitespace-pre-line {
white-space: pre-line;
}
.q-carousel__slide {
background-size: contain;
background-repeat: no-repeat;
}
.q-dialog__inner--minimized {
padding: 12px;
}

View file

@ -231,3 +231,10 @@ video {
.whitespace-pre-line {
white-space: pre-line;
}
.q-carousel__slide {
background-size: contain;
background-repeat: no-repeat;
}
.q-dialog__inner--minimized {
padding: 12px;
}