Added wc-Form, wc-ReportForm

webcompat · Mar 8, 2015 · 069316a · 069316a
1 parent 9cc1ee8
commit 069316a
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 136 deletions.
diff --git a/webcompat/form.py b/webcompat/form.py
@@ -45,7 +45,7 @@
 
 class IssueForm(Form):
     '''Define form fields and validation for our bug reporting form.'''
-    url = StringField(u'Site URL*', [InputRequired(message=url_message)])
+    url = StringField(u'Site URL <span class="wc-Form-required">*</span>', [InputRequired(message=url_message)])
     browser = StringField(u'Browser / Version', [Optional()])
     os = StringField(u'Operating System', [Optional()])
     username = StringField(u'Username',

diff --git a/webcompat/static/css/development/components/form.css b/webcompat/static/css/development/components/form.css
@@ -1,4 +1,6 @@
-.u-formInput {
+/*------Form------*/
+
+.wc-Form-input {
   font: inherit;
   display: block;
   width: 100%;
@@ -15,58 +17,52 @@
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
   transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
 }
-.u-formInput:focus {
-  border-color: #66AFE9;
-  outline: 0px none;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
-}
-.u-formInput-heightAuto {
-  height:auto;
-}
-.u-formInput::-moz-placeholder {
-color: #999;
-opacity: 1;
-}
-.u-formInput:-ms-input-placeholder {
-color: #999;
-}
-.u-formInput::-webkit-input-placeholder {
-color: #999;
-}
-input[type="radio"] {
-  margin:0 5px 0 0;
-}
-.u-formLabel {
+  .wc-Form-input:focus {
+    border-color: #66AFE9;
+    outline: 0px none;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
+  }
+  .wc-Form-input--heightAuto {
+    height:auto;
+  }
+  .wc-Form-input::placeholder {
+    color: #999;
+    opacity: 1;
+   }
+
+  input[type="radio"] {
+    margin:0 5px 0 0;
+  }
+.wc-Form-label {
   display:inline-block;
   margin-bottom:5px;
   color:#000;
   font-weight:700;
 }
 /*------Form Validation------*/
-.has-error .u-formInput {
+.wc-Form-error .wc-Form-input {
   border-color: #ff0000;
 }
-.has-error .u-formInput:focus{
+.wc-Form-error .wc-Form-input:focus{
   border-color: #ff0000;
   box-shadow:none;
 }
-.has-error .help-inline {
+.wc-Form-error .wc-Form-helpInline {
   color: #ff0000;
   float: right;
 }
-.u-formGroup {
+.wc-Form-group {
   margin-bottom:1.6em;
 }
-legend.u-formLabel {
-  width: 100%;
+.wc-Form-required {
+  color:#ff0000;
 }
-/* bootstrap overrides */
-.radio-inline, .checkbox-inline {
-  /* Hack to get Chrome 24+ to behave.
-  See https://github.com/twbs/bootstrap/issues/6599 */
-  white-space: nowrap;
+legend.wc-Form-label {
+  width: 100%;
 }
-.radio, .radio-inline {
+
+.wc-Form-radio,
+.radio-inline {
   width:100%;
   height: 34px;
   position: relative;
@@ -76,7 +72,7 @@ legend.u-formLabel {
   font-weight: 400;
   cursor: pointer;
 }
-.radio label,
+.wc-Form-radio label,
 .radio-inline label {
   display: inline-block;
   vertical-align: middle;
@@ -88,7 +84,49 @@ legend.u-formLabel {
 .form-closed {
   display: none;
 }
-.has-error .help-inline {
-  color: #F00;
-  float: right;
+
+  @media (--viewport-600px) {
+    .wc-Form-error .wc-Form-helpInline {
+      float: none;
+      display: block;
+    }
+    .Report-form .Button-group .Grid-cell {
+      text-align:center !important;
+    }
+  }
+  .wc-Form-validation {
+    display: block;
+    clear: both;
+    position: relative;
+  }
+    .wc-Form-validation::after {
+      content: "";
+      display: block;
+      width: 60px;
+      height: 20px;
+      position: absolute;
+      right: 12px;
+      top: 8px;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+.wc-Form-validation .wc-Form-input {
+  padding-right: 40px;
+}
+.wc-Form-noError .wc-Form-validation::after {
+  background-image: url(../img/valid.svg);
+}
+.wc-Form-error .wc-Form-validation::after {
+  background-image: url(../img/invalid.svg);
+}
+.wc-Form-noError .wc-Form-helpInline {
+  display: none;
+}
+.wc-Form-error .wc-Form-input {
+  border-color: var(--wc-background-dark);
+}
+.wc-Form-noError .wc-Form-input:focus{
+  border-color: var(--wc-background-dark);
+  box-shadow:none;
 }
diff --git a/webcompat/static/css/development/components/report-form.css b/webcompat/static/css/development/components/report-form.css
@@ -0,0 +1,26 @@
+/*------Report form------*/
+
+.wc-ReportForm {}
+
+  .wc-ReportForm-button .Button {
+    font-size:.875em;
+  }
+
+  /* Github Button */
+  .wc-ReportForm-button--github {
+    text-align:right;
+  }
+  @media (--viewport-450px) {
+    .wc-ReportForm-button-github {
+      text-align:center;
+    }
+    .wc-ReportForm-button .Button {
+      font-size:.8em;
+    }
+  }
+  @media (--viewport-600px) {
+    .wc-ReportForm-button {
+      width:100%;
+      text-align:center;
+    }
+  }
diff --git a/webcompat/static/css/development/layout/body.css b/webcompat/static/css/development/layout/body.css
@@ -31,7 +31,7 @@ html {
   color: var(--wc-variant-background-dark);
   box-sizing:border-box;
   font-size:62.5%;
-  font-size:calcl(1em * 0.625);
+  font-size:calc(1em * 0.625);
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }

diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css
@@ -32,7 +32,7 @@
 @import "components/title.css";
 @import "components/loader.css";
 @import "components/box.css";
-
+@import "components/report-form.css";
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";

diff --git a/webcompat/static/css/development/page/home.css b/webcompat/static/css/development/page/home.css
@@ -87,74 +87,13 @@
   margin-left: 0;
   margin-bottom: 1em;
 }
-.Report-form .Button {
-    font-size:.875em;
-}
-.Report-form .Button-github {
-  text-align:right;
-}
-@media (--viewport-450px) {
-  .Report-form .Button-github {
-    text-align:center;
-  }
-  .Report-form .Button {
-    font-size:.8em;
-  }
-}
-@media (--viewport-400px) {
-  .Button-github,
-  .Button-anon {
-    width:100%;
-    text-align:center;
-  }
-}
+
 @media (--viewport-600px) {
   .flourish {
     display: none;
   }
-  .has-error .help-inline {
-    float: none;
-    display: block;
-  }
-  .Report-form .Button-group .Grid-cell {
-    text-align:center !important;
-  }
-}
-.validation-wrapper {
-  display: block;
-  clear: both;
-  position: relative;
-}
-.validation-wrapper::after {
-  content: '';
-  display: block;
-  width: 60px;
-  height: 20px;
-  position: absolute;
-  right: 12px;
-  top: 8px;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-.validation-wrapper input {
-  padding-right: 40px;
-}
-.no-error .validation-wrapper::after {
-  background-image: url(../img/valid.svg);
-}
-.has-error .validation-wrapper::after {
-  background-image: url(../img/invalid.svg);
-}
-.no-error .help-inline {
-  display: none;
-}
-.no-error .u-formInput {
-  border-color: var(--wc-background-dark);
-}
-.no-error .u-formInput:focus{
-  border-color: var(--wc-background-dark);
-  box-shadow:none;
 }
+
 .disabled {
   opacity: 0.5;
 }

diff --git a/webcompat/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js
@@ -6,7 +6,7 @@ function BugForm() {
   var urlField = $('#url');
   var descField = $('#description');
   var problemType = $('[name=problem_category]');
-  var submitButtons = $('.Report-form button.Button');
+  var submitButtons = $('.js-ReporForm button.Button');
   var inputMap = {
     'url': {
       'elm': urlField, // elm is a jQuery object
@@ -84,33 +84,33 @@ function BugForm() {
       }
 
       var inlineHelp = $('<span></span>', {
-        'class': 'help-inline wc-bold',
+        'class': 'wc-Form-helpInline wc-bold',
         'text': inputMap[id].helpText
       });
 
 
       inputMap[id].valid = false;
-      inputMap[id].elm.parents('.u-formGroup')
-                      .removeClass('no-error')
-                      .addClass('has-error');
+      inputMap[id].elm.parents('.wc-Form-group')
+                      .removeClass('wc-Form-noError')
+                      .addClass('wc-Form-error');
 
       if (id === 'url') {
         inlineHelp.insertAfter('label[for='+id+']');
       }
 
       if (id === 'problem_type') {
-        inlineHelp.appendTo('legend.u-formLabel');
+        inlineHelp.appendTo('legend.wc-Form-label');
       }
 
       self.disableSubmits();
     },
     makeValid: function(id) {
       inputMap[id].valid = true;
-      inputMap[id].elm.parents('.u-formGroup')
-                      .removeClass('has-error')
-                      .addClass('no-error');
+      inputMap[id].elm.parents('.wc-Form-group')
+                      .removeClass('wc-Form-error')
+                      .addClass('wc-Form-noError');
 
-      inputMap[id].elm.parents('.u-formGroup').find('.help-inline').remove();
+      inputMap[id].elm.parents('.wc-Form-group').find('.wc-Form-helpInline').remove();
 
       if (inputMap['url'].valid && inputMap['problem_type'].valid) {
         self.enableSubmits();