Fix app store and sidebar view

Signed-off-by: Julius Härtl <jus@bitgrid.net>

5 files changed, 81 insertions, 34 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 14e502551f7..38c7ac792c0 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -762,8 +762,27 @@ span.version {
 	}
 }
 #apps-list.store {
+	.section {
+		border: 0;
+	}
 	.app-name {
 		display: block;
+		margin: 5px 0;
+	}
+	.app-name, .app-image * {
+		cursor: pointer;
+	}
+	.app-summary {
+		opacity: .7;
+	}
+	.app-image-icon .icon-settings-dark {
+		width: 100%;
+		height: 150px;
+		background-size: 45px;
+		opacity: 0.5;
+	}
+	.app-score-image {
+		height: 14px;
 	}
 }
 
@@ -771,38 +790,57 @@ span.version {
 	.app-description p {
 		margin-bottom: 10px;
 	}
+	.close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 14px;
+		opacity: 0.5;
+		z-index: 1;
+	}
 }
 
-@media (min-width: 1601px) {
-	#apps-list .section {
-		width: 22%;
-		box-sizing: border-box;
-		&:nth-child(4n) {
-			margin-right: 20px;
-		}
+@media only screen and (min-width: 1601px) {
+	.store .section {
+		width: 25%;
+	}
+	.with-app-sidebar .store .section {
+		width: 33%;
 	}
 }
 
-@media (min-width: 1201px) and (max-width: 1600px) {
-	#apps-list .section {
-		width: 30%;
-		box-sizing: border-box;
-		&:nth-child(3n) {
-			margin-right: 20px;
-		}
+@media only screen and (max-width: 1600px) {
+	.store .section {
+		width: 25%;
+	}
+	.with-app-sidebar .store .section {
+		width: 33%;
 	}
 }
 
-@media (min-width: 901px) and (max-width: 1200px), (min-width: 601px) and (max-width: 770px) {
-	#apps-list .section {
-		width: 40%;
-		box-sizing: border-box;
-		&:nth-child(2n) {
-			margin-right: 20px;
-		}
+@media only screen and (max-width: 1400px) {
+	.store .section {
+		width: 33%;
+	}
+	.with-app-sidebar .store .section {
+		width: 50%;
+	}
+}
+
+@media only screen and (max-width: 900px) {
+	.store .section {
+		width: 50%;
+	}
+	.with-app-sidebar .store .section {
+		width: 100%;
 	}
 }
 
+@media only screen and (max-width: 768px) {
+	.store .section {
+		width: 50%;
+	}
+}
 /* hide app version and level on narrower screens */
 @media only screen and (max-width: 768px) {
 	#apps-list.installed {
@@ -948,11 +986,14 @@ span.version {
 			height: auto;
 			text-align: right;
 		}
-		.app-image-icon svg {
+		.app-image-icon svg,
+		.app-image-icon .icon-settings-dark {
 			margin-top: 5px;
 			width: 20px;
 			height: 20px;
 			opacity: .5;
+			background-size: cover;
+			display: inline-block;
 		}
 	}
 	&:not(.installed) .app-image-icon svg {
@@ -972,10 +1013,7 @@ span.version {
 	.section {
 		position: relative;
 		flex: 0 0 auto;
-		margin-left: 20px;
-		&.apps-experimental {
-			flex-basis: 90%;
-		}
+
 		h2.app-name {
 			display: block;
 			margin: 8px 0;
diff --git a/settings/src/components/appDetails.vue b/settings/src/components/appDetails.vue
index 5518fd04860..5467b1ffb10 100644
--- a/settings/src/components/appDetails.vue
+++ b/settings/src/components/appDetails.vue
@@ -22,6 +22,7 @@
 
 <template>
 	<div id="app-details-view" style="padding: 20px;">
+		<a class="close icon-close" href="#" v-on:click="hideAppDetails"><span class="hidden-visually">Close</span></a>
 		<h2>{{ app.name }}</h2>
 		<img :src="app.preview" width="100%" />
 		<app-score v-if="app.ratingNumThresholdReached" :score="app.score"></app-score>
@@ -66,11 +67,19 @@ import Multiselect from 'vue-multiselect';
 import AppScore from './appList/appScore';
 export default {
 	name: 'appDetails',
-	props: ['app'],
+	props: ['category', 'app'],
 	components: {
 		Multiselect,
 		AppScore
 	},
+	methods: {
+		hideAppDetails() {
+			this.$router.push({
+				name: 'apps-category',
+				params: {category: this.category}
+			});
+		},
+	},
 	computed: {
 		licence() {
 			return this.app.license + t('settings', '-licensed');
diff --git a/settings/src/components/appList/appItem.vue b/settings/src/components/appList/appItem.vue
index 13325f6462d..8797fd88bd9 100644
--- a/settings/src/components/appList/appItem.vue
+++ b/settings/src/components/appList/appItem.vue
@@ -33,14 +33,16 @@
 		<div class="app-name" v-on:click="showAppDetails">
 			{{ app.name }}
 		</div>
-		<div class="app-version">{{ app.version }}</div>
-		<div class="app-score" v-if="!listView"><app-score :score="app.score"></app-score> </div>
 		<div class="app-summary" v-if="!listView">{{ app.summary }}</div>
+		<div class="app-version" v-if="listView">{{ app.version }}</div>
+
 		<div class="app-level">
 			<span class="official icon-checkmark" v-if="app.level === 200">{{ t('settings', 'Official') }}</span>
+			<app-score v-if="!listView" :score="app.score"></app-score>
 			<a :href="appstoreUrl" v-if="!app.internal && listView">Im Store anzeigen ↗</a>
 		</div>
 
+
 		<div class="app-groups" v-if="listView">
 			<div class="groups-enable" v-if="app.active && canLimitToGroups(app)">
 				<input type="checkbox" :value="app.id" v-model="groupCheckedAppsData" v-on:change="setGroupLimit" class="groups-enable__checkbox checkbox" :id="prefix('groups_enable', app.id)">
@@ -119,7 +121,6 @@
 		},
 		methods: {
 			showAppDetails() {
-				console.log(this.app.id);
 				this.$router.push({
 					name: 'apps-details',
 					params: {category: this.category, id: this.app.id}
diff --git a/settings/src/components/appList/appScore.vue b/settings/src/components/appList/appScore.vue
index 8b099f5e3d9..bf04c688186 100644
--- a/settings/src/components/appList/appScore.vue
+++ b/settings/src/components/appList/appScore.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<img :src="scoreImage" />
+	<img :src="scoreImage" class="app-score-image" />
 </template>
 <script>
 	export default {
diff --git a/settings/src/views/Apps.vue b/settings/src/views/Apps.vue
index 07147d10c61..b24123e4aff 100644
--- a/settings/src/views/Apps.vue
+++ b/settings/src/views/Apps.vue
@@ -24,9 +24,8 @@
 	<div id="app">
 		<app-navigation :menu="menu" />
 		<app-list :category="category" :app="currentApp" :search="search"></app-list>
-		<div id="app-sidebar" v-if="currentApp">
-			{{ search }}
-			<app-details :app="currentApp"></app-details>
+		<div id="app-sidebar" v-if="id">
+			<app-details :category="category" :app="currentApp"></app-details>
 		</div>
 	</div>
 </template>