Skip to content

Commit

Permalink
Merge pull request #38 from BBMRI-ERIC/feat/add_ui_improvements_#37
Browse files Browse the repository at this point in the history
Feat/add UI improvements #37
  • Loading branch information
RadovanTomik committed Oct 3, 2023
2 parents 668328b + 23aa602 commit 4ca0228
Show file tree
Hide file tree
Showing 15 changed files with 1,805 additions and 1,409 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<link rel="icon" href="public/favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Calibri:wght@400;700&display=swap" rel="stylesheet">
<title>Negotiator</title>
Expand Down
2 changes: 1 addition & 1 deletion oidc_mock/docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ services:
},
{
"Type": "eduperson_entitlement",
"Value": "[\"urn:geant:bbmri-eric.eu:group:bbmri:negotiator_v3:admins#perun.bbmri-eric.eu\"]",
"Value": "[\"urn:geant:bbmri-eric.eu:group:bbmri:negotiator_v3:admins#perun.bbmri-eric.eu\", \"urn:geant:bbmri-eric.eu:group:bbmri:collections:BBMRI-ERIC%20Directory:bbmri-eric:ID:CZ_MMCI:collection:LTS#perun.bbmri-eric.eu\", \"urn:geant:bbmri-eric.eu:group:bbmri:collections:BBMRI-ERIC%20Directory#perun.bbmri-eric.eu\", \"urn:geant:bbmri-eric.eu:group:bbmri:negotiator_v3:researchers#perun.bbmri-eric.eu\"]",
"ValueType": "json"
}
]
Expand Down
135 changes: 68 additions & 67 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,71 +1,72 @@
{
"name": "negotiator-v3-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
"name": "negotiator-v3-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.0",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/vue-fontawesome": "^3.0.2",
"@popperjs/core": "^2.11.6",
"@vue/test-utils": "^2.2.7",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"bootstrap-icons": "^1.11.1",
"bootstrap-vue-next": "^0.8.10",
"core-js": "^3.8.3",
"dotenv": "^16.0.3",
"http-server": "^14.1.1",
"moment": "^2.29.4",
"oidc-client-ts": "^2.1.0",
"sass-loader": "^13.2.0",
"vue": "^3.2.47",
"vue-router": "^4.1.5",
"vue3-form-wizard": "^0.1.8",
"vuex": "^4.0.2",
"vuex-oidc": "^4.0.2",
"vuex-router-sync": "^5.0.0",
"yarn": "^1.22.19"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jsdom": "^21.0.0",
"sass": "^1.56.0",
"unplugin-vue-components": "^0.24.1",
"vite": "^3.0.9",
"vitest": "^0.23.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.2.0",
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/vue-fontawesome": "^3.0.2",
"@popperjs/core": "^2.11.6",
"@vue/test-utils": "^2.2.7",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"bootstrap-vue-next": "^0.8.10",
"core-js": "^3.8.3",
"dotenv": "^16.0.3",
"http-server": "^14.1.1",
"moment": "^2.29.4",
"oidc-client-ts": "^2.1.0",
"sass-loader": "^13.2.0",
"vue": "^3.2.47",
"vue-router": "^4.1.5",
"vue3-form-wizard": "^0.1.8",
"vuex": "^4.0.2",
"vuex-oidc": "^4.0.2",
"vuex-router-sync": "^5.0.0",
"yarn": "^1.22.19"
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jsdom": "^21.0.0",
"sass": "^1.56.0",
"unplugin-vue-components": "^0.24.1",
"vite": "^3.0.9",
"vitest": "^0.23.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
31 changes: 23 additions & 8 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<header>
<navigation-bar />
</header>
<div class="container pt-4 main-container">
<div class="container min-vh-100 d-flex flex-column pt-4">
<div
v-if="notification !== undefined"
class="row"
Expand All @@ -25,11 +25,30 @@
</div>
</div>
<div class="row">
<div class="col-1" />
<div class="col-10">
<div class="col-12">
<router-view :key="$route.path" />
</div>
<div class="col-1" />
</div>
</div>
<div class="container">
<div class="col-12">
<footer
class="bottom-0 p-0 w-100"
>
<hr class="mt-10 mb-10">
<div class="row">
<div class="col text-center">
<p>&copy; 2023 BBMRI-ERIC</p>
</div>
<div class="col text-center">
<img src="../src/assets/images/logo.svg">
</div>
<div class="col text-center">
<i class="bi bi-github" />
<a href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend"> GitHub</a>
</div>
</div>
</footer>
</div>
</div>
</template>
Expand Down Expand Up @@ -58,10 +77,6 @@ export default {
</script>

<style scoped>
.main-container {
min-width: 25rem;
}
.box {
inline-size: 300px;
}
Expand Down
13 changes: 6 additions & 7 deletions src/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
$mg-color-primary: #e95713;
$mg-color-secondary: #003674;

$mg-color-danger: #dc3545;
$mg-color-warning: #e95713;
$mg-color-info: #017ffd;
Expand All @@ -9,9 +8,9 @@ $mg-navbar-style: 'light';

$body-color: #3c3c3d;

$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
$h1-font-size: $font-size-base * 3;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
7 changes: 6 additions & 1 deletion src/assets/scss/bbmri.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ $theme-colors: (
"danger": #dc3545,
"warning": #e95713,
"info": #017ffd,
"light": #e7e7e7
"light": #e7e7e7,
"dark": #3c3c3d
);

$body-color: #3c3c3d;
Expand All @@ -17,6 +18,10 @@ $default-text-color: white;
color: white;
}

.btn-outline-light {
color: $dark;
}

.cursor-pointer {
cursor: pointer;
}
56 changes: 56 additions & 0 deletions src/components/ConfirmationModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@

<template>
<div
class="modal"
>
<div class="modal-dialog">
<div class="modal-content">
<h1 class="modal-header">
Are you sure you want to abandon this Negotiation?
</h1>
<div class="modal-body">
<p>
This is means that you will not be able to access this negotiation again.
</p>
<div class="modal-footer justify-content-center">
<button
class="btn btn-secondary"
@click="closeModal"
>
No
</button>
<button
class="btn btn-danger"
@click="closeModal; $emit('abandon-negotiation')"
>
Yes
</button>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
emits: ["close-confirmation-modal", "abandon-negotiation"],
methods: {
closeModal() {
this.$emit("close-confirmation-modal")
}
}
}
</script>

