profile edition rework

2025-10-15 01:08:32 +00:00 · 2023-03-02 20:00:53 +01:00
parent 73305c0b28
commit f5ea169f03
3 changed files with 319 additions and 50 deletions
--- a/core/static/user/user.scss
+++ b/core/static/user/user.scss
@@ -0,0 +1,172 @@
+.profile {
+  &-visible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+
+    > input[type="checkbox"] {
+      cursor: pointer;
+    }
+  }
+
+  &-pictures {
+    box-sizing: border-box;
+    padding: 40px 20px 20px 20px;
+    gap: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 750px) {
+      flex-direction: column;
+    }
+  }
+
+  &-picture {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 30%;
+
+    @media (max-width: 750px) {
+      width: 100%;
+    }
+
+    &-display {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      max-width: 200px;
+
+      @media (max-width: 750px) {
+        max-width: 100%;
+      }
+
+      > img {
+        width: 200px !important;
+        height: 200px;
+
+        @media (max-width: 750px) {
+          width: 100% !important;
+          height: auto;
+        }
+      }
+
+      > p {
+        text-align: left !important;
+      }
+    }
+
+    &-edit {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      width: 40%;
+
+      @media (max-width: 750px) {
+        width: 100%;
+      }
+        
+      > input {
+        font-size: .8em;
+        font-weight: normal;
+        cursor: pointer;
+      }
+
+      > p {
+        margin-bottom: 10px;
+        text-align: left !important;
+      }
+    }
+  }
+
+  &-fields {
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+
+    @media (max-width: 750px) {
+      gap: 20px;
+    }
+  }
+
+  &-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    max-width: 30%;
+    min-width: 300px;
+
+    @media (max-width: 750px) {
+      gap: 4px;
+      max-width: 100%;
+    }
+
+    >* {
+      width: 100%;
+      max-width: 300px;
+
+      @media (max-width: 750px) {
+        max-width: 100%;
+      }
+    }
+
+    &-label {
+      text-align: left !important;
+    }
+
+    &-content {
+
+      >* {
+        box-sizing: border-box;
+        text-align: left !important;
+        line-height: 40px;
+        max-width: 100%;
+        width: 100%;
+        height: 40px;
+        margin: 0;
+      }
+
+
+      >textarea {
+        height: 120px;
+        min-height: 40px;
+        min-width: 300px;
+        max-width: 300px;
+
+        @media (max-width: 750px) {
+          max-width: 100%;
+        }
+      }
+
+      >input[type="file"] {
+        font-size: small;
+        line-height: 30px;
+      }
+
+      >input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        float: left;
+      }
+    }
+  }
+}
+
+
+