Skip to content

Commit

Permalink
Merge pull request #90 from sympoll/more-group-details
Browse files Browse the repository at this point in the history
More group details
  • Loading branch information
Idan-sh authored Sep 19, 2024
2 parents 87f555c + fa20dc0 commit fa20320
Show file tree
Hide file tree
Showing 19 changed files with 464 additions and 229 deletions.
1 change: 0 additions & 1 deletion src/assets/styles/basics/_CustomButton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
font-weight: 600;
line-height: 20px;
max-width: 480px;
min-height: 40px;
min-width: min-content;
overflow: hidden;
padding: 0px;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.group-info {
.group-profile {
@include fadeIn;
justify-self: center;
margin-top: 20px;
Expand All @@ -10,6 +10,7 @@
background: linear-gradient(to bottom right, $mainColor-light0, $mainColor-dark3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 20px;
color: $profileFontColor;

&__header {
position: relative;
Expand All @@ -24,10 +25,8 @@
justify-content: center;
align-items: center;
width: 100%;

&:hover .user-profile__profile-banner {
opacity: 0.8;
}
background-color: white;
border-radius: 10px;
}

&__banner-img {
Expand All @@ -36,6 +35,15 @@
border-radius: 10px;
width: 100%;
height: 200px;
transition: opacity 0.3s;

&.highlightable {
cursor: pointer;

&:hover {
opacity: 0.9;
}
}
}

&__upload-profile-banner-input {
Expand All @@ -58,7 +66,7 @@
button {
background: none;
border: none;
color: #4b3832;
color: $profileFontColor;
font-weight: bold;
font-size: 12px;
cursor: pointer;
Expand All @@ -72,13 +80,11 @@
&__profile-picture-container {
position: relative;
display: flex;
width: fit-content;
height: fit-content;
width: 120px;
height: 120px;
margin-left: 30px;

&:hover .user-profile__profile-picture {
opacity: 0.8;
}
background-color: white;
border-radius: 50%;
}

&__profile-img {
Expand All @@ -92,6 +98,14 @@
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
object-fit: cover;
transition: opacity 0.3s;

&.highlightable {
cursor: pointer;

&:hover {
opacity: 0.8;
}
}
}

&__upload-profile-picture-input {
Expand All @@ -112,7 +126,7 @@
button {
background: none;
border: none;
color: #4b3832;
color: $profileFontColor;
font-weight: bold;
font-size: 12px;
cursor: pointer;
Expand Down Expand Up @@ -143,7 +157,6 @@
font-size: 32px;
font-weight: bold;
margin: 0;
color: #4b3832;
}

&__divider {
Expand All @@ -163,7 +176,6 @@
gap: 10px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 8px;
color: #4b3832;
overflow-x: auto;
}

Expand All @@ -178,11 +190,10 @@

&__description-container {
@include flex-column;
padding: 14px;
padding: $profileBoxPadding;
background: $mainColor-light0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 8px;
color: $mainFontColor;
flex-basis: 60%;
flex-grow: 1;
position: relative;
Expand All @@ -194,18 +205,6 @@
gap: 6px;
height: 100%;

.group-info__edit-description-input {
flex-grow: 1;
padding: 6px;
border-radius: 5px;
border: 1px solid $mainFontColor;
background-color: $mainBgColor0;
font-size: $mainFontSize;
font-family: $mainFont;
min-width: 0;
resize: vertical;
}

button {
background-color: $mainColor-dark0;
color: white;
Expand All @@ -222,12 +221,24 @@
}
}

&__edit-description-input {
flex-grow: 1;
padding: 6px;
border-radius: 5px;
border: 1px solid $mainFontColor;
background-color: $mainBgColor0;
font-size: $mainFontSize;
font-family: $mainFont;
min-width: 0;
resize: vertical;
}

&__edit-description-button {
position: absolute;
top: 12px; // Adjust the spacing as needed
right: 12px; // Adjust the spacing as needed
cursor: pointer;
color: $mainFontColor;
color: $profileFontColor;
scale: 0.8;

&:hover {
Expand All @@ -251,7 +262,7 @@
button {
background: none;
border: none;
color: #4b3832;
color: $profileFontColor;
font-weight: bold;
font-size: 13px;
cursor: pointer;
Expand All @@ -266,19 +277,6 @@
}
}

&__group-info {
padding: 20px;
background: $mainColor-light0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 8px;
color: #4b3832;
flex-basis: 40%;

&__label {
font-weight: 800;
}
}

/* Responsive adjustments */
@media (max-width: 768px) {
&__banner-img {
Expand Down
26 changes: 26 additions & 0 deletions src/assets/styles/cmps/group-info/_GroupProfileInfoBox.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.group-profile {
&__group-info {
padding: $profileBoxPadding;
background: $mainColor-light0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 8px;
flex-basis: 40%;

&__title {
margin-bottom: 12px;
}

&__items {
@include flex-column;
gap: 20px;
}

&__label {
font-weight: 800;
}

&__members {
margin-bottom: 10px;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
.show-group-members-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;

&__title {
font-size: 1.6rem;
margin: 12px;
font-weight: 600;
font-family: $secondaryFont;
}

&__members-list {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
padding-inline: 10px;
max-height: 60vh;
overflow-y: auto;
padding: 20px;
box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
border-radius: 8px;
background-color: lighten($mainBgColor0, 6%);
}
}

.show-group-members-overlay-container {
display: flex;
flex-direction: column;
padding: 20px;
text-align: center;
justify-content: center;
align-items: center;
background: white;
border-radius: 10px; /* Slightly more rounded corners */
width: 40%; /* Increase the width for more spacious design */
max-width: 100%;
position: relative;
margin-inline: 40px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Subtle outer shadow for depth */
background-color: $mainBgColor0;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.show-group-members-popup-item {
display: flex;
gap: 20px;
align-items: center;
font-size: 1.1rem;
font-weight: 300;
cursor: pointer;
padding: 10px 12px;
transition: background-color 0.2s ease;

&:hover {
background-color: darken($grayedOutFontColor, 2%);
border-radius: 6px;
}

&__username {
cursor: pointer;
font-weight: 500;
}

&__role {
background-color: $roleNameBgColor;
border-radius: 5px;
display: inline-block;
padding: 4px 12px;
flex: 0 0 auto;
color: $profileFontColor;
margin-left: auto;
text-overflow: ellipsis;
overflow: hidden;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@
width: 100%;
object-fit: cover;
object-position: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
Loading

0 comments on commit fa20320

Please sign in to comment.