<style scoped>
.modal {
width: 400px;
padding: 20px;
margin: 100px auto;
border-radius: 10px;
z-index: 1;
}
</style>
23 changes: 16 additions & 7 deletions src/components/NavigationBar.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav
v-if="oidcIsAuthenticated"
class="navbar navbar-expand-lg navbar-light bg-light"
>
<div class="container-fluid">
<img
src="../assets/images/logo.svg"
Expand Down Expand Up @@ -28,9 +31,10 @@
class="nav-item"
>
<router-link
class="nav-link active"
class="nav-link active nav-option"
to="/admin"
>
<i class="bi bi-house-gear" />
Administrator
</router-link>
</li>
Expand All @@ -39,21 +43,23 @@
class="nav-item"
>
<router-link
class="nav-link active"
class="nav-link active nav-option"
to="/researcher"
>
Researcher
<i class="bi bi-folder2" />
Requests
</router-link>
</li>
<li
v-if="isRepresentative"
class="nav-item"
>
<router-link
class="nav-link active"
class="nav-link active nav-option"
to="/biobanker"
>
Biobanker
<i class="bi bi-hospital" />
Biobank
</router-link>
</li>
</ul>
Expand All @@ -77,7 +83,7 @@
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import { mapActions, mapGetters } from "vuex"
export default {
name: "NavigationBar",
Expand Down Expand Up @@ -119,5 +125,8 @@ nav {
font-size: 1rem;
text-align: left;
}
.nav-item:hover .nav-option:hover {
color: var(--bs-primary) ;
}
</style>

Loading

0 comments on commit 4ca0228

Please sign in to comment.