klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-13 13:29:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix CSS

Browse Source
This commit is contained in:
Julien Constant
2023-03-03 12:44:09 +01:00
parent 1ffa65b3a4
commit f9d5585525
7 changed files with 146 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
core/static/user/user_detail.scss Normal file
View File

@ -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%;
}
}
}

172
core/static/user/user_edit.scss Normal file
View File

@ -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;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
align-items: stretch;
@media (max-width: 750px) {
flex-direction: column;
gap: 10px
}
}
&-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;
}
}
}
}

13
core/static/user/user_group.scss Normal file
View File

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

41
core/static/user/user_preferences.scss Normal file
View File

@ -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;
}
}

40
core/static/user/user_stats.scss Normal file
View File

@ -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;
}
}
}
}