Elasticsearch: view enhancement

related to #362 - fixes for search view makes css rules more specific Signed-off-by: Arthur Jahn <stutrzbecher@gmail.com> Signed-off-by: Daniel Henrique <danielhmarinho@gmail.com>

Elasticsearch: view enhancement
related to #362 - fixes for search view makes css rules more specific Signed-off-by: Arthur Jahn <stutrzbecher@gmail.com> Signed-off-by: Daniel Henrique <danielhmarinho@gmail.com>
Arthur Sturzbecher · Macartur Sousa
1 parent 67d0efad
Showing 2 changed files with 83 additions and 55 deletions Show diff stats
plugins/elasticsearch/public/style.css
plugins/elasticsearch/views/elasticsearch_plugin/search.html.erb
-.controller-elasticsearch_plugin .wrapper {
+.controller-elasticsearch_plugin .results-wrapper {
   display: flex;
 }
 .controller-elasticsearch_plugin .sidebar {
-  width: 175px;
-}
-
-.controller-elasticsearch_plugin .sidebar ul {
-  margin-top: 0px;
+  width: 270px;
 }
 .controller-elasticsearch_plugin .search_form {
-  margin-top: 5px;
-  flex: 1;
-  margin-left: 15px;
+  text-align: center;
+  margin-top: 40px;
 }
 .controller-elasticsearch_plugin .search_form .search_field {
@@ -22,53 +17,89 @@
 .controller-elasticsearch_plugin .search_form .search_field input[type='text'] {
   width: 500px;
+  font-size: 15px;
+  height: 30px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: 1px solid #ccc;
+  padding-left: 10px;
+}
+.controller-elasticsearch_plugin .search_form .search_field input[type='submit'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  padding: 0 15px;
+  line-height: 35px;
+  height: 35px;
+}
+.controller-elasticsearch_plugin .search_form .search_field input[type='submit']:hover {
+  cursor: pointer;
+  background: #ccc;
+}
+
+.controller-elasticsearch_plugin .results {
+  flex: 2;
+  margin-top: 20px;
+  border-radius: 5px;
+  border: 1px solid #eee;
+  padding: 10px 0;
 }
 .controller-elasticsearch_plugin .results-count {
-  margin-top: 7px;
-  margin-right: 15px;
+  margin: 15px;
+  font-size: 18px;
+}
+
+.controller-elasticsearch_plugin #content-inner .search-filter,
+.controller-elasticsearch_plugin #content-inner ul.search-options {
+  background: #fff;
+  overflow: hidden;
+  border-radius: 5px;
+  margin: 20px 20px 0 0;
+  border: 1px solid #eee;
 }
-.controller-elasticsearch_plugin ul {
+.controller-elasticsearch_plugin #content-inner ul {
+  background: #FFF;
   list-style: none;
   list-style-position: inside;
   padding-left: 0px;
+  margin: 0;
 }
 .controller-elasticsearch_plugin #content h3.box-title {
-  background: #ccc;
-  color: black;
-  padding: 10px;
-  border: 1px solid #948b8b;
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-bottom: 0px;
+  background: #000;
+  color: white;
+  padding: 15px 10px;
+  margin: 0;
+  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 1.17em;
 }
 .controller-elasticsearch_plugin .search-filter ul li,
 .controller-elasticsearch_plugin .select-search-type {
   text-decoration: none;
-  padding: 10px;
-  margin: 10px;
   font-weight: 900;
   font-family: arial;
-  border: 1px solid #ddd;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  border-bottom: 1px solid #E1E1E1;
 }
-.controller-elasticsearch_plugin .search-filter ul li a {
+.controller-elasticsearch_plugin #content-inner ul li:last-child {
+  border-bottom: none;
+}
+
+.controller-elasticsearch_plugin #content-inner ul li a {
   text-decoration: none;
+  display: block;
+  padding: 13px;
   color: black;
 }
 .controller-elasticsearch_plugin .select-search-type.active {
-  padding: 10px;
-  background: black;
-  margin-left: 10px;
-  margin-right: 10px;
+  background: #CCC;
   font-weight: 900;
-  border: 1px solid #000;
+  border-bottom: none;
 }
 .controller-elasticsearch_plugin .select-search-type a {
@@ -90,8 +121,7 @@
 .controller-elasticsearch_plugin .search-item {
   padding: 10px;
   margin-bottom: 15px;
-  margin-top: 15px;
-  padding-left: 0px;
+  margin: 15px;
 }
 .controller-elasticsearch_plugin .search-item .person-item {
 <div class="wrapper">
-
-  <div class="sidebar">
-    <h3 class="box-title"><%= _("Results") %></h3>
-    <ul>
-      <% for type,value in @searchable_types %>
-        <li class="select-search-type <%= "active" if type == @selected_type %>">
-          <%= link_to  value[:label], "?selected_type=#{type}&query=#{@query}&filter=#{@selected_filter}"%>
-        </li>
-      <% end %>
-    </ul>
-
-    <div class="search-filter">
-      <h3 class="box-title"><%= _("Sort by") %></h3>
-      <ul>
-        <% for type, value in @filter_types %>
-          <li class="select-search-type <%= "active" if type == @selected_filter %>">
-            <%= link_to value[:label], "?selected_type=#{@selected_type}&query=#{@query}&filter=#{type}" %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  </div>
-
   <div class="search_form">
     <div class="search_field">
       <%= form_tag '/plugin/elasticsearch/search', method: :get  do %>
@@ -43,7 +20,28 @@
         <% end %>
       </p>
     </div>
+  </div>
+  <div class="results-wrapper">
+    <div class="sidebar">
+      <ul class="search-options">
+        <% for type,value in @searchable_types %>
+        <li class="select-search-type <%= "active" if type == @selected_type %>">
+          <%= link_to  value[:label], "?selected_type=#{type}&query=#{@query}&filter=#{@selected_filter}"%>
+        </li>
+        <% end %>
+      </ul>
+      <div class="search-filter">
+        <h3 class="box-title"><%= _("Sort by") %></h3>
+        <ul>
+          <% for type, value in @filter_types %>
+          <li class="select-search-type <%= "active" if type == @selected_filter %>">
+            <%= link_to value[:label], "?selected_type=#{@selected_type}&query=#{@query}&filter=#{type}" %>
+          </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
     <div class="results">
       <% for result in @results.to_a %>