1
\$\begingroup\$

HTML & CSS

.route-checklist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.route-checklist.uniform {
  width: 1000px;
}

.route-checklist:not(.uniform) {
  justify-content: center;
}

.customer-checklist {
  padding: 10px 30px;
  margin: 15px;
  border: 1px solid black;
  border-radius: 10px;
  vertical-align: middle;
}

.route-checklist.uniform > .customer-checklist {
  min-width: 400px;
}

.route-checklist:not(.uniform) > .customer-checklist {
  text-align: center;
}

.customer-checklist .customer {
  font-weight: bold;
}

.route-checklist.uniform > .customer-checklist .customer {
  width: 300px;
  /* display: inline-block; */
}

.checkin-checklist {
  justify-content: space-between;
  flex-wrap: wrap;
}

.route-checklist.uniform .checkin-checklist {
  display: inline-flex;
  vertical-align: top;
}

.route-checklist:not(.uniform) .checkin-checklist {
  display: flex;
  width: 250px;
  margin: auto;
  text-align: left;
}

.checklist-item {
  width: 125px;
  text-align: left;
}

.checklist-item.large {
  width: 100%;
  text-align: center;
}
<!-- Setup #1 - Solo version -->
<h2>Solo Version</h2>
<p>Appears on the pages of each link.</p>

<div class="route-checklist">
  <div id="1" class="customer-checklist">
    <span class="customer">Test Customer #1</span>
    <div class="checkin-checklist">

      <div class="checklist-item ">
        <input type="checkbox" class="truck stock-checkbox check-in-checkbox" disabled="disabled">
        <a class="truck stock-link" href="#truckstock/18458">Truck Stock</a>
      </div>
      <div class="checklist-item ">
        <input type="checkbox" class="deliveries-checkbox check-in-checkbox" disabled="disabled">
        <a class="deliveries-link" href="#deliveries/18458">Deliveries</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="returns-checkbox check-in-checkbox" disabled="disabled">
        <a class="returns-link" href="#returns/18458">Returns</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="onhands-checkbox check-in-checkbox" disabled="disabled">
        <a class="onhands-link" href="#onhands/18458">OnHands</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="buybacks-checkbox check-in-checkbox" disabled="disabled">
        <a class="buybacks-link" href="#buybacks/18458">BuyBacks</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="samples-checkbox check-in-checkbox" disabled="disabled">
        <a class="samples-link" href="#samples/18458">Samples</a>
      </div>

      <div class="checklist-item large">
        <a class="back-link" href="#">Back to List</a>
      </div>

    </div>
  </div>
</div>


<!-- Setup #2: "uniform" aka List version -->
<h2>List Version</h2>
<p>This is the checklist that the "Back to List" link refers.</p>

<div class="route-checklist uniform">
  <div id="1" class="customer-checklist">
    <span class="customer">Test Customer #1</span>
    <div class="checkin-checklist">

      <div class="checklist-item ">
        <input type="checkbox" class="truck stock-checkbox check-in-checkbox" disabled="disabled">
        <a class="truck stock-link" href="#truckstock/18458">Truck Stock</a>
      </div>
      <div class="checklist-item ">
        <input type="checkbox" class="deliveries-checkbox check-in-checkbox" disabled="disabled">
        <a class="deliveries-link" href="#deliveries/18458">Deliveries</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="returns-checkbox check-in-checkbox" disabled="disabled">
        <a class="returns-link" href="#returns/18458">Returns</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="onhands-checkbox check-in-checkbox" disabled="disabled">
        <a class="onhands-link" href="#onhands/18458">OnHands</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="buybacks-checkbox check-in-checkbox" disabled="disabled">
        <a class="buybacks-link" href="#buybacks/18458">BuyBacks</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="samples-checkbox check-in-checkbox" disabled="disabled">
        <a class="samples-link" href="#samples/18458">Samples</a>
      </div>

    </div>
  </div>
  <div id="2" class="customer-checklist">
    <span class="customer">Test Customer #2</span>
    <div class="checkin-checklist">

      <div class="checklist-item ">
        <input type="checkbox" class="truck stock-checkbox check-in-checkbox" disabled="disabled">
        <a class="truck stock-link" href="#truckstock/18459">Truck Stock</a>
      </div>
      <div class="checklist-item ">
        <input type="checkbox" class="deliveries-checkbox check-in-checkbox" disabled="disabled">
        <a class="deliveries-link" href="#deliveries/18459">Deliveries</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="returns-checkbox check-in-checkbox" disabled="disabled">
        <a class="returns-link" href="#returns/18459">Returns</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="onhands-checkbox check-in-checkbox" disabled="disabled">
        <a class="onhands-link" href="#onhands/18459">OnHands</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="buybacks-checkbox check-in-checkbox" disabled="disabled">
        <a class="buybacks-link" href="#buybacks/18459">BuyBacks</a>
      </div>

      <div class="checklist-item ">
        <input type="checkbox" class="samples-checkbox check-in-checkbox" disabled="disabled">
        <a class="samples-link" href="#samples/18459">Samples</a>
      </div>

    </div>
  </div>
</div>

  • List Style - Made so that more customer checklists are visible on the page at one time.
  • Solo Style - Made so that it fits in the empty space next to another control that is on every page linked by the control.

Concerns

I'm not really worried about the visuals of the site, so much as

  • Are there more efficient ways to accomplish these styles?
  • Am I missing some best practices I'm not aware of?

Note - In case it matters I have to support IE11, Chrome, and Safari (iPad).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.