Compare revisions

Petar Hristov · Petar Hristov · CoscineBot · 50d75e74 · 50d75e74 · 50d75e74
--- a/index.html
+++ b/index.html
@@ -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>

--- a/package.json
+++ b/package.json
 {
  "name": "ui",
-  "version": "1.10.1",
+  "version": "1.10.2",
  "private": true,
  "scripts": {
    "dev": "vite",

--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
+    <header class="coscine-header">
      <Navbar />
      <LoadingIndicator />
-    <main>
+    </header>
-      <div class="mr-0 d-flex">
+    <SidebarMenu />
-        <SidebarMenu class="mr-2" />
+    <main
-        <div class="container-fluid px-5">
+      :class="sidebarMenuToggled ? 'sidebar-active' : 'sidebar-inactive'"
+      class="coscine-main"
+    >
+      <b-container fluid>
        <Pilot />
        <Maintenance />
        <BreadCrumbs />
        <RouterView />
-        </div>
+      </b-container>
-      </div>
    </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>
--- a/src/assets/css/_custom.css
+++ b/src/assets/css/_custom.css
 :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
--- a/src/assets/images/404.jpg
+++ b/src/assets/images/404.jpg
--- a/src/assets/images/Admin.png
+++ b/src/assets/images/Admin.png
--- a/src/assets/images/CreateProject.png
+++ b/src/assets/images/CreateProject.png
--- a/src/assets/images/Home.png
+++ b/src/assets/images/Home.png
--- a/src/assets/images/Login.png
+++ b/src/assets/images/Login.png
--- a/src/assets/images/Project-Id-CreateResource.png
+++ b/src/assets/images/Project-Id-CreateResource.png
--- a/src/assets/images/Project-Id-Members.png
+++ b/src/assets/images/Project-Id-Members.png
--- a/src/assets/images/Project-Id-Quota.png
+++ b/src/assets/images/Project-Id-Quota.png
--- a/src/assets/images/Project-Id-R-Guid-Settings.png
+++ b/src/assets/images/Project-Id-R-Guid-Settings.png
--- a/src/assets/images/Project-Id-R-Guid.png
+++ b/src/assets/images/Project-Id-R-Guid.png
--- a/src/assets/images/Project-Id-Settings.png
+++ b/src/assets/images/Project-Id-Settings.png
--- a/src/assets/images/Project-Slug.png
+++ b/src/assets/images/Project-Slug.png
--- a/src/assets/images/UserProfile.png
+++ b/src/assets/images/UserProfile.png
--- a/src/assets/scss/_custom.scss
+++ b/src/assets/scss/_custom.scss
@@ -12,7 +12,7 @@ $white: #fff;
 $gray: #646567;
 $gray-dark: #333;
 $primary: #00549f;
-$secondary: #e1e1e1;
+// $secondary: #e1e1e1;
 $success: #57ab27;
 $info: #c7ddf2;
 $warning: #fc0;

--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -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"];

--- a/src/components/elements/BreadCrumbs.vue
+++ b/src/components/elements/BreadCrumbs.vue
 <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>
No results found