simplify markup

swiggins · Oct 26, 2015 · 9937da3 · 9937da3
1 parent c877ce7
commit 9937da3
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 146 deletions.
diff --git a/examples/advanced.jade b/examples/advanced.jade
@@ -35,9 +35,31 @@ html
       }
 
   body
-    #content-container
-      .basic-wrapper
-        .toolbar-container
+    .basic-wrapper
+      .toolbar-container
+        select.ql-font(title='Font')
+          option(value='sans-serif', selected) Sans Serif
+          option(value='Georgia, serif') Serif
+          option(value='Monaco, \'Courier New\', monospace') Monospace
+        select.ql-size(title='Size')
+          option(value='10px') Small
+          option(value='13px', selected) Normal
+          option(value='18px') Large
+          option(value='32px') Huge
+        select.ql-align(title='Text Alignment')
+          option(value='left', selected) Left
+          option(value='center') Center
+          option(value='right') Right
+          option(value='justify') Justify
+        button.ql-bold(title='Bold') Bold
+        button.ql-italic(title='Italic') Italic
+        button.ql-underline(title='Underline') Under
+        button.ql-list(title='List') List
+      .editor-container
+
+    .advanced-wrapper
+      .toolbar-container
+        span.ql-format-group
           select.ql-font(title='Font')
             option(value='sans-serif', selected) Sans Serif
             option(value='Georgia, serif') Serif
@@ -47,54 +69,31 @@ html
             option(value='13px', selected) Normal
             option(value='18px') Large
             option(value='32px') Huge
-          select.ql-align(title='Text Alignment')
-            option(value='left', selected) Left
-            option(value='center') Center
-            option(value='right') Right
-            option(value='justify') Justify
-          button.ql-bold(title='Bold') Bold
-          button.ql-italic(title='Italic') Italic
-          button.ql-underline(title='Underline') Under
-          button.ql-list(title='List') List
-        .editor-container
-
-      .advanced-wrapper
-        .toolbar-container
-          span.ql-format-group
-            select.ql-font(title='Font')
-              option(value='sans-serif', selected) Sans Serif
-              option(value='Georgia, serif') Serif
-              option(value='Monaco, \'Courier New\', monospace') Monospace
-            select.ql-size(title='Size')
-              option(value='10px') Small
-              option(value='13px', selected) Normal
-              option(value='18px') Large
-              option(value='32px') Huge
-          span.ql-format-group
-            span.ql-format-button.ql-bold(title='Bold')
-            span.ql-format-separator
-            span.ql-format-button.ql-italic(title='Italic')
+        span.ql-format-group
+          span.ql-format-button.ql-bold(title='Bold')
+          span.ql-format-separator
+          span.ql-format-button.ql-italic(title='Italic')
+          span.ql-format-separator
+          span.ql-format-button.ql-underline(title='Underline')
+        span.ql-format-group
+          each c in ['ql-color', 'ql-background']
+            select(class=c, title=(c=='ql-color'?'Text Color':'Background Color'))
+              each color,i in colors
+                option(value=color, selected=((c == 'ql-color' && color == 'rgb(0, 0, 0)') || (c == 'ql-background' && color == 'rgb(255, 255, 255)') ? true : false))
+            if c == 'ql-color'
             span.ql-format-separator
-            span.ql-format-button.ql-underline(title='Underline')
-          span.ql-format-group
-            each c in ['ql-color', 'ql-background']
-              select(class=c, title=(c=='ql-color'?'Text Color':'Background Color'))
-                each color,i in colors
-                  option(value=color, selected=((c == 'ql-color' && color == 'rgb(0, 0, 0)') || (c == 'ql-background' && color == 'rgb(255, 255, 255)') ? true : false))
-              if c == 'ql-color'
-              span.ql-format-separator
-            select.ql-align(title='Text Alignment')
-              option(value='left', selected)
-              option(value='center')
-              option(value='right')
-              option(value='justify')
-          span.ql-format-group
-            span.ql-format-button.ql-link(title='Link')
-            span.ql-format-separator
-            span.ql-format-button.ql-image(title='Image')
-            span.ql-format-separator
-            span.ql-format-button.ql-list(title='List')
-        .editor-container
+          select.ql-align(title='Text Alignment')
+            option(value='left', selected)
+            option(value='center')
+            option(value='right')
+            option(value='justify')
+        span.ql-format-group
+          span.ql-format-button.ql-link(title='Link')
+          span.ql-format-separator
+          span.ql-format-button.ql-image(title='Image')
+          span.ql-format-separator
+          span.ql-format-button.ql-list(title='List')
+      .editor-container
 
     script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js')
     script(type='text/javascript', src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js')

diff --git a/examples/index.jade b/examples/index.jade
@@ -10,6 +10,8 @@ html
         padding: 25px;
       }
       #content-container {
