YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

AppCatalog: avoid text wrapping under app logo

Browse source
This commit is contained in:
axolotle 2023-01-18 11:20:47 +01:00
parent 279a6efa41
commit d4c23d96f2
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/src/views/app/AppCatalog.vue
View file

@ -73,40 +73,42 @@
tabindex="0" :aria-posinset="i + 1" :aria-setsize="filteredApps.length" tabindex="0" :aria-posinset="i + 1" :aria-setsize="filteredApps.length"
no-body class="app-card" no-body class="app-card"
> >
<b-card-body> <b-card-body class="d-flex">
<b-img v-if="app.logo_hash" class="app-logo rounded" :src="`./applogos/${app.logo_hash}.png`" /> <b-img v-if="app.logo_hash" class="app-logo rounded" :src="`./applogos/${app.logo_hash}.png`" />
<b-card-title :id="`${app.id}-title`" class="d-flex mb-2"> <div>
<b-link :to="{ name: 'app-install', params: { id: app.id }}" class="card-link"> <b-card-title :id="`${app.id}-title`" class="d-flex mb-2">
{{ app.manifest.name }} <b-link :to="{ name: 'app-install', params: { id: app.id }}" class="card-link">
</b-link> {{ app.manifest.name }}
</b-link>
<small v-if="app.state !== 'working' || app.high_quality" class="d-flex align-items-center ml-2 position-relative"> <small v-if="app.state !== 'working' || app.high_quality" class="d-flex align-items-center ml-2 position-relative">
<b-badge <b-badge
v-if="app.state !== 'working'" v-if="app.state !== 'working'"
:variant="app.color" :variant="app.color"
v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)" v-b-popover.hover.bottom="$t(`app_state_${app.state}_explanation`)"
> >
<!-- app.state can be 'lowquality' or 'inprogress' --> <!-- app.state can be 'lowquality' or 'inprogress' -->
{{ $t('app_state_' + app.state) }} {{ $t('app_state_' + app.state) }}
</b-badge> </b-badge>
<icon <icon
v-if="app.high_quality" iname="star" class="star" v-if="app.high_quality" iname="star" class="star"
v-b-popover.hover.bottom="$t(`app_state_highquality_explanation`)" v-b-popover.hover.bottom="$t(`app_state_highquality_explanation`)"
/> />
</small> </small>
</b-card-title> </b-card-title>
<b-card-text :id="`${app.id}-desc`"> <b-card-text :id="`${app.id}-desc`">
{{ app.manifest.description }} {{ app.manifest.description }}
</b-card-text> </b-card-text>
<b-card-text v-if="!app.maintained" class="align-self-end position-relative mt-auto"> <b-card-text v-if="!app.maintained" class="align-self-end position-relative mt-auto">
<span class="alert-warning p-1" v-b-popover.hover.top="$t('orphaned_details')"> <span class="alert-warning p-1" v-b-popover.hover.top="$t('orphaned_details')">
<icon iname="warning" /> {{ $t('orphaned') }} <icon iname="warning" /> {{ $t('orphaned') }}
</span> </span>
</b-card-text> </b-card-text>
</div>
</b-card-body> </b-card-body>
</b-card> </b-card>
</card-deck-feed> </card-deck-feed>
@ -459,7 +461,7 @@ export default {
background-color: $gray-200; background-color: $gray-200;
.app-logo { .app-logo {
float: left; align-self: flex-start;
background-color: white; background-color: white;
max-width: 91px; max-width: 91px;
margin-right: 1rem; margin-right: 1rem;