Skip to content

Commit

Permalink
Merge pull request #151 from eugeniecln1/journal-cards
Browse files Browse the repository at this point in the history 
changed journal cards completely
  • Loading branch information
@eugeniecln1
eugeniecln1 authored Jun 14, 2019
2 parents 9fc5edc + 0a3fd99 commit 1c42b2b
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 49 deletions.
50 changes: 40 additions & 10 deletions app/assets/stylesheets/components/_card_participations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,40 @@
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
margin: 10px;
margin: 10px 10px 10px 0;
border-left: 15px solid;
size: 100px;
}

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

.card-participation-rm:hover {
transform: scale(1.08, 1.08);
}

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

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

.card-image{
Expand All @@ -17,30 +45,32 @@
.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;
}

.card-title-rm {
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">
<h4><%= participation.challenge.title %></h4>
</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 align-items-center">
<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-rm">
<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
2 changes: 1 addition & 1 deletion db/seeds.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
challenge20 = Challenge.create(title: "Better world", category: "Future me", description: "Think of three ideas that would make the world better. No constraint. Use your imagination !", role_model_id: temeraire.id)

# Daily activities
challenge7 = Challenge.create(title: "When was the last time you had a sense of success ?", category: "Daily activities", description: "Write down a success of yours in a dairy or on a word document with the competences you needed to make it a success", role_model_id: mascotte.id)
challenge7 = Challenge.create(title: "Celebrate success", category: "Daily activities", description: "Write down a success of yours in a dairy or on a word document with the competences you needed to make it a success", role_model_id: mascotte.id)
challenge2 = Challenge.create(title: "Go outside", category: "Daily activities", description: "Go out in the sun and take a moment to appreciate the beauty of your world. It is important to feel grateful now and then to be at peace with yourself and with others", role_model_id: aragorn.id)
challenge12 = Challenge.create(title: "I am awesome", category: "Daily activities", description: "Write down up to 5 things you like about yourself. Not so simple right ?", role_model_id: riri.id)
challenge13 = Challenge.create(title: "Favorite values", category: "Daily activities", description: "Write down up to 5 qualities you like in others", role_model_id: riri.id)
Expand Down

0 comments on commit 1c42b2b

Please sign in to comment.