Issue #848 - improve layout CSSFixme

- removed <pre> which is generated by the script
webcompat · Dec 30, 2015 · ef2d017 · ef2d017
1 parent 173159c
commit ef2d017
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/webcompat/static/css/development/components/cssfixme.css b/webcompat/static/css/development/components/cssfixme.css
@@ -1,5 +1,10 @@
 /*----------cssfixme----------*/
 
+:root {
+  --CSSFixme-backgroundColor : rgba(249, 249, 249, 0.6);
+  --CSSFixme-backgroundColorStrong: var(--wc-background-dark);
+}
+
 .wc-CSSFixme {
   font-size:var(--base-font-size);
 }
@@ -9,12 +14,23 @@
     margin-top: 1em;
   }
 
+  /* instruction */
+  .wc-CSSFixme-instruction {
+    margin-left: 1em;
+    font-size: 1.1em;
+  }
+
   /* pre */
-  .wc-CSSFixme-resultat {
+  .wc-CSSFixme-resultat
+  .wc-CSSFixme pre {
     margin: 1em 0;
     padding: 1em;
     color: #414042;
     border: 1px solid #ddd;
     border-radius: .3em;
-    background: rgba(249, 249, 249, 0.6);
+    background: var(--CSSFixme-backgroundColor);
   }
+    /* element modify */
+    .wc-CSSFixme-resultat strong {
+      background-color:
+    }
diff --git a/webcompat/templates/cssfixme.html b/webcompat/templates/cssfixme.html
@@ -4,10 +4,18 @@
     {% include "shared/nav.html" %}
     <main class="wc-content wc-content--body" role="main">
       <div class="wc-CSSFixme">
-        <p>This tool attempts to fix non-standard CSS by adding standardised equivalents to all declarations that use <em>-webkit-</em>prefixed properties and values that have standardised equivalents. The standardised syntax is not always same as the -webkit- syntax, so getting everything right is a challenge. Please test this tool with various <em>-webkit-</em> prefixed CSS constructs and let us <a href="https://github.com/webcompat/css-fixme/issues">know</a> if you find problems.</p>
-        <p>Note: some <em>-webkit-</em> prefixed properties do not (yet?) have standardised equivalents. This tool will deliberately not add pseudo-standard code on the assumption that the standards will one day match the current -webkit- implementation.</p>
-        <p>This uses the <a href="https://github.com/reworkcss/rework">ReworkCSS</a> library for parsing and stringifying CSS.</p>
-        <p>Paste CSS in this box to see what needs fixing:</p>
+        <h1 class="wc-Title wc-Title--l">CSS Fix Me</h1>
+        <div class="wc-CSSFixme-instruction">
+          <div class="wc-CSSFixme-item">
+            <strong>You:</strong> paste the CSS instructions
+          </div>
+          <div class="wc-CSSFixme-item">
+            <strong>Us:</strong> add missing standard properties
+          </div>
+          <div class="wc-CSSFixme-item">
+            <strong>Them:</strong> have a satisfied Web experience. Happy users.
+          </div>
+        </div>
         <div class="wc-CSSFixme-item">
           <textarea class="wc-Form-input " style="height:20rem;">{{ csscode }}</textarea>
         </div>
@@ -20,7 +28,13 @@
           <button type="button" class="Button Button--default" id="btn_do_fixup">Add standard equivalents for prefixed CSS</button>
         </div>
         <div class="wc-CSSFixme-item">
-          <pre class="wc-CSSFixme-resultat" id="fixedcss"></pre>
+          <div id="js-CSSFixme"></div>
+        </div>
+        <div class="wc-CSSFixme-item">
+          <p>This tool attempts to fix non-standard CSS by adding standardised equivalents to all declarations that use <em>-webkit-</em>prefixed properties and values that have standardised equivalents. The standardised syntax is not always same as the -webkit- syntax, so getting everything right is a challenge. Please test this tool with various <em>-webkit-</em> prefixed CSS constructs and let us <a href="https://github.com/webcompat/css-fixme/issues">know</a> if you find problems.</p>
+          <p>Note: some <em>-webkit-</em> prefixed properties do not (yet?) have standardised equivalents. This tool will deliberately not add pseudo-standard code on the assumption that the standards will one day match the current -webkit- implementation.</p>
+          <p>This uses the <a href="https://github.com/reworkcss/rework">ReworkCSS</a> library for parsing and stringifying CSS.</p>
+          <p>Paste CSS in this box to see what needs fixing:</p>
         </div>
         {%- block extrascripts -%}
         {%- if config.PRODUCTION or config.DEVELOPMENT -%}