Merge pull request #101 from RpNation/code/rowsAndColumns

Code/rows and columns

README.md

@@ -59,7 +59,7 @@ The goal of this repo and plugin is to provide users with the BBCode suite that
 - [x] Scroll Box
 - [ ] Div Box
 - [x] Anchors
-- [ ] Rows & Columns
+- [x] Rows & Columns
 
 ## Media & Embeds
 

assets/javascripts/lib/discourse-markdown/bbcode-plugin.js

@@ -120,6 +120,7 @@ export function setup(helper) {
     "div.bb-border",
     "div.bb-center",
     "div.bb-check",
+    "div.bb-column",
     "div.bb-email",
     "div.bb-email-address",
     "div.bb-email-button",
@@ -149,6 +150,7 @@ export function setup(helper) {
     "div.bb-progress-thin",
     "div.bb-ooc",
     "div.bb-right",
+    "div.bb-row",
     "div.bb-scroll",
     "div.bb-side",
     "div.bb-slide-content",

assets/stylesheets/common/index.scss

@@ -19,6 +19,7 @@
 @import "pindent.scss";
 @import "print.scss";
 @import "progress.scss";
+@import "rowcolumn.scss";
 @import "scroll.scss";
 @import "side.scss";
 @import "size.scss";

assets/stylesheets/common/rowcolumn.scss

@@ -0,0 +1,62 @@
+.bb-row {
+  width: 100%;
+  clear: both;
+  margin: 0;
+}
+
+.bb-row .bb-column {
+  margin: 0 0.5%;
+  padding: 0 0.5%;
+  float: left;
+}
+
+.bb-column {
+  margin: 0 0.5%;
+  padding: 0 0.5%;
+  float: left;
+  &[data-span="column-width-span1"] {
+    width: 13.5%;
+  }
+  &[data-span="column-width-span2"] {
+    width: 23%;
+  }
+  &[data-span="column-width-span3"] {
+    width: 41%;
+  }
+  &[data-span="column-width-span4"] {
+    width: 48%;
+  }
+  &[data-span="column-width-span5"] {
+    width: 66%;
+  }
+  &[data-span="column-width-span6"] {
+    width: 79%;
+  }
+  &[data-span="column-width-span7"] {
+    width: 91%;
+  }
+  &[data-span="column-width-span8"] {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .bb-row {
+    &[data-span="column-width-span1"],
+    &[data-span="column-width-span2"],
+    &[data-span="column-width-span3"],
+    &[data-span="column-width-span4"],
+    &[data-span="column-width-span5"],
+    &[data-span="column-width-span6"],
+    &[data-span="column-width-span7"],
+    &[data-span="column-width-span8"] {
+      width: 100%;
+    }
+
+    .bb-column {
+      margin: 0;
+      padding: 0;
+      float: none;
+    }
+  }
+}

bbcode-src/preset.js

@@ -27,6 +27,7 @@ import { pindent } from "./tags/pindent";
 import { plain } from "./tags/plain";
 import { print } from "./tags/print";
 import { progress } from "./tags/progress";
+import { rowcolumn } from './tags/rowcolumn';
 import { thinprogress } from "./tags/thinprogress";
 import { scroll } from "./tags/scroll";
 import { side } from "./tags/side";
@@ -86,6 +87,7 @@ const tags = {
   plain,
   print,
   progress,
+  ...rowcolumn,
   thinprogress,
   savenl,
   sh,

bbcode-src/tags/rowcolumn.js

@@ -0,0 +1,16 @@
+import { preprocessAttr, toNode } from "../utils/common";
+
+/**
+ * @file Adds [row][column] to bbcode
+ * @example Adds [row][column][/column][/row]
+ */
+export const rowcolumn = {
+  row: (node) => toNode("div", { class: "bb-row" }, node.content),
+  column: (node) => {
+    const columnAttrs = preprocessAttr(node.attrs)._default || "8";
+    const columnStyle = columnAttrs.startsWith("span")
+      ? `column-width-${columnAttrs}`
+      : `column-width-span${columnAttrs}`;
+    return toNode("div", { class: `bb-column`, "data-span": columnStyle }, node.content);
+  },
+};