Buefy/Vue Panel Layout

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="section">

  <h1>
    Billing
  </h1>
  
  <div class="message is-success">
    <div class="message-body">
      You have a new plan offer to review and accept.
      <button class="button is-primary">
      Review
      </button>
    </div>
  </div>

  <div class="columns">
  
    <div class="column is-two-fifths-tablet">
  
      <h2>
        Submit an Issue
      </h2>

      <dl>
        <dt>Plan name: </dt>
        <dd>My Special Plan Name</dd>

        <dt>Payment cycle: </dt>
        <dd>Monthly</dd>
      </dl>

    </div>    

    <div class="column is-three-fifths-tablet">
  
      <div class="panel">
        <h2 class="panel-heading has-text-weight-bold is-flex">
          Daily Enrolled Devices
        </h2>

        <div class="panel-block">

          <div>
            the chart
          </div>

        </div>
      </div>  

    </div>    

  </div>
  
  <hr>

  <h2>
    Invoices
  </h2>
  <b-table
    :data="data">

    <template slot-scope="props">
      <b-table-column field="id" label="ID" width="40" numeric>
        {{ props.row.id }}
      </b-table-column>

      <b-table-column field="start_date" label="Date">
          {{ new Date(props.row.start_date).toLocaleDateString() }} &ndash; {{ new Date(props.row.end_date).toLocaleDateString() }}
      </b-table-column>


      <b-table-column field="status" label="Status">
        <span
          v-bind:class="{'has-text-success': props.row.status == 'Paid'}">
            {{ props.row.status }}
        </span>
      </b-table-column>

      <b-table-column label="Amount">
        $ {{ props.row.amount }}
      </b-table-column>
    </template>

    <template slot="empty">
        <div class="message">
          <p>No invoices</p>
        </div>
    </template>

  </b-table>
 ...

SCSS

.flex-1 {
  flex: 1 1 auto;
}

.align-items-center {
  align-items: center
}

.m-l-auto {
  margin-left: auto
}

Vue

const example = {
    data() {
      return {
        data: [
          { 'id': 1, 'start_date': '2019/03/15 13:43:27', 'end_date': '2019/04/15 13:43:27', 'status': 'Upcoming', 'amount': '130.00' },
          { 'id': 2, 'start_date': '2019/02/15 13:43:27', 'end_date': '2019/03/15 13:43:27', 'status': 'Paid', 'amount': '95.00' },
          { 'id': 3, 'start_date': '2019/01/15 13:43:27', 'end_date': '2019/02/15 13:43:27', 'status': 'Paid', 'amount': '95.00' },
        ]
      }
    }
}

const app = new Vue(example)

app.$mount('#app')