flag now displays as inline block, no double calls

acammies

2018-04-05 637b4a50df62739de12a65555522d744147e30da

flag now displays as inline block, no double calls

 src/components/TodoItem.vue

@@ -8,13 +8,13 @@
      <checkbox v-model="todoItem.completed"/> 

      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
      <md-button 
        @click="markCompleted(); markImportant()"
    </md-list-item>
      <md-button class="flag"
        @click="markImportant()"
        >
        <!-- find a nice way to utilise svg fill property without doing it inline -->
        <svg :class="{'red-flag': todoItem.important}"  height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ><path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>
      </md-button>
    </md-list-item>
    </div>
  </div>
</template>
@@ -53,18 +53,20 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.md-list {
.md-list-item {
  width: 320px;
  max-width: 100%;
  height: 400px;
  height: 50px;
  display: inline-block;
  overflow: auto;
  border: 1px solid rgba(#000, 0.12);
  vertical-align: top;
}

.md-list-item-text {
  padding-left: 0.5em;
}

.itemCardandFlag {
  display: inline-block;
}

.strike-through {
@@ -72,6 +74,10 @@
  font-style: italic;
}

.flag {
  height: 50px;
  margin: 0px;
}
.red-flag {
  fill: #cc0000;
}

 src/components/XofYItems.vue

@@ -2,8 +2,8 @@
    <div>
        <div class="xofyDone">
            <span>{{sumDoneTodoItems(todos)}} out of {{this.todos.length}} done. </span>
            <button v-on:click="clearDoneTodos()">CLEAR DONE</button>
            <button v-on:click="clearTodos()">CLEAR ALL</button>
            <md-button class="md-raised" v-on:click="clearDoneTodos()">Clear Done</md-button>
            <md-button class="md-raised" v-on:click="clearTodos()">Clear all</md-button>
        </div>
    </div>
</template>