Merge pull request #117 from nextcloud-gmbh/width

Reduce max-width from 700px to 600px

src/App.vue

@@ -4,7 +4,7 @@
 			<app-navigation :menu="menu" />
 		</div>
 		<div id="app-content">
-			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup">
+			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
 				<h3 v-if="!serverData.checks.checks.wellknown">{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}</h3>
 				<p v-if="!serverData.checks.checks.wellknown">{{ t('social', 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ') }}<a class="external_link" href="https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target="_blank"
 					rel="noreferrer noopener">{{ t('social', 'Open documentation') }} ↗</a></p>
@@ -57,7 +57,7 @@
 	@media (min-width: 1200px) {
 		#app-content .social__wrapper {
 			margin: 15px calc(50% - 350px - 75px);
-			max-width: 700px;
+			max-width: 600px;
 		}
 	}
 

src/components/ProfileInfo.vue

@@ -39,13 +39,13 @@
 
 		<ul v-if="accountInfo.details" class="user-profile--sections">
 			<li>
-				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">{{ accountInfo.details.count.post }} {{ t('social', 'Posts') }}</router-link>
+				<router-link :to="{ name: 'profile', params: { account: uid } }" class="icon-category-monitoring">{{ accountInfo.details.count.post }} {{ t('social', 'posts') }}</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'profile.following', params: { account: uid } }" class="icon-category-social">{{ accountInfo.details.count.following }}  {{ t('social', 'Following') }}</router-link>
+				<router-link :to="{ name: 'profile.following', params: { account: uid } }" class="icon-category-social">{{ accountInfo.details.count.following }}  {{ t('social', 'following') }}</router-link>
 			</li>
 			<li>
-				<router-link :to="{ name: 'profile.followers', params: { account: uid } }" class="icon-category-social">{{ accountInfo.details.count.followers }}  {{ t('social', 'Followers') }}</router-link>
+				<router-link :to="{ name: 'profile.followers', params: { account: uid } }" class="icon-category-social">{{ accountInfo.details.count.followers }}  {{ t('social', 'followers') }}</router-link>
 			</li>
 		</ul>
 	</div>

src/views/Profile.vue

@@ -23,25 +23,11 @@
 <template>
 	<div class="social__wrapper">
 		<profile-info :uid="uid" />
-		<div class="social__container">
-			<router-view name="details" />
-		</div>
+		<router-view name="details" />
 	</div>
 </template>
 
 <style scoped>
-	.social__wrapper {
-		max-width: 700px;
-		margin: 15px auto;
-	}
-
-	.social__welcome {
-		max-width: 700px;
-		margin: 15px auto;
-		padding: 15px;
-		border-radius: 10px;
-		background-color: var(--color-background-dark);
-	}
 
 	.social__welcome h3 {
 		margin-top: 0;
@@ -56,7 +42,7 @@
 	}
 
 	.social__timeline {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 	}
 

src/views/ProfileFollowers.vue

@@ -28,7 +28,7 @@
 
 <style scoped>
 	.social__followers {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 		display: flex;
 		flex-wrap: wrap;

src/views/ProfileTimeline.vue

@@ -28,7 +28,7 @@
 
 <style scoped>
 	.social__timeline {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 	}
 </style>

src/views/Timeline.vue

@@ -28,18 +28,9 @@
 </template>
 
 <style scoped>
-	.social__container {
-		flex-grow: 1;
-	}
-	.social__profile {
-		max-width: 500px;
-		flex-grow: 1;
-		border-right: 1px solid var(--color-background-dark);
-		text-align: center;
-		padding-top: 20px;
-	}
+
 	.social__welcome {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 		padding: 15px;
 		border-bottom: 1px solid var(--color-border);
@@ -66,7 +57,7 @@
 	}
 
 	.social__timeline {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 	}