From 7f4dac6038417790550ed5f88a5c9ba37b01e209 Mon Sep 17 00:00:00 2001 From: divyanshu_Kumar <154233802+d1vyanshu-kumar@users.noreply.github.com> Date: Fri, 17 Jan 2025 16:44:18 +0530 Subject: [PATCH] Webpage Layout issue resolved --- .idea/.gitignore | 8 ++++ .idea/GDB-UI.iml | 9 ++++ .idea/inspectionProfiles/Project_Default.xml | 6 +++ .idea/material_theme_project_new.xml | 12 +++++ .idea/misc.xml | 7 +++ .idea/modules.xml | 8 ++++ .idea/vcs.xml | 6 +++ .../src/components/Breakpoint/Breakpoint.css | 27 ++++++++++- .../src/components/Breakpoint/Breakpoint.jsx | 2 +- .../components/DebugHeader/DebugHeader.css | 48 +++++++++++++++++-- webapp/src/components/Footer/Footer.css | 5 +- webapp/src/components/Functions/Functions.css | 12 +++-- .../FunctionsBottom/FunctionsBottom.css | 2 + .../GdbComponents/GdbComponents.css | 13 +++++ webapp/src/components/Stack/Stack.css | 19 ++++---- .../components/StackBottom/StackBottom.css | 8 ++-- webapp/src/components/Terminal/Terminal.css | 8 ++-- webapp/src/index.css | 5 +- webapp/src/pages/Debug/Debug.css | 12 +++-- 19 files changed, 186 insertions(+), 31 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/GDB-UI.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/material_theme_project_new.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/GDB-UI.iml b/.idea/GDB-UI.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/GDB-UI.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml new file mode 100644 index 0000000..e5691ca --- /dev/null +++ b/.idea/material_theme_project_new.xml @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..62269df --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..c692ec5 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/webapp/src/components/Breakpoint/Breakpoint.css b/webapp/src/components/Breakpoint/Breakpoint.css index 0854cf5..2166783 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.css +++ b/webapp/src/components/Breakpoint/Breakpoint.css @@ -3,8 +3,12 @@ flex-direction: column; align-items: flex-start; gap: 10px; + position: relative; + top: -100px; } .add-breakpoint { + position: absolute; + right:-400px; display: flex; padding: 6px 12px; align-items: flex-start; @@ -13,6 +17,9 @@ } .lower-breakpoint { + position: absolute; /* Make it independent of other components */ + right: -460px; /* Adjust this value for desired placement */ + top: 50px; /* Adjust this to control vertical positioning */ display: flex; height: 177px; padding: 7px 10px; @@ -20,9 +27,10 @@ align-items: flex-start; gap: 9px; border: 1px solid var(--Gray-2, #4f4f4f); - /* background: #1e1e1e; */ + margin-top: 0; /* Disable margin if using absolute positioning */ } + .line-breakpoint { display: flex; align-items: center; @@ -38,3 +46,20 @@ border-radius: 2px; background: var(--primary-orange, #e88f40); } + + +/* Media Query for screens smaller than 768px */ +@media (max-width: 768px) { + + .add-breakpoint { + position: static; /* Remove absolute positioning for natural stacking */ + width: auto; /* Adjust width to content size */ + align-self: center; /* Center the button in the layout */ + } + + .lower-breakpoint { + position: static; /* Remove absolute positioning for stacking */ + width: auto; /* Adjust width to fit content */ + align-self: center; /* Center the element in the layout */ + } +} \ No newline at end of file diff --git a/webapp/src/components/Breakpoint/Breakpoint.jsx b/webapp/src/components/Breakpoint/Breakpoint.jsx index e556444..e30e907 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.jsx +++ b/webapp/src/components/Breakpoint/Breakpoint.jsx @@ -56,7 +56,7 @@ const Breakpoint = () => { onChange={(e) => setBreakFunction(e.target.value)} /> - diff --git a/webapp/src/components/DebugHeader/DebugHeader.css b/webapp/src/components/DebugHeader/DebugHeader.css index 9fc235f..8db6282 100644 --- a/webapp/src/components/DebugHeader/DebugHeader.css +++ b/webapp/src/components/DebugHeader/DebugHeader.css @@ -28,11 +28,15 @@ body { } .debug-header { display: flex; - width: 90vw; padding: 10px; justify-content: space-between; align-items: center; - background: var(--Gray-1, #333); + background: var(--Gray-1, #050505); + position: relative; + top: 15px; + width:100%; + margin-left: 0px; + margin-right: 10px; } [data-theme="light"] .debug-header { background-color: var(--component-light-background); @@ -47,7 +51,9 @@ body { border-radius: 42px; background: var(--Gray-2, #4f4f4f); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset; + margin-left: -260px; /* Adjust the value as needed */ } + .filename-content { color: #fff; font-family: Montserrat; @@ -90,10 +96,46 @@ body { .save-button { display: flex; - padding: 4px 8px; + padding: 10px 20px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 2px; + background: var(--primary-orange, #e88f40); + margin-left: -102px; + border: 2px solid #e88f40; + +} + +.add-button { + display: flex; + padding: 10px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 2px; background: var(--primary-orange, #e88f40); + margin-left: -102px; + border: -10px solid #e88f40; + position: relative; + right: -100px; } + +@media (max-width: 480px) { + .debug-header { + padding: 5px; + } + + .filename { + padding: 4px 10px; + } + + .icons, .arrows, .others { + flex-direction: column; + gap: 5px; + } + + .save-button, .add-button { + padding: 5px 10px; + } +} \ No newline at end of file diff --git a/webapp/src/components/Footer/Footer.css b/webapp/src/components/Footer/Footer.css index f0169f0..525e75b 100644 --- a/webapp/src/components/Footer/Footer.css +++ b/webapp/src/components/Footer/Footer.css @@ -2,7 +2,10 @@ display: flex; justify-content: center; align-items: center; - margin-top: 30px; + margin-top: 200px; + margin-right: -7px; + margin-left: -7px; + margin-bottom: -7px; background-color: var(--footer-background-color); color: var(--footer-color); /* If you want to set text color */ } diff --git a/webapp/src/components/Functions/Functions.css b/webapp/src/components/Functions/Functions.css index 89146f6..3860cc2 100644 --- a/webapp/src/components/Functions/Functions.css +++ b/webapp/src/components/Functions/Functions.css @@ -1,28 +1,30 @@ .functions-parent { display: flex; - height: 100vh; - padding: 10px; + height: 80vh; + padding: 0px; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--Gray-2, #4f4f4f); - + margin-right: 60px; + transform: scale(0.9); /* background: #1e1e1e; */ } .functions-heading { display: flex; - width: 302px; + width: 189px; padding: 6px 12px; justify-content: center; align-items: center; gap: 10px; background: var(--primary-orange, #e88f40); + margin-top: 10px; } .functions { /* width: 100%; */ display: flex; padding: 10px; - height: 87vh; + height: 60vh; max-width: 20vw; flex-direction: column; align-items: flex-start; diff --git a/webapp/src/components/FunctionsBottom/FunctionsBottom.css b/webapp/src/components/FunctionsBottom/FunctionsBottom.css index 5d91c73..3bedef4 100644 --- a/webapp/src/components/FunctionsBottom/FunctionsBottom.css +++ b/webapp/src/components/FunctionsBottom/FunctionsBottom.css @@ -4,6 +4,8 @@ gap: 10px; border: 1px solid var(--Gray-2, #4f4f4f); padding: 10px 10px 10px 10px; + transform: scale(0.8) translate(-37px, -50px); + /* Move 50px left and 20px up */ } .function-bottom-heading { display: flex; diff --git a/webapp/src/components/GdbComponents/GdbComponents.css b/webapp/src/components/GdbComponents/GdbComponents.css index 3cdb238..99f3ffa 100644 --- a/webapp/src/components/GdbComponents/GdbComponents.css +++ b/webapp/src/components/GdbComponents/GdbComponents.css @@ -4,6 +4,10 @@ align-items: flex-start; gap: 10px; width: 42vw; + margin-bottom: -100px; + position: relative; + top: -90px; + } .gdb-header { @@ -32,3 +36,12 @@ font-weight: bold; background: var(--primary-orange, #e88f40); } + +@media (max-width: 768px) { + .gdb-components { + flex-direction: column; /* Stack items vertically */ + align-items: center; /* Center items for small screens */ + gap: 20px; /* Add spacing between elements */ + width: auto; /* Adjust width to fit smaller screens */ + } +} diff --git a/webapp/src/components/Stack/Stack.css b/webapp/src/components/Stack/Stack.css index e3b6956..cab75f2 100644 --- a/webapp/src/components/Stack/Stack.css +++ b/webapp/src/components/Stack/Stack.css @@ -1,13 +1,14 @@ .stack-parent { display: flex; - height: 90vh; - width: 210px; - padding: 10px; + height: 80vh; + padding: 0px; flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 12px; + align-items: center; + gap: 10px; border: 1px solid #4f4f4f; + margin-right: 40px; + transform: scale(0.9); + /* background: #1e1e1e; */ } @@ -24,12 +25,12 @@ .stack { display: flex; width: 189px; - height: 100%; - padding: 10px; + height: 60vh; + padding: 10px 10px 10px 10px; flex-direction: column; align-items: flex-start; gap: 11px; border: 1px solid var(--Gray-2, #4f4f4f); - overflow-y: scroll; + } diff --git a/webapp/src/components/StackBottom/StackBottom.css b/webapp/src/components/StackBottom/StackBottom.css index f985677..83af2a3 100644 --- a/webapp/src/components/StackBottom/StackBottom.css +++ b/webapp/src/components/StackBottom/StackBottom.css @@ -1,18 +1,20 @@ .stackbottom-container { display: flex; - width: 190px; - height: 159px; + width: 321px; + height: 84px; padding: 15px 20px; flex-direction: column; - align-items: flex-start; gap: 10px; border: 1px solid var(--Gray-2, #4f4f4f); + transform: scale(0.8) translate(-30px, -50px); + align-items: center; /* background: #1e1e1e; */ } .stackbottom-maincomponent { overflow-x: scroll; width: 190px; height: 139px; + } .stackbottom-heading { display: flex; diff --git a/webapp/src/components/Terminal/Terminal.css b/webapp/src/components/Terminal/Terminal.css index 112435f..228a6f5 100644 --- a/webapp/src/components/Terminal/Terminal.css +++ b/webapp/src/components/Terminal/Terminal.css @@ -1,8 +1,8 @@ .terminal { width: 55vw; - height: 234px; + height: 305px; flex-shrink: 0; - padding-left: 30px; - padding-right: 30px; - padding-bottom: 50px; + padding-left: 0px; + padding-right: 00px; + padding-bottom: 00px; } diff --git a/webapp/src/index.css b/webapp/src/index.css index b2f40de..8b20756 100644 --- a/webapp/src/index.css +++ b/webapp/src/index.css @@ -9,7 +9,7 @@ --text-rendering: optimizeLegibility; --webkit-font-smoothing: antialiased; --moz-osx-font-smoothing: grayscale; - --padding: 0 20px; + --padding: 0 0px; --footer-background-color: rgb(2, 12, 22); --footer-light-background: #ffffff; --footer-light-color: rgba(0, 0, 0, 0.87); @@ -40,4 +40,7 @@ body { -webkit-font-smoothing: var(--webkit-font-smoothing); -moz-osx-font-smoothing: var(--moz-osx-font-smoothing); padding: var(--padding); + overflow-x: hidden !important; + height: 100%; /* Ensure the body takes up the full height of the viewport */ + margin: 0 0 0 10px; } diff --git a/webapp/src/pages/Debug/Debug.css b/webapp/src/pages/Debug/Debug.css index a2dd7df..640c830 100644 --- a/webapp/src/pages/Debug/Debug.css +++ b/webapp/src/pages/Debug/Debug.css @@ -32,18 +32,22 @@ body { align-items: center; gap: 25px; width: 100%; + margin-left: -60px; /* background: var(--Gray-1, #333); */ } .upper-part { display: flex; - padding: 20px; + padding: 10px 0px 0px 0px; /* Remove the extra bottom padding */ flex-direction: column; justify-content: center; align-items: center; gap: 20px; background-color: var(--component-background-color); + border: 1px solid var(--Gray-2, #4f4f4f); + margin-top: 30px; } + [data-theme="light"] .upper-part { background-color: var(--component-light-background); color: var(--component-light-color); @@ -52,13 +56,15 @@ body { display: flex; justify-content: space-between; align-items: flex-start; - gap: 15px; + gap: 0px; + position: relative; /* Ensure positioning context */ + transform: translate(-80px, 100px); /* Move right by 110px and down by 70px */ } .right-part { display: flex; flex-direction: column; - gap: 10px; + gap: 0px; } .left-part { display: flex;