FLUID-5289: Fixes to text, styling

fluid-project · Apr 19, 2014 · b60003a · b60003a
1 parent 3094a07
commit b60003a
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 115 deletions.
diff --git a/src/demos/inlineEdit/rich/css/InlineEdit.css b/src/demos/inlineEdit/rich/css/InlineEdit.css
@@ -1,5 +1,8 @@
 /* Themed Appearance + Themed States */
 
+h1.demo-start {
+    margin-top: 3em;
+}
 .demo-inlineEdit-inlinePadding {
     padding: 5px;
 }   
diff --git a/src/demos/inlineEdit/rich/index.html b/src/demos/inlineEdit/rich/index.html
@@ -49,7 +49,7 @@
         <div class="flc-overviewPanel fl-overviewPanel-container"></div>
 
         <!-- Inline Edit with a Tiny MCE editor. -->
-        <h1>Rich Text Inline Edit with Tiny MCE</h1>
+        <h1 class="demo-start">Rich Text Inline Edit with Tiny MCE</h1>
         <div id="demo-richInlineEdit-container-tinyMCE">
             <div class="flc-inlineEdit-text">
                 <p>After a hiatus, <strong>Portishead</strong> is back with their first studio

diff --git a/src/demos/inlineEdit/simple/css/InlineEdit.css b/src/demos/inlineEdit/simple/css/InlineEdit.css
@@ -10,6 +10,7 @@
 
 .demo-inlineEdit-indent {
     margin: 1em;
+    margin-top: 4em;
 }
 
 .demo-undoContainer :focus,

diff --git a/src/demos/inlineEdit/simple/index.html b/src/demos/inlineEdit/simple/index.html
@@ -41,25 +41,27 @@
         <title>Inline Edit Demo</title>
     </head>
 
-    <body class="demo-inlineEdit-indent">
+    <body>
         <div class="flc-overviewPanel fl-overviewPanel-container"></div>
-		<p class="demo-inlineEdit-p"><strong>Mouse instructions:</strong> Click an editable area to activate the text area. Use the 'Escape' key to cancel, or the 'Enter,' 'Return' or 'Tab' key to finish editing.</p>
-		<p class="demo-inlineEdit-p"><strong>Keyboard instructions:</strong> Use the 'Enter' or 'Return' key to activate the text area. Use the 'Escape' button to cancel, or the 'Enter,' 'Return' or 'Tab' key to finish editing.</p>
-
-        <div class="demoSelector-inlineEdit-container-title">
-            <p class="flc-inlineEdit-text demo-inlineEdit-title"></p>
+        <div class="demo-inlineEdit-indent">
+    		<p class="demo-inlineEdit-p"><strong>Mouse instructions:</strong> Click an editable area to activate the text area. Use the 'Escape' key to cancel, or the 'Enter,' 'Return' or 'Tab' key to finish editing.</p>
+    		<p class="demo-inlineEdit-p"><strong>Keyboard instructions:</strong> Use the 'Enter' or 'Return' key to activate the text area. Use the 'Escape' button to cancel, or the 'Enter,' 'Return' or 'Tab' key to finish editing.</p>
+
+            <div class="demoSelector-inlineEdit-container-title">
+                <p class="flc-inlineEdit-text demo-inlineEdit-title"></p>
+            </div>
+
+            <img class="demo-inlineEdit-padding" src="images/red-car.jpg" alt="shiny red car" />
+
+            <div class="demoSelector-inlineEdit-container-caption demo-inlineEdit-padding">
+                <strong>Caption: </strong>
+                <p class="flc-inlineEdit-text">A red vintage car</p>
+            </div>
+
+            <script type="text/javascript">
+                demo.initInlineEdit();
+            </script>
         </div>
 
-        <img class="demo-inlineEdit-padding" src="images/red-car.jpg" alt="shiny red car" />
-
-        <div class="demoSelector-inlineEdit-container-caption demo-inlineEdit-padding">
-            <strong>Caption: </strong>
-            <p class="flc-inlineEdit-text">A red vintage car</p>
-        </div>
-
-        <script type="text/javascript">
-            demo.initInlineEdit();
-        </script>
-
     </body>
 </html>
