Bootstrap compatible order page #947

2019-05-25T17:41:06Z

ao commented

2019-05-25 17:41:06 +00:00

In answer to
#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 2019-05-25 17:41:06 +00:00

ao added this to the Hackathon1905 milestone 2019-05-26 09:49:36 +00:00

max.mehl commented

2019-05-27 13:54:05 +00:00

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>  <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 added a new dependency 2019-05-27 13:54:37 +00:00

#930 Fixes #752 - Make the TOC responsive for the order page

max.mehl referenced this issue from a commit

2019-05-27 14:36:22 +00:00

make order-form bootstrap-native. Adapt #947 to all up-to-date languages, and delete outdated ones @ao made a first good start with bootstrap in #947. This PR slightly improves it, and for all up-to-date languages This commit also removes unneccesary CSS classes

max.mehl commented

2019-05-27 14:44:25 +00:00

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!

max.mehl closed this pull request

2019-05-27 14:44:26 +00:00