feat: Better style

circlecell · Oct 15, 2016 · eee53ed · eee53ed
1 parent 4896cdf
commit eee53ed
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <title></title>
         <style>
-            textarea {
+            /*textarea {
                 width: 100%;
                 height: 400px;
             }
@@ -20,44 +20,68 @@
 
             code {
                 white-space: pre;
-            }
+            }*/
         </style>
     </head>
     <body>
-        <form>
-            <textarea class="code"></textarea>
-            <button type="submit">Submit</button>
-            <fieldset>
-                <legend>Results</legend>
-                <div class="results"></div>
-            </fieldset>
-            <div class="settings">
-                <fieldset>
-                    <legend>Settings</legend>
-                    <label> Config:
-                        <select class="config-name">
-                            <option value="">Custom</option>
-                        </select>
-                    </label>
-                    <label> Parser:
-                        <select class="parser-name">
-                            <option value="espree">Espree</option>
-                            <option value="babel">Babel</option>
-                        </select>
-                    </label>
-                    <label>
-                        <input type="checkbox" class="use-recommended">
-                        Use recommended values if available
-                    </label>
-                </fieldset>
-                <fieldset>
-                    <legend>Environments</legend>
-                    <div class="environments"></div>
-                </fieldset>
-                <fieldset>
-                    <legend>Rules</legend>
-                    <div class="rules"></div>
-                </fieldset>
+        <form class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <textarea class="code"></textarea>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-12">
+                    <fieldset class="form-group">
+                        <legend>Results</legend>
+                        <div class="results"></div>
+                    </fieldset>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-12">
+                    <fieldset>
+                        <legend>Settings</legend>
+                        <div class="form-group">
+                            <label>Config:</label>
+                            <select class="config-name form-control">
+                                <option value="">Custom</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label> Parser:</label>
+                            <select class="parser-name form-control">
+                                <option value="espree">Espree</option>
+                                <option value="babel">Babel</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label>
+                                <input type="checkbox" class="use-recommended">
+                                Use recommended values if available
+                            </label>
+                        </div>
+                    </fieldset>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <fieldset>
+                        <legend>Environments</legend>
+                        <div class="environments"></div>
+                    </fieldset>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <fieldset>
+                        <legend>Rules</legend>
+                        <div class="rules"></div>
+                    </fieldset>
+                </div>
             </div>
         </form>
     </body>

diff --git a/src/css/style.css b/src/css/style.css
@@ -1,2 +1,14 @@
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~codemirror/lib/codemirror.css';
+
+.CodeMirror {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+button[type="submit"] {
+    margin-top: 1rem;
+}
+
+.results:empty::before {
+    content: 'No errors';
+}
diff --git a/src/environments.js b/src/environments.js
@@ -4,7 +4,7 @@ import environments from './lint/environments';
 export default class Environments extends MatreshkaArray {
 
     itemRenderer = `
-        <label title="{{description}}">
+        <label title="{{description}}" class="form-check-label">
             <input type="checkbox" checked="{{checked}}"> {{environment}}
         </label>
     `;

diff --git a/src/results.js b/src/results.js
@@ -2,7 +2,7 @@ import MatreshkaArray from 'matreshka/array';
 import plugins from './lint/plugins';
 
 export default class Results extends MatreshkaArray {
-    itemRenderer = `<div>
+    itemRenderer = `<div class="alert alert-danger">
         {{ message }}
         ({{ ruleId }})
     </div>`;

diff --git a/src/rules/rule.js b/src/rules/rule.js
@@ -2,7 +2,7 @@ import MatreshkaObject from 'matreshka/object';
 //import prop from 'matreshka/binders/prop';
 
 export default class Rule extends MatreshkaObject {
-    renderer = `<label title="{{ dynamicValueJSON }}">
+    renderer = `<label title="{{ dynamicValueJSON }}" class="col-md-4">
         <input type="checkbox" checked="{{ isOn }}"> {{ ruleName }}
     </label>`;
     constructor(data) {

diff --git a/src/rules/rules-group.js b/src/rules/rules-group.js
@@ -4,7 +4,7 @@ import Rule from './rule';
 export default class RulesGroup extends MatreshkaArray {
     Model = Rule;
 
-    renderer = `<fieldset>
+    renderer = `<fieldset class="row-fluid">
         <legend>{{ name }}</legend>
         <div class="rules-list"></div>
     </fieldset>`;