Merge branch 'master' of https://github.com/ppy/osu-web into Issue-45

Conflicts:
	resources/assets/less/login-modal.less

app/Models/Forum/Post.php

@@ -123,6 +123,11 @@ public function lastEditorNormalized()
         return $this->normalizeUser($this->lastEditor);
     }
 
+    public function getPostPositionAttribute()
+    {
+        return $this->topic->postPosition($this->post_id);
+    }
+
     public function canBeDeletedBy($user, $position = null, $topicPostsCount = null, $positionCheck = true)
     {
         if ($user === null) {
@@ -137,7 +142,7 @@ public function canBeDeletedBy($user, $position = null, $topicPostsCount = null,
             }
 
             if ($position === null) {
-                $position = $this->topic->postPosition($this->post_id);
+                $position = $this->postPosition;
             }
 
             if ($topicPostsCount === null) {

gulpfile.js

@@ -72,16 +72,16 @@ elixir(function(mix) {
 		"logout.coffee",
 		"shared.coffee",
 	], "public/js/app.js")
-	.browserify("index.js")
-	.browserify("jsx/modding_react.jsx", "public/js/modding_react.js")
-	.browserify("jsx/profile_page.jsx", "public/js/react/profile_page.js")
+	.browserify("main.js", "public/js/main.js")
+	.browserify("jsx/modding_react.jsx", "public/js/jsx/modding_react.js")
+	.browserify("jsx/profile_page.jsx", "public/js/jsx/profile_page.js")
 	.version([
 		"css/app.css",
 		"js/app.js",
-		"js/bundle.js",
+		"js/main.js",
 		"js/messages.js",
-		"js/modding_react.js",
-		"js/react/profile_page.js",
+		"js/jsx/modding_react.js",
+		"js/jsx/profile_page.js",
 		"js/vendor.js",
 	])
 });

package.json

@@ -1,17 +1,17 @@
 {
   "private": true,
   "dependencies": {
-    "blueimp-file-upload": "^9.10.5",
-    "bootstrap": "^3.3.5",
+    "blueimp-file-upload": "*",
+    "bootstrap": "*",
     "bower": "*",
     "font-awesome": "*",
-    "gulp": "^3.8.11",
-    "jquery": "^2.1.4",
-    "laravel-elixir": "^2.0.0",
-    "layzr.js": "^1.4.3",
-    "lodash": "^3.10.1",
-    "photoswipe": "^4.1.0",
-    "react": "^0.13.3",
-    "retina.js": "^1.1.0"
+    "gulp": "*",
+    "jquery": "*",
+    "laravel-elixir": "*",
+    "layzr.js": "*",
+    "lodash": "*",
+    "photoswipe": "*",
+    "react": "*",
+    "retina.js": "*"
   }
 }

resources/assets/coffee/forum.coffee

@@ -20,13 +20,14 @@ class ForumPostExpander
   _shrunk: document.getElementsByClassName('js-forum-post__shrunk')
 
   constructor: ->
-    $(document).on 'ready page:load', @initialExpand
+    $(document).on 'ready page:load', =>
+      setTimeout @initialExpand, 1000
 
     $(window).on 'scroll', =>
       requestAnimationFrame @autoExpand
 
     $(document).on 'click', '.js-forum-post__shrunk', (e) =>
-      @expand(e.target)
+      @expand(e.currentTarget)
 
 
   expand: (el) ->
@@ -43,7 +44,7 @@ class ForumPostExpander
   autoExpand: =>
     return if @_shrunk.length == 0
 
-    if osu.isMobile
+    if osu.isMobile()
       expandTop = document
         .getElementsByClassName('js-forum__header--sticky')[0]
         .getBoundingClientRect()
@@ -110,10 +111,10 @@ class Forum
     # this will skip guest users as well but they don't have the links
     # anyway so it's not a problem.
     if !window.user?.is_admin
-      $('.delete-post-link').parents('li').hide()
+      $('.delete-post-link').hide()
 
     if !showNext
-      $(@endPost()).find('.delete-post-link').parents('li').css(display: 'inline-block')
+      $(@endPost()).find('.delete-post-link').css(display: '')
       $('#forum-topic-reply-box').css(display: 'block')
 
   refreshCounter: =>

resources/assets/coffee/forum/post-box.coffee

@@ -88,7 +88,7 @@ class PostAutoPreview
     $form = $(e.target).closest('form')
     url = $form.attr('data-preview-url')
     body = $form.find('[name=body]').val()
-    $preview = $form.find('.post-preview')
+    $preview = $form.find('.js-post-preview')
 
     return if @lastBody == body
 

resources/assets/coffee/forum/topic-ajax.coffee

@@ -24,6 +24,7 @@ $(document).on 'ajax:success', '.delete-post-link', (_event, data) ->
     .css
       minHeight: '0px'
       height: currentHeight
+    .removeClass 'js-forum-post__shrunk'
     .slideUp null, ->
       $el.remove()
 
@@ -66,7 +67,9 @@ $(document).on 'ajax:success', '#forum-topic-reply-box', (_event, data) ->
 
     $(document).trigger('osu:page:change')
 
-    window.forum.endPost().scrollIntoView()
+    newPost = window.forum.endPost()
+    newPost.classList.remove('js-forum-post__shrunk')
+    newPost.scrollIntoView()
   else
     osu.navigate $(data).find('.js-post-url').attr('href')
 
@@ -76,19 +79,25 @@ $(document).on 'ajax:success', '.edit-post-link', (e, data, status, xhr) ->
   # removed in this callback.
   $(e.target).trigger('ajax:complete', [xhr, status])
 
-  $postPanel = $(e.target).parents('.forum-post').find('.post-panel')
+  $postBox = $(e.target).parents('.forum-post')
+
+  $postBox
+    .data 'originalPost', $postBox.html()
+    .html data
+    .find '[name=body]'
+    .focus()
+
+  $(document).trigger('osu:page:change')
 
-  $postPanel
-    .data('originalPost', $postPanel.html())
-    .html(data)
-    .find('[name=body]').focus()
 
 $(document).on 'click', '.js-edit-post-cancel', (e) ->
   e.preventDefault()
 
-  $postPanel = $(e.target).parents('.forum-post').find('.post-panel')
+  $postBox = $(e.target).parents '.forum-post'
+  $postBox.html $postBox.data('originalPost')
+
+  $(document).trigger('osu:page:change')
 
-  $postPanel.html $postPanel.data('originalPost')
 
 $(document).on 'ajax:success', '.edit-post', (e, data, status, xhr) ->
   # ajax:complete needs to be triggered early since the form (target) is

resources/assets/coffee/osu_common.coffee

@@ -17,7 +17,10 @@ You should have received a copy of the GNU Affero General Public License
 along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 ###
 window.osu =
-  isMobile: -> window.matchMedia('(min-width: 944px)').matches
+  parseJson: (id) ->
+    JSON.parse document.getElementById(id).text
+
+  isMobile: -> ! window.matchMedia('(min-width: 944px)').matches
 
   showLoadingOverlay: ->
     $body = $('body')

resources/assets/js/jsx/profile_page/contents.jsx

@@ -398,7 +398,7 @@
 				<div
 					className='profile-content flex-col-66 text-center'
 				>
-					<button className='profile-page-new-content btn-osu btn-osu-lite btn-osu-lite--plain btn-osu-lite--profile-page-edit' onClick={this.editStart} disabled={!canCreate}>
+					<button className='profile-page-new-content btn-osu btn-osu--lite btn-osu--profile-page-edit' onClick={this.editStart} disabled={!canCreate}>
 						{Lang.get('users.show.page.edit_big')}
 					</button>
 
@@ -445,24 +445,37 @@
 
 
 	window.ProfileUserPageEditor = React.createClass({
+		_body: function() {
+			return React.findDOMNode(this.refs.body);
+		},
+
 		getInitialState: function() {
 			return {
 				raw: this.props.userPage.raw,
 			};
 		},
 
 		componentDidMount: function() {
+			var body = this._body();
+			$(body).on('change', this.change);
+
+			body.selectionStart = this.props.userPage.selection[0];
+			body.selectionEnd = this.props.userPage.selection[1];
 			this.focus();
 		},
 
 		componentWillUnmount: function() {
+			var body = this._body();
+			$(body).off('change', this.change);
+
 			$(document).trigger('profile:page:update', {
 				raw: this.state.raw,
+				selection: [body.selectionStart, body.selectionEnd],
 			});
 		},
 
 		focus: function() {
-			React.findDOMNode(this.refs.body).focus();
+			this._body().focus();
 		},
 
 		reset: function(_e, callback) {
@@ -517,15 +530,16 @@
 						ref='body'
 					/>
 
-					<div className='profile-page-editor-footer reply-box-footer'>
-						<div>
-							<button className='btn-osu btn-osu-lite profile-page-editor-button' type='button' onClick={this.cancel}>
+					<div className='post-editor__footer post-editor__footer--profile-page'>
+						<div dangerouslySetInnerHTML={{ __html: osu.parseJson('json-post-editor-toolbar').html }} />
+						<div className='post-editor__actions'>
+							<button className='btn-osu btn-osu--small btn-osu-default post-editor__action' type='button' onClick={this.cancel}>
 								{Lang.get('common.buttons.cancel')}
 							</button>
-							<button className='btn-osu btn-osu-lite profile-page-editor-button' type='button' onClick={this.reset}>
+							<button className='btn-osu btn-osu--small btn-osu-default post-editor__action' type='button' onClick={this.reset}>
 								{Lang.get('common.buttons.reset')}
 							</button>
-							<button className='btn-osu btn-osu-lite profile-page-editor-button' type='button' onClick={this.save}>
+							<button className='btn-osu btn-osu--small btn-osu-default post-editor__action' type='button' onClick={this.save}>
 								{Lang.get('common.buttons.save')}
 							</button>
 						</div>

resources/assets/js/jsx/profile_page/header.jsx

@@ -82,7 +82,7 @@
 
 		render: function() {
 			var
-				labelClass = 'btn-osu btn-osu-lite file-upload-label profile-cover-upload-button';
+				labelClass = 'btn-osu btn-osu--small btn-osu-default file-upload-label profile-cover-upload-button';
 
 			if (!this.props.canUpload) {
 				labelClass += ' disabled';

resources/assets/less/app.less

@@ -59,6 +59,7 @@
 // Less has the rule "Last Defined Wins".
 @import "bootstrap-variables";
 @import "colours";
+@import "variables";
 
 @fa-font-path: "/vendor/fonts/font-awesome";
 @fa-osu-font-path: "/fonts/fa-osu";

resources/assets/less/forum/create-topic.less

@@ -62,15 +62,11 @@
 
 #topic-post-form {
 	flex: 1 0 auto;
+}
 
-	.post-footer {
-		background: @gray-lighter;
-		padding: @grid-gutter-width/4;
-		margin: 0px -@grid-gutter-width/4;
-
-		@media (min-width: @screen-sm) {
-			margin: 0px;
-		}
-	}
-
+.post-editor__preview {
+  margin-bottom: @grid-gutter-width/8;
+  @media @desktop {
+    margin-bottom: 0px;
+  }
 }

resources/assets/less/forum/post-box.less

@@ -17,107 +17,149 @@
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
-.post-box {
-	margin-bottom: @grid-gutter-width/8;
-
-	.create-post-advanced, .create-post-advanced-hide {
-		display: none;
-	}
-
-	.create-post-advanced-switch {
-		cursor: pointer;
-	}
-
-	.create-post-basic {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.create-post-advanced-switch {
-		font-size: 12px;
-		font-weight: bold;
-	}
-
-	[name=body] {
-		font-size: 14px;
-		outline: none;
-		border: none;
-		resize: vertical;
-		min-height: 200px;
-	}
-}
+.post-editor {
+  margin-bottom: @grid-gutter-width/8;
+  padding-bottom: 0px;
 
-.post-box__actions {
-	> * {
-		min-height: 60px;
-		width: 140px;
-		margin-right: @grid-gutter-width/4;
-	}
-	display: flex;
-}
+  display: flex;
+  flex-direction: column;
 
-.post-box__actions--edit {
-	> * {
-		min-height: 40px;
-	}
-}
+  &--edit {
+    width: 100%;
+    margin-bottom: 0px;
+  }
+
+  &--reply {
+    margin-left: -(@grid-gutter-width/2 - @grid-gutter-width/8);
+    margin-right: -(@grid-gutter-width/2 - @grid-gutter-width/8);
+  }
+
+  .create-post-advanced, .create-post-advanced-hide {
+    display: none;
+  }
+
+  .create-post-advanced-switch {
+    cursor: pointer;
+  }
+
+  .create-post-basic {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .create-post-advanced-switch {
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  [name=body] {
+    font-size: 14px;
+    outline: none;
+    border: none;
+    resize: vertical;
+    min-height: 200px;
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    background-color: #fff;
+
+    flex-direction: column;
+    @media @desktop {
+      flex-direction: row;
+    }
+  }
 
-.reply-box-footer {
-	display: flex;
-	background: @gray-lighter;
-	justify-content: space-between;
-	padding-top: @grid-gutter-width/4;
-	padding-bottom: @grid-gutter-width/4;
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    margin: 0px -@grid-gutter-width/2;
+
+    padding: @grid-gutter-width/4 @grid-gutter-width/2;
+
+    background-color: @gray-lighter;
+    background-image: linear-gradient(fade(#000, 30%), transparent 3px);
+
+    &--profile-page {
+      padding: @grid-gutter-width/4;
+    }
+
+    &--large {
+      @media @desktop {
+        @space-left: @grid-gutter-width/2;
+        margin-left: -@space-left;
+        padding-left: @space-left;
+
+        @space-right: @grid-gutter-width*6/4;
+        margin-right: -@space-right;
+        padding-right: @space-right;
+      }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1 0 auto;
+  }
+
+  &__action {
+    margin-left: @grid-gutter-width/4;
+    min-width: 120px;
+  }
 }
 
 .post-box-toolbar {
-	display: flex;
-	flex-wrap: wrap;
-	margin-bottom: @grid-gutter-width/8;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: @grid-gutter-width/8;
 }
 
 .bbcode-item--extra-space {
-	margin-left: @grid-gutter-width/8;
+  margin-left: @grid-gutter-width/8;
 }
 
 .bbcode-btn {
-	margin: 0px @grid-gutter-width/8 @grid-gutter-width/8 0px;
-	font-size: 13px;
-	.circle(30px);
-	background-color: @blue-darker;
-	color: #fff;
-	&:extend(.default-text-shadow);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-
-	&:hover {
-		&:extend(.default-box-shadow);
-	}
+  margin: 0px @grid-gutter-width/8 @grid-gutter-width/8 0px;
+  font-size: 13px;
+  .circle(30px);
+  background-color: @blue-darker;
+  color: #fff;
+  &:extend(.default-text-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    &:extend(.default-box-shadow);
+  }
 }
 
 .bbcode-btn--bold { font-weight: bold; }
 .bbcode-btn--italic { font-style: italic; }
 
 .bbcode-size-group {
-	background: #fff;
-	&:extend(.default-box-shadow);
-	&:extend(.default-border-radius);
-	text-transform: none;
-	font-size: 12px;
-	display: flex;
-	align-items: center;
-	padding: @grid-gutter-width/8 @grid-gutter-width/4;
-
-	select {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0px;
-		left:0px;
-		opacity: 0;
-	}
-	i { margin-left: @grid-gutter-width/4; }
+  background: #fff;
+  &:extend(.default-box-shadow);
+  &:extend(.default-border-radius);
+  text-transform: none;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  padding: @grid-gutter-width/8 @grid-gutter-width/4;
+
+  select {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left:0px;
+    opacity: 0;
+  }
+  i { margin-left: @grid-gutter-width/4; }
 }

resources/assets/less/home.less

@@ -98,7 +98,7 @@
 
 	.explanation {
 		padding: @grid-gutter-width/2;
-		@media (min-width: @screen-sm-min) {
+		@media @desktop {
 			padding: @grid-gutter-width/2 200px;
 		}
 	}

resources/assets/less/store/base.less

@@ -139,7 +139,7 @@
 }
 
 .product-listing {
-	@media (min-width: @screen-sm-min) {
+	@media @desktop {
 		margin-left: -5px + -@grid-gutter-width/2;
 		margin-right: -5px + -@grid-gutter-width/2;
 	}
@@ -149,7 +149,7 @@
 	> div {
 		margin-bottom: 10px;
 
-		@media (min-width: @screen-sm-min) {
+		@media @desktop {
 			padding-left: 5px;
 			padding-right: 5px;
 		}
@@ -225,7 +225,7 @@
 		justify-content: space-between;
 
 		flex-wrap: wrap;
-		@media (min-width: @screen-sm-min) {
+		@media @desktop {
 			flex-wrap: nowrap;
 		}
 
@@ -235,7 +235,7 @@
 
 		> form {
 			flex: 0 1 100%;
-			@media (min-width: @screen-sm-min) {
+			@media @desktop {
 				flex: 0 0 300px;
 			}
 			display: flex;
@@ -265,7 +265,7 @@
 }
 
 .cart-footer {
-	@media (min-width: @screen-sm-min) {
+	@media @desktop {
 		padding-right: 87px;
 	}
 

resources/assets/less/store/header.less

@@ -41,7 +41,7 @@
 		padding: @grid-gutter-width/2;
 
 		align-items: flex-end;
-		@media (min-width: @screen-sm-min) {
+		@media @desktop {
 			align-items: center;
 		}
 	}

resources/assets/less/variables.less

@@ -0,0 +1 @@
+@desktop: ~"(min-width: @{screen-sm-min})";

resources/views/beatmaps/modding_react.blade.php

@@ -44,5 +44,5 @@
 @section ('script')
 	@parent
 
-	<script src="{{ elixir("js/modding_react.js") }}" data-turbolinks-eval="always" data-turbolinks-track></script>
+	<script src="{{ elixir("js/jsx/modding_react.js") }}" data-turbolinks-eval="always" data-turbolinks-track></script>
 @endsection

resources/views/forum/topics/_post.blade.php

@@ -17,79 +17,77 @@
     along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 --}}
 <?php
-	if (isset($options["deleteLink"]) === false) { $options["deleteLink"] = false; }
-	if (isset($options["editLink"]) === false) { $options["editLink"] = false; }
-	if (isset($options["overlay"]) === false) { $options["overlay"] = false; }
-	if (isset($options["signature"]) === false) { $options["signature"] = true; }
-	if (isset($options["replyLink"]) === false) { $options["replyLink"] = false; }
-	if (isset($options["postPosition"]) === false) { $options["postPosition"] = 1; }
-	if (isset($options["large"]) === false) { $options["large"] = $options["postPosition"] === 1; }
+    if (! isset($options['deleteLink'])) { $options['deleteLink'] = false; }
+    if (! isset($options['editLink'])) { $options['editLink'] = false; }
+    if (! isset($options['overlay'])) { $options['overlay'] = false; }
+    if (! isset($options['signature'])) { $options['signature'] = true; }
+    if (! isset($options['replyLink'])) { $options['replyLink'] = false; }
+    if (! isset($options['postPosition'])) { $options['postPosition'] = 1; }
+    if (! isset($options['large'])) { $options['large'] = $options['postPosition'] === 1; }
 ?>
-<div class="row-page forum-post flex-row js-forum-post__shrunk" data-post-id="{{ $post->post_id }}" data-post-position="{{ $options["postPosition"] }}">
-	<div class="forum-post-anchor" id="forum-post-{{ $post->post_id }}"></div>
-	<div class="info-panel">
-		@include("forum.topics._post_info", ["user" => $post->userNormalized(), "options" => ["large" => $options["large"]]])
-	</div>
+<div
+        class="row-page forum-post flex-row js-forum-post__shrunk post-viewer"
+        data-post-id="{{ $post->post_id }}"
+        data-post-position="{{ $options["postPosition"] }}">
+    @if(is_int($post->post_id) && $post->post_id > 0)
+        <div class="forum-post-anchor" id="forum-post-{{ $post->post_id }}"></div>
+    @endif
 
-	<div class="post-panel">
-		<div class="post-header">
-			<div class="post-time"><a class="js-post-url" href="{{ post_url($post->topic_id, $post->post_id) }}">
-				{!! trans("forum.post.posted_at", ["when" => timeago($post->post_time)]) !!}
-			</a></div>
+    <div class="info-panel">
+        @include("forum.topics._post_info", ["user" => $post->userNormalized(), "options" => ["large" => $options["large"]]])
+    </div>
 
-			<div class="post-action">
-				<ul class="list-inline">
-					@if ($options["editLink"] === true)
-						<li>
-							<a href="{{ route("forum.posts.edit", $post) }}" class="edit-post-link" data-remote="1">
-								<i class="fa fa-edit"></i>
-							</a>
-						</li>
-					@endif
-					@if ($options["deleteLink"] === true)
-						<li>
-							<a href="{{ route("forum.posts.destroy", $post) }}" class="delete-post-link" data-method="delete" data-confirm="{{ trans("forum.post.confirm_delete") }}" data-remote="1">
-								<i class="fa fa-trash"></i>
-							</a>
-						</li>
-					@endif
-					@if ($options["replyLink"] === true)
-						<li>
-							<a href="{{ route("forum.posts.raw", ["id" => $post, "quote" => 1]) }}" class="reply-post-link" data-remote="1">
-								<i class="fa fa-reply"></i>
-							</a>
-						</li>
-					@endif
-				</ul>
-			</div>
-		</div>
+    <div class="post-panel">
+        <div class="post-header {{ $options['large'] ? '' : 'post-body--small' }}">
+            <div class="post-time"><a class="js-post-url" href="{{ post_url($post->topic_id, $post->post_id) }}">
+                {!! trans("forum.post.posted_at", ["when" => timeago($post->post_time)]) !!}
+            </a></div>
+        </div>
 
-		<div class="post-body">
-			{!! $post->bodyHTML !!}
-		</div>
+        <div class="post-body {{ $options['large'] ? '' : 'post-body--small' }}">
+            {!! $post->bodyHTML !!}
+        </div>
 
-		<div class="post-footer">
-			@if($post->post_edit_count > 0)
-				<div class="post-edit-info">
-					{!!
-						trans("forum.post.edited", [
-							"count" => $post->post_edit_count,
-							"user" => $post->lastEditorNormalized()->username,
-							"when" => timeago($post->post_edit_time),
-						])
-					!!}
-				</div>
-			@endif
+        <div class="post-footer">
+            @if($post->post_edit_count > 0)
+                <div class="post-edit-info">
+                    {!!
+                        trans("forum.post.edited", [
+                            "count" => $post->post_edit_count,
+                            "user" => $post->lastEditorNormalized()->username,
+                            "when" => timeago($post->post_edit_time),
+                        ])
+                    !!}
+                </div>
+            @endif
 
-			@if($options["signature"] !== false && $post->userNormalized()->user_sig)
-				<div class="user-signature hidden-xs">
-					{!! bbcode($post->userNormalized()->user_sig, $post->userNormalized()->user_sig_bbcode_uid) !!}
-				</div>
-			@endif
-		</div>
-	</div>
+            @if($options["signature"] !== false && $post->userNormalized()->user_sig)
+                <div class="user-signature hidden-xs">
+                    {!! bbcode($post->userNormalized()->user_sig, $post->userNormalized()->user_sig_bbcode_uid) !!}
+                </div>
+            @endif
+        </div>
+    </div>
 
-	@if($options["overlay"] === true)
-		<div class="post-overlay"></div>
-	@endif
+    <div class="post-viewer__actions">
+        @if ($options["editLink"] === true)
+            <a href="{{ route("forum.posts.edit", $post) }}" class="post-viewer__action edit-post-link" data-remote="1">
+                <i class="fa fa-edit"></i>
+            </a>
+        @endif
+        @if ($options["deleteLink"] === true)
+            <a href="{{ route("forum.posts.destroy", $post) }}" class="post-viewer__action delete-post-link" data-method="delete" data-confirm="{{ trans("forum.post.confirm_delete") }}" data-remote="1">
+                <i class="fa fa-trash"></i>
+            </a>
+        @endif
+        @if ($options["replyLink"] === true)
+            <a href="{{ route("forum.posts.raw", ["id" => $post, "quote" => 1]) }}" class="post-viewer__action reply-post-link" data-remote="1">
+                <i class="fa fa-reply"></i>
+            </a>
+        @endif
+    </div>
+
+    @if($options["overlay"] === true)
+        <div class="post-overlay"></div>
+    @endif
 </div>

resources/views/forum/topics/_post_box_footer.blade.php

@@ -17,32 +17,16 @@
     along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 --}}
 <?php
-	if (!isset($editing)) { $editing = false; }
+    if (!isset($editing)) { $editing = false; }
 ?>
 <div class="post-box__toolbar">
-	<div class="create-post-advanced">
-		@include("forum._post_toolbar")
-	</div>
-
-	<div class="create-post-basic">
-		<div class="create-post-advanced-switch">
-			<span class="create-post-advanced-hide">
-				<i class="fa fa-angle-double-up"></i>
-				{{ trans("forum.post.create.advanced.hide") }}
-			</span>
-
-			<span>
-				<i class="fa fa-angle-double-down"></i>
-				{{ trans("forum.post.create.advanced.show") }}
-			</span>
-		</div>
-	</div>
+    @include("forum._post_toolbar")
 </div>
 
-<div class="post-box__actions {{ $editing ? "post-box__actions--edit" : "" }}">
-	@if ($editing)
-		<button class="btn-osu btn-osu-lite js-edit-post-cancel" type="button">{{ trans("forum.topic.post_edit.cancel") }}</button>
-	@endif
+<div class="post-post-editor__actions">
+    @if ($editing)
+        <button class="btn-osu btn-osu--small btn-osu-default js-edit-post-cancel post-editor__action" type="button">{{ trans("forum.topic.post_edit.cancel") }}</button>
+    @endif
 
-	<button class="btn-osu btn-osu-lite" type="submit">{{ $submitText }}</button>
+    <button class="btn-osu btn-osu--small btn-osu-default post-editor__action" type="submit">{{ $submitText }}</button>
 </div>

resources/views/forum/topics/_post_edit.blade.php

@@ -16,12 +16,21 @@
     You should have received a copy of the GNU Affero General Public License
     along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 --}}
-{!! Form::open(["url" => route("forum.posts.update", $post), "method" => "patch", "data-remote" => true, "class" => "edit-post post-box"]) !!}
-	<div class="reply-box-body">
-		<textarea required class="js-quick-submit" name="body">{{ $post->bodyRaw }}</textarea>
-	</div>
+<?php
+    $isLarge = $post->postPosition === 1;
+?>
+{!! Form::open(["url" => route("forum.posts.update", $post), "method" => "patch", "data-remote" => true, "class" => "edit-post post-editor post-editor--edit", "data-post-position" => $post->postPosition]) !!}
+    <div class="post-editor__main">
+        <div class="info-panel">
+            @include("forum.topics._post_info", ["user" => $post->user, "options" => ["large" => $isLarge ]])
+        </div>
 
-	<div class="reply-box-footer">
-		@include("forum.topics._post_box_footer", ["submitText" => trans("forum.topic.post_edit.post"), "editing" => true])
-	</div>
+        <div class="post-panel">
+            <textarea required class="js-quick-submit" name="body">{{ $post->bodyRaw }}</textarea>
+        </div>
+    </div>
+
+    <div class="post-editor__footer {{ $isLarge ? "post-editor__footer--large" : "" }}">
+        @include("forum.topics._post_box_footer", ["submitText" => trans("forum.topic.post_edit.post"), "editing" => true])
+    </div>
 {!! Form::close() !!}

resources/views/forum/topics/create.blade.php

@@ -19,51 +19,53 @@
 @extends("master")
 
 @section("content")
-	{!! Form::open([
-		"url" => route("forum.topics.store", $forum),
-		"class" => "create-topic post-box",
-		"data-preview-url" => route("forum.topics.preview", $forum),
-	]) !!}
-		<div class="row-page row-blank" id="topic-header-container">
-			<div class="forum-header">
-				<div class="topic-header">
-					<ol class="breadcrumb forums-breadcrumb">
-						@include("forum.forums._nav", ["forum_parents" => $forum->forum_parents])
-						<li>
-							<a href="{{ route("forum.forums.show", $forum) }}">
-								{{ $forum->forum_name }}
-							</a>
-						</li>
-					</ol>
-					<h1>
-						<input required tabindex="1" name="title" type="text" value="{{ Request::old("title") }}" placeholder="{{ trans("forum.topic.create.placeholder.title") }}" />
-					</h1>
-				</div>
-			</div>
-		</div>
+    {!! Form::open([
+        "url" => route("forum.topics.store", $forum),
+        "class" => "create-topic post-box",
+        "data-preview-url" => route("forum.topics.preview", $forum),
+    ]) !!}
+        <div class="row-page row-blank" id="topic-header-container">
+            <div class="forum-header">
+                <div class="topic-header">
+                    <ol class="breadcrumb forums-breadcrumb">
+                        @include("forum.forums._nav", ["forum_parents" => $forum->forum_parents])
+                        <li>
+                            <a href="{{ route("forum.forums.show", $forum) }}">
+                                {{ $forum->forum_name }}
+                            </a>
+                        </li>
+                    </ol>
+                    <h1>
+                        <input required tabindex="1" name="title" type="text" value="{{ Request::old("title") }}" placeholder="{{ trans("forum.topic.create.placeholder.title") }}" />
+                    </h1>
+                </div>
+            </div>
+        </div>
 
-		<div class="post-preview"></div>
+        <div class="post-editor__preview js-post-preview"></div>
 
-		<div id="topic-post-form" class="forum-post flex-row row-page" data-post-position="1">
-			<div class="info-panel">
-				@include("forum.topics._post_info", ["user" => Auth::user(), "options" => ["large" => true]])
-			</div>
+        <div id="topic-post-form" class="forum-post flex-row row-page post-editor" data-post-position="1">
+            <div class="post-editor__main">
+                <div class="info-panel">
+                    @include("forum.topics._post_info", ["user" => Auth::user(), "options" => ["large" => true]])
+                </div>
 
-			<div class="post-panel">
-				<textarea autofocus required class="js-quick-submit post-autopreview" tabindex="1" name="body" placeholder="{{ trans("forum.topic.create.placeholder.body") }}">{{ Request::old("body") }}</textarea>
+                <div class="post-panel">
+                    <textarea autofocus required class="js-quick-submit post-autopreview" tabindex="1" name="body" placeholder="{{ trans("forum.topic.create.placeholder.body") }}">{{ Request::old("body") }}</textarea>
+                </div>
+            </div>
 
-				<div class="post-footer reply-box-footer">
-					<div class="post-box__toolbar">
-						@include("forum._post_toolbar")
-					</div>
+            <div class="post-footer post-editor__footer post-editor__footer--large">
+                <div class="post-box__toolbar">
+                    @include("forum._post_toolbar")
+                </div>
 
-					<div class="post-box__actions">
-						<button tabindex="1" class="btn-osu btn-osu-lite" type="submit">
-							{{ trans("forum.topic.create.submit") }}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	{!! Form::close() !!}
+                <div class="post-box__actions">
+                    <button tabindex="1" class="btn-osu btn-osu--small btn-osu-default post-editor__action" type="submit">
+                        {{ trans("forum.topic.create.submit") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    {!! Form::close() !!}
 @endsection

resources/views/forum/topics/show.blade.php

@@ -17,99 +17,99 @@
     along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 --}}
 @extends("master", [
-	"title" => "community / {$topic->topic_title}",
-	"body_additional_classes" => "forum-colour " . $topic->forum->categorySlug()
+    "title" => "community / {$topic->topic_title}",
+    "body_additional_classes" => "forum-colour " . $topic->forum->categorySlug()
 ])
 
 @section("content")
-	<div class="row-page row-blank" id="topic-header-container">
-		<div class="js-forum__sticky-header-marker"></div>
-
-		@foreach(["normal", "sticky"] as $type)
-			<div class="forum-header js-forum__header--{{ $type }}">
-				<div class="topic-header">
-					<ol class="breadcrumb forums-breadcrumb">
-						@include("forum.forums._nav", ["forum_parents" => $topic->forum->forum_parents])
-						<li>
-							<a href="{{ route("forum.forums.show", $topic->forum->forum_id) }}">
-								{{ $topic->forum->forum_name }}
-							</a>
-						</li>
-					</ol>
-					<h1>
-						<a href="{{ route("forum.topics.show", $topic->topic_id) }}">
-							{{ $topic->topic_title }}
-						</a>
-					</h1>
-				</div>
-			</div>
-		@endforeach
-	</div>
-
-	<div class="row-forum-post row-page forum-posts-load-link">
-		<a href="{{ route("forum.topics.show", ["topics" => $topic->topic_id, "end" => ($posts->first()->post_id - 1)]) }}" class="js-forum-posts-show-more js-forum__posts-show-more--previous" data-mode="previous">Load more</a>
-		<span><i class="fa fa-refresh fa-spin"></i></span>
-	</div>
-
-	@include("forum.topics._posts")
-
-	<div class="row-forum-post row-page forum-posts-load-link">
-		<a href="{{ post_url($topic->topic_id, $posts->last()->post_id + 1, false) }}" class="js-forum-posts-show-more js-forum__posts-show-more--next" data-mode="next">Load more</a>
-		<span><i class="fa fa-refresh fa-spin"></i></span>
-	</div>
-
-	@if ($topic->canBeRepliedBy(Auth::user()))
-		{!! Form::open(["url" => route("forum.topics.reply", $topic->topic_id), "class" => "row row-blank post-box", "id" => "forum-topic-reply-box", "data-remote" => true]) !!}
-			<div class="forum-small-row reply-box-body">
-				<div class="forum__avatar-container forum__avatar-container--reply">
-					<div
-						class="avatar avatar--full"
-						title="{{ trans("users.show.avatar", ["username" => Auth::user()->username]) }}"
-						style="background-image: url('{{ Auth::user()->user_avatar }}');"
-					></div>
-				</div>
-
-				<textarea required name="body" class="js-quick-submit" placeholder="{{ trans("forum.topic.reply_box_placeholder") }}"></textarea>
-			</div>
-
-			<div class="forum-small-row reply-box-footer">
-				@include("forum.topics._post_box_footer", ["submitText" => trans("forum.topic.post_reply")])
-			</div>
-		{!! Form::close() !!}
-	@endif
-
-	<div class="row-page row-blank fixed-bar-bottom">
-		<div id="forum-topic-navigator" class="js-forum__topic-total-posts" data-total-count="{{ $topic->postsCount() }}">
-
-			@include("objects._radial_progress", ["extraRadialProgressClasses" => "js-forum__posts-progress"])
-			<a
-				class="jump-link first-post"
-				href="{{ route("forum.topics.show", $topic->topic_id) }}"
-			>
-				<i class="fa fa-angle-double-up"></i>
-			</a>
-
-			<div class="post-counter">
-				<a href="#" class="current-count js-forum__posts-counter">{{ head($postsPosition) }}</a>
-				<div class="total-count">/{{ $topic->postsCount() }}</div>
-			</div>
-
-			<a
-				class="jump-link last-post"
-				href="{{ route("forum.topics.show", ["topics" => $topic->topic_id, "end" => $topic->topic_last_post_id]) }}#forum-post-{{ $topic->topic_last_post_id }}"
-			>
-				<i class="fa fa-angle-double-down"></i>
-			</a>
-		</div>
-	</div>
-
-	@include("forum._search", ["topic" => $topic])
+    <div class="row-page row-blank" id="topic-header-container">
+        <div class="js-forum__sticky-header-marker"></div>
+
+        @foreach(["normal", "sticky"] as $type)
+            <div class="forum-header js-forum__header--{{ $type }}">
+                <div class="topic-header">
+                    <ol class="breadcrumb forums-breadcrumb">
+                        @include("forum.forums._nav", ["forum_parents" => $topic->forum->forum_parents])
+                        <li>
+                            <a href="{{ route("forum.forums.show", $topic->forum->forum_id) }}">
+                                {{ $topic->forum->forum_name }}
+                            </a>
+                        </li>
+                    </ol>
+                    <h1>
+                        <a href="{{ route("forum.topics.show", $topic->topic_id) }}">
+                            {{ $topic->topic_title }}
+                        </a>
+                    </h1>
+                </div>
+            </div>
+        @endforeach
+    </div>
+
+    <div class="row-forum-post row-page forum-posts-load-link">
+        <a href="{{ route("forum.topics.show", ["topics" => $topic->topic_id, "end" => ($posts->first()->post_id - 1)]) }}" class="js-forum-posts-show-more js-forum__posts-show-more--previous" data-mode="previous">Load more</a>
+        <span><i class="fa fa-refresh fa-spin"></i></span>
+    </div>
+
+    @include("forum.topics._posts")
+
+    <div class="row-forum-post row-page forum-posts-load-link">
+        <a href="{{ post_url($topic->topic_id, $posts->last()->post_id + 1, false) }}" class="js-forum-posts-show-more js-forum__posts-show-more--next" data-mode="next">Load more</a>
+        <span><i class="fa fa-refresh fa-spin"></i></span>
+    </div>
+
+    @if ($topic->canBeRepliedBy(Auth::user()))
+        {!! Form::open(["url" => route("forum.topics.reply", $topic->topic_id), "class" => "row row-blank post-editor post-editor--reply", "id" => "forum-topic-reply-box", "data-remote" => true]) !!}
+            <div class="forum-small-row post-editor__main">
+                <div class="forum__avatar-container forum__avatar-container--reply hidden-xs">
+                    <div
+                        class="avatar avatar--full"
+                        title="{{ trans("users.show.avatar", ["username" => Auth::user()->username]) }}"
+                        style="background-image: url('{{ Auth::user()->user_avatar }}');"
+                    ></div>
+                </div>
+
+                <textarea required name="body" class="js-quick-submit" placeholder="{{ trans("forum.topic.reply_box_placeholder") }}"></textarea>
+            </div>
+
+            <div class="forum-small-row post-editor__footer">
+                @include("forum.topics._post_box_footer", ["submitText" => trans("forum.topic.post_reply")])
+            </div>
+        {!! Form::close() !!}
+    @endif
+
+    <div class="row-page row-blank fixed-bar-bottom">
+        <div id="forum-topic-navigator" class="js-forum__topic-total-posts" data-total-count="{{ $topic->postsCount() }}">
+
+            @include("objects._radial_progress", ["extraRadialProgressClasses" => "js-forum__posts-progress"])
+            <a
+                class="jump-link first-post"
+                href="{{ route("forum.topics.show", $topic->topic_id) }}"
+            >
+                <i class="fa fa-angle-double-up"></i>
+            </a>
+
+            <div class="post-counter">
+                <a href="#" class="current-count js-forum__posts-counter">{{ head($postsPosition) }}</a>
+                <div class="total-count">/{{ $topic->postsCount() }}</div>
+            </div>
+
+            <a
+                class="jump-link last-post"
+                href="{{ route("forum.topics.show", ["topics" => $topic->topic_id, "end" => $topic->topic_last_post_id]) }}#forum-post-{{ $topic->topic_last_post_id }}"
+            >
+                <i class="fa fa-angle-double-down"></i>
+            </a>
+        </div>
+    </div>
+
+    @include("forum._search", ["topic" => $topic])
 @endsection
 
 @section ("script")
-	@parent
+    @parent
 
-	<script data-turbolinks-eval="always">
-		window.postJumpTo = {{ $jumpTo }};
-	</script>
+    <script data-turbolinks-eval="always">
+        window.postJumpTo = {{ $jumpTo }};
+    </script>
 @endsection

resources/views/layout/metadata.blade.php

@@ -30,7 +30,7 @@
 	<meta name="ga-tracking-id" content="{{ config("services.ga.tracking_id") }}">
 @endif
 
-<script src="{{ elixir("js/bundle.js") }}" data-turbolinks-track></script>
+<script src="{{ elixir("js/main.js") }}" data-turbolinks-track></script>
 <script src="{{ elixir("js/messages.js") }}" data-turbolinks-track></script>
 <script src="{{ elixir("js/vendor.js") }}" data-turbolinks-track></script>
 <script src="{{ elixir("js/app.js") }}" data-turbolinks-track></script>

resources/views/users/show.blade.php

@@ -60,5 +60,9 @@
 		{!! json_encode(["page" => $userPage]) !!}
 	</script>
 
-	<script src="{{ elixir("js/react/profile_page.js") }}" data-turbolinks-eval="always" data-turbolinks-track></script>
+	<script id="json-post-editor-toolbar" type="application/json">
+		{!! json_encode(["html" => view()->make('forum._post_toolbar')->render()]) !!}
+	</script>
+
+	<script src="{{ elixir("js/jsx/profile_page.js") }}" data-turbolinks-eval="always" data-turbolinks-track></script>
 @endsection