rachaelshaw

// Replaces assets/styles/pages/things/available-things.less
#available-things {
  .page-header {
    text-align: center;
    padding-top: 25px;
    padding-bottom: 35px;
    h1 {
      .container-sm();
      font-size: 22px;
      font-weight: 900;

rachaelshaw

Add to views/pages/things/available-things.ejs:

<% /* "Delete thing" modal */ %>
<modal v-if="confirmDeleteThingModalOpen && selectedThing" v-cloak key="delete" @close="closeDeleteThingModal()">
  <div class="modal-header">
    <h5 class="modal-title">Remove this item?</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span>&times;</span>
    </button>
  </div>

rachaelshaw

Add to views/pages/things/available-things.ejs:

Add click event to header button:

<button class="btn btn-outline-primary" @click="clickAddButton()">Add an item</button>

Add modal:

<% /* "Upload thing" modal */ %>
<modal v-if="uploadThingModalOpen" v-cloak key="new" @close="closeUploadThingModal()">
  <div class="modal-header">

rachaelshaw

Add to views/pages/things/available-things.ejs:

Replace <div class="photo-upload-field"...> and everything inside with:

<div class="photo-upload-field row d-flex align-items-center" :class="!uploadFormData.previewImageSrc ? 'justify-content-center' :  'justify-content-start'" >
  <div class="photo-preview col">
    <div class="image-wrapper" :class="!uploadFormData.previewImageSrc ? 'd-flex align-items-center justify-content-center' : ''">
      <img v-if="uploadFormData.previewImageSrc" alt="A preview of the selected item" :src="uploadFormData.previewImageSrc"/>
      <span v-else class="placeholder-icon fa fa-picture-o"></span>
    </div>
  </div>

rachaelshaw

Example devops instructions

Deployment

To deploy to staging:

sails run deploy