Changes

PlatePilot · Feb 9, 2024 · c6c2ace · c6c2ace
1 parent d89a82a
commit c6c2ace
Show file tree

Hide file tree

Showing 9 changed files with 679 additions and 199 deletions.
diff --git a/src/client/_styles/index.scss b/src/client/_styles/index.scss
@@ -3,8 +3,6 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:400');
 
 
-// styles imports
-
 
 body {
     font-family: 'Poppins';
@@ -48,6 +46,23 @@ body {
     background-color: var(--background); 
 } 
 
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--dark-3);
+    border-radius: var(--border-radius);
+
+    &:hover {
+        background: var(--dark-2);
+    }
+}
+
 // defined items start
 
 .bx-plus {
@@ -83,6 +98,36 @@ body {
     height: fit-content;
 }
 
+.close-button {
+    display: flex;
+    align-items: center;
+    background-color: var(--light-error);
+    padding: 2px 8px;
+    border-radius: var(--border-radius);
+    color: var(--text-opposite);
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.dropdown-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+
+    height: 25px;
+    width: fit-content;
+    min-width: 25px;
+
+    border: 2px solid var(--dark-3);
+    border-radius: var(--border-radius);
+
+    .dropdown-text {
+        padding: 0 var(--small-gap);
+    }
+}
+
 // defined items end
 
 header {

diff --git a/src/client/_styles/props.scss b/src/client/_styles/props.scss
@@ -1,9 +1,9 @@
 :root {
     --border-radius: 10px;
 
-    --small-gap: .5em;
-    --gap: 1em;
-    --big-gap: 3em;
+    --small-gap: 8px;
+    --gap: 16px;
+    --big-gap: 32px;
 }
 
 
@@ -18,8 +18,6 @@ body[data-theme="dark"] {
 
     --secondary: #287254;
     --dark-secondary: #162d23; 
-
-    --accent: #64C8B4;
 
     --text: #fffcec;
     --text-opposite: #000000; 
@@ -29,6 +27,9 @@ body[data-theme="dark"] {
     --dark-3: #282727;
 
     --error: #b00020;
+    --light-error: #e06666;
+
+    --orange: #c73c03;
 }
 
 body[data-theme="white"] {
@@ -41,8 +42,6 @@ body[data-theme="white"] {
 
     --secondary: #287254;
     --dark-secondary: #162d23; 
-
-    --accent: #64C8B4;
 
     --text: #000000; 
     --dark-text: #ececec;

diff --git a/src/client/addplate/_src/index.ts b/src/client/addplate/_src/index.ts
@@ -0,0 +1,18 @@
+const addPlateDescription = document.getElementById("addplatedescription");
+const closePlateDescription = document.getElementById("closeplatedescription");
+
+const plateDescription = document.querySelector('.plate-description') as HTMLElement;
+const connector = document.querySelector('.connector') as HTMLElement;
+const addPlateButton = document.querySelector('.addplate-button') as HTMLElement;
+
+addPlateDescription?.addEventListener('click', () => {
+    plateDescription.style.display ='block';
+    connector.style.display ='flex';
+    addPlateButton.style.display ='none';
+});
+
+closePlateDescription?.addEventListener('click', () => {
+    plateDescription.style.display ='none';
+    connector.style.display ='none';
+    addPlateButton.style.display ='flex';
+});
diff --git a/src/client/addplate/_styles/index.scss b/src/client/addplate/_styles/index.scss
@@ -21,6 +21,10 @@
         flex-direction: column;
         align-items: center;
 
+        .plate-description {
+            display: none;
+        }
+
         .content-wrapper {
             width: 100%;
 
@@ -125,6 +129,8 @@
                             padding: 5px;
 
                             width: 100%;
+
+                            cursor: pointer;
 
                             span {
                                 color: var(--dark-text);
@@ -167,66 +173,111 @@
                 }
             }
 
-            .description-content {
-                margin: var(--gap);
-                padding: var(--gap);
-
-                height: 400px;
+            .description {
+                margin: var(--small-gap);
+                padding: var(--small-gap);
 
                 border: 2px solid var(--dark-3);
                 border-radius: var(--border-radius);
 
+                display: flex;
+                flex-direction: column;
 
-                .description-content-header {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
+                .des-content {
+                    padding: var(--small-gap);
 
-                    color: var(--text);
+                    .add-step-button {
+                        color: var(--dark-text);
+                        display: flex;
+                        align-items: center;
+                        gap: var(--small-gap);
 
-                    .bx {
-                        font-size: 22px;
+                        border: 2px solid var(--dark-3);
+                        border-radius: var(--border-radius);
 
-                        @media (max-width:725px) {
-                            font-size: 16px;
-                        }
+                        padding: 5px 15px;
+
+                        cursor: pointer;
+
+                        width: fit-content;
                     }
 
-                    .header {
+                    .step {
+                        color: var(--text);
+
+                        width: 100%;
+
                         display: flex;
-                        gap: var(--gap);
+                        flex-wrap: wrap;
+                        gap: var(--big-gap);
 
-                        span {
-                            cursor: pointer;
-                            padding: 6px;
+                        .step-info {
                             display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            border-radius: var(--border-radius);
+                            flex-direction: column;
 
-                            &:hover {
-                                background-color: var(--dark-3);
+                            gap: var(--gap);
+
+                            .add-info-button {
+                                color: var(--dark-text);
+                                border: 2px solid var(--dark-3);
+                                border-radius: var(--border-radius);
+                                padding: 3px 10px;
+                                display: flex;
+                                align-items: center;
+                                gap: 2px;
+                                cursor: pointer;
                             }
 
-                            .select-text {
-                                @media (max-width:725px) {
-                                    font-size: 12px;
-                                }
+                            .button-shrink {
+
+                                @media (max-width:905px) {
+                                    font-size: 8px;
+                                } 
                             }
-                        }
 
-                        .header-2 {
-                            display: flex;
-                            gap: var(--small-gap);
+                            .step-head {
+                                display: flex;
+                                flex-wrap: wrap;
+                                gap: var(--small-gap);
+                                border-bottom: 2px solid var(--dark-3);
+                                padding-bottom: var(--small-gap);
 
-                            .bx {
-                                font-size: 22px;
+                                .step-head-span {
+                                    display: flex;
+                                    align-items: end;
+
+                                    @media (max-width:905px) {
+                                        font-size: 12px;
+                                    }
+
+                                }
+
+                                .bx-icon {
+                                    display: flex;
+                                    align-items: center;
+                                    padding: 3px 6px 1px 6px;
+                                    border-radius: var(--border-radius);
+                                    cursor: pointer;
 
-                                @media (max-width:725px) {
-                                    font-size: 16px;
+                                    &:hover {
+                                        background-color: var(--dark-3);
+                                    }
                                 }
                             }
                         }
+
+                        .step-text {
+                            width: 60%;
+                            padding: 15px;
+                            border: 2px solid var(--dark-3);
+                            border-radius: var(--border-radius);
+                            height: fit-content;
+                        }
+
+                        .side-info {
+                            color: var(--primary);
+                            max-width: 140px;
+                        }
                     }
                 }
             }
@@ -242,7 +293,7 @@
 
             .connector {
                 position: absolute;
-                display: flex;
+                display: none;
                 justify-content: space-between;
                 top: 0;
                 left: 30px;
@@ -285,7 +336,7 @@
                 display: flex;
                 align-items: center;
                 gap: var(--small-gap);
-
+     
                 padding: 15px;
 
                 border: 2px solid var(--dark-2);
@@ -310,32 +361,4 @@
             }
         }
     }
-
-
-
-    .link-stroke-down {
-        height: 50vh;
-        width: 20px;
-
-        align-self: flex-end;
-
-        border-top: 2px solid var(--dark-2);
-        border-left: 2px solid var(--dark-2);
-        border-radius: var(--border-radius) 0 0 0 ;
-    }
-
-    .line-stroke-middle {
-
-    }
-
-    .link-stroke-up {
-        height: 50px;
-        width: 20px;
-
-        align-self: flex-end;
-
-        border-bottom: 2px solid var(--dark-2);
-        border-left: 2px solid var(--dark-2);
-        border-radius:  0 var(--border-radius) 0 ;
-    }
 }