Skip to content
Permalink
Browse files
Resources page and CSS improvements
  • Loading branch information
aarushiibisht committed Apr 27, 2020
1 parent b89a6b6 commit 16099a33a0b176c6681720da423865d4aed2d818
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 103 deletions.
@@ -1,76 +1,74 @@
<template>

<div class="row">
<div class="col-7">
<h1 class="h4 mb-4">{{heading}}</h1>
</div>
<div class="col-4">
<div class="btn-toolbar">
<div class="btn-group mr-4" role="group">
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Size</a>
</div>
</div>
</div>
<div class="btn-group mr-4" role="group">
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
</div>
<div class="btn-group mr-4 new-unit" role="group">
<button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
<div class="row">
<div class="col-7">
<h1 class="h4 mb-4">{{heading}}</h1>
</div>
<div class="col-4">
<div class="btn-toolbar">
<div class="btn-group mr-4" role="group">
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Size</a>
</div>
</div>
</div>
<!-- Dialog box to show description of each storage unit -->
<b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer>
<div class="container">
<div class="row">
<div class="col-6">
<p v-if="selectedStorage.host"><b>Host</b></p>
<p v-if="selectedStorage.port"><b>Port</b></p>
<p v-if="selectedStorage.user"><b>User</b></p>
</div>
<div class="col-6">
<p v-if="selectedStorage.host">{{selectedStorage.host}}</p>
<p v-if="selectedStorage.port">{{selectedStorage.port}}</p>
<p v-if="selectedStorage.user">{{selectedStorage.user}}</p>
</div>
</div>
<div class="btn-group mr-4" role="group">
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
</div>
<div class="btn-group mr-4 new-unit" role="group">
<button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button>
</div>
</div>
</div>
<!-- Dialog box to show description of each storage unit -->
<b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer>
<div class="container">
<div class="row">
<div class="col-6">
<p v-if="selectedStorage.host"><b>Host</b></p>
<p v-if="selectedStorage.port"><b>Port</b></p>
<p v-if="selectedStorage.user"><b>User</b></p>
</div>
<div class="d-flex justify-content-center">
<b-button :href="selectedStorage.storageId">Browse</b-button>
<div class="col-6">
<p v-if="selectedStorage.host">{{selectedStorage.host}}</p>
<p v-if="selectedStorage.port">{{selectedStorage.port}}</p>
<p v-if="selectedStorage.user">{{selectedStorage.user}}</p>
</div>
</b-modal>
<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>
<tbody>
<tr v-for="storage in storageList"
:key="storage.storageId" @click="showDescription(storage)">
<th scope="row">{{storage.name}}</th>
<td>{{storage.size}}</td>
<td>
<div class="progress storage-progress" style="width: 20%">
<!-- TODO: storage value should be picked from storage.occupied -->
<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>{{storage.lastModified}}</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="d-flex justify-content-center">
<b-button class="btn btn-sm btn-info browse" :href="selectedStorage.storageId">Browse</b-button>
</div>
</b-modal>
<table class="table table-hover main-table">
<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>
<tbody>
<tr class="table-item" v-for="storage in storageList"
:key="storage.storageId" @click="showDescription(storage)">
<th scope="row"><i class="fa fa-database unit-name-icon" aria-hidden="true"></i>{{storage.name}}</th>
<td>{{storage.size}}</td>
<td>
<div class="progress storage-progress">
<!-- TODO: storage value should be picked from storage.occupied -->
<div class="progress-bar red-bar" role="progressbar" style="width: 30%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar green-bar" role="progressbar" style="width: 70%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>{{storage.lastModified}}</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
@@ -94,7 +92,7 @@ export default {
}
</script>

