Make design more responsive

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

3 files changed, 43 insertions, 34 deletions

diff --git a/src/App.vue b/src/App.vue
index b7d1f6c0..c7c9355b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,10 @@
 			<app-navigation :menu="menu" />
 		</div>
 		<div id="app-content">
-			<Search v-if="searchTerm != ''" :term="searchTerm" />
-			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
+			<div class="social__wrapper">
+				<Search v-if="searchTerm != ''" :term="searchTerm" />
+				<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
+			</div>
 		</div>
 	</div>
 	<div v-else class="setup">
@@ -42,7 +44,13 @@
 	}
 
 	#app-content .social__wrapper {
-		margin: 15px calc(50% - 350px - 75px);
+		padding: 15px;
+	}
+	@media (min-width: 1200px) {
+		#app-content .social__wrapper {
+			margin: 15px calc(50% - 350px - 75px);
+			max-width: 700px;
+		}
 	}
 
 	#social-spacer a:hover,
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 2020b432..bd3f81b8 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -21,21 +21,28 @@
   -->
 
 <template>
-	<div class="social__wrapper">
+	<div class="social__container">
 		<div v-if="results.length < 1" id="emptycontent" :class="{'icon-loading': loading}">
 			<div v-if="!loading" class="icon-search" />
 			<h2 v-if="!loading">{{ t('social', 'No accounts found') }}</h2>
 			<p v-if="!loading">No accounts found for {{ term }}</p>
 		</div>
 		<div v-if="match || results.length > 0">
-			<h3>{{ t('social', 'Search') }} {{ term }}</h3>
+			<h3>{{ t('social', 'Searching for') }} {{ term }}</h3>
 			<UserEntry v-for="result in results" :key="result.id" :item="result" />
 		</div>
 	</div>
 </template>
 
 <style scoped>
+	.user-entry {
+		padding: 0;
+	}
 
+	h3 {
+		margin-top: -3px;
+		margin-left: 47px;
+	}
 </style>
 
 <script>
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 382603d1..bc924e47 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -1,39 +1,33 @@
 <template>
-	<div class="social__wrapper">
-		<div class="social__container">
-			<transition name="slide-fade">
-				<div v-if="showInfo" class="social__welcome">
-					<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
-					<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
-					<p>
-						{{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
-						<span class="social-id">{{ socialId }}</span>
-					</p>
-				</div>
-			</transition>
-			<div class="social__timeline">
-				<composer />
-				<timeline-entry v-for="entry in timeline" :item="entry" :key="entry.id" />
-				<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
-					<div slot="spinner"><div class="icon-loading" /></div>
-					<div slot="no-more"><div class="list-end" /></div>
-					<div slot="no-results">
-						<div id="emptycontent">
-							<div class="icon-social" />
-							<h2>{{ t('social', 'No posts found.') }}</h2>
-						</div>
-					</div>
-				</infinite-loading>
+	<div class="social__container">
+		<transition name="slide-fade">
+			<div v-if="showInfo" class="social__welcome">
+				<a class="close icon-close" href="#" @click="hideInfo()"><span class="hidden-visually">Close</span></a>
+				<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
+				<p>
+					{{ t('social', 'We automatically created a social account for you. Your social ID is the same as your federated cloud ID:') }}
+					<span class="social-id">{{ socialId }}</span>
+				</p>
 			</div>
+		</transition>
+		<div class="social__timeline">
+			<composer />
+			<timeline-entry v-for="entry in timeline" :item="entry" :key="entry.id" />
+			<infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
+				<div slot="spinner"><div class="icon-loading" /></div>
+				<div slot="no-more"><div class="list-end" /></div>
+				<div slot="no-results">
+					<div id="emptycontent">
+						<div class="icon-social" />
+						<h2>{{ t('social', 'No posts found.') }}</h2>
+					</div>
+				</div>
+			</infinite-loading>
 		</div>
 	</div>
 </template>
 
 <style scoped>
-	.social__wrapper {
-		display: flex;
-	}
-
 	.social__container {
 		flex-grow: 1;
 	}