You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ya...@apache.org on 2025/06/22 16:12:55 UTC
(airavata-portals) 27/39: Improved readability
This is an automated email from the ASF dual-hosted git repository.
yasith pushed a commit to branch merge-portals
in repository https://gitbox.apache.org/repos/asf/airavata-portals.git
commit 83d32fdcb94cf0d06fb5049af711ee132b2246f6
Author: Akhil Nagulavancha <ak...@akhils-mbp.lan>
AuthorDate: Mon Jun 22 16:47:53 2020 -0400
Improved readability
---
.../js/containers/Storage.vue | 181 +++++++++++---------
.../js/containers/StorageResources.vue | 93 ++++++-----
.../apps/workspace/templates/container-header.html | 4 +-
.../apps/workspace/templates/resources.html | 3 +-
airavata_mft/apps/workspace/templates/storage.html | 3 +-
airavata_mft/templates/base.html | 186 +++++++++++----------
6 files changed, 251 insertions(+), 219 deletions(-)
diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
index 2cd7bd4b0..3085694dd 100644
--- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
+++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue
@@ -1,86 +1,101 @@
<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="#" @click="sortBy('name')">Name</a>
- <a class="dropdown-item" href="#" @click="sortBy('size')">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" v-on:click="layout = 'list'" v-bind:class="{ 'active': layout == 'list'}"></i></button>
- <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th" v-on:click="layout = 'grid'" v-bind:class="{ 'active': layout == 'grid'}"></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="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>
- <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 v-if="layout === 'list'" 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"
+ <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="#" @click="sortBy('name')">Name</a>
+ <a class="dropdown-item" href="#" @click="sortBy('size')">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" v-on:click="layout = 'list'" v-bind:class="{ 'active': layout == 'list'}"></i>
+ </button>
+ <button class="btn btn-sm btn-outline-secondary list">
+ <i class="fa fa-th" v-on:click="layout = 'grid'" v-bind:class="{ 'active': layout == 'grid'}"></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="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>
+ <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 v-if="layout === 'list'" 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" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
- <div class="progress-bar green-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- </td>
- <td>{{storage.lastModified}}</td>
- </tr>
- </tbody>
- </table>
- <div v-if="layout === 'grid'" class="table table-hover main-table " >
- <!-- Icons of respective storages should be should be added -->
- <ul :style="gridStyle" class="card-list ">
- <li v-for="storage in storageList " v-bind:key="storage.storageId" class="card-item " @click="showDescription(storage)">
- <br>{{ storage.name }}<br/>
- <br>{{ storage.size}}<br/>
- </li>
- </ul>
- </div>
- </div>
-</template>
-
-<script>
+ <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" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar green-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </td>
+ <td>{{storage.lastModified}}</td>
+ </tr>
+ </tbody>
+ </table>
+ <div v-if="layout === 'grid'" class="table table-hover main-table " >
+ <!-- Icons of respective storages should be should be added -->
+ <ul :style="gridStyle" class="card-list ">
+ <li v-for="storage in storageList " v-bind:key="storage.storageId" class="card-item " @click="showDescription(storage)">
+ <br>{{ storage.name }}
+ <br/>
+ <br>{{ storage.size}}
+ <br/>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </template>
+ <script>
//TODO: implement pagination
export default {
name: 'storage',
@@ -111,9 +126,9 @@ export default {
}
}
}
-</script>
-<style scoped>
+ </script>
+ <style scoped>
.new-unit{
width: 140px;
}
diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue
index 2dd48e3a2..f0618c43f 100644
--- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue
+++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue
@@ -1,48 +1,55 @@
<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="#" @click="sortBy('name')">Name</a>
- <a class="dropdown-item" href="#" @click="sortBy('size')">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">Last Modified</th>
- <th scope="col"></th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="resource in resources"
+ <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="#" @click="sortBy('name')">Name</a>
+ <a class="dropdown-item" href="#" @click="sortBy('size')">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">Last Modified</th>
+ <th scope="col"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="resource in resources"
:key="resource.resourceId">
- <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 class="btn btn-info btn-sm transfer">Transfer</b-button></td>
- </tr>
- </tbody>
- </table>
- </div>
+ <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 class="btn btn-info btn-sm transfer">Transfer</b-button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</template>
-
<script>
export default {
name: "StorageResources.vue",
@@ -59,8 +66,8 @@
}
}
}
-</script>
+</script>
<style scoped>
.main-table{
width: 83%!important;
diff --git a/airavata_mft/apps/workspace/templates/container-header.html b/airavata_mft/apps/workspace/templates/container-header.html
index 3f00db8a8..cdb19131f 100644
--- a/airavata_mft/apps/workspace/templates/container-header.html
+++ b/airavata_mft/apps/workspace/templates/container-header.html
@@ -9,6 +9,6 @@
{% endblock scripts %}
{% block app %}
- <div id={{ bundle_name }}>
- </div>
+
+<div id={{ bundle_name }}></div>
{% endblock app %}
\ No newline at end of file
diff --git a/airavata_mft/apps/workspace/templates/resources.html b/airavata_mft/apps/workspace/templates/resources.html
index 9db570aec..fdd3e2ddf 100644
--- a/airavata_mft/apps/workspace/templates/resources.html
+++ b/airavata_mft/apps/workspace/templates/resources.html
@@ -1,6 +1,7 @@
{% extends "container-header.html" %}
{% block app %}
- <div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div>
+
+<div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div>
{% endblock app %}
diff --git a/airavata_mft/apps/workspace/templates/storage.html b/airavata_mft/apps/workspace/templates/storage.html
index 84f8413f3..d93554a1a 100644
--- a/airavata_mft/apps/workspace/templates/storage.html
+++ b/airavata_mft/apps/workspace/templates/storage.html
@@ -1,6 +1,7 @@
{% extends "container-header.html" %}
{% block app %}
- <div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div>
+
+<div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div>
{% endblock app %}
diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html
index 0f0120f58..6e66c8bfe 100644
--- a/airavata_mft/templates/base.html
+++ b/airavata_mft/templates/base.html
@@ -1,76 +1,84 @@
{% load static %}
{% load render_bundle from webpack_loader %}
+
<!DOCTYPE html>
<head>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-</head>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ </head>
{% block scripts %}
{% endblock scripts %}
{% render_bundle 'chunk-vendors' config='DEFAULT'%}
{% render_bundle 'app' config='DEFAULT'%}
-<body>
- <nav class="navbar navbar-light header shadow-sm">
- <div class="container-fluid">
- <div class="col-2">
- <a class="navbar-brand" href="#">
- <div class="row">
- <div class="col-5">
- <img class="logo" src="{% static 'images/airavata-logo.png' %}">
- </div>
- <div>
- <div class="col-8">
- <div class="row apache">
- <span class="header-text apache-text">APACHE</span>
- </div>
- <div class="row airavata">
- <span class="header-text airavata-text">AIRAVATA</span>
- </div>
- </div>
- </div>
- </div>
- </a>
- </div>
- <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 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">Admin</a>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <a class="dropdown-item" href="#">Logout</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </nav>
-<!-- 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">
+ <body>
+ <nav class="navbar navbar-light header shadow-sm">
+ <div class="container-fluid">
+ <div class="col-2">
+ <a class="navbar-brand" href="#">
+ <div class="row">
+ <div class="col-5">
+ <img class="logo" src="{% static 'images/airavata-logo.png' %}">
+ </div>
+ <div>
+ <div class="col-8">
+ <div class="row apache">
+ <span class="header-text apache-text">APACHE</span>
+ </div>
+ <div class="row airavata">
+ <span class="header-text airavata-text">AIRAVATA</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ <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 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">Admin</a>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="#">Logout</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </nav>
+ <!-- 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>
-
-</body>
-
-<style>
+ </div>
+ </div>
+ </body>
+ <style>
+ /* Side Navigation Bar */
.selected-nav{
margin-right: 0.5em;
color: lightblue;
@@ -89,6 +97,17 @@
.c-nav__item:hover{
background-color: #d6d8db!important;
}
+ .nav-icon {
+ padding-right: 10%;
+ padding-left: 14%;
+ }
+ .c-nav__item:hover{
+ color: #17a2b8;
+ text-decoration: none;
+ font-weight:bold;
+ }
+ /* Top Navigation */
+
.header {
background-color: white;
padding-top: 2%;
@@ -99,7 +118,21 @@
.header-text{
color: grey;
}
-
+ .header-drop-down {
+ color: black;
+ background-color: white;
+ border: white;
+ }
+ .apache {
+ height: 0.7em;
+ }
+ .apache-text{
+ font-size: smaller;
+ }
+ .airavata-text{
+ font-size: larger;
+ }
+
/* Bootstrap 4 text input with search icon */
.form-control {
@@ -119,36 +152,11 @@
pointer-events: none;
color: #aaa;
}
- .header-drop-down {
- color: black;
- 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 */
.main-app{
padding-top: 1.5%
}
-</style>
+</style>
\ No newline at end of file