Fixes the apps list layout

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
Michael Weimann 2018-08-07 00:28:14 +02:00 committed by Julius Härtl
parent f8de12c014
commit d1636147eb
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
3 changed files with 3831 additions and 136 deletions

View File

@ -909,9 +909,16 @@ span.version {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.store .section {
width: 100%;
}
}
/* hide app version and level on narrower screens */
@media only screen and (max-width: 900px) {
#apps-list.installed {
.apps-list.installed {
.app-version, .app-level {
display: none !important;
}
@ -919,7 +926,7 @@ span.version {
}
@media only screen and (max-width: 500px) {
#apps-list.installed .app-groups {
.apps-list.installed .app-groups {
display: none !important;
}
}
@ -1000,8 +1007,7 @@ span.version {
list-style-position: inside;
}
#apps-list, #apps-list-search {
.apps-list {
.section {
cursor: pointer;
}
@ -1134,6 +1140,14 @@ span.version {
}
}
#apps-list-search {
.section {
h2 {
margin-bottom: 0;
}
}
}
/* LOG */
#log {
white-space: normal;

File diff suppressed because one or more lines are too long

View File

@ -22,7 +22,7 @@
<template>
<div id="app-content-inner">
<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
<template v-if="useListView">
<transition-group name="app-list" tag="div" class="apps-list-container">
<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
@ -48,15 +48,19 @@
</div>
<div id="apps-list-search" class="installed">
<div id="apps-list-search" class="apps-list installed">
<div class="apps-list-container">
<template v-if="search !== '' && searchApps.length > 0">
<div class="section">
<div></div>
<td colspan="5">
<h2>{{ t('settings', 'Results from other categories') }}</h2>
</td>
</div>
<app-item v-for="app in searchApps" :key="app.id" :app="app" :category="category" :list-view="true" />
</template>
</div>
</div>
<div id="apps-list-empty" class="emptycontent emptycontent-search" v-if="!loading && searchApps.length === 0 && apps.length === 0">
<div id="app-list-empty-icon" class="icon-settings-dark"></div>