From 4033c1f6dbb90116284e8cf4ab2636a517326a93 Mon Sep 17 00:00:00 2001 From: scossar Date: Sat, 31 Oct 2015 10:53:46 -0700 Subject: [PATCH] get basic layout working --- assets/javascripts/image-tag-whitelist.js | 75 ++++++++++++++-- assets/stylesheets/aligned-images.scss | 145 +++++++++++++++++++++++++----- 2 files changed, 189 insertions(+), 31 deletions(-) diff --git a/assets/javascripts/image-tag-whitelist.js b/assets/javascripts/image-tag-whitelist.js index c389a85..b8c3d12 100644 --- a/assets/javascripts/image-tag-whitelist.js +++ b/assets/javascripts/image-tag-whitelist.js @@ -1,9 +1,70 @@ (function () { - Discourse.Markdown.whiteListTag('figure', 'class', 'left-half'); - Discourse.Markdown.whiteListTag('figure', 'class', 'right-half'); - Discourse.Markdown.whiteListTag('figure', 'class', 'left-third'); - Discourse.Markdown.whiteListTag('figure', 'class', 'right-third'); - Discourse.Markdown.whiteListTag('figure', 'class', 'left-quarter'); - Discourse.Markdown.whiteListTag('figure', 'class', 'right-quarter'); - Discourse.Markdown.whiteListTag('figure', 'data-max-width', /\d+\%?$/ ); + Discourse.Markdown.whiteListTag('figure', 'class', 'quarter'); + Discourse.Markdown.whiteListTag('figure', 'class', 'third'); + Discourse.Markdown.whiteListTag('figure', 'class', 'half'); + Discourse.Markdown.whiteListTag('figure', 'class', 'two-thirds'); + Discourse.Markdown.whiteListTag('figure', 'class', 'three-quarters'); + Discourse.Markdown.whiteListTag('figure', 'class', 'right'); + Discourse.Markdown.whiteListTag('figure', 'class', 'last'); + + // quarter + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|right)\s+(right|quarter)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|last)\s+(quarter|last)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(quarter|last|right)\s+(quarter|last|right)\s+(quarter|last|right)\s*$/); + + // third + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|right)\s+(right|third)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|last)\s+(third|last)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(third|last|right)\s+(third|last|right)\s+(third|last|right)\s*$/); + + // half + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|right)\s+(right|half)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|last)\s+(half|last)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(half|last|right)\s+(half|last|right)\s+(half|last|right)\s*$/); + + // two-thirds + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|right)\s+(right|two-thirds)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|last)\s+(two-thirds|last)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(two-thirds|last|right)\s+(two-thirds|last|right)\s+(two-thirds|last|right)\s*$/); + + // three-quarters + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|right)\s+(right|three-quarters)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|last)\s+(three-quarters|last)\s*$/); + Discourse.Markdown.whiteListTag('figure', 'class', /^\s*(three-quarters|last|right)\s+(three-quarters|last|right)\s+(three-quarters|last|right)\s*$/); + + // paragraphs + Discourse.Markdown.whiteListTag('div', 'class', 'quarter'); + Discourse.Markdown.whiteListTag('div', 'class', 'third'); + Discourse.Markdown.whiteListTag('div', 'class', 'half'); + Discourse.Markdown.whiteListTag('div', 'class', 'two-thirds'); + Discourse.Markdown.whiteListTag('div', 'class', 'three-quarters'); + Discourse.Markdown.whiteListTag('div', 'class', 'right'); + Discourse.Markdown.whiteListTag('div', 'class', 'last'); + + // quarter + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|right)\s+(right|quarter)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|last)\s+(quarter|last)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(quarter|last|right)\s+(quarter|last|right)\s+(quarter|last|right)\s*$/); + + // third + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|right)\s+(right|third)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|last)\s+(third|last)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(third|last|right)\s+(third|last|right)\s+(third|last|right)\s*$/); + + // half + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|right)\s+(right|half)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|last)\s+(half|last)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(half|last|right)\s+(half|last|right)\s+(half|last|right)\s*$/); + + // two-thirds + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|right)\s+(right|two-thirds)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|last)\s+(two-thirds|last)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(two-thirds|last|right)\s+(two-thirds|last|right)\s+(two-thirds|last|right)\s*$/); + + // three-quarters + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|right)\s+(right|three-quarters)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|last)\s+(three-quarters|last)\s*$/); + Discourse.Markdown.whiteListTag('div', 'class', /^\s*(three-quarters|last|right)\s+(three-quarters|last|right)\s+(three-quarters|last|right)\s*$/); + + Discourse.Markdown.whiteListTag('hr', 'class', 'clear'); })(); \ No newline at end of file diff --git a/assets/stylesheets/aligned-images.scss b/assets/stylesheets/aligned-images.scss index 709d9f5..910f94e 100644 --- a/assets/stylesheets/aligned-images.scss +++ b/assets/stylesheets/aligned-images.scss @@ -1,4 +1,4 @@ -$figure-margin: 14px; +$post-margin: 14px; .cooked { box-sizing: border-box; @@ -11,21 +11,29 @@ $figure-margin: 14px; box-sizing: inherit; } -.cooked > *:first-child { - margin-top: $figure-margin; -} +//.cooked > *:first-child { +// margin-top: $post-margin; +//} .cooked p { - padding-right: $figure-margin; + margin-top: 0; } .cooked hr { clear: both; } +.cooked .clear { + clear: both; + background: #fff; // Change this to the bg color variable + margin: 0; + height: 0; + border: none; +} + figure { width: 100%; - margin: $figure-margin 0; + margin: 0 0 $post-margin 0; } .post-menu-area { @@ -37,38 +45,127 @@ figure img { height: auto; } -.left-half { +// quarter +// ============== + +.quarter { + width: calc(25% - (3/4 * #{$post-margin}));; + float: left; + margin-right: $post-margin; +} + +.quarter.right { + float: right; + margin-right: 0; + margin-left: $post-margin; +} + +.quarter.last { + margin-right: 0; + margin-left: 0; +} + +.quarter.right.last { + margin-left: 0; + margin-right: 0; +} + +// third +// =============== + +.third { + width: calc(33.3333% - (2/3 * #{$post-margin})); + float: left; + margin-right: $post-margin; +} + +.third.right { + float: right; + margin-right: 0; + margin-left: $post-margin; +} + +.third.last { + margin-right: 0; + margin-left: 0; +} + +.third.right.last { + margin-left: 0; + margin-right: 0; +} + +// half +// ================== + +.half { + width: calc(50% - (1/2 * #{$post-margin})); float: left; - width: 50%; - padding-right: $figure-margin; + margin-right: $post-margin; } -.right-half { +.half.right { float: right; - width: 50%; - padding-right: $figure-margin; + margin-right: 0; + margin-left: $post-margin; +} + +.half.last { + margin-right: 0; + margin-left: 0; +} + +.half.right.last { + margin-left: 0; + margin-right: 0; } -.left-third { +// two thirds +// ================== + +.two-thirds { + width: calc(66.6666% - (1/3 * #{$post-margin})); float: left; - width: 33.3333%; - padding-right: $figure-margin; + margin-right: $post-margin; } -.right-third { +.two-thirds.right { float: right; - width: 33.3333%; - padding-right: $figure-margin; + margin-right: 0; + margin-left: $post-margin; +} + +.two-thirds.last { + margin-right: 0; + margin-left: 0; +} + +.two-thirds.right.last { + margin-left: 0; + margin-right: 0; } -.left-quarter { +// three quarters +// ================== + +.three-quarters { + width: calc(75% - (1/4 * #{$post-margin})); float: left; - width: 25%; - padding-right: $figure-margin; + margin-right: $post-margin; } -.right-quarter { +.three-quarters.right { float: right; - width: 25%; - padding-right: $figure-margin; + margin-right: 0; + margin-left: $post-margin; } + +.three-quarters.last { + margin-right: 0; + margin-left: 0; +} + +.three-quarters.right.last { + margin-left: 0; + margin-right:0; +} \ No newline at end of file