Import of #576

core/static/core/override.scss

@@ -0,0 +1,7 @@
+content {
+  padding: 20px !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0.5em 0;
+}

core/static/core/user_details.scss

@@ -0,0 +1,140 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.user-name {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1080px;
+}
+
+.infos-and-picture {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  max-width: 1080px;
+
+  @media (max-width: 960px) {
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+
+  >#user_profile_infos {
+    width: 50%;
+
+    @media (max-width: 960px) {
+      width: 100%;
+    }
+
+    @media (min-width: 960px) {
+      padding-right: 20px;
+    }
+
+    >#user_profile_infos_promo {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+
+    >#user_profile_infos_quote {
+      @media (max-width: 960px) {
+        text-align: center !important;
+      }
+    }
+  }
+
+  >#user_profile_pictures {
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: 960px) {
+      width: 100%;
+      height: 100% !important;
+      flex-direction: column;
+    }
+
+    @media (min-width: 960px) {
+      padding-left: 20px;
+    }
+
+    >#user_profile_pictures_bigone {
+      @media (max-width: 960px) {
+        >img {
+          max-width: 300px !important;
+          width: 100% !important;
+          object-fit: contain;
+        }
+      }
+    }
+
+    >#user_profile_pictures_thumbnails {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      @media (max-width: 960px) {
+        flex-direction: row !important;
+        height: 50%;
+      }
+
+      >img {
+        max-height: calc(100% / 3);
+        width: 100% !important;
+        object-fit: contain;
+
+        @media (max-width: 960px) {
+          max-height: 100%;
+          max-width: calc(100% / 3) !important;
+          height: auto;
+        }
+      }
+    }
+  }
+}
+
+#user_profile_page #user_profile #user_profile_infos {
+  @media (max-width: 960px) {
+    border-right-color: transparent;
+  }
+}
+
+#user_profile_page #user_profile #user_profile_pictures #user_profile_pictures_thumbnails,
+#user_profile_page #user_profile #user_profile_infos,
+#user_profile_page #user_profile #user_profile_pictures {
+  flex-basis: unset !important;
+}
+
+.form-gifts {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+
+  @media (max-width: 960px) {
+    flex-direction: column;
+  }
+
+  >select,
+  >input {
+    min-width: 300px;
+    max-width: 100%;
+    height: 40px;
+
+    @media (max-width: 960px) {
+      width: 100%;
+    }
+  }
+}

core/static/core/user_edit.scss

@@ -0,0 +1,171 @@
+.profile {
+  &-visible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+
+    >input[type="checkbox"] {
+      cursor: pointer;
+    }
+  }
+
+  &-pictures {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: stretch;
+
+    @media (max-width: 750px) {
+      flex-direction: column;
+      gap: 20px;
+    }
+  }
+
+  &-picture {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 100%;
+    height: 100%;
+    max-width: 300px;
+
+    @media (max-width: 750px) {
+      max-width: 100%;
+    }
+
+    &-display {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 300px;
+      gap: 10px;
+
+      @media (max-width: 750px) {
+        height: auto;
+      }
+
+      >img {
+        width: 100% !important;
+        object-fit: contain;
+        height: auto;
+      }
+
+      >p {
+        text-align: left !important;
+        width: 100% !important;
+      }
+    }
+
+    &-edit {
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+      justify-content: center;
+      width: 100%;
+
+      >input {
+        font-size: .8em;
+        font-weight: normal;
+        cursor: pointer;
+      }
+
+      >p {
+        margin-bottom: 0;
+        text-align: left !important;
+        min-height: 50px;
+      }
+    }
+  }
+
+  &-fields {
+    padding: 20px 0;
+    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: 330px;
+    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;
+
+        >* {
+          text-align: left !important;
+        }
+      }
+
+
+      >textarea {
+        height: 120px;
+        min-height: 40px;
+        min-width: 300px;
+        max-width: 300px;
+        line-height: initial;
+
+        @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;
+      }
+    }
+  }
+}

core/static/core/user_groups.scss

@@ -0,0 +1,13 @@
+#id_groups {
+  margin: 0;
+
+  >li {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 30px;
+
+    >label {
+      cursor: pointer;
+    }
+  }
+}

core/static/core/user_preferences.scss

@@ -0,0 +1,41 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &-general {
+    >p {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: left;
+      gap: 5px;
+      align-items: flex-start;
+      margin: 0;
+
+      >label {
+        cursor: pointer
+      }
+    }
+  }
+
+  &-cards,
+  &-trombi {
+    >p {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: justify;
+      gap: 5px;
+
+      >input,
+      >select {
+        min-width: 300px;
+      }
+    }
+  }
+
+  &-submit-btn {
+    margin-top: 10px !important;
+    max-width: 100px;
+  }
+}

core/static/core/user_stats.scss

@@ -0,0 +1,40 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 30px;
+
+  @media (max-width: 535px) {
+
+    >div,
+    >div>.flexed {
+      width: 100%;
+      align-items: stretch;
+    }
+  }
+}
+
+
+.flexed {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: self-start;
+
+  >div {
+    display: flex;
+    justify-content: space-between;
+
+    >b,
+    >span {
+      width: 120px;
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}