From 1a982bd6ab65ca39b3f8ebdf9b01dab60b2b0fd1 Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Fri, 7 Apr 2017 21:33:17 +0200
Subject: [PATCH 1/2] fixed and lint some css code

---
 .../css/development/components/form.css       |  5 ++++
 .../development/components/report-form.css    | 13 ---------
 .../development/components/upload-form.css    | 13 +++++++--
 webcompat/templates/home-page/form.html       | 28 +++++++++++++------
 4 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/webcompat/static/css/development/components/form.css b/webcompat/static/css/development/components/form.css
index 3148aef4c..abb4abce3 100644
--- a/webcompat/static/css/development/components/form.css
+++ b/webcompat/static/css/development/components/form.css
@@ -15,8 +15,13 @@
   /* group item */
   .wc-Form-group {
     position: relative;
+    margin: 0 0 1em 0;
   }
 
+    .wc-Form-group--biggerOffset {
+      margin: 0 0 2em 0;
+    }
+
   /* information: wrap label and helpMessage */
   .wc-Form-information {
     display: flex;
diff --git a/webcompat/static/css/development/components/report-form.css b/webcompat/static/css/development/components/report-form.css
index fe71e88ec..f77319ba7 100644
--- a/webcompat/static/css/development/components/report-form.css
+++ b/webcompat/static/css/development/components/report-form.css
@@ -18,20 +18,7 @@
     margin-top: 1em;
   }
 
-  .wc-ReportForm .wc-UploadForm {
-    border: dashed 1px rgb(204, 204, 204);
-    border-radius: 20px;
-  }
-
-  .wc-ReportForm .r-Grid-cell {
-    margin-bottom: 1em;
-  }
-  .wc-ReportForm div.r-minM--1of2:nth-child(2) .wc-Form-group {
-    margin-bottom: 2em;
-  }
-
     @media all and (min-width: 30.75em) {
-
       /* space between button */
       .wc-ReportForm-actions-button + .wc-ReportForm-actions-button {
         margin-left: .6em;
diff --git a/webcompat/static/css/development/components/upload-form.css b/webcompat/static/css/development/components/upload-form.css
index 3e126af9d..a11ff7208 100644
--- a/webcompat/static/css/development/components/upload-form.css
+++ b/webcompat/static/css/development/components/upload-form.css
@@ -14,9 +14,16 @@
   overflow: hidden;
 }
 
+  /* modifier homepage uploadform */
+
+  .wc-UploadForm--homePage {
+    border: dashed 1px rgb(204, 204, 204);
+    border-radius: 20px;
+  }
+
   /* modifier new comment of existing bug */
   .wc-UploadForm--new {
-    display:flex;
+    display: flex;
     background-color: #404040;
     min-height: 35px;
   }
@@ -47,7 +54,7 @@
       position: relative;
       display: inline-block;
       margin-bottom: 5px;
-      color: #CCCCCC;
+      color: #ccc;
       font-weight: 700;
       cursor: pointer;
       text-decoration: underline;
@@ -62,7 +69,7 @@
 
       /* link */
       .wc-UploadForm-label--link {
-        color: #FFC900;
+        color: #ffc900;
         font-weight: 600;
         text-decoration: underline;
       }
diff --git a/webcompat/templates/home-page/form.html b/webcompat/templates/home-page/form.html
index d461c7170..42e35e052 100644
--- a/webcompat/templates/home-page/form.html
+++ b/webcompat/templates/home-page/form.html
@@ -31,7 +31,7 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
           </div>
         </div>
         <div class="r-Grid-cell r-minM--1of2">
-          <div class="wc-Form-group js-Form-group {% if form.url.errors %}is-error{% endif %}">
+          <div class="wc-Form-group wc-Form-group--biggerOffset js-Form-group {% if form.url.errors %}is-error{% endif %}">
             <div class="wc-Form-information">
               {{ form.url.label(class_='wc-Form-label') }}
               {% if form.url.errors %}
@@ -46,13 +46,13 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
                required=True, type='url', pattern='') }}
             </span>
           </div>
-          <div class="wc-Form-group js-Form-group">
+          <div class="wc-Form-group wc-Form-group--biggerOffset js-Form-group">
             {{ form.browser.label(class_='wc-Form-label') }}
             <span class="wc-Form-validation">
             {{ form.browser(class_='wc-Form-item') }}
             </span>
           </div>
