Skip to content

Commit

Permalink
changed journal cards completely
Browse files Browse the repository at this point in the history
  • Loading branch information
@eugeniecln1
eugeniecln1 committed Jun 13, 2019
1 parent 5178aeb commit 1fc1507
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 49 deletions.
41 changes: 30 additions & 11 deletions app/assets/stylesheets/components/_card_participations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,59 @@
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
margin: 10px 10px 10px 0;
border-left: 7px solid;
border-left: 15px solid;
size: 100px;
}

.card-participation-rm {
border-radius: 100px;
background-color: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
flex-direction: column;
align-items: center;
text-align: center;
padding: 15px;
h6 {
color: black;
}
img {
size: 40px;
}
}

.link-rm:hover {
text-decoration: none;
}

.card-image img{
height: 150px;
height: 100px;
}

.card-content {
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}

.caaard {
.card-journal-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px;
text-align: center;
max-width: 300px;
width: 100%;
}

.card-title {
text-align: center;
font-size: 20px;
font-weight: bold;
text-align: left;
margin-left: 10px;
}

.card-rating {
min-width: 100px;
min-width: 50px;
text-align: center;
font-size: 24px;
font-size: 22px;
}

.card-rating img{
Expand Down
82 changes: 44 additions & 38 deletions app/views/participations/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,63 +4,69 @@
<div class="row justify-content-center">
<div class="col-10 journal">
<div class="titles d-flex justify-content-between align-items-center">
<div>
<div class="d-flex align-items-center">
<% if @participations.length >= 2 %>
<h4><em>Challenges completed</em> (<%= @participations.length %>)</h4>
<% else %>
<h4><em>Challenge completed</em> (<%= @participations.length %>)</h4>
<% end %>
<%= image_tag "emoji/027-cool.png", size: 50, style: "margin-left: 20px;" %>
</div>
<div>
<%= image_tag "emoji/027-cool.png", size: 50 %>
</div>
<h4><em>Inspired by</em></h4>
</div>
<br>

<!-- card_participations = Challenge.title + Feedback + Ratings -->
<% @participations.each do |participation| %>
<!-- Si participation.validated? (si les ratings + feedback sont complétés = true sinon false), on n'affiche pas la participation -->
<% if participation.validated? %>
<div class="card-participation border-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>">
<div class="card-content">
<div class="card-image">
<%= image_tag participation.challenge.show_category_logo %>
</div>
<div class="caaard">
<div class="card-title">
<h5><%= participation.challenge.title %></h5>
</div>
<div class="card-rating">
<% participation.difficulty.times do %>
<i class="fas fa-dragon color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
<% (5 - participation.difficulty).times do %>
<%= image_tag(participation.challenge.show_category_color_on_difficulty_icon, size: "30") %>
<% end %>
<br>
<% participation.appreciation.times do %>
<i class="fas fa-heart color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
<% (5 - participation.appreciation).times do %>
<i class="far fa-heart color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
<div class="row">
<div class="col-10">
<div class="card-participation border-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>">
<div class="card-content">
<div class="card-image">
<%= image_tag participation.challenge.show_category_logo %>
</div>
<div class="card-feedback-text">
<p><%= participation.feedback %></p>
<div class="card-journal-inner">
<div class="card-title">
<h5><%= participation.challenge.title %></h5>
<p>"<%= participation.feedback %>"</p>
</div>
<div class="card-rating">
<div>
<% participation.difficulty.times do %>
<i class="fas fa-dragon color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
<% (5 - participation.difficulty).times do %>
<%= image_tag(participation.challenge.show_category_color_on_difficulty_icon, size: "30") %>
<% end %>
</div>

<div>
<% participation.appreciation.times do %>
<i class="fas fa-heart color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
<% (5 - participation.appreciation).times do %>
<i class="far fa-heart color-<%= participation.challenge.category.gsub(/\s+/, "").downcase %>"></i>
<% end %>
</div>

</div>
</div>
</div>
<div class="card-role-model">
<div class="card-inspiration">
<p id="proposed-to-you"><em>Proposed to you by</em></p>
<%= link_to role_model_path(participation.challenge.role_model) do %>
<%= image_tag(participation.challenge.role_model.picture, class:"avatar-journal" ) %>
<p><%= "#{participation.challenge.role_model.first_name} #{participation.challenge.role_model.last_name}" %></p>
<% end %>
</div>

</div>
</div>
</div>
<div class="col-2">
<%= link_to role_model_path(participation.challenge.role_model), class: "link-rm" do %>
<div class="card-participation-rm mb-0 d-flex">
<%= image_tag(participation.challenge.role_model.picture, class:"avatar-large card_image", alt: "avatar-large" ) if participation.challenge.role_model.picture %>
<h6><%= participation.challenge.role_model.first_name %> <strong><%= participation.challenge.role_model.last_name %></strong></h6>
</div>
<% end %>
</div>
</div>

<% end %>
<% end %>
</div>
Expand Down

0 comments on commit 1fc1507

Please sign in to comment.