Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mejora de UI/UX #764

Open
wants to merge 17 commits into
base: develop
Choose a base branch
from
48 changes: 39 additions & 9 deletions app/assets/stylesheets/application/member-card.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,36 @@
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
gap: 20px;

franpb14 marked this conversation as resolved.
Show resolved Hide resolved

@media(max-width: $screen-sm-min) {
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
display: block;
}
}

.card-wrapper {
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
width: 48%;

@media (max-width: $screen-sm-min) {
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
width: 100%;
}
}

.to-member-card {
& {
margin: 16px 0;
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
width: 100%;
max-width: 600px;
height: 178px;
min-height: 178px;
background-color: white;
box-shadow: 0 0 3px $palette-grey;
display: inline-block;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 4px;

@media(max-width: $screen-sm-min) {
height: auto;
Expand All @@ -19,6 +43,7 @@
display: flex;
background-color: $palette-dark-turkey;
padding: 10px 20px;
border-radius: 4px 4px 0 0;
}

&__avatar {
Expand Down Expand Up @@ -48,13 +73,16 @@
&__body {
& {
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;

franpb14 marked this conversation as resolved.
Show resolved Hide resolved
}

&__description {
margin-bottom: 10px;
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
color: #666;
font-size: 15px;
height: 44px;

@media(max-width: $screen-sm-min) {
height: auto;
Expand All @@ -63,6 +91,7 @@

&__items {
display: flex;
flex-wrap: wrap;

@media(max-width: $screen-sm-min) {
display: block;
Expand All @@ -71,11 +100,12 @@
}

&__item {
& {
margin-right: 20px;
font-size: 14px;
color: grey;
}
margin-right: 20px;
font-size: 14px;
color: grey;
overflow-wrap: break-word;
white-space: normal;
word-break: break-word;
markets marked this conversation as resolved.
Show resolved Hide resolved

a {
color: grey;
Expand Down
2 changes: 1 addition & 1 deletion app/views/users/_member_card.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="col-lg-6 col-sm-12">
<div class="card-wrapper">
<div class="to-member-card">
<div class="to-member-card__header">
<div class="to-member-card__header__avatar"><%= image_tag avatar_url(member.user, 48) %></div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/users/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</div>
</div>

<div class="row to-member-cards">
<div class="card-container to-member-cards">
franpb14 marked this conversation as resolved.
Show resolved Hide resolved
<%= render partial: 'member_card', collection: @member_view_models, as: :member %>
</div>

Expand Down