+        border: 1px solid #aaa;
+        box-shadow: 0 0 2px 2px #ddd;
         margin: auto;
         width: 960px;
       }
@@ -25,57 +27,52 @@ html
       #editor-container {
         height: 500px;
       }
-      #editor-wrapper {
-        border: 1px solid #aaa;
-        box-shadow: 0 0 2px 2px #ddd;
-      }
 
   body
     #content-container
-      #editor-wrapper
-        #formatting-container
-          select.ql-font(title='Font')
-            option(value='sans-serif', selected) Sans Serif
-            option(value='Georgia, serif') Serif
-            option(value='Monaco, \'Courier New\', monospace') Monospace
-          select.ql-size(title='Size')
-            option(value='10px') Small
-            option(value='13px', selected) Normal
-            option(value='18px') Large
-            option(value='32px') Huge
-          select.ql-color(title='Text Color')
-            option(value='rgb(255, 255, 255)') White
-            option(value='rgb(0, 0, 0)', selected) Black
-            option(value='rgb(255, 0, 0)') Red
-            option(value='rgb(0, 0, 255)') Blue
-            option(value='rgb(0, 255, 0)') Lime
-            option(value='rgb(0, 128, 128)') Teal
-            option(value='rgb(255, 0, 255)') Magenta
-            option(value='rgb(255, 255, 0)') Yellow
-          select.ql-background(title='Background Color')
-            option(value='rgb(255, 255, 255)', selected) White
-            option(value='rgb(0, 0, 0)') Black
-            option(value='rgb(255, 0, 0)') Red
-            option(value='rgb(0, 0, 255)') Blue
-            option(value='rgb(0, 255, 0)') Lime
-            option(value='rgb(0, 128, 128)') Teal
-            option(value='rgb(255, 0, 255)') Magenta
-            option(value='rgb(255, 255, 0)') Yellow
-          select.ql-align(title='Text Alignment')
-            option(value='left', selected) Left
-            option(value='center') Center
-            option(value='right') Right
-            option(value='justify') Justify
-          button.ql-bold(title='Bold') Bold
-          button.ql-italic(title='Italic') Italic
-          button.ql-underline(title='Underline') Under
-          button.ql-strike(title='Strikethrough') Strike
-          button.ql-link(title='Link') Link
-          button.ql-image(title='Image') Image
-          button.ql-bullet(title='Bullet') Bullet
-          button.ql-list(title='List') List
-        #editor-container
-          p Test
+      #formatting-container
+        select.ql-font(title='Font')
+          option(value='sans-serif', selected) Sans Serif
+          option(value='Georgia, serif') Serif
+          option(value='Monaco, \'Courier New\', monospace') Monospace
+        select.ql-size(title='Size')
+          option(value='10px') Small
+          option(value='13px', selected) Normal
+          option(value='18px') Large
+          option(value='32px') Huge
+        select.ql-color(title='Text Color')
+          option(value='rgb(255, 255, 255)') White
+          option(value='rgb(0, 0, 0)', selected) Black
+          option(value='rgb(255, 0, 0)') Red
+          option(value='rgb(0, 0, 255)') Blue
+          option(value='rgb(0, 255, 0)') Lime
+          option(value='rgb(0, 128, 128)') Teal
+          option(value='rgb(255, 0, 255)') Magenta
+          option(value='rgb(255, 255, 0)') Yellow
+        select.ql-background(title='Background Color')
+          option(value='rgb(255, 255, 255)', selected) White
+          option(value='rgb(0, 0, 0)') Black
+          option(value='rgb(255, 0, 0)') Red
+          option(value='rgb(0, 0, 255)') Blue
+          option(value='rgb(0, 255, 0)') Lime
+          option(value='rgb(0, 128, 128)') Teal
+          option(value='rgb(255, 0, 255)') Magenta
+          option(value='rgb(255, 255, 0)') Yellow
+        select.ql-align(title='Text Alignment')
+          option(value='left', selected) Left
+          option(value='center') Center
+          option(value='right') Right
+          option(value='justify') Justify
+        button.ql-bold(title='Bold') Bold
+        button.ql-italic(title='Italic') Italic
+        button.ql-underline(title='Underline') Under
+        button.ql-strike(title='Strikethrough') Strike
+        button.ql-link(title='Link') Link
+        button.ql-image(title='Image') Image
+        button.ql-bullet(title='Bullet') Bullet
+        button.ql-list(title='List') List
+      #editor-container
+        p Test
 
     script(type='text/javascript', src='../quill.js')
     script(type='text/javascript').

