Adjust page style

2 files changed, 51 insertions, 63 deletions

diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index bd78313475..9ec5da81ed 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -1,27 +1,6 @@
 <template>
-<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-	<header v-if="showTitle">
-		<div class="title">{{ page.title }}</div>
-	</header>
-
-	<div v-if="script">
-		<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :script="script" :key="child.id" :h="2"/>
-	</div>
-
-	<footer v-if="showFooter">
-		<small>@{{ page.user.username }}</small>
-		<template v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId">
-			<router-link :to="`/my/pages/edit/${page.id}`">{{ $t('edit-this-page') }}</router-link>
-			<a v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)">{{ $t('unpin-this-page') }}</a>
-			<a v-else @click="pin(true)">{{ $t('pin-this-page') }}</a>
-		</template>
-		<router-link :to="`./${page.name}/view-source`">{{ $t('view-source') }}</router-link>
-		<div class="like">
-			<button @click="unlike()" v-if="page.isLiked" :title="$t('unlike')"><fa :icon="faHeartS"/></button>
-			<button @click="like()" v-else :title="$t('like')"><fa :icon="faHeart"/></button>
-			<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
-		</div>
-	</footer>
+<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="script">
+	<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :script="script" :key="child.id" :h="2"/>
 </div>
 </template>
 
@@ -77,16 +56,6 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
-		showTitle: {
-			type: Boolean,
-			required: false,
-			default: true
-		},
-		showFooter: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
 	},
 
 	data() {
@@ -113,35 +82,6 @@ export default Vue.extend({
 		getPageVars() {
 			return collectPageVars(this.page.content);
 		},
-
-		like() {
-			this.$root.api('pages/like', {
-				pageId: this.page.id,
-			}).then(() => {
-				this.page.isLiked = true;
-				this.page.likedCount++;
-			});
-		},
-
-		unlike() {
-			this.$root.api('pages/unlike', {
-				pageId: this.page.id,
-			}).then(() => {
-				this.page.isLiked = false;
-				this.page.likedCount--;
-			});
-		},
-
-		pin(pin) {
-			this.$root.api('i/update', {
-				pinnedPageId: pin ? this.page.id : null,
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					splash: true
-				});
-			});
-		}
 	}
 });
 </script>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 72c5101731..f5ed556146 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -3,7 +3,26 @@
 	<portal to="avatar" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/></portal>
 	<portal to="title" v-if="page">{{ page.title || page.name }}</portal>
 
-	<x-page v-if="page" :page="page" :key="page.id" :show-footer="true"/>
+	<div class="_section" v-if="page" :key="page.id">
+		<div class="_title">{{ page.title }}</div>
+		<div class="_content">
+			<x-page :page="page"/>
+		</div>
+		<div class="_footer">
+			<small>@{{ page.user.username }}</small>
+			<template v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId">
+				<router-link :to="`/my/pages/edit/${page.id}`">{{ $t('edit-this-page') }}</router-link>
+				<a v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)">{{ $t('unpin-this-page') }}</a>
+				<a v-else @click="pin(true)">{{ $t('pin-this-page') }}</a>
+			</template>
+			<router-link :to="`./${page.name}/view-source`">{{ $t('view-source') }}</router-link>
+			<div class="like">
+				<button @click="unlike()" v-if="page.isLiked" :title="$t('unlike')"><fa :icon="faHeartS"/></button>
+				<button @click="like()" v-else :title="$t('like')"><fa :icon="faHeart"/></button>
+				<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
+			</div>
+		</div>
+	</div>
 </div>
 </template>
 
@@ -58,6 +77,35 @@ export default Vue.extend({
 				this.page = page;
 			});
 		},
+
+		like() {
+			this.$root.api('pages/like', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = true;
+				this.page.likedCount++;
+			});
+		},
+
+		unlike() {
+			this.$root.api('pages/unlike', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = false;
+				this.page.likedCount--;
+			});
+		},
+
+		pin(pin) {
+			this.$root.api('i/update', {
+				pinnedPageId: pin ? this.page.id : null,
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
+		}
 	}
 });
 </script>