diff --git a/src/demos/keyboard-a11y/css/keyboard.css b/src/demos/keyboard-a11y/css/keyboard.css
@@ -14,6 +14,7 @@ p.demo-right {
 .demo-container {
     width: 97%;
     margin: 1em;
+    margin-top: 4em;
     padding: 0.5em;
     min-width: 30em;
 }

diff --git a/src/demos/overviewPanel/index.html b/src/demos/overviewPanel/index.html
@@ -7,6 +7,9 @@
         <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css' />
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
 
+        <style>
+            .demo-container {margin-top: 4em;}
+        </style>
         <script type="text/javascript" src="../../lib/jquery/core/js/jquery.js"></script>
         <script type="text/javascript" src="../../framework/core/js/Fluid.js"></script>
         <script type="text/javascript" src="../../framework/core/js/FluidDocument.js"></script>
@@ -20,48 +23,51 @@
         <script type="text/javascript" src="../../framework/renderer/js/fluidRenderer.js"></script>
         <script type="text/javascript" src="../../framework/renderer/js/RendererUtilities.js"></script>
         <script type="text/javascript" src="../../components/overviewPanel/js/OverviewPanel.js"></script>
+
     </head>
     <body>
         <div class="flc-overviewPanel fl-overviewPanel-container"></div>
-         <h1>Nullam in Fringilla</h1>
-
-       <form>
-            <input style="float:right">
-            <input>
-        </form>
-
-        <p>Nam hendrerit ante dolor, quis sodales ligula tincidunt vitae. Nullam in fringilla elit, ut interdum massa. Sed imperdiet ultrices arcu. Pellentesque ut eros mauris. Etiam placerat ultrices sapien at dignissim. Vivamus erat nunc, porta vitae purus in, dignissim pellentesque libero. Aliquam erat volutpat. </p>
-        <p>In vitae volutpat nunc, sit amet bibendum velit. Morbi eu leo non tortor ornare luctus. Ut sagittis quam neque, non pretium sapien laoreet nec. Mauris in interdum orci, at posuere erat. Vestibulum a vehicula mauris, vel fermentum elit. Nullam at tempus risus. Nulla sagittis rutrum dolor at pretium. Aenean tincidunt interdum justo, vehicula tincidunt nisi posuere vitae. Nam vestibulum sem urna, lacinia vehicula est posuere at. Quisque porta sed nibh a tristique. Aenean lacinia, arcu quis aliquet lobortis, quam neque imperdiet eros, at commodo lectus sem a arcu. In faucibus at lorem in dignissim. Sed ligula mi, condimentum nec quam id, viverra tempor quam. Phasellus imperdiet lacus nunc, in congue ligula eleifend ultricies. Nunc et congue augue, ac porttitor leo.</p>
-        <h1>Tempus Libero</h1>
-        <p>Aenean sit amet est at nisl pretium fermentum ut convallis dui. Cras tempus libero non nibh lacinia placerat. Nullam vitae lectus mauris. Vestibulum sit amet libero at justo accumsan ultrices. Vestibulum dignissim nec nulla ac condimentum. Integer nunc orci, tincidunt id odio nec, interdum fermentum augue. Vestibulum nibh nisl, dictum id ante nec, venenatis dapibus massa. Cras mattis tellus id neque placerat, quis blandit magna vulputate. Nam at velit porta, consequat ipsum nec, auctor ante. Integer quam neque, venenatis vitae adipiscing sed, ornare vel sem. Proin pretium justo velit, sed rutrum lectus sollicitudin sit amet. Suspendisse eget dolor erat. Vivamus mauris mi, dictum sed lectus ac, congue elementum urna. Nulla commodo a lacus egestas condimentum.</p>
-        <h1>Ultrices Tortor</h1>
-        <p> Praesent pharetra nibh justo, in ultrices tortor laoreet id. Sed sed eros vitae ligula accumsan rutrum ac ac massa. Vivamus congue tortor quis erat commodo vulputate. Fusce feugiat accumsan nisl, eget rhoncus mi aliquet at. In hac habitasse platea dictumst. Sed at elit sed nisi laoreet dapibus placerat et lacus. Suspendisse pulvinar ut justo eu eleifend. Donec nibh diam, pulvinar accumsan sapien hendrerit, facilisis placerat felis. Pellentesque at odio et purus pharetra posuere. Ut nibh justo, sollicitudin et mi sed, varius accumsan risus. Praesent risus odio, tempus a tortor eu, facilisis dictum ipsum. </p>
-        <p> Praesent sagittis eu risus in iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dignissim arcu. Phasellus faucibus eu nunc eget gravida. Cras placerat sapien neque, a fermentum nibh viverra vel. Donec fermentum eget enim sit amet pellentesque. Sed tristique massa eget nulla sollicitudin vulputate sed non orci. </p>
-
-        <script type="text/javascript">
-            $(document).ready(function () {
-                fluid.overviewPanel(".flc-overviewPanel", {
-                    resources: {
-                        template: {
-                            href: "../../components/overviewPanel/html/overviewPanelTemplate.html"
+        <div class="demo-container">
+             <h1 class="demo-first">Nullam in Fringilla</h1>
+
+           <form>
+                <input style="float:right">
+                <input>
+            </form>
+
+            <p>Nam hendrerit ante dolor, quis sodales ligula tincidunt vitae. Nullam in fringilla elit, ut interdum massa. Sed imperdiet ultrices arcu. Pellentesque ut eros mauris. Etiam placerat ultrices sapien at dignissim. Vivamus erat nunc, porta vitae purus in, dignissim pellentesque libero. Aliquam erat volutpat. </p>
+            <p>In vitae volutpat nunc, sit amet bibendum velit. Morbi eu leo non tortor ornare luctus. Ut sagittis quam neque, non pretium sapien laoreet nec. Mauris in interdum orci, at posuere erat. Vestibulum a vehicula mauris, vel fermentum elit. Nullam at tempus risus. Nulla sagittis rutrum dolor at pretium. Aenean tincidunt interdum justo, vehicula tincidunt nisi posuere vitae. Nam vestibulum sem urna, lacinia vehicula est posuere at. Quisque porta sed nibh a tristique. Aenean lacinia, arcu quis aliquet lobortis, quam neque imperdiet eros, at commodo lectus sem a arcu. In faucibus at lorem in dignissim. Sed ligula mi, condimentum nec quam id, viverra tempor quam. Phasellus imperdiet lacus nunc, in congue ligula eleifend ultricies. Nunc et congue augue, ac porttitor leo.</p>
+            <h1>Tempus Libero</h1>
+            <p>Aenean sit amet est at nisl pretium fermentum ut convallis dui. Cras tempus libero non nibh lacinia placerat. Nullam vitae lectus mauris. Vestibulum sit amet libero at justo accumsan ultrices. Vestibulum dignissim nec nulla ac condimentum. Integer nunc orci, tincidunt id odio nec, interdum fermentum augue. Vestibulum nibh nisl, dictum id ante nec, venenatis dapibus massa. Cras mattis tellus id neque placerat, quis blandit magna vulputate. Nam at velit porta, consequat ipsum nec, auctor ante. Integer quam neque, venenatis vitae adipiscing sed, ornare vel sem. Proin pretium justo velit, sed rutrum lectus sollicitudin sit amet. Suspendisse eget dolor erat. Vivamus mauris mi, dictum sed lectus ac, congue elementum urna. Nulla commodo a lacus egestas condimentum.</p>
+            <h1>Ultrices Tortor</h1>
+            <p> Praesent pharetra nibh justo, in ultrices tortor laoreet id. Sed sed eros vitae ligula accumsan rutrum ac ac massa. Vivamus congue tortor quis erat commodo vulputate. Fusce feugiat accumsan nisl, eget rhoncus mi aliquet at. In hac habitasse platea dictumst. Sed at elit sed nisi laoreet dapibus placerat et lacus. Suspendisse pulvinar ut justo eu eleifend. Donec nibh diam, pulvinar accumsan sapien hendrerit, facilisis placerat felis. Pellentesque at odio et purus pharetra posuere. Ut nibh justo, sollicitudin et mi sed, varius accumsan risus. Praesent risus odio, tempus a tortor eu, facilisis dictum ipsum. </p>
+            <p> Praesent sagittis eu risus in iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at dignissim arcu. Phasellus faucibus eu nunc eget gravida. Cras placerat sapien neque, a fermentum nibh viverra vel. Donec fermentum eget enim sit amet pellentesque. Sed tristique massa eget nulla sollicitudin vulputate sed non orci. </p>
+
+            <script type="text/javascript">
+                $(document).ready(function () {
+                    fluid.overviewPanel(".flc-overviewPanel", {
+                        resources: {
+                            template: {
+                                href: "../../components/overviewPanel/html/overviewPanelTemplate.html"
+                            }
+                        },
+                        strings: {
+                            componentName: "Overview Panel",
+                            feedbackText: "Have a comment?",
+                            feedbackLinkText: "Email us"
+                        },
+                        markup: {
+                            description: "The Overview Panel sits on top of your content, and can be collapsed and expanded. It allows you to provide some information about whatever is on your page.",
+                            instructions: "<p>This area can be used to provide instructions to your viewers about how to use the content on the page.</p><p>The links below can be configured to point to whatever you like.</p>"
+                        },
+                        links: {
+                            titleLink: "http://fluidproject.org/products/infusion/",
+                            codeLink: "https://github.com/fluid-project/infusion/tree/master/src/components/overviewPanel",
+                            feedbackLink: "mailto:infusion-users@fluidproject.org?subject=Overview Panel feedback"
                         }
-                    },
-                    strings: {
-                        componentName: "Overview Panel",
-                        feedbackText: "Have a comment?",
-                        feedbackLinkText: "Email us"
-                    },
-                    markup: {
-                        description: "The Overview Panel sits on top of your content, and can be collapsed and expanded. It allows you to provide some information about whatever is on your page.",
-                        instructions: "<p>This area can be used to provide instructions to your viewers about how to use the content on the page.</p><p>The links below can be configured to point to whatever you like.</p>"
-                    },
-                    links: {
-                        titleLink: "http://fluidproject.org/products/infusion/",
-                        codeLink: "https://github.com/fluid-project/infusion/tree/master/src/components/overviewPanel",
-                        feedbackLink: "mailto:infusion-users@fluidproject.org?subject=Overview Panel feedback"
-                    }
+                    });
                 });
-            });
-        </script>
+            </script>
+        </div>
     </body>
 </html>
diff --git a/src/demos/pager/json/config.json b/src/demos/pager/json/config.json
@@ -5,7 +5,7 @@
     },
     "markup": {
         "description": "The Pager allows users to break up long lists of items into separate pages. They may decide whether or not they want paging, and how many results are displayed per page.",
-        "instructions": "<ul><li>Try using the page links to jump to the first, last, and the 'middle' pages easily.</li><li>The page links have a tooltip that conveys the range of data on that page. Try jumping to an item or a certain set of records (e.g. students with a name starting with 'G').</li></ul>"
+        "instructions": "<ul><li>Try using the page links to jump to the first, last, and the 'middle' pages easily.</li></ul>"
     },
     "links": {
         "codeLink": "https://github.com/fluid-project/infusion/tree/master/src/components/pager",

diff --git a/src/demos/progress/json/config.json b/src/demos/progress/json/config.json
@@ -4,8 +4,8 @@
         "componentName": "Progress"
     },
     "markup": {
-        "description": "The Progress component provides a usable and accessible linear progress display for use on its own or with other Fluid components. It is highly flexible -- customizable for use in many contexts.",
-        "instructions": "<ul><li>Click on the 'Submit' button to observe the progress comonent.</li></ul>"
+        "description": "The Progress component provides a usable and accessible progress display for use on its own or with other Fluid components. It is highly flexible -- customizable for use in many contexts.",
+        "instructions": "<ul><li>Click on the 'Submit' button to observe the progress component.</li></ul>"
     },
     "links": {
         "codeLink": "https://github.com/fluid-project/infusion/tree/master/src/components/progress",

diff --git a/src/demos/renderer/index.html b/src/demos/renderer/index.html
@@ -43,7 +43,7 @@
         </p>
 
     <hr/>
-    <div class="fl-col-flex2">
+    <div class="fl-col-flex2 demo-container">
         <div class="fl-col">
         <p id="intro-paragraph">Template for the intro text</p>
 

diff --git a/src/demos/renderer/js/rendererDemo.js b/src/demos/renderer/js/rendererDemo.js
@@ -222,7 +222,7 @@ var demo = demo || {};
                 applier: applier,
                 autoBind: true
             };
-            fluid.selfRender($("body"), buildComponentTree(), options);
+            fluid.selfRender($(".demo-container"), buildComponentTree(), options);
         });
     };
 

