Merge pull request #399 from rcode5/chore/styled-search

improve search styling

Author: bunnymatic

app/assets/stylesheets/application/search.css.scss

@@ -12,6 +12,25 @@
   }
 }
 .search-results {
+  .nothing {
+    display: flex;
+    flex-direction: column;
+
+    p {
+      text-align: left;
+      margin-top: 0;
+    }
+    > * {
+
+      flex: 3
+    }
+    .oops {
+      flex: 1;
+      font-size: initial;
+    }
+    font-size: initial;
+    width: 100%;
+  }
 }
 
 .search-result {

app/views/search/show.html.slim

@@ -4,7 +4,7 @@
     input name="search" value=@query placeholder='search by titles, bands, songs...'
   .instructions
     p
-      span Type in the search box to find tracks that have matches in their playlist (song/band) or by tags or by their description.  Here are a couple things to try if you don't know where to start:
+      span Type in the search box (and hit enter) to find tracks that have matches in their playlist (song/band) or by tags or by their description.  Here are a couple things to try if you don't know where to start:
       = " "
       - example_searches.each.with_index do |qq, idx|
         a href="?search=#{qq}" = "\"#{qq}\""
@@ -25,8 +25,6 @@
     - else
       .nothing
         p.oops
-          = ":( oops"
+          = ":( well, hmm..."
         p
-          | We couldn't find anything that matched your request.  Click
-          a href=root_path  here
-          | to start at the beginning.
+          | We couldn't find anything that matched your request.  We're not super good with mis-spellings.

app/views/welcome/index.slim

@@ -23,5 +23,7 @@
       = ":( oops"
     p
       | We couldn't find anything that matched your request.  Click
+      '
       a href=root_path  here
+      '
       | to start at the beginning.

spec/features/visitor_views_tracks_spec.rb

@@ -28,10 +28,16 @@
   scenario 'can search', js: true do
     visit root_path
     expect(page).to have_css('.tracks .track', count: 3)
+
     click_on 'search'
+
     fill_in 'search', with: "bootylicious\n"
     expect(page).to have_content 'the first mix today'
+
     fill_in 'search', with: "james brown\n"
     expect(page).to have_content 'the second mix today'
+
+    fill_in 'search', with: "this garbage is not in the system\n"
+    expect(page).to have_content 'well, hmm...'
   end
 end