-          <div class="wc-Form-group js-Form-group">
+          <div class="wc-Form-group wc-Form-group--biggerOffset js-Form-group">
             {{ form.os.label(class_='wc-Form-label') }}
             <span class="wc-Form-validation">
             {{ form.os(class_='wc-Form-item') }}
@@ -68,7 +68,10 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
         </div>
         <div class="r-Grid-cell r-Grid-cell--alignBottom r-minS--1of2">
             <div class="js-image-upload wc-Form-group js-Form-group {% if form.image.errors %}is-error{% endif %}">
-              <label class="wc-UploadForm js-image-upload-label" for="image">
+              <label
+                class="wc-UploadForm wc-UploadForm--homePage js-image-upload-label"
+                for="image"
+              >
                 <div class="wc-UploadForm-wrapper">
                   <div class="wc-UploadForm-icon" aria-hidden="true">
                     <span class="wc-Icon wc-Icon--cloud-upload"></span>
@@ -81,11 +84,18 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
                   {% endif %}
                   {{ form.image(class_='wc-ButtonUpload', accept='.jpe,.jpg,.jpeg,.gif,.png,.bmp') }}
                 </div>
-                <button class="wc-UploadForm-button is-hidden r-ResetButton"
-                        role="button"
-                        type="button">
-                  <img class="wc-Upload-Loader js-Upload-Loader" src="/img/upload-loader.svg" alt="Uploading image">
-                  Remove image upload</button>
+                <button
+                  class="wc-UploadForm-button is-hidden r-ResetButton"
+                  role="button"
+                  type="button"
+                >
+                  <img
+                    class="wc-Upload-Loader js-Upload-Loader"
+                    src="/img/upload-loader.svg"
+                    alt="Uploading image"
+                  >
+                    Remove image upload
+                  </button>
               </label>
             </div>
         </div>

From 4275b354cda10c815b6bb2909fa5afef13f993c5 Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Fri, 7 Apr 2017 22:21:04 +0200
Subject: [PATCH 2/2] Issue #1475 - fixed side effect when button is active

---
 webcompat/static/css/development/components/button.css | 1 +
 webcompat/static/js/lib/bugform.js                     | 2 ++
 webcompat/templates/home-page/form.html                | 1 +
 3 files changed, 4 insertions(+)

diff --git a/webcompat/static/css/development/components/button.css b/webcompat/static/css/development/components/button.css
index eaa9ceeb5..84ec68719 100644
--- a/webcompat/static/css/development/components/button.css
+++ b/webcompat/static/css/development/components/button.css
@@ -80,6 +80,7 @@
     position: absolute;
     opacity: 0;
     z-index: 1;
+    width: 100%;
     top:0;
     right: 0;
     bottom: 0;
diff --git a/webcompat/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js
index 6062bc5d0..117965209 100644
--- a/webcompat/static/js/lib/bugform.js
+++ b/webcompat/static/js/lib/bugform.js
@@ -414,6 +414,7 @@ function BugForm() {
     $(".wc-UploadForm-label").show();
 
     removeBanner.removeClass("is-hidden");
+    removeBanner.attr("tabIndex", "0");
     uploadWrapper.addClass("is-hidden");
     removeBanner.on(
       "click",
@@ -422,6 +423,7 @@ function BugForm() {
           // remove the preview and hide the banner
           label.css("background", "none");
           removeBanner.addClass("is-hidden");
+          removeBanner.attr("tabIndex", "-1");
           uploadWrapper.removeClass("is-hidden");
           removeBanner.off("click");
 
diff --git a/webcompat/templates/home-page/form.html b/webcompat/templates/home-page/form.html
index 42e35e052..1836c091f 100644
--- a/webcompat/templates/home-page/form.html
+++ b/webcompat/templates/home-page/form.html
@@ -88,6 +88,7 @@ <h3 class="wc-Title--s">Report Site Issue</h3>
                   class="wc-UploadForm-button is-hidden r-ResetButton"
                   role="button"
                   type="button"
+                  tabindex="-1"
                 >
                   <img
                     class="wc-Upload-Loader js-Upload-Loader"