ADD:Staking sidebar added to the control

stereum-dev · Sep 19, 2024 · b0c8244 · b0c8244
1 parent 23d1d27
commit b0c8244
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1067,6 +1067,10 @@ video {
   grid-column: 1 / -1;
 }
 
+.col-span-12{
+  grid-column: span 12 / span 12;
+}
+
 .col-start-1{
   grid-column-start: 1;
 }
@@ -4220,6 +4224,11 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.bg-red-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }

diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -1,9 +1,12 @@
 <template>
   <base-layout>
-    <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
+    <div
+      class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]"
+    >
       <ControlHeader />
       <CommonSidebar />
       <AlertSection />
+      <StakingSidebar />
     </div>
   </base-layout>
 </template>
@@ -12,6 +15,7 @@
 import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
 import AlertSection from "./sections/AlertSection.vue";
+import StakingSidebar from "./sections/StakingSidebar.vue";
 </script>
 <style scoped>
 .Control-screen {

diff --git a/launcher/src/components/UI/control-page/sections/StakingSidebar.vue b/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="stake-sidebar w-full h-full col-start-10 col-end-22 row-start-2 row-span-full grid grid-cols-12 grid-rows-15 items-center gap-1 pt-2 pb-1 pr-1 pl-1 bg-red-400"
+  >
+    <WidgetCard
+      class="services-select-widget col-start-1 col-span-6 row-start-1 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="amsterdam-widget col-start-1 col-span-6 row-start-4 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="endpoint-widget col-start-1 col-span-6 row-start-7 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="p2pNetwork-widget col-start-1 col-span-6 row-start-10 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="p2p-widget col-start-1 col-span-6 row-start-13 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="connected-validator-widget col-start-7 col-span-12 row-start-1 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="sync-status-widget col-start-7 col-span-12 row-start-4 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="epoch-slot-widget col-start-7 col-span-12 row-start-7 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="subscribed-subnet-widget col-start-7 col-span-12 row-start-10 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="peer-over-time-widget col-start-7 col-span-12 row-start-13 row-span-3"
+    ></WidgetCard>
+  </div>
+</template>
+
+<script setup>
+import WidgetCard from "../components/cards/WidgetCard.vue";
+</script>
+
+<style scoped></style>