Start of landing-page dashboard revamp v3

This commit add the following
- A new dashboard component, which will exist in parallel with in the
  current landing-page
- Created a route for this dashboard `/dashboard_3`
- Created a bare-bones bootstrap grid with mock-up card components

Signed-off-by: bryanmontalvan <bmontalv@redhat.com>
Signed-off-by: Pedro Gonzalez Gomez <pegonzal@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
index c5778092bda2385e5bce9ee95d78dad1c4f0e1c9..8ebe9aa82c57d7085170018e68ebf5983e60f794 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
@@ -88,8 +88,13 @@ const routes: Routes = [
     canActivate: [AuthGuardService, ChangePasswordGuardService],
     canActivateChild: [AuthGuardService, ChangePasswordGuardService],
     children: [
+<<<<<<< HEAD
       { path: 'dashboard', component: DeprecatedDashboardComponent },
       { path: 'dashboard_3', component: DashboardComponent },
+=======
+      { path: 'dashboard', component: DashboardComponent },
+      { path: 'dashboard_3', component: NewDashboardComponent },
+>>>>>>> 5eabca4ef19 (Start of landing-page dashboard revamp v3)
       { path: 'error', component: ErrorComponent },
 
       // Cluster

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..897d09a9a4b937d20dee95636059c29eda0883b9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/card/card.component.scss
@@ -0,0 +1,40 @@
+@use './src/styles/vendor/variables' as vv;
+@use './src/styles/defaults/mixins';
+
+$card-font-min-width: 320px;
+$card-font-max-width: 2048px;
+$card-font-min-size: 12px;
+$card-font-max-size: 21px;
+
+.card {
+  @include mixins.fluid-font-size(
+    $card-font-min-width,
+    $card-font-max-width,
+    $card-font-min-size,
+    $card-font-max-size
+  );
+  border: 0.5px solid vv.$gray-300;
+  border-radius: 3px;
+  height: 100%;
+
+  .card-body {
+    padding-top: 40px !important;
+
+    .card-title {
+      left: -0.6rem;
+      position: absolute;
+      top: -0.3rem;
+    }
+  }
+}
+
+.no-center {
+  left: unset;
+  position: unset;
+  top: unset;
+  transform: unset;
+}
+
+.content-highlight {
+  font-weight: bold;
+}