Create a floatc bbcode

It will add a clear:both code to make clean floating elements
MonDiscourse · Sep 3, 2019 · b52c9c4 · b52c9c4
1 parent dce1681
commit b52c9c4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6 b/assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6
@@ -59,6 +59,11 @@ function setupMarkdownIt(md) {
     wrap: wrap('div', 'class', ()=>'floatr')
   });
 
+  ruler.push('floatc', {
+    tag: 'floatr',
+    wrap: wrap('div', 'class', ()=>'floatc')
+  });
+
   ruler.push('left', {
     tag: 'left',
     wrap: wrap('div', 'class', ()=>'bbcodeleft')
@@ -86,6 +91,7 @@ export function setup(helper) {
   helper.whiteList([
     'div.floatl',
     'div.floatr',
+    'div.floatc',
     'div.bbcodeleft',
     'div.bbcodecenter',
     'div.bbcoderight',
@@ -115,6 +121,7 @@ export function setup(helper) {
   replaceBBCode("small", contents => ['span', {'style': 'font-size:x-small'}].concat(contents));
   replaceBBCode("floatl", contents => ['div', {'class': 'floatl'}].concat(contents));
   replaceBBCode("floatr", contents => ['div', {'class': 'floatr'}].concat(contents));
+  replaceBBCode("floatc", contents => ['div', {'class': 'floatc'}].concat(contents));
   replaceBBCode("left", contents => ['div', {'class': 'bbcodeleft'}].concat(contents));
   replaceBBCode("center", contents => ['div', {'class': 'bbcodecenter'}].concat(contents));
   replaceBBCode("right", contents => ['div', {'class': 'bbcoderight'}].concat(contents));

diff --git a/assets/stylesheets/formatting.scss b/assets/stylesheets/formatting.scss
@@ -8,6 +8,10 @@
 	margin-left:10px;
 }
 
+.floatc {
+	clear: both;
+}
+
 .bbcodeleft {
     text-align: left;
 }
@@ -26,4 +30,16 @@
 
 .topic-body .cooked .bbcodeleft, .topic-body .cooked .bbcodecenter, .topic-body .cooked .bbcoderight, .topic-body .cooked .bbcodejustify {
 	margin-bottom: 1em;
+}
+
+@media (max-width: 960px) {
+	#reply-control .bullet, #reply-control .list, #reply-control .left_ui_button, #reply-control .justify_ui_button, #reply-control .color_ui_button, #reply-control .size_ui_button {
+		display: none;
+	}
+}
+
+@media (max-width: 600px) {
+	#reply-control .addimg_ui_button, #reply-control .floatl_ui_button {
+		display: none;
+	}
 }