From 1fc1507e11b17a529e00306557240b28610d61f7 Mon Sep 17 00:00:00 2001
From: Eugenie Colonna d Istria <eugeniecolonnadistria@gmail.com>
Date: Thu, 13 Jun 2019 18:57:47 +0200
Subject: [PATCH] changed journal cards completely

---
 .../components/_card_participations.scss      | 41 +++++++---
 app/views/participations/index.html.erb       | 82 ++++++++++---------
 2 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/app/assets/stylesheets/components/_card_participations.scss b/app/assets/stylesheets/components/_card_participations.scss
index 5cb890f..e3a8da1 100644
--- a/app/assets/stylesheets/components/_card_participations.scss
+++ b/app/assets/stylesheets/components/_card_participations.scss
@@ -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{
diff --git a/app/views/participations/index.html.erb b/app/views/participations/index.html.erb
index da3d8ce..fc67157 100644
--- a/app/views/participations/index.html.erb
+++ b/app/views/participations/index.html.erb
@@ -4,16 +4,15 @@
   <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>
 
@@ -21,46 +20,53 @@
       <% @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>