nodebb/nodebb#4911

less/topic.less

@@ -422,3 +422,16 @@
 		text-align: center;
 	}
 }
+
+.fork-thread-card {
+	position: fixed;
+	bottom: 10%;
+	right: 2rem;
+	z-index: 1;
+}
+
+@media screen and (min-width: @screen-sm-min) {
+	.fork-thread-card {
+		max-width: 33%;
+	}
+}

templates/partials/fork_thread_modal.tpl

@@ -1,23 +1,22 @@
-<div id="fork-thread-modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" data-backdrop="none">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-				<h4>[[topic:fork_topic]]</h4>
-			</div>
-			<div class="modal-body">
-				<div class="form-group">
-					<label for="title">Title</label>
-					<input id="fork-title" type="text" class="form-control" placeholder="Enter new thread title"><br/>
-					<label>[[topic:fork_topic_instruction]]</label> <br/>
-					<span id="fork-pids"></span>
-				</div>
-			</div>
-
-			<div class="modal-footer">
-				<button type="button" class="btn btn-default" data-dismiss="modal" id="fork_thread_cancel">[[global:buttons.close]]</button>
-				<button type="button" class="btn btn-primary" id="fork_thread_commit" disabled>[[topic:confirm_fork]]</button>
-			</div>
+<div class="panel panel-primary fork-thread-card">
+	<div class="panel-heading">
+		<h3 class="panel-title">[[topic:fork_topic]]</h3>
+	</div>
+	<div class="panel-body">
+		<div class="form-group">
+			<label for="title">Title</label>
+			<input id="fork-title" type="text" class="form-control" placeholder="Enter new thread title">
+		</div>
+		<p>
+			[[topic:fork_topic_instruction]]<br />
+			<strong><span id="fork-pids"></span></strong>
+		</p>
+	</div>
+	<div class="panel-footer">
+		&nbsp;
+		<div class="btn-group pull-right">
+			<button class="btn btn-link btn-xs" id="fork_thread_cancel">[[global:buttons.close]]</button>
+			<button class="btn btn-primary btn-xs" id="fork_thread_commit">[[topic:fork_topic]] <i class="fa fa-arrow-circle-right"></i></button>
 		</div>
 	</div>
 </div>