From: Jeanie Chung Date: Tue, 27 Jan 2015 18:42:56 +0000 (-0800) Subject: Added DOCTYPE to index.html so that media queries somehow magically work. Changed... X-Git-Tag: v2.0.0-rc.1~155 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5bfdec4288389464f68e6dd361f78fee74433aa2;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Added DOCTYPE to index.html so that media queries somehow magically work. Changed col creator to account for new syntax of columns. --- diff --git a/html/index.html b/html/index.html index 54deb0ce..dcde7445 100644 --- a/html/index.html +++ b/html/index.html @@ -1,38 +1,34 @@ + - + -

Hello there!

This is an email.

- - - - I'm evenly - - distributed - into 3 columns - - - - - - - .large-4 .small-8 - - .large-4 .small-2 - .large-4 .small-2 - - +

+ + + + +

I'm even

+ + asdlfkjadsf + + +

I'm even

+ + asdlfkjadsf + + + + +

diff --git a/js/components/col.js b/js/components/col.js index bccddfe7..5643e9be 100644 --- a/js/components/col.js +++ b/js/components/col.js @@ -2,59 +2,57 @@ var createCol = function(obj) { - var output = ''; - var mQ = {small: 0, large: 0}; - var colEven = ''; - - $.each(obj, function() { - var col = $(this); - - // do the maths first - $.each( mQ, function(i, val) { - if (!col.attr(i)) { - // count the number of columns that do not have a specified width - mQ[i]++; - - // at the final iteration - if (mQ[i] === obj.length) { - // divide the default grid number by the number of colums with no width - var evenSplit = Math.floor( 12 / (mQ[i]) ); - - // append the missing class to the column class - colEven += i + '-' + evenSplit + ' '; - } - }; - }); - }); + var output = ''; - $.each(obj, function(v,k) { - var temp = '' - var contents = $(this).html(); - var colClass = 'columns ' + $(this).attr('class'); - var colNum = ''; - var col = $(this); + // create tables with column class for each nested element + var colElements = function(elements, colSize) { + var colHTML = ''; - $.each( mQ, function(i, val) { - if (col.attr(i)) { - colNum += i + '-' + col.attr(i) + ' '; + $.each(elements, function(i, el) { + // get included tags + var contents = $(el)[0].outerHTML; + var colClass = 'columns '; + + // transclude any class that might have been added onto element + if ($(el).attr('class')) { + colClass += $(el).attr('class'); }; - }); - // check if this is the last element in the row - // add previously calculated even class - if (v !== obj.length - 1) { - temp = '' - +'' + // construct column class for each element + colHTML += '

' +'

' - + contents +'

'; + + contents +''; + }); + + return colHTML; + }; + + // create tables with wrapper class for each column + $.each(obj, function(k,v) { + var wrapperHTML = ''; + var colSize = ''; + var col = $(this); + var elements = $(this).children(); + + // if wrapper is last or the only one, put last class + if (k === obj.length - 1) { + wrapperHTML += ''; } else { - temp = '' - +'' - +'

' - + contents +'

'; - } + wrapperHTML += ''; + } + + // check for sizes + if (col.attr('small')) { + colSize += 'small' + '-' + col.attr('small') + ' '; + } + if (col.attr('large')) { + colSize += 'large' + '-' + col.attr('large') + ' '; + } + + wrapperHTML += colElements(elements, colSize); + wrapperHTML += ''; - output += temp; + output += wrapperHTML; }); return output; diff --git a/scss/ink.scss b/scss/ink.scss index abd52a24..7eef71a8 100755 --- a/scss/ink.scss +++ b/scss/ink.scss @@ -22,75 +22,3 @@ background: #00558B; font-family: Helvetica; } - - .container{ - background:#fff; - border:1px solid #eee; - width:500px; - padding:20px; - margin:20px auto; - } - h1{ - font-size:32px; - text-align:center; - font-weight:400; - } - - .inky { - background: url(http://zurb.com/ink/images/inky-all-devices.svg) no-repeat center center; - background-size: cover; - height: 680px; - width: 634px; - position: absolute; - right: 0px; - top: 10px !important; - } - - .inky.loaded { - animation-name: inky-float; - -webkit-animation-name: inky-float; - animation-duration: 5s; - -webkit-animation-duration: 5s; - animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - } - - @keyframes inky-float { - 0% { - transform: translateY(0%); - } - - 50% { - transform: translateY(2%); - } - - 100% { - transform: translateY(0%); - } - } - - @-webkit-keyframes inky-float { - 0% { - -webkit-transform: translateY(0%); - } - - 50% { - -webkit-transform: translateY(2%); - } - - 100% { - -webkit-transform: translateY(0%); - } - } - - .blue { - background-color: blue; - } - - .red { - background-color: red; - } - - .green { - background-color: green; - }