Browse Source

get basic layout working

master
scossar 9 years ago
parent
commit
4033c1f6db
2 changed files with 189 additions and 31 deletions
  1. +68
    -7
      assets/javascripts/image-tag-whitelist.js
  2. +121
    -24
      assets/stylesheets/aligned-images.scss

+ 68
- 7
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');
})();

+ 121
- 24
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;
}

Loading…
Cancel
Save