update layout of blueprints

kestra-io · Oct 24, 2024 · 09383a6 · 09383a6
1 parent 43d8443
commit 09383a6
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 17 deletions.
diff --git a/ui/src/assets/dots-bg-2.jpg b/ui/src/assets/dots-bg-2.jpg
diff --git a/ui/src/assets/icons/blueprint.svg b/ui/src/assets/icons/blueprint.svg
diff --git a/ui/src/override/components/flows/blueprints/Blueprints.vue b/ui/src/override/components/flows/blueprints/Blueprints.vue
@@ -1,10 +1,12 @@
 <template>
     <top-nav-bar v-if="!embed" :title="routeInfo.title" />
-    <blueprints-page-header v-if="!embed" class="ms-0 mw-100" />
-    <section :class="{'container': !embed}" class="main-container" v-bind="$attrs">
-        <blueprint-detail v-if="selectedBlueprintId" :embed="embed" :blueprint-id="selectedBlueprintId" @back="selectedBlueprintId = undefined" :blueprint-base-uri="blueprintUri" />
-        <blueprints-browser @loaded="$emit('loaded', $event)" :class="{'d-none': !!selectedBlueprintId}" :embed="embed" :blueprint-base-uri="blueprintUri" @go-to-detail="blueprintId => selectedBlueprintId = blueprintId" />
-    </section>
+    <blueprints-layout>
+        <blueprints-page-header v-if="!embed" class="ms-0 mw-100" />
+        <section :class="{'container': !embed}" class="main-container" v-bind="$attrs">
+            <blueprint-detail v-if="selectedBlueprintId" :embed="embed" :blueprint-id="selectedBlueprintId" @back="selectedBlueprintId = undefined" :blueprint-base-uri="blueprintUri" />
+            <blueprints-browser @loaded="$emit('loaded', $event)" :class="{'d-none': !!selectedBlueprintId}" :embed="embed" :blueprint-base-uri="blueprintUri" @go-to-detail="blueprintId => selectedBlueprintId = blueprintId" />
+        </section>
+    </blueprints-layout>
 </template>
 <script>
     import RouteContext from "../../../../mixins/routeContext";
@@ -13,11 +15,13 @@
     import BlueprintsBrowser from "./BlueprintsBrowser.vue";
     import BlueprintsPageHeader from "./BlueprintsPageHeader.vue";
     import {apiUrl} from "override/utils/route";
+    import BlueprintsLayout from "./BlueprintsLayout.vue";
 
     export default {
         mixins: [RouteContext],
         inheritAttrs: false,
         components: {
+            BlueprintsLayout,
             BlueprintDetail,
             BlueprintsBrowser,
             BlueprintsPageHeader,

diff --git a/ui/src/override/components/flows/blueprints/BlueprintsLayout.vue b/ui/src/override/components/flows/blueprints/BlueprintsLayout.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="blueprints">
+        <slot />
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .blueprints {
+        background: url(../../../../assets/dots-bg-2.jpg) no-repeat top left;
+        background-color: #1C1E27;
+        background-size: 1654px;
+    }
+</style>
diff --git a/ui/src/override/components/flows/blueprints/BlueprintsPageHeader.vue b/ui/src/override/components/flows/blueprints/BlueprintsPageHeader.vue
@@ -1,8 +1,8 @@
 <template>
     <nav class="header">
-        <h4 class="catch-phrase fw-bold">
-            {{ $t("blueprints.header.catch phrase.1") }}
-        </h4>
+        <div class="image-box">
+            <img src="../../../../assets/icons/blueprint.svg" :alt="$t('blueprints.header.alt')">
+        </div>
         <h4 class="catch-phrase">
             {{ $t("blueprints.header.catch phrase.2") }}
         </h4>
@@ -13,15 +13,26 @@
     @import "@kestra-io/ui-libs/src/scss/variables.scss";
 
     .header {
-        background: url("../../../../assets/dot-bg.jpg") no-repeat;
-        background-size: cover;
-        text-align: center;
-        padding-top: calc(4 * var(--spacer));
-        padding-bottom: calc(5 * var(--spacer));
-        border-bottom: 1px solid var(--bs-border-color);
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: calc(5 * var(--spacer));
+        padding-top: calc(3 * var(--spacer));
+        padding-bottom: calc(2 * var(--spacer));
 
         .catch-phrase {
             color: $white;
+            margin-bottom: 0;
+        }
+
+        .image-box{
+            border: 1px solid var(--bs-border-color);
+            background-color: #2F334280;
+            padding: 9px;
+            border-radius: 7px;
+            box-shadow:
+                0px 4px 12px 0px #53009F,
+                1px 1px 0px 0px #FF4BBD;
         }
     }
 </style>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -290,7 +290,8 @@
         "catch phrase": {
           "1": "The first step is always the hardest.",
           "2": "Explore blueprints to kick-start your next flow."
-        }
+        },
+        "alt": "Blueprints Icon"
       }
     },
     "use": "Use",
@@ -877,7 +878,7 @@
       "per_namespace": " (per namespace)",
       "total_executions": "Total Executions",
       "executions_in_progress": "Executions In Progress",
-      "see_all":"See all",
+      "see_all": "See all",
       "next_scheduled_executions": "Next Scheduled Executions",
       "next_execution_date": "Next Execution Date",
       "id": "ID",
@@ -900,4 +901,4 @@
     "files": "Files",
     "no_data": "No data available"
   }
-}
+}