From 3dad29d967ffa63aef93caab62fcd1fc9fa8ec62 Mon Sep 17 00:00:00 2001 From: Ozair Shafique Date: Sun, 4 Feb 2024 21:54:08 +0100 Subject: [PATCH 1/7] make changes in dashboard for improvement --- assets/css/dashboard.css | 137 +- assets/css/new-dashboard.css | 131 + pages/contacts.html | 65 + pages/contacts.php | 16 + pages/dashboard.html | 2075 +++++++++----- pages/new_dashboard.html | 97 + pages/ui_dashboard.html | 5092 +++++++++++++++++++--------------- 7 files changed, 4642 insertions(+), 2971 deletions(-) create mode 100644 assets/css/new-dashboard.css create mode 100644 pages/contacts.html create mode 100644 pages/contacts.php create mode 100644 pages/new_dashboard.html diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 88cdccbb..b0082086 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -43,11 +43,12 @@ html { bottom: 0; left: 0; background-color: #000; - overflow-y: scroll; + overflow: hidden; } .the_left_bar { display: block; + margin-left: auto; background-color: #bebebe; overflow: hidden; height: 80vh; @@ -83,7 +84,7 @@ html { background: rgb(132, 131, 211); } .the_left_bar:hover { - overflow: scroll; + overflow-y: scroll; } .the_right_bar { float: right; @@ -119,15 +120,15 @@ html { background: rgb(132, 131, 211); } .the_right_bar:hover { - overflow: scroll; + overflow: auto; } .the_panel_selector { max-width: 95%; min-width: 60%; } -.each_item + .each_item{ - margin-top: 4px; +.each_item + .each_item { + margin-top: 4px; } .the_selected_displayer .each_item { @@ -136,32 +137,32 @@ html { white-space: nowrap; } .the_selected_displayer .each_item:hover { - overflow-x: scroll; + overflow-x: hidden; } -.the_selected_displayer .each_item label{ - width: 80px; - text-overflow: ellipsis; - overflow:hidden; +.the_selected_displayer .each_item label { + width: 80px; + text-overflow: ellipsis; + overflow: hidden; white-space: nowrap; margin-top: 4px; vertical-align: bottom; } -.the_selected_displayer .each_item label:hover{ - overflow: visible; - white-space: normal; - height:auto; +.the_selected_displayer .each_item label:hover { + overflow: hidden; + white-space: normal; + height: auto; } -.the_selected_displayer .each_item .the_input_side{ - width: 180px; - +.the_selected_displayer .each_item .the_input_side { + width: 80px; } .the_bottom_bar .the_bottom_elems { - border-radius: 12px; + border-radius: 8px; border: 2px solid #432424; + margin-top: 9px; background-color: #000; display: inline-block; position: static; @@ -171,32 +172,31 @@ html { } .the_bottom_bar .the_bottom_elems_block { - border-radius: 12px; - border: 2px solid #432424; - background-color: green; + border-radius: 8px; + border: 1px solid #432424; + background-color: rgb(244, 244, 244); display: inline-block; position: static; - color: #fff; + color: #5d5d5d; padding: 8px; cursor: pointer; } .the_panel_submitter { - padding: 13px; + padding: 12px; display: block; background-color: darkblue; - color: #fedfed; + color: #ececec; border-radius: 12px; font-weight: bold; } .the_add_child_button { - padding: 13px; + padding: 8px; display: block; - background-color: green; - color: #fedfed; + background-color: rgb(59, 78, 139); + color: #eaeaea; border-radius: 12px; - font-weight: bold; } .the_dev_body { @@ -204,7 +204,7 @@ html { color: #000; border: 2px solid #940948; height: 80vh; - max-width: 60%; + max-width: 80%; display: inline-block; text-align: left; overflow: scroll; @@ -241,8 +241,8 @@ html { .theTextPopUp { width: 50%; height: auto; - padding: 15px; - background-color: #000a8b; + padding: 2px; + background-color: #1b5149; color: blue; border-radius: 12px; position: absolute; @@ -255,28 +255,30 @@ html { } .theTextPopUp input { + margin-bottom: 12px; width: 80%; - padding: 15px; - border-radius: 12px; + padding: 8px; + font-size: 16px; + border-radius: 6px; } .theTextPopUp textarea { width: 80%; - padding: 15px; - border-radius: 12px; + padding: 20px; + border-radius: 6px; } .theTextPopUp button { width: 80%; - padding: 15px; - background-color: #fff; - color: #000; + padding: 10px; + background-color: #061a0d; + color: #fcfcfc; } .theTextPopUp button:hover { width: 80%; - padding: 15px; - background-color: green; + padding: 12px; + background-color: rgb(21, 59, 21); color: #fefefe; } @@ -766,34 +768,31 @@ html { } /*media queries for settings body*/ -@media only screen and (max-width: 900px){ - - .the_settings_section .settings_body{ - left: 10%; - width: 80%; - top: 24%; - - } - .settings_body ul{ - margin-bottom:1%; - padding-left: 9%; - } - .the_settings_section .setting_item { - padding:2%; - } - #the_settings_section_page{ - top: 18%; +@media only screen and (max-width: 900px) { + .the_settings_section .settings_body { + left: 10%; + width: 80%; + top: 24%; + } + .settings_body ul { + margin-bottom: 1%; + padding-left: 9%; + } + .the_settings_section .setting_item { + padding: 2%; + } + #the_settings_section_page { + top: 18%; left: 12.5%; - width: 75%; - padding: 2%; - } - .the_input_side{ - display: block; - margin:auto; - } - .the_settings_section .settings_body .the_save_button{ - width: 40%; - padding: 2%; - - } + width: 75%; + padding: 2%; + } + .the_input_side { + display: block; + margin: auto; + } + .the_settings_section .settings_body .the_save_button { + width: 40%; + padding: 2%; + } } diff --git a/assets/css/new-dashboard.css b/assets/css/new-dashboard.css new file mode 100644 index 00000000..f3714524 --- /dev/null +++ b/assets/css/new-dashboard.css @@ -0,0 +1,131 @@ +body { + margin: 0; + padding: 0; + background-color: #130606; +} +header { + display: flex; + justify-content: flex-start; + align-items: center; + padding: 2px 6%; +} +img.logo { + display: block; + height: 24px; + cursor: pointer; + margin-right: inherit; +} +.navigate_links ul { + list-style: none; +} +.navigate_links li { + display: inline-block; + + padding: 2px 20px; +} +.navigate_links ul li a { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 16px; + color: whitesmoke; + text-decoration: none; + transition: all 0.4s ease-in-out; + padding: 0px 8px 0px 0px; + border-right: 1px solid white; +} +.navigate_links ul li a:hover { + color: #2980b9; + border: 2px solid blue; + box-shadow: 3px 3px 3px rgb(116, 176, 109), 3px 3px 3px blue; + border-radius: 8px; + margin: 20px; + padding: 8px; +} +button { + margin-left: 70px; + padding: 9px 12px; + border-radius: 15px; + background-color: #2980b9; + color: rgb(243, 236, 236); + border: none; + cursor: pointer; + transition: all 0.3s ease-in-out; +} +button:hover { + background-color: rgb(108, 156, 125); + color: black; +} + +i { + color: white; +} +.dropbtn { + background-color: #3498db; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +} + +/* Dropdown button on hover & focus */ +.dropbtn:hover, +.dropbtn:focus { + background-color: #2980b9; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + margin-top: 10px; + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 10px 12px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover { + background-color: #ddd; +} + +/* Show the dropdown menu (use JS to add this class when the user clicks on the button) */ +.show { + display: block; +} + +.menus { + list-style-type: none; +} +.menu-item { + margin-left: -40px; + position: relative; + /* Add some space for the icon */ +} +.menu-item i { + position: absolute; + right: 0; + top: 30%; + + font-size: 16px; /* Adjust icon size */ +} + +.menus2 { + margin-left: 60px; + margin-right: 60px; +} diff --git a/pages/contacts.html b/pages/contacts.html new file mode 100644 index 00000000..5b5eb8fd --- /dev/null +++ b/pages/contacts.html @@ -0,0 +1,65 @@ + + + + + + + Contact Us + + + +
+

Contact Us

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + diff --git a/pages/contacts.php b/pages/contacts.php new file mode 100644 index 00000000..aae34227 --- /dev/null +++ b/pages/contacts.php @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/pages/dashboard.html b/pages/dashboard.html index a0ae3312..f1875a70 100644 --- a/pages/dashboard.html +++ b/pages/dashboard.html @@ -1,102 +1,151 @@ - - - - - - - - - + + - - - - - - - - - - - - Design and Build - - - - - - -
- - - - - - -