refactor template: form.html

[denschub]

Refactor following:
https://github.com/webcompat/webcompat.com/blob/master/webcompat/templates/home-page/form.html

with:

The form in http://webcompat.github.io/design/

Please be aware to add the placeholders for links as they are in the old templates.

Left do do:

• Fix screenshot uploader
• Make sure validation works

[denschub]

Although PR #1908 is merged, let's keep this issue open. We need to do some follow-ups.

[zoepage]

@denschub wanna add a list of follow ups / do you want to finish up the issue at some point? Otherwise happy to take over :)

[denschub]

@zoepage added a list! i'll be able to continue, but that have to wait until next week, I fear.

[zoepage]

@denschub no worries && thank you :)

[miketaylr]

Left do do:

Fix screenshot uploader
Make sure validation works

I'm happy to help with this!

[denschub]

@miketaylr cool. Just for your reference (dumping my brain so you don't have to start at 0), I did not take over all css classes from the old template to avoid having a lot of classes on all elements. Since the JS heavily depends on some lookups via JS classes, this probably breaks. So the easy solution is probably just to re-apply the classes, but the cleaner solution would be to change the JS to use the new classes (or something more robust and style independent, maybe IDs...)

[zoepage]

We kept all JS classes in the other templates as this would otherwise get too massive of a refactor. Phase 2 will be the part where we clean that up (probably 2020 🤡).

[miketaylr]

@zoepage can you explain what's the expected markup here?

<div class="form-upload form-element js-image-upload js-Form-group">
  <label class="wc-UploadForm wc-UploadForm--homePage js-image-upload-label" for="image">
    {{ form.image(class_='form-input input-upload wc-ButtonUpload', accept='.jpe,.jpg,.jpeg,.gif,.png,.bmp') }}
    {% if form.image.errors %}
      {% for error in form.image.errors %}
      <span class="wc-Form-helpMessage--imageUpload">{{ error }}</span>
      {% endfor %}
    {% endif %}
    <div class="wc-UploadForm-wrapper">
      <label class="form-label label-upload wc-UploadForm-label">
        <svg class="icon icon-big wc-UploadForm-icon" role="presentation">
          <use class="icon-upload" href="#svg-upload-2">Upload</use>
        </svg>
        Upload screenshot
      </label>
    </div>
    <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>

<label for=foo>
  <input id=foo>
  <div>
    <label>
      <svg>
    <label>
  ....

Not sure why we have nested labels. Is that intentional? I think I need to figure out the new markup before I fix the JS, since I'm just going to re-write the relevant bits.

[zoepage]

You might want to take a look at http://webcompat.github.io/design/ > Module: Forms

This is the expected markup:

/* UPLOAD */
<div class="form-upload form-element">
	<input
		type="file"
		accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp"
		class="form-input input-upload"
		id="id"
	/>

	<label class="form-label label-upload" for="idOfInput">
		<svg class="icon icon-big" role="presentation">
		  	<use class="icon-upload" href="#upload-2">Upload</use>
		</svg>
		Screenshot label name
	</label>
</div>

Happy to help and fix the markup first, before you start working on this?

[miketaylr]

Thanks! I'll holler if I get stuck.

[zoepage]

this was merged.