diff --git a/examples/snow.jade b/examples/snow.jade
@@ -7,9 +7,13 @@ html
     link(rel='stylesheet', type='text/css', href='../quill.snow.css')
     meta(charset='utf-8')
     style.
+      body {
+        padding: 25px;
+      }
       #content-container {
+        border: 1px solid #aaa;
+        box-shadow: 0 0 2px 2px #ddd;
         margin: auto;
-        padding: 25px;
         width: 960px;
       }
       #formatting-container {
@@ -18,56 +22,51 @@ html
       #editor-container {
         height: 500px;
       }
-      #editor-wrapper {
-        border: 1px solid #aaa;
-        box-shadow: 0 0 2px 2px #ddd;
-      }
 
   body
     #content-container
-      #editor-wrapper
-        #formatting-container
-          span.ql-format-group
-            select.ql-font(title='Font')
-              option(value='sans-serif', selected) Sans Serif
-              option(value='Georgia, serif') Serif
-              option(value='Monaco, \'Courier New\', monospace') Monospace
-            select.ql-size(title='Size')
-              option(value='10px') Small
-              option(value='13px', selected) Normal
-              option(value='18px') Large
-              option(value='32px') Huge
-          span.ql-format-group
-            span.ql-format-button.ql-bold(title='Bold')
-            span.ql-format-separator
-            span.ql-format-button.ql-italic(title='Italic')
-            span.ql-format-separator
-            span.ql-format-button.ql-underline(title='Underline')
-            span.ql-format-separator
-            span.ql-format-button.ql-strike(title='Strikethrough')
-          span.ql-format-group
-            each c in ['ql-color', 'ql-background']
-              select(class=c, title=(c=='ql-color'?'Text Color':'Background Color'))
-                each color,i in colors
-                  option(value=color, selected=((c == 'ql-color' && color == 'rgb(0, 0, 0)') || (c == 'ql-background' && color == 'rgb(255, 255, 255)') ? true : false))
-              if c == 'ql-color'
-                span.ql-format-separator
-          span.ql-format-group
-            span.ql-format-button.ql-bullet(title='Bullet')
-            span.ql-format-separator
-            span.ql-format-button.ql-list(title='List')
-            span.ql-format-separator
-            select.ql-align(title='Text Alignment')
-              option(value='left', selected)
-              option(value='center')
-              option(value='right')
-              option(value='justify')
-          span.ql-format-group
-            span.ql-format-button.ql-link(title='Link')
-            span.ql-format-separator
-            span.ql-format-button.ql-image(title='Image')
-        #editor-container
-          p Test
+      #formatting-container
+        span.ql-format-group
+          select.ql-font(title='Font')
+            option(value='sans-serif', selected) Sans Serif
+            option(value='Georgia, serif') Serif
+            option(value='Monaco, \'Courier New\', monospace') Monospace
+          select.ql-size(title='Size')
+            option(value='10px') Small
+            option(value='13px', selected) Normal
+            option(value='18px') Large
+            option(value='32px') Huge
+        span.ql-format-group
+          span.ql-format-button.ql-bold(title='Bold')
+          span.ql-format-separator
+          span.ql-format-button.ql-italic(title='Italic')
+          span.ql-format-separator
+          span.ql-format-button.ql-underline(title='Underline')
+          span.ql-format-separator
+          span.ql-format-button.ql-strike(title='Strikethrough')
+        span.ql-format-group
+          each c in ['ql-color', 'ql-background']
+            select(class=c, title=(c=='ql-color'?'Text Color':'Background Color'))
+              each color,i in colors
+                option(value=color, selected=((c == 'ql-color' && color == 'rgb(0, 0, 0)') || (c == 'ql-background' && color == 'rgb(255, 255, 255)') ? true : false))
+            if c == 'ql-color'
+              span.ql-format-separator
+        span.ql-format-group
+          span.ql-format-button.ql-bullet(title='Bullet')
+          span.ql-format-separator
+          span.ql-format-button.ql-list(title='List')
+          span.ql-format-separator
+          select.ql-align(title='Text Alignment')
+            option(value='left', selected)
+            option(value='center')
+            option(value='right')
+            option(value='justify')
+        span.ql-format-group
+          span.ql-format-button.ql-link(title='Link')
+          span.ql-format-separator
+          span.ql-format-button.ql-image(title='Image')
+      #editor-container
+        p Test
 
     script(type='text/javascript', src='../quill.js')
     script(type='text/javascript').