From 13fa95230b7a639eb95cb9e0ae583b34b6b28e9f Mon Sep 17 00:00:00 2001 From: Diksha Date: Tue, 30 Dec 2025 16:58:21 +0000 Subject: [PATCH 1/3] refractored css hardcoded values --- Frontend/src/App.css | 105 +++++++++++++++++++------------------------ 1 file changed, 47 insertions(+), 58 deletions(-) diff --git a/Frontend/src/App.css b/Frontend/src/App.css index 7126ff1..424e460 100644 --- a/Frontend/src/App.css +++ b/Frontend/src/App.css @@ -14,10 +14,12 @@ http://www.apache.org/licenses/LICENSE-2.0 */ .top-banner { - height: 60px; - box-shadow: rgb(222 225 229) 0px -1px 0px inset; - margin-bottom: 20px; + padding: 1rem; + box-shadow: rgb(222 225 229) 0 -1px 0 inset; background-color: #ffffff; + margin-bottom: 1.25rem; + display: flex; + align-items: center; } @keyframes navOpen { @@ -45,11 +47,8 @@ http://www.apache.org/licenses/LICENSE-2.0 } .navigation { - vertical-align: top; - align-self: flex-start; - position: relative; - z-index: 1; - white-space: nowrap; + grid-area: sidebar; + height: 100%; } .open { @@ -138,40 +137,41 @@ a.active > .nav-item { body { margin: 0; + height: 100vh; } #fullpage { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 100vw; + display: grid; height: 100%; + width: 100%; + grid-template-rows: auto 1fr; + grid-template-columns: auto 1fr; + grid-template-areas: + "header header" + "sidebar main"; } .topbar { - /* Blue/900 */ background: #174ea6; - /* height: 50px; */ - min-height: 50px; - gap: 16px; - width: 100%; color: white; - /* Elevation Light/5 */ box-shadow: 0px 8px 12px 6px rgba(60, 64, 67, 0.15), - 0px 4px 4px rgba(60, 64, 67, 0.3); + 0px 4px 4px rgba(60, 64, 67, 0.3); + grid-area: header; + width: 100%; + box-sizing: border-box; + min-height: 3.5rem; display: flex; flex-direction: row; align-items: center; - padding: 0 16px; - z-index: 1; + padding: 0 1rem; } .home_title { - font-size: 32px; + font-size: 2rem; } .sections { - font-size: 16px; + font-size: 1rem; } .dropdown { @@ -279,21 +279,12 @@ body { height: 95vh; } -.embed-dashboard { - width: 100%; - height: calc(100% - 30px); -} - -.embed-dashboard-download { - width: 100%; - height: calc(100% - 111px); -} - .embed-dashboard-common-button{ background: rgb(26, 115, 232); border: 1px solid rgb(66, 133, 244); padding: 0px 1.5rem; -webkit-box-align: center; + display: flex; align-items: center; border-radius: 5px; cursor: pointer; @@ -306,31 +297,21 @@ body { color: white; } -.embed-dashboard-events { - width: 100%; - height: 70vh; -} - .embed-dashboard-layout-color-toggle-style{ margin-left: auto; - margin-right: 40px; + margin-right: 2.5rem; } .embed-dashboard-layout-toggle-area{ - margin-top: 20px; - margin-left: 20px; + margin-top: 1.25rem; + margin-left: 1.25rem; display: flex; } -.embed-dashboard-layout-dashboard { - width: 100%; - height: calc(100% - 131px); -} - .embed-dashboard-layout-blue-icon { background-color: rgb(87, 128, 205); - width: 25px; - height: 25px; + width: 1.56rem; + height: 1.56rem; border-radius: 50%; } @@ -341,11 +322,6 @@ body { border-radius: 50%; } -.embed-dashboard-wfilters-dashboard { - width: 100%; - height: calc(100% - 110px); -} - .embed-dashboard-wfilters-filter-label{ font-family: inherit; margin: 0px; @@ -358,7 +334,6 @@ body { .explore-container { width: 100%; - height: calc(100% - 30px); } .look-container { @@ -368,7 +343,6 @@ body { .query-container { width: 100%; - height: calc(100% - 30px); } .dashboard-container-v2 { @@ -382,7 +356,7 @@ body { } .top-banner-image { - width: 100px; + width: 6.25rem; height: 27px; padding-left: 1rem; } @@ -421,10 +395,25 @@ body { .top-banner-header { font-size: 26px; - padding-top: 20px; + margin-bottom: 0; + line-height: 1; } .embed-dashboard-events-dev-message { - font-size: 20px; + font-size: 1.25rem; margin-left: 3rem; +} + +.embed-dashboard, +.embed-dashboard-download, +.embed-dashboard-events, +.embed-dashboard-layout-dashboard, +.embed-dashboard-wfilters-dashboard, +.explore-container, +.look-container, +.query-container { + flex: 1; + width: 100%; + height: auto; + min-height: 0; } \ No newline at end of file From 1ad4477368d66c43db84da97f5690ca4ea56676a Mon Sep 17 00:00:00 2001 From: Diksha Date: Mon, 5 Jan 2026 06:34:48 +0000 Subject: [PATCH 2/3] addressing comments on css changes --- Frontend/src/App.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/Frontend/src/App.css b/Frontend/src/App.css index 424e460..a567b8d 100644 --- a/Frontend/src/App.css +++ b/Frontend/src/App.css @@ -67,6 +67,8 @@ http://www.apache.org/licenses/LICENSE-2.0 height: 100%; vertical-align: top; z-index: 1; + display: flex; + flex-direction: column; } .dashboard-nav-items { @@ -130,9 +132,13 @@ a.active > .nav-item { } .main-container { - width: calc(100% - 280px); + grid-area: main; + width: 100%; + height: 100%; + overflow: auto; margin: 0; - align-self: baseline; + display: flex; + flex-direction: column; } body { @@ -357,7 +363,7 @@ body { .top-banner-image { width: 6.25rem; - height: 27px; + height: 1.6875rem; padding-left: 1rem; } @@ -390,11 +396,11 @@ body { } .page-title-div { - font-size: 26px; + font-size: 1.625rem; } .top-banner-header { - font-size: 26px; + font-size: 1.625rem; margin-bottom: 0; line-height: 1; } From 3970c68db3a84fbc919737a3f9029c898f8f4026 Mon Sep 17 00:00:00 2001 From: Diksha Date: Mon, 19 Jan 2026 06:07:54 +0000 Subject: [PATCH 3/3] css changes --- Frontend/src/App.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Frontend/src/App.css b/Frontend/src/App.css index a567b8d..54a82db 100644 --- a/Frontend/src/App.css +++ b/Frontend/src/App.css @@ -384,11 +384,16 @@ body { } .embed-dashboard>iframe, -.embed-dashboard-download>iframe, .embed-dashboard-events > iframe, .embed-dashboard-layout-dashboard, .embed-dashboard-wfilters-dashboard > iframe, .explore-container > iframe, .look-container > iframe, .query-container > iframe, .dashboard-container-v2 > iframe, .query-container-v2 > iframe { +.embed-dashboard-download>iframe, .embed-dashboard-events > iframe, .embed-dashboard-layout-dashboard > iframe, .embed-dashboard-wfilters-dashboard > iframe, .explore-container > iframe, .look-container > iframe, .query-container > iframe, .dashboard-container-v2 > iframe, .query-container-v2 > iframe { width: 100%; height: 100%; } +.embed-dashboard-download>iframe,.embed-dashboard-layout-dashboard>iframe { + height: 95vh; +} + + .text-header-style { font-family: "Google Sans", "Open Sans", Arial, Helvetica, sans-serif; color: #5F6368;