#947 Bootstrap compatible order page

Closed
ao wants to merge 1 commits from ao/fsfe-website:20190525-2 into master
ao commented 4 months ago

In answer to https://git.fsfe.org/FSFE/fsfe-website/issues/714

Please first check wether it works with the back-end.

In answer to https://git.fsfe.org/FSFE/fsfe-website/issues/714 Please first check wether it works with the back-end.
ao added the
design
label 4 months ago
ao added this to the Hackathon1905 milestone 4 months ago
max.mehl commented 4 months ago
Owner

Thank you! I researched a bit more about how Bootstrap does forms, and came up with these small improvments largely based on your work. However, I would like to wait for #930 to be merged as it touches all translations:

      <h2>Shipping</h2>

      <input type="hidden" name="shipping" value="1"/>
      <div class="radio">
        <label>
          <input type="radio" name="_shipping" id="shipping-de" value="3" />
          <strong>Shipping within Germany (€3.00)</strong>
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="_shipping" id="shipping-eu" value="7" checked="" />
          <strong>Shipping within Europe (€7.00)</strong>
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="_shipping" id="shipping-world" value="12" />
          <strong>Shipping outside Europe (€12.00)</strong>
        </label>
      </div>

      <div class="row form-group">
        <div class="col-sm-2">
          <label class="control-label" for="name">Name:</label>
        </div>
        <div class="col-sm-4">
          <input class="form-control" id="name" name="name" type="text" />
        </div>
      </div>

      <div class="row form-group">
        <div class="col-sm-2">
          <label class="control-label vcenter" for="address">Complete address:</label>
        </div>
        <div class="col-sm-4">
          <textarea class="form-control" rows="5" id="address" name="address" type="text" />
        </div>
      </div>

      <div class="row form-group">
        <div class="col-sm-2">
          <label class="control-label" for="email">Email:</label>
        </div>
        <div class="col-sm-4">
          <input class="form-control" id="email" name="email" type="email" />
        </div>
      </div>

      <div class="row form-group">
        <div class="col-sm-2">
          <label class="control-label" for="phone">Phone:</label>
        </div>
        <div class="col-sm-4">
          <input class="form-control" id="phone" name="phone" type="text" />
        </div>
      </div>

      <p class="n">
        Please do not put anything in here:
        <input type="text" size="40" name="url"/>
      </p>

      <!-- Translators: Please change the value here to your language -->
      <input type="hidden" name="language" value="en_GB"/>
      
      <div class="row form-group">
        <div class="col-sm-offset-2 col-sm-6">
          <button type="submit" class="btn btn-primary">Order items</button>
        </div>
      </div>
    </form>
Thank you! I researched a bit more about how Bootstrap does forms, and came up with these small improvments largely based on your work. However, I would like to wait for #930 to be merged as it touches all translations: ``` <h2>Shipping</h2> <input type="hidden" name="shipping" value="1"/> <div class="radio"> <label> <input type="radio" name="_shipping" id="shipping-de" value="3" /> <strong>Shipping within Germany (€3.00)</strong> </label> </div> <div class="radio"> <label> <input type="radio" name="_shipping" id="shipping-eu" value="7" checked="" /> <strong>Shipping within Europe (€7.00)</strong> </label> </div> <div class="radio"> <label> <input type="radio" name="_shipping" id="shipping-world" value="12" /> <strong>Shipping outside Europe (€12.00)</strong> </label> </div> <div class="row form-group"> <div class="col-sm-2"> <label class="control-label" for="name">Name:</label> </div> <div class="col-sm-4"> <input class="form-control" id="name" name="name" type="text" /> </div> </div> <div class="row form-group"> <div class="col-sm-2"> <label class="control-label vcenter" for="address">Complete address:</label> </div> <div class="col-sm-4"> <textarea class="form-control" rows="5" id="address" name="address" type="text" /> </div> </div> <div class="row form-group"> <div class="col-sm-2"> <label class="control-label" for="email">Email:</label> </div> <div class="col-sm-4"> <input class="form-control" id="email" name="email" type="email" /> </div> </div> <div class="row form-group"> <div class="col-sm-2"> <label class="control-label" for="phone">Phone:</label> </div> <div class="col-sm-4"> <input class="form-control" id="phone" name="phone" type="text" /> </div> </div> <p class="n"> Please do not put anything in here: <input type="text" size="40" name="url"/> </p> <!-- Translators: Please change the value here to your language --> <input type="hidden" name="language" value="en_GB"/> <div class="row form-group"> <div class="col-sm-offset-2 col-sm-6"> <button type="submit" class="btn btn-primary">Order items</button> </div> </div> </form> ```
max.mehl commented 4 months ago
Owner

I have merged #957 which heavily bases on this proposal. More in the description.

Thank you @ao for making the research and suggestion!

I have merged #957 which heavily bases on this proposal. More in the description. Thank you @ao for making the research and suggestion!
All checks were successful
the build was successful
Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Loading…
Cancel
Save
There is no content yet.