Merge pull request #1492 from /issues/1475

Fixes #1475 - removed side effect when button is active
webcompat · Apr 10, 2017 · 3a8a188 · 3a8a188
2 parents e8a2adc + 4275b35
commit 3a8a188
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 25 deletions.
diff --git 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/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
@@ -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
@@ -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/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js
@@ -419,6 +419,7 @@ function BugForm() {
     $(".wc-UploadForm-label").show();
 
     removeBanner.removeClass("is-hidden");
+    removeBanner.attr("tabIndex", "0");
     uploadWrapper.addClass("is-hidden");
     removeBanner.on(
       "click",
@@ -427,6 +428,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
@@ -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,19 @@ <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"
+                  tabindex="-1"
+                >
+                  <img
+                    class="wc-Upload-Loader js-Upload-Loader"
+                    src="/img/upload-loader.svg"
+                    alt="Uploading image"
+                  >
+                    Remove image upload
+                  </button>
               </label>
             </div>
         </div>