<style>
<style scoped>
.new-unit{
width: 140px;
}
@@ -104,4 +102,28 @@ export default {
.list{
width: 40px;
}
.main-table{
width: 83%!important;
}
.unit-name-icon{
padding-right: 5%;
font-size:smaller;
}
.browse{
width: 25%;
height: 85%;
}
.green-bar{
background-color: #50c878;
}
.red-bar{
background-color: #cd5c5c;
}
.storage-progress{
width: 20%;
height: 50%;
}
.table-item{
cursor: pointer;
}
</style>
@@ -1,30 +1,46 @@
<template>
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-7">
<h1 class="h4 mb-4">{{heading}}</h1>
</div>
<table class="table table-hover">
<div class="col-4">
<div class="btn-toolbar">
<div class="btn-group mr-4" role="group">
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Size</a>
</div>
</div>
</div>
<div class="btn-group mr-4" role="group">
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button>
<button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button>
</div>
</div>
</div>
<table class="table table-hover main-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Size</th>
<th scope="col">LastModified</th>
<th scope="col">Last Modified</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="resource in resources"
:key="resource.resourceId">
<th scope="row">{{resource.name}}</th>
<th scope="row"><i class="fa fa-folder resource-name-icon"></i>
{{resource.name}}</th>
<td>{{resource.size}}</td>
<td>{{resource.lastModified}}</td>
<td><b-button>Transfer</b-button></td>
<td><b-button class="btn btn-info btn-sm transfer">Transfer</b-button></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
@@ -41,5 +57,14 @@
</script>

<style scoped>
.main-table{
width: 83%!important;
}
.transfer {
width: 45%;
}
.resource-name-icon{
padding-right: 3%;
font-size:smaller;
}
</style>
@@ -16,10 +16,10 @@ def storage(request):


def resources(request, storage_id):
resource_json = [{"resourceId": "resource1", "name": "resource1"},
{"resourceId": "resource1", "name": "resource1"},
{"resourceId": "resource1", "name": "resource1"},
{"resourceId": "resource1", "name": "resource1"}]
resource_json = [{"resourceId": "Spring project", "name": "Spring project", "size": "12 GB", "lastModified": "Jan 15, 2020"},
{"resourceId": "Trial", "name": "Trial", "size": "12 GB", "lastModified": "Jan 15, 2020"},
{"resourceId": "New", "name": "New", "size": "12 GB", "lastModified": "Jan 15, 2020"},
{"resourceId": "Random testing", "name": "Random testing", "size": "12 GB", "lastModified": "Jan 15, 2020"}]
return render(request, 'resources.html', {'bundle_name': 'resources',
'data': json.dumps(resource_json),
'title': 'Storage Unit > ' + storage_id})
@@ -98,4 +98,3 @@ body {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

@@ -9,7 +9,6 @@
{% render_bundle 'chunk-vendors' config='DEFAULT'%}
{% render_bundle 'app' config='DEFAULT'%}
<body>
<!-- TODO : header and side navigation bar" -->
<nav class="navbar navbar-light header shadow-sm">
<div class="container-fluid">
<div class="col-2">
@@ -20,28 +19,28 @@
</div>
<div>
<div class="col-8">
<div class="row" style="height: 15px">
<span class="header-text" style="font-size: smaller">APACHE</span>
<div class="row apache">
<span class="header-text apache-text">APACHE</span>
</div>
<div class="row">
<span class="header-text" style="font-size: larger">AIRAVATA</span>
<div class="row airavata">
<span class="header-text airavata-text">AIRAVATA</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-8" style="padding-left: 0%">
<div class="col-8 search-div">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-2">
<div class="row">
<div class="row user-div">
<i class="fa fa-user-circle fa-2x"></i>
<div class="dropdown">
<a class="btn dropdown-toggle header-drop-down" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User name</a>
<a class="btn dropdown-toggle header-drop-down" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Logout</a>
</div>
@@ -51,24 +50,24 @@
</div>
</nav>


<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-top: 1.5%">
<nav class="nav flex-column">
<div style="background-color: lightblue"><a class="c-nav__item selected-nav" href="#"><b>Storage Units</b></a></div>
<div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Users</b></a></div>
<div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Agents</b></a></div>
<div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Audit</b></a></div>
</nav>
</div>
<div class="col-10" style="padding-top: 1.5%">
{% block app %}
{% endblock app %}
<!-- side navigation bar (Needs to move to a vue template)-->
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-top: 1.5%">
<nav class="nav flex-column">
<a class="c-nav__item selected-nav" href="#"><i class="fa fa-database nav-icon"></i>Storage Units</a>
<a class="c-nav__item" href="#"><i class="fa fa-users nav-icon"></i>Users</a>
<a class="c-nav__item" href="#"><i class="fa fa-cogs nav-icon"></i>Agents</a>
<a class="c-nav__item" href="#"><i class="fa fa-book nav-icon"></i>Audit</a>
</nav>
</div>
<div class="col-10 main-app">
{% block app %}
{% endblock app %}
</div>
</div>
</div>

</div>
</body>

<style>
@@ -85,6 +84,10 @@
font-size: 1rem;
display: block;
background-color: white;
padding-bottom: 0%;
}
.c-nav__item:hover{
background-color: #d6d8db!important;
}
.header {
background-color: white;
@@ -123,4 +126,31 @@
background-color: white;
border: white;
}
.nav-icon {
padding-right: 10%;
padding-left: 14%;
}
.c-nav__item:hover{
color: #17a2b8;
text-decoration: none;
font-weight:bold;
}
.apache {
height: 0.7em;
}
.apache-text{
font-size: smaller;
}
.airavata-text{
font-size: larger;
}
.search-div{
padding-left: 0%;
}
.user-div{
margin-top: -10%;
}
.main-app{
padding-top: 1.5%
}
</style>

0 comments on commit 16099a3

Please sign in to comment.