Merge pull request #117 from nextcloud-gmbh/width

Reduce max-width from 700px to 600px

6 files changed, 12 insertions, 35 deletions

diff --git a/src/App.vue b/src/App.vue
index bc26bd4c..f898cd4d 100644
--- a/src/App.vue
+++ b/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;
 		}
 	}
 
diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index 946b0e71..983a7fe1 100644
--- a/src/components/ProfileInfo.vue
+++ b/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>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 83a4b693..5859dd5d 100644
--- a/src/views/Profile.vue
+++ b/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;
 	}
 
diff --git a/src/views/ProfileFollowers.vue b/src/views/ProfileFollowers.vue
index f7dabcc7..81c2c516 100644
--- a/src/views/ProfileFollowers.vue
+++ b/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;
diff --git a/src/views/ProfileTimeline.vue b/src/views/ProfileTimeline.vue
index 63e79231..eb50a136 100644
--- a/src/views/ProfileTimeline.vue
+++ b/src/views/ProfileTimeline.vue
@@ -28,7 +28,7 @@
 
 <style scoped>
 	.social__timeline {
-		max-width: 700px;
+		max-width: 600px;
 		margin: 15px auto;
 	}
 </style>
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 37704a00..d719c04f 100644
--- a/src/views/Timeline.vue
+++ b/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;
 	}