Merge branch 'ticket_background'

frontend/src/styles/components/_tickets.scss

@@ -13,21 +13,40 @@
 
 }
 
-.ticketbox {
+.listbox {
   max-width: auto;
   margin:0 0;
   margin-top: 96px;
   background-color: #90ff82;
+  background-color: $rundbgbackgroundcolor;
   padding-bottom: 96px;
+  color: white;
   padding-left: 32px;
   padding-right: 32px;
   padding-top: 96px;
   border-radius: 20px;
   border-color: #000000;
   border-style: double;
-  box-shadow: 20px 20px 10px;
-  box-shadow: rgb(43, 43, 43);
+  box-shadow: 10px 10px 10px rgba(43, 43, 43, 0.8);
   font-size: 26px;
+  list-style-type: none;
+
+  
+  &.To-Do {
+    background-color: #b1003b;
+  }
+
+  &.InProgress {
+    background-color: #fff385;
+  }
+
+  &.Completed {
+    background-color: #90ff82;
+  }
+
+  &.Archived {
+    background-color: #af69ee;
+  }
 }
 
 .postits {
@@ -38,4 +57,5 @@
 }
 .warning {
   color: #570000;
-}
+}
+}

frontend/src/styles/main.scss

@@ -16,38 +16,52 @@ body {
 }
 
 .admin { display: flex; }
-.content { flex: 1; padding: variables.$spacing-md; }
 
 .layout {
-    display: flex;
-    min-height: 100vh;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .sidebar {
-    width: 260px;
-    flex-shrink: 0;
+  width: 260px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
 .content {
-    flex: 1;
-    min-width: 0;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  padding: variables.$spacing-md;
+  box-sizing: border-box;
 }
 
 @media (max-width: 768px) {
-  .sidebar { position: fixed; left: -100%; transition: left .2s; }
+  .sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: -100%;
+    transition: left .2s;
+    z-index: 1000;
+    height: 100%;
+    box-sizing: border-box;
+  }
   .sidebar.open { left: 0; }
-  .content { margin-left: 0; }
+  .content { margin-left: 0; padding: variables.$spacing-md; box-sizing: border-box; }
 }
 
-
-
 .rundbg {
   display: flex;
   justify-content: center;
   flex-direction: column;
   max-width: 40%;
   margin:0 auto;
-  margin-top: 96px;
   background-color: variables.$rundbgbackgroundcolor;
   padding-bottom: 96px;
   padding-left: 32px;
@@ -57,19 +71,28 @@ body {
   gap: 8px;
   border-color: #000000;
   border-style: double;
-  box-shadow: 20px 20px 10px;
-  box-shadow: rgb(43, 43, 43);
+  box-shadow: 20px 20px 10px rgb(43, 43, 43);
   font-size: 26px;
   
+  label {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
   input, button, a {
+  input, select, button {
+    width: 100%;
+    box-sizing: border-box;
     padding: 16px;
     font-size: 1.8rem;
     background-color: #f0f0f0;
     box-shadow: #6d6d6d;
-    box-shadow: 6px 6px 8px
-  
+    box-shadow: 6px 6px 8px;
+  }
 
+  input[type="checkbox"] {
+    width: auto;
   }
 
   button {
@@ -81,6 +104,14 @@ body {
     text-align: center;
     border-style: dashed;
   }
+  &.login {
+    margin-top: 96px;
+  }
+}
+
+.setup-form input {
+  width: 100%;
+  box-sizing: border-box;
 }