diff --git a/src/demos/renderer/json/config.json b/src/demos/renderer/json/config.json
@@ -4,7 +4,7 @@
         "componentName": "Renderer"
     },
     "markup": {
-        "description": "The Renderer allows users to create user interface templates in pure HTML and render pages entirely on the client side.",
+        "description": "The Renderer allows users to create user interface templates in pure HTML and render information dynamically.",
         "instructions": "<ul><li>The initial view shows the template on the left side of the page and the data model on the right.</li><li>Click the 'Render' button at the top of the page to render the data model into the template.</li><li>Try selecting different values in the form and observe how the data model automatically updates.</li></ul>"
     },
     "links": {

diff --git a/src/demos/reorderer/gridReorderer/css/gridReorderer.css b/src/demos/reorderer/gridReorderer/css/gridReorderer.css
@@ -1,5 +1,6 @@
 .demo-gridReorderer-container {
 	padding-left:10px;   
+    margin-top: 4em;
 }
 
 .demo-gridReorderer-alphabetGrid {

diff --git a/src/demos/reorderer/gridReorderer/index.html b/src/demos/reorderer/gridReorderer/index.html
@@ -41,9 +41,9 @@
         <script type="text/javascript" src="js/gridReordererDemo.js"></script>
 
     </head>
-    <body class="demo-gridReorderer-container">
+    <body>
         <div class="flc-overviewPanel fl-overviewPanel-container"></div>
-        <div class="fl-container-flex">
+        <div class="demo-gridReorderer-container fl-container-flex">
             <h1>Letter Puzzle</h1>
 
             <p><strong>Mouse instructions:</strong> Drag and drop items with the mouse.</p>

diff --git a/src/demos/reorderer/gridReorderer/json/config.json b/src/demos/reorderer/gridReorderer/json/config.json
@@ -4,7 +4,7 @@
         "componentName": "Grid Reorderer"
     },
     "markup": {
-        "description": "The Grid Reorderer allows users to reorder items in a linear, flowed set using drag and drop, numbering and/or keyboard interactions",
+        "description": "The Grid Reorderer allows users to reorder items in a linear, flowed set using drag and drop and/or keyboard interactions",
         "instructions": "<ul><li>Try reordering the letters using the mouse.</li><li>Try reordering the letters using only the keyboard: Direction keys (arrow keys or i-j-k-m) move focus; CTRL + direction keys move the item.</li></ul>"
     },
     "links": {

diff --git a/src/demos/reorderer/imageReorderer/css/imageReorderer.css b/src/demos/reorderer/imageReorderer/css/imageReorderer.css
@@ -1,4 +1,7 @@
 
+.demo-container {
+    margin-top: 3em;
+}
 .fl-imageReorderer {
     clear:both;
 }