Styling of search result page

app/assets/images/account_circle-black-48dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20" fill="black" width="48px" height="48px"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

app/assets/images/favorite-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>

app/assets/stylesheets/people_crawler.scss

@@ -1,3 +1,65 @@
 // Place all the styles related to the PeopleCrawler controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+
+.people-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: black;
+  }
+
+  .person {
+    line-height: 72px;
+    width: 100%;
+    padding: 8px 0 8px 0;
+
+    .list-link {
+      float: left;
+      width: 89%;
+    }
+
+    .person-icon {
+      display: inline-block;
+      max-width: 48px;
+      height: auto;
+      margin-right: 8px;
+
+      img {
+        vertical-align: middle;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      svg {
+        vertical-align: middle;
+        width: 48px;
+        height: auto;
+      }
+    }
+
+    .person-name {
+      text-align: center;
+      width: 100%;
+    }
+
+    .add-to-fav {
+      display: inline-block;
+      vertical-align: middle;
+      float: right;
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 100%;
+        height: auto;
+        vertical-align: middle;
+      }
+    }
+  }
+}

app/controllers/people_crawler_controller.rb

@@ -4,6 +4,7 @@ class PeopleCrawlerController < TissCrawlerController
     params[:api] = '/api/person/v22/psuche'
     params[:search_parameter] = 'q'
     puts params[:search_context]
+    @host = TissCrawler.get_host
 
     # TissCrawler performs general search over the available people
     @people = TissCrawler.search(params)
@@ -11,7 +12,9 @@ class PeopleCrawlerController < TissCrawlerController
 
   def show_detail
     params[:api] = '/api/person/v22/id/'
+    params[:tiss_id] = params[:tiss_id]
 
+    puts params
     # TissCrawler fetches the person's detail information
     @person = TissCrawler.get_details(params)
     # Host is needed for image rendering

app/views/people_crawler/show_basic.html.erb

@@ -1,10 +1,28 @@
-<h1>This is the result for your basic people search</h1>
+<h1>Results for "<%= params[:search_term] %>"</h1>
 
-<% @people.each_with_index do |person, index| %>
-  <p>
+<ul class="people-list">
+  <% @people.each_with_index do |person| %>
+    <li class="person">
+      <%= link_to people_crawler_show_detail_url(:tiss_id => person['tiss_id']) do %>
+      <span class="list-link">
+        <span class="person-icon">
+          <% if person['picture_uri'] != nil %>
+            <%= image_tag @host + person['picture_uri'] %>
+          <% else %>
+            <%= show_svg('account_circle-black-48dp.svg') %>
+          <% end %>
+        </span>
+          <span class="person-name">
           <%= person['first_name'] %>
             <%= person['last_name'] %>
-    <%= button_to 'Details', action: :show_detail, tiss_id: person['tiss_id'] %>
-    <%= button_to 'Add to favorites', action: :add_to_fav, tiss_id: person['tiss_id'] %>
-  </p>
-<% end %>
+        </span>
+          </span>
+      <% end %>
+      <span class="add-to-fav">
+        <%= link_to people_crawler_add_to_fav_url(:tiss_id => person['tiss_id']) do %>
+          <%= show_svg('favorite-24px.svg') %>
+        <% end %>
+      </span>
+    </li>
+  <% end %>
+</ul>