Skip to content
Permalink
Browse files
configure vue js settings for the app
  • Loading branch information
aarushiibisht committed Apr 11, 2020
1 parent 95cf3b9 commit 0a8a84f7eed6ce2ffae1238c963ca8b8f39d07a6
Show file tree
Hide file tree
Showing 26 changed files with 12,452 additions and 122 deletions.

Some generated files are not rendered by default. Learn more.

@@ -18,7 +18,11 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^0.4.3",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.11.0"
},
"eslintConfig": {
"root": true,
Binary file not shown.

This file was deleted.

This file was deleted.

Deleted file not rendered

This file was deleted.

This file was deleted.

@@ -0,0 +1,92 @@
<template>
<div id="storage">
<div class="container-fluid">
<div class="row">
<div class="col-8">
<h1 class="h4 mb-4">Storage Units</h1>
</div>
<div class="col-1">
<div class="dropdown">
<button class="btn btn-sm btn-secondary dropdown-toggle" style="background: white;color: grey" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Sort by
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
<div class="col-1">

</div>
<div class="col-2">
<button class="btn btn-sm"><span data-feather="plus"></span> Add new unit</button>
</div>
</div>
<!--
<div class="btn-group btn-group-sm" role="group" aria-label="view">
<button class="btn-sm btn-primary"></button>
<button class="btn-sm btn-primary"></button>
</div>
<button class="btn-sm btn-primary"> Add new unit</button> -->

<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Storage size</th>
<th scope="col">Storage occupied</th>
<th scope="col">Last modified</th>
</tr>
</thead>
<!--- This should be removed -->
<tbody>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>Jan 15, 2020</td>
</tr>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div></td>
<td>Jan 15, 2020</td>
</tr>
<tr>
<th scope="row">Box </th>
<td>15 GB</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>Jan 15, 2020</td>
</tr>

</tbody>
</table>
</div>
</div>
</template>

<script>
export default {
name: 'storage',
}
</script>

<style>
</style>
@@ -0,0 +1,11 @@
import Vue from 'vue'
import storage from "./containers/Storage"
import { BootstrapVue } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

new Vue ({render: h => h(storage, {})}).$mount("#storage")

0 comments on commit 0a8a84f

Please sign in to comment.