explore: improved user interface

app/assets/stylesheets/components/layout.scss

@@ -89,9 +89,6 @@ body.login {
   .forgot-password {
     text-align: right;
   }
-  h2 {
-    color: $white
-  }
 }
 
 body:not([class*="login"]) {

app/assets/stylesheets/pages/explore.scss

@@ -0,0 +1,30 @@
+.explore {
+  h2 {
+    color: $white;
+    margin-bottom: 15px;
+  }
+
+  .result-list {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .result-item {
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 5px;
+    margin-bottom: 10px;
+    padding: 15px;
+  }
+
+  .result-item-name {
+    margin-top: 0;
+  }
+
+  .result-item-stars {
+    line-height: 23px; // 18 height + 5 diff between fonts
+
+    .fa-star {
+      color: $primary-colour;
+    }
+  }
+}

app/controllers/explore_controller.rb

@@ -16,7 +16,7 @@ def index
 
     if @current
       repository    = @current.split(":").first
-      @repositories = policy_scope(Repository).search(repository)
+      @repositories = policy_scope(Repository).includes(:stars).search(repository)
     else
       @repositories = []
     end

app/views/explore/index.slim

@@ -1,20 +1,7 @@
 section.row-0
-  .center-panel
-    .col-md-4.col-sm-2.col-xs-1
-    .col-md-4.col-sm-8.col-xs-10.text-center
-      = render 'shared/notifications'
-      = image_tag 'layout/portus-logo-login-page.png', class: 'login-picture'
-
-      = form_for(:explore, method: "GET") do |f|
-        = f.text_field :search, class: 'input form-control input-lg first', placeholder: "Repository", autofocus: true, required: true, value: @current
-        = f.button "Search", id: "login-btn", class: 'classbutton btn btn-primary btn-block btn-lg'
-
-      .text-center = link_to 'Go back to the login page', new_user_session_path, class: 'btn btn-link'
-
-      - if @repositories.any?
-        .text-left
-          h2
-            | Search results
-          ul.repository
-            - @repositories.each do |r|
-              = render r
+  .center-panel.explore
+    .col-md-4.col-sm-3.col-xs-1
+    .col-md-4.col-sm-6.col-xs-10.text-center
+      = render 'explore/partials/top'
+      = render 'explore/partials/form'
+      = render 'explore/partials/result'

app/views/explore/partials/_form.html.slim

@@ -0,0 +1,4 @@
+= form_for(:explore, method: "GET") do |f|
+  = f.text_field :search, class: 'input form-control input-lg first', placeholder: "Repository", autofocus: true, required: true, value: @current
+
+  = f.button "Search", type: "submit", id: "login-btn", class: 'classbutton btn btn-primary btn-block btn-lg'

app/views/explore/partials/_result.html.slim

@@ -0,0 +1,10 @@
+- if @repositories.any?
+  h2
+    - repo_count = @repositories.count
+    | #{pluralize(repo_count, 'repository')} #{repo_count == 1 ? "was" : "were"} found
+  ul.result-list
+    - @repositories.each do |r|
+      = render partial: 'explore/partials/result_item', locals: { repository: r }
+
+- if params[:explore] && !@repositories.any?
+  h2 Your search did not match any repositories.

app/views/explore/partials/_result_item.slim

@@ -0,0 +1,18 @@
+li.result-item.text-left
+  .clearfix
+    h4.result-item-name.pull-left
+      = repository.full_name
+
+    .result-item-stars.pull-right
+      = repository.stars.count
+      |  
+      i.fa.fa-star
+
+  .clearfix
+    .tags-list.pull-left
+      - repository.tags.each do |t|
+        .label.label-success.tag
+          = t.name
+
+    .pull-right
+      | Updated #{time_ago_in_words(repository.updated_at)} ago

app/views/explore/partials/_top.html.slim

@@ -0,0 +1,4 @@
+= render 'shared/notifications'
+= image_tag 'layout/portus-logo-login-page.png', class: 'login-picture'
+
+.text-center = link_to 'Go back to the login page', new_user_session_path, class: 'btn btn-link'