Skip to content
Snippets Groups Projects
Commit ec9b0d22 authored by Petar Hristov's avatar Petar Hristov :speech_balloon:
Browse files

Merge branch 'Hotfix/2144-invitationCall' into 'main'

Fix: List Invitations call disabled and other fixes

See merge request !74
parents 6a4728ab 9c650ca9
Branches
Tags
1 merge request!74Fix: List Invitations call disabled and other fixes
Pipeline #731874 passed
Showing
with 119 additions and 102 deletions
......@@ -5,7 +5,7 @@
<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.png">
<title>Coscine UIv2</title>
<title>Coscine</title>
</head>
<body class="dark:bg-gray-800">
<noscript>
......
<template>
<div id="app">
<Navbar />
<LoadingIndicator />
<main>
<div class="mr-0 d-flex">
<SidebarMenu class="mr-2" />
<div class="container-fluid px-5">
<Pilot />
<Maintenance />
<BreadCrumbs />
<RouterView />
</div>
</div>
<header class="coscine-header">
<Navbar />
<LoadingIndicator />
</header>
<SidebarMenu />
<main
:class="sidebarMenuToggled ? 'sidebar-active' : 'sidebar-inactive'"
class="coscine-main"
>
<b-container fluid>
<Pilot />
<Maintenance />
<BreadCrumbs />
<RouterView />
</b-container>
</main>
<ExpiryToast />
<NotificationToast />
......@@ -43,6 +46,10 @@ export default defineComponent({
localeChange(): string {
return this.mainStore.coscine.locale;
},
sidebarMenuToggled(): boolean {
return this.mainStore.sidebarActive;
},
},
watch: {
......@@ -76,6 +83,18 @@ export default defineComponent({
</script>
<style>
.coscine-header {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.coscine-main {
margin-top: var(--sidebar-offset-top);
padding-right: 1.5rem;
}
.h-divider {
margin-top: 5px;
margin-bottom: 10px;
......@@ -84,8 +103,31 @@ export default defineComponent({
border-top: 1px solid var(--light);
}
a[target="_blank"]:after {
/* URL icon styling for a new tab */
content: "\F1C0";
font-size: 0.8em;
color: var(--secondary);
font-family: "bootstrap-icons";
src: url("bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d")
format("woff2"),
url("bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}
#card-deck {
/* Used to align the cards' and container's left edges */
margin: 0em -0.5em;
}
.sidebar-active {
padding-left: calc(var(--sidebar-width-active) + var(--sidebar-left-margin));
transition: all 0.3s;
}
.sidebar-inactive {
padding-left: calc(
var(--sidebar-width-collapsed) + var(--sidebar-left-margin)
);
transition: all 0.3s;
}
</style>
:root {
/* Background color for static elements (e.g. Sidebar, Breadcrumbs) */
--static-element-bg: var(--light);
/* Navbar and loading indictor definitions */
--navbar-height: 2.5rem;
--loading-indicator-height: 3px;
--loading-indicator-margin: 1rem;
--search-bar-width: calc(10rem + 20vw);
/* Beadcrumb definitions */
--breadcrumbs-height: 3rem;
--breadcrumbs-margin: 1rem;
/* Sidebar definitions */
--sidebar-width-collapsed: 3rem;
--sidebar-default-width: 25rem;
--sidebar-width-active: calc(9rem + 10%);
--sidebar-left-margin: 0.5rem;
/* Calculated heights */
--sidebar-offset-top: calc(var(--navbar-height) + var(--loading-indicator-height) + var(--loading-indicator-margin));
--sidebar-height: calc(100vh - var(--navbar-height) - calc(var(--loading-indicator-height) + var(--loading-indicator-margin)))
}
\ No newline at end of file
src/assets/images/404.jpg

154 KiB

src/assets/images/Admin.png

64.2 KiB

src/assets/images/CreateProject.png

81.7 KiB

src/assets/images/Home.png

50.3 KiB

src/assets/images/Login.png

127 KiB

src/assets/images/Project-Id-CreateResource.png

55.9 KiB

src/assets/images/Project-Id-Members.png

59 KiB

src/assets/images/Project-Id-Quota.png

63.3 KiB

src/assets/images/Project-Id-R-Guid-Settings.png

82 KiB

src/assets/images/Project-Id-R-Guid.png

80.5 KiB

src/assets/images/Project-Id-Settings.png

68.3 KiB

src/assets/images/Project-Slug.png

93.3 KiB

src/assets/images/UserProfile.png

66.8 KiB

......@@ -12,7 +12,7 @@ $white: #fff;
$gray: #646567;
$gray-dark: #333;
$primary: #00549f;
$secondary: #e1e1e1;
// $secondary: #e1e1e1;
$success: #57ab27;
$info: #c7ddf2;
$warning: #fc0;
......
......@@ -5,64 +5,7 @@ import "@vue/runtime-core";
declare module "@vue/runtime-core" {
export interface GlobalComponents {
BAlert: typeof import("bootstrap-vue")["BAlert"];
BBadge: typeof import("bootstrap-vue")["BBadge"];
BBreadcrumb: typeof import("bootstrap-vue")["BBreadcrumb"];
BBreadcrumbItem: typeof import("bootstrap-vue")["BBreadcrumbItem"];
BButton: typeof import("bootstrap-vue")["BButton"];
BButtonGroup: typeof import("bootstrap-vue")["BButtonGroup"];
BCard: typeof import("bootstrap-vue")["BCard"];
BCardBody: typeof import("bootstrap-vue")["BCardBody"];
BCardGroup: typeof import("bootstrap-vue")["BCardGroup"];
BCardText: typeof import("bootstrap-vue")["BCardText"];
BCol: typeof import("bootstrap-vue")["BCol"];
BCollapse: typeof import("bootstrap-vue")["BCollapse"];
BContainer: typeof import("bootstrap-vue")["BContainer"];
BDropdown: typeof import("bootstrap-vue")["BDropdown"];
BDropdownDivider: typeof import("bootstrap-vue")["BDropdownDivider"];
BDropdownItem: typeof import("bootstrap-vue")["BDropdownItem"];
BForm: typeof import("bootstrap-vue")["BForm"];
BFormCheckbox: typeof import("bootstrap-vue")["BFormCheckbox"];
BFormDatepicker: typeof import("bootstrap-vue")["BFormDatepicker"];
BFormFile: typeof import("bootstrap-vue")["BFormFile"];
BFormGroup: typeof import("bootstrap-vue")["BFormGroup"];
BFormInput: typeof import("bootstrap-vue")["BFormInput"];
BFormRadioGroup: typeof import("bootstrap-vue")["BFormRadioGroup"];
BFormSelect: typeof import("bootstrap-vue")["BFormSelect"];
BFormSelectOption: typeof import("bootstrap-vue")["BFormSelectOption"];
BFormTag: typeof import("bootstrap-vue")["BFormTag"];
BFormTags: typeof import("bootstrap-vue")["BFormTags"];
BFormText: typeof import("bootstrap-vue")["BFormText"];
BFormTextarea: typeof import("bootstrap-vue")["BFormTextarea"];
BIcon: typeof import("bootstrap-vue")["BIcon"];
BIconLink45deg: typeof import("bootstrap-vue")["BIconLink45deg"];
BInputGroup: typeof import("bootstrap-vue")["BInputGroup"];
BInputGroupAppend: typeof import("bootstrap-vue")["BInputGroupAppend"];
BLink: typeof import("bootstrap-vue")["BLink"];
BModal: typeof import("bootstrap-vue")["BModal"];
BNavbar: typeof import("bootstrap-vue")["BNavbar"];
BNavbarBrand: typeof import("bootstrap-vue")["BNavbarBrand"];
BNavbarNav: typeof import("bootstrap-vue")["BNavbarNav"];
BNavbarToggle: typeof import("bootstrap-vue")["BNavbarToggle"];
BNavForm: typeof import("bootstrap-vue")["BNavForm"];
BNavItem: typeof import("bootstrap-vue")["BNavItem"];
BNavItemDropdown: typeof import("bootstrap-vue")["BNavItemDropdown"];
BOverlay: typeof import("bootstrap-vue")["BOverlay"];
BPagination: typeof import("bootstrap-vue")["BPagination"];
BPopover: typeof import("bootstrap-vue")["BPopover"];
BProgress: typeof import("bootstrap-vue")["BProgress"];
BProgressBar: typeof import("bootstrap-vue")["BProgressBar"];
BreadCrumbs: typeof import("./components/elements/BreadCrumbs.vue")["default"];
BRow: typeof import("bootstrap-vue")["BRow"];
BSkeleton: typeof import("bootstrap-vue")["BSkeleton"];
BSkeletonTable: typeof import("bootstrap-vue")["BSkeletonTable"];
BSkeletonWrapper: typeof import("bootstrap-vue")["BSkeletonWrapper"];
BSpinner: typeof import("bootstrap-vue")["BSpinner"];
BTab: typeof import("bootstrap-vue")["BTab"];
BTable: typeof import("bootstrap-vue")["BTable"];
BTabs: typeof import("bootstrap-vue")["BTabs"];
BToast: typeof import("bootstrap-vue")["BToast"];
BTooltip: typeof import("bootstrap-vue")["BTooltip"];
CoscineCard: typeof import("./components/coscine/CoscineCard.vue")["default"];
CoscineFormGroup: typeof import("./components/coscine/CoscineFormGroup.vue")["default"];
CoscineHeadline: typeof import("./components/coscine/CoscineHeadline.vue")["default"];
......
<template>
<b-breadcrumb>
<b-breadcrumb class="breadcrumbs">
<b-breadcrumb-item
:to="{ name: 'list-projects' }"
:active="crumbs.length === 0"
......@@ -134,3 +134,11 @@ export default defineComponent({
},
});
</script>
<style scoped>
.breadcrumbs {
background-color: var(--static-element-bg);
height: var(--breadcrumbs-height);
margin-bottom: var(--breadcrumbs-margin);
}
</style>
<template>
<header id="header">
<b-navbar toggleable="md" type="dark" variant="dark">
<div id="navbar">
<b-navbar toggleable="md" type="dark" variant="dark" sticky>
<!-- Coscine Logo -->
<b-navbar-brand id="coscineLogo">
<RouterLink :to="{ name: 'list-projects' }">
......@@ -12,14 +12,18 @@
</RouterLink>
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse" class="b-0"></b-navbar-toggle
><b-collapse id="nav-collapse" is-nav>
<b-navbar-toggle target="nav-collapse" class="b-0" />
<b-collapse id="nav-collapse" is-nav>
<!-- Search Bar -->
<b-navbar-nav class="ml-auto">
<b-navbar-nav class="ml-auto px-2">
<b-nav-form @submit.stop.prevent="triggerSearch">
<b-input-group size="sm" style="width: 25rem">
<b-input-group size="sm" class="searchBar">
<template #prepend>
<b-button :disabled="!searchTerm" @click="triggerSearch">
<b-button
:disabled="!searchTerm"
variant="light"
@click="triggerSearch"
>
<b-icon icon="search" />
</b-button>
</template>
......@@ -45,55 +49,54 @@
:key="index"
:disabled="$root.$i18n.locale === locale"
@click="changeLocale(locale)"
>{{ $t("nav.lang" + locale.toUpperCase()) }}</b-dropdown-item
>
{{ $t("nav.lang" + locale.toUpperCase()) }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="?" right>
<!-- Help -->
<b-dropdown-item :href="$t('nav.url.extrasHelp')" target="_blank">{{
$t("nav.extrasHelp")
}}</b-dropdown-item>
<b-dropdown-item :href="$t('nav.url.extrasHelp')" target="_blank">
{{ $t("nav.extrasHelp") }}
</b-dropdown-item>
<!-- Disclaimer -->
<b-dropdown-item
:href="$t('nav.url.extrasDisclaimer')"
target="_blank"
>{{ $t("nav.extrasDisclaimer") }}</b-dropdown-item
>
{{ $t("nav.extrasDisclaimer") }}
</b-dropdown-item>
<!-- Imprint -->
<b-dropdown-item
:href="$t('nav.url.extrasImprint')"
target="_blank"
>{{ $t("nav.extrasImprint") }}</b-dropdown-item
>
{{ $t("nav.extrasImprint") }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown v-if="loggedIn" right>
<template v-if="user" #button-content
>{{ $t("nav.user", { displayName: user.displayName }) }}
<template v-if="user" #button-content>
{{ $t("nav.user", { displayName: user.displayName }) }}
</template>
<template v-else #button-content
><b-skeleton
<template v-else #button-content>
<b-skeleton
animation="fade"
height="1.5rem"
width="10rem"
style="display: inline-flex; margin-bottom: 0rem"
></b-skeleton>
/>
</template>
<!-- UserProfile -->
<b-dropdown-item :to="{ name: 'userprofile' }">
<!-- :to from this component currently causes two warnings!
1. [vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning:
2. [vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning:
-->
{{ $t("nav.userProfile") }}
</b-dropdown-item>
<!-- Divider -->
<b-dropdown-divider />
<!-- Log out -->
<b-dropdown-item @click="logUserOut">{{
$t("nav.userLogOut")
}}</b-dropdown-item>
<b-dropdown-item @click="logUserOut">
{{ $t("nav.userLogOut") }}
</b-dropdown-item>
</b-nav-item-dropdown>
<router-link
......@@ -102,14 +105,14 @@
:to="{ name: 'login', query: { redirect: $route.fullPath } }"
custom
>
<b-nav-item right :disabled="isExactActive" :href="href">{{
$t("nav.userLogIn")
}}</b-nav-item>
<b-nav-item right :disabled="isExactActive" :href="href">
{{ $t("nav.userLogIn") }}
</b-nav-item>
</router-link>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</header>
</div>
</template>
<script lang="ts">
......@@ -170,7 +173,7 @@ export default defineComponent({
</script>
<style scoped>
#header .navbar {
#navbar .navbar {
padding-top: 0;
padding-bottom: 0;
}
......@@ -183,5 +186,9 @@ export default defineComponent({
object-fit: cover;
object-position: 0%;
width: 60px;
min-width: 60px;
}
.searchBar {
min-width: var(--search-bar-width);
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment