Vue

by maxell4o

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container" id="app">
  <div class="row">
    <div class="col callstack legend">
      <label>CallStack</label>
      <ul>
        <li v-for="item in callstack">{{item}}</li>
      </ul>
    </div>
    <div class="col webapi legend">
      <label>WebAPI</label>
      <ul>
        <li v-for="item in webapi">{{item}}</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col queue legend">
      <label>Queue</label>
      <ul>
        <li v-for="item in queue">{{item}}</li>
      </ul>
    </div>
  </div>
</div>

SCSS

body {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
  color: #fff;
}

.legend {
  margin: 5px;
  border: 1px #6ce890 dashed;
  min-height: 100px;
  border-radius: 5px;
  
  &.queue {
    border-color: #f8b068;
    label {
      background: #f8b068;
    }
  }

  label {
    font-size: 1.1rem;
    color: #20262E;
    font-weight: bold;
    background: #6ce890;
    padding: 0 1rem;
    border-radius: 0 0 5px 5px;
    transform: translateX(-100%);
    position: relative;
    left: 100%;
    top: -1px;
  }
}

Vue

new Vue({
  el: "#app",
  data: {
    callstack: [1,2,3,4],
    webapi: [1,2],
    queue: [1,32,4,54,63,567,457,45,874,58,3]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})