浏览代码

Move post scrubber and other side-bar elements to thread_side_bar div

sbkwgh 8 年之前
父节点
当前提交
19cbf5229e
共有 2 个文件被更改,包括 28 次插入21 次删除
  1. 2 3
      src/components/PostScrubber.vue
  2. 26 18
      src/components/routes/Thread.vue

+ 2 - 3
src/components/PostScrubber.vue

@@ -118,9 +118,8 @@
 
 	.post_scrubber {
 		height: 10rem;
-		position: fixed;
-		right: calc(10% + 7.5rem);
-		margin-top: 6.5rem;
+		position: relative;
+		margin-top: 2rem;
 
 		@at-root #{&}__line {
 			height: 100%;

+ 26 - 18
src/components/routes/Thread.vue

@@ -1,16 +1,19 @@
 <template>
 	<div class='route_container'>
-		<menu-button :options='["Lock thread", "Remove posts"]' class=''>
-			<button class='button'>
-				<span class='fa fa-cogs' style='margin-right: 0.25rem;'></span>
-				Manage thread
-			</button>
-		</menu-button>
-		<post-scrubber
-			:posts='$store.state.thread.totalPostsCount'
-			:value='$route.params.post_number || 0'
-			@input='goToPost'
-		></post-scrubber>
+		<div class='thread_side_bar'>
+			<menu-button :options='["Lock thread", "Remove posts"]' class=''>
+				<button class='button'>
+					<span class='fa fa-cogs' style='margin-right: 0.25rem;'></span>
+					Manage thread
+				</button>
+			</menu-button>
+			<button class='button' @click='replyThread' v-if='$store.state.username'>Reply to thread</button>
+			<post-scrubber
+				:posts='$store.state.thread.totalPostsCount'
+				:value='$route.params.post_number || 0'
+				@input='goToPost'
+			></post-scrubber>
+		</div>
 		<header class='thread_header'>
 			<div
 				class='thread_header__thread_title thread_header__thread_title--app_header'
@@ -23,7 +26,6 @@
 			<div class='thread_header__thread_title' ref='title'>
 				{{thread}}
 			</div>
-			<button class='button thread_header__reply_button' @click='replyThread' v-if='$store.state.username'>Reply to thread</button>
 		</header>
 		<input-editor
 			v-model='editor'
@@ -267,6 +269,18 @@
 <style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
 
+	.thread_side_bar {
+		position: fixed;
+		right: 10%;
+		top: 7.25rem;
+
+		button {
+			margin-bottom: 0.75rem;
+			margin-left: -0.25rem;
+			height: 3rem;
+		} 
+	}
+
 	.thread_header {
 		display: flex;
 		justify-content: space-between;
@@ -294,12 +308,6 @@
 				}
 			}
 		}
-		@at-root #{&}__reply_button {
-			height: 3rem;
-			position: fixed;
-			right: 10%;
-			margin-top: 0.75rem;
-		}
 	}
 
 	.posts {