ongoing tweaks to allow text to have formatting

wagtail/wagtailadmin/blocks.py

@@ -67,6 +67,7 @@ class Block(six.with_metaclass(BaseBlock, object)):
     class Meta:
         label = None
         icon = "streamfield-block-placeholder"
+        classname = None
 
     """
     Setting a 'dependencies' list serves as a shortcut for the common case where a complex block type
@@ -283,8 +284,6 @@ class FieldBlock(Block):
     def render_form(self, value, prefix='', error=None):
         widget = self.field.widget
 
-        widget_html = widget.render(prefix, value, {'id': prefix})
-
         #if error:
         #    error_html = str(ErrorList(error.error_list))
         #else:
@@ -298,7 +297,7 @@ class FieldBlock(Block):
         else:
             label_html = ''
 
-        widget_html = widget.render(prefix, value, {'id': prefix, 'placeholder': self.label})
+        widget_html = widget.render(prefix, value, {'id': prefix, 'placeholder': self.label.title() })
 
         #if error:
         #    error_html = str(ErrorList(error.error_list))
@@ -306,6 +305,8 @@ class FieldBlock(Block):
         #    error_html = ''        
 
         return render_to_string('wagtailadmin/block_forms/field.html', {
+            'label': self.label,
+            'classname': self.meta.classname,
             'widget': widget_html,
             'label_tag': label_html,
             'field': self.field,

wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss

@@ -153,16 +153,6 @@
             padding:0;
         }
 
-        input, textarea, .richtext{
-            @include nice-padding();
-            @include border-radius(0px);
-            font-family:Bitter, Georgia, serif;
-            padding-top:2em;
-            padding-bottom:2em;
-            font-size:1.2em;
-            line-height:1.6em;
-        }
-
         .richtext{
             padding-top:3em; /* to provide space for editor buttons */
             padding-bottom:3em;
@@ -250,6 +240,7 @@
                     padding:0;
                     color:$color-grey-2;
                     line-height:2.2em;
+                    text-transform:capitalize;
                 }
             }
 
@@ -259,7 +250,6 @@
                     opacity:1;
                 }
             }
-
         }       
 
         .struct-block > ul > li{ /* duplicates forms.scss ln.568 */
@@ -315,6 +305,8 @@
         position:relative;
         background-color:$color-grey-1;
         border-top:1px solid transparent;
+        opacity:0;
+
 
         .stream-menu-inner{
             max-width:50em;
@@ -407,19 +399,28 @@
 
             &:before{
                 @include transform(rotate(0deg));
-                color:$color-teal;
+                color:$color-grey-3;
                 background-color:white;
             }    
         }
         &.stream-menu-closed:hover{
             border-top-color:$color-teal;
+
+            &:before{
+                color:$color-teal;
+            }
         }
     }
     .sequence-member .stream-menu{
         margin:auto auto 1em auto;
     }
-    .sequence-member:hover .stream-controls{
-        opacity:1;
+    .sequence-member:hover{
+        .stream-controls{
+            opacity:1;
+        }
+        .stream-menu{
+            opacity:1;
+        }
     }
 
 
@@ -434,17 +435,6 @@
        
     }
 
-    &.title input,
-    &.title textarea{
-        font-size:2em;
-        padding-top:2em;
-    }
-
-    &.title input{
-        padding-top:1.5em;
-        padding-bottom:1.5em;
-    }
-
     .multiple{
         padding:4.5em 0 0 0;
 
@@ -549,6 +539,51 @@
     }
 }
 
+.full input, textarea, .richtext{
+    @include nice-padding();
+    @include border-radius(0px);
+    padding-top:2em;
+    padding-bottom:2em;
+    font-size:1.2em;
+    line-height:1.6em;
+}
+
+.title input,
+.title textarea,
+.title .richtext{
+    font-family:Bitter, Georgia, serif;
+}
+
+.title.h2 input,
+.title.h2 textarea,
+.title.h2 .richtext{
+    font-size:2em;
+}
+
+.title.h3 input,
+.title.h3 textarea
+.title.h3 .richtext{
+    font-size:1.8em;
+}
+
+.title.h4 input,
+.title.h4 textarea,
+.title.h4 .richtext{
+    font-size:1.5em;
+}
+
+.intro input,
+.intro textarea,
+.intro .richtext{
+    font-size:1.4em;
+}
+
+.quote input{
+    font-style: italic;
+}
+
+
+
 footer .preview{
     button, .button{
         background-color:lighten($color-grey-2,10%);

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/field.html

@@ -1,5 +1,5 @@
 {% load wagtailadmin_tags %}
-<div class="field {{ field|fieldtype }}">
+<div class="field {{ field|fieldtype }} {{ classname }} {{ label }}">
     {{ label_tag }}
     <div class="field-content">
         <div class="input">

wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_menu.html

@@ -2,7 +2,7 @@
     <div class="stream-menu-inner">
         <ul>
             {% for child_block in child_blocks %}
-                <li><button type="button" id="{{ prefix }}-add-{{ child_block.name }}" class="block-{{ child_block.name|slugify }} icon icon-{{ child_block.icon }}"><span>{{ child_block.label }}</span></button></li>
+                <li><button type="button" id="{{ prefix }}-add-{{ child_block.name }}" class="block-{{ child_block.name|slugify }} icon icon-{{ child_block.meta.icon }}"><span>{{ child_block.label }}</span></button></li>
             {% endfor %}
         </ul>
     </div>