Download as
Browse Code »

Commit ef30cecc5606cb8121ddb908e121f8becba79f4a

Authored by Arthur Sturzbecher
Committed by Macartur Sousa
1 parent 7c23a765
Exists in elasticsearch_filter and in 1 other branch elasticsearch_categories

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>
Showing 2 changed files with 83 additions and 55 deletions   Show diff stats
plugins/elasticsearch/public/style.css
  Diff comments   View file @ef30cec
1   -.controller-elasticsearch_plugin .wrapper {
  1 +.controller-elasticsearch_plugin .results-wrapper {
2 2 display: flex;
3 3 }
4 4  
5 5 .controller-elasticsearch_plugin .sidebar {
6   - width: 175px;
7   -}
8   -
9   -.controller-elasticsearch_plugin .sidebar ul {
10   - margin-top: 0px;
  6 + width: 270px;
11 7 }
12 8  
13 9 .controller-elasticsearch_plugin .search_form {
14   - margin-top: 5px;
15   - flex: 1;
16   - margin-left: 15px;
  10 + text-align: center;
  11 + margin-top: 40px;
17 12 }
18 13  
19 14 .controller-elasticsearch_plugin .search_form .search_field {
... ... @@ -22,53 +17,89 @@
22 17  
23 18 .controller-elasticsearch_plugin .search_form .search_field input[type='text'] {
24 19 width: 500px;
  20 + font-size: 15px;
  21 + height: 30px;
  22 + -webkit-appearance: none;
  23 + -moz-appearance: none;
  24 + border: 1px solid #ccc;
  25 + padding-left: 10px;
  26 +}
  27 +.controller-elasticsearch_plugin .search_form .search_field input[type='submit'] {
  28 + -webkit-appearance: none;
  29 + -moz-appearance: none;
  30 + border: none;
  31 + padding: 0 15px;
  32 + line-height: 35px;
  33 + height: 35px;
  34 +}
  35 +.controller-elasticsearch_plugin .search_form .search_field input[type='submit']:hover {
  36 + cursor: pointer;
  37 + background: #ccc;
  38 +}
  39 +
  40 +.controller-elasticsearch_plugin .results {
  41 + flex: 2;
  42 + margin-top: 20px;
  43 + border-radius: 5px;
  44 + border: 1px solid #eee;
  45 + padding: 10px 0;
25 46 }
26 47  
27 48 .controller-elasticsearch_plugin .results-count {
28   - margin-top: 7px;
29   - margin-right: 15px;
  49 + margin: 15px;
  50 + font-size: 18px;
  51 +}
  52 +
  53 +.controller-elasticsearch_plugin #content-inner .search-filter,
  54 +.controller-elasticsearch_plugin #content-inner ul.search-options {
  55 + background: #fff;
  56 + overflow: hidden;
  57 + border-radius: 5px;
  58 + margin: 20px 20px 0 0;
  59 + border: 1px solid #eee;
30 60 }
31 61  
32   -.controller-elasticsearch_plugin ul {
  62 +.controller-elasticsearch_plugin #content-inner ul {
  63 + background: #FFF;
33 64 list-style: none;
34 65 list-style-position: inside;
35 66 padding-left: 0px;
  67 + margin: 0;
36 68 }
37 69  
38 70 .controller-elasticsearch_plugin #content h3.box-title {
39   - background: #ccc;
40   - color: black;
41   - padding: 10px;
42   - border: 1px solid #948b8b;
43   - margin-left: 10px;
44   - margin-right: 10px;
45   - margin-bottom: 0px;
  71 + background: #000;
  72 + color: white;
  73 + padding: 15px 10px;
  74 + margin: 0;
  75 + font-weight: 400;
  76 + text-transform: uppercase;
  77 + font-size: 1.17em;
46 78 }
47 79  
48 80 .controller-elasticsearch_plugin .search-filter ul li,
49 81 .controller-elasticsearch_plugin .select-search-type {
50 82 text-decoration: none;
51   - padding: 10px;
52   - margin: 10px;
53 83 font-weight: 900;
54 84 font-family: arial;
55   - border: 1px solid #ddd;
56   - margin-top: 0px;
57   - margin-bottom: 0px;
  85 + border-bottom: 1px solid #E1E1E1;
58 86 }
59 87  
60   -.controller-elasticsearch_plugin .search-filter ul li a {
  88 +.controller-elasticsearch_plugin #content-inner ul li:last-child {
  89 + border-bottom: none;
  90 +}
  91 +
  92 +.controller-elasticsearch_plugin #content-inner ul li a {
61 93 text-decoration: none;
  94 + display: block;
  95 + padding: 13px;
62 96 color: black;
63 97 }
64 98  
65 99 .controller-elasticsearch_plugin .select-search-type.active {
66   - padding: 10px;
67   - background: black;
68   - margin-left: 10px;
69   - margin-right: 10px;
  100 + background: #CCC;
70 101 font-weight: 900;
71   - border: 1px solid #000;
  102 + border-bottom: none;
72 103 }
73 104  
74 105 .controller-elasticsearch_plugin .select-search-type a {
... ... @@ -90,8 +121,7 @@
90 121 .controller-elasticsearch_plugin .search-item {
91 122 padding: 10px;
92 123 margin-bottom: 15px;
93   - margin-top: 15px;
94   - padding-left: 0px;
  124 + margin: 15px;
95 125 }
96 126  
97 127 .controller-elasticsearch_plugin .search-item .person-item {
... ...
plugins/elasticsearch/views/elasticsearch_plugin/search.html.erb
  Diff comments   View file @ef30cec
1 1 <div class="wrapper">
2   -
3   - <div class="sidebar">
4   - <h3 class="box-title"><%= _("Results") %></h3>
5   - <ul>
6   - <% for type,value in @searchable_types %>
7   - <li class="select-search-type <%= "active" if type == @selected_type %>">
8   - <%= link_to value[:label], "?selected_type=#{type}&query=#{@query}&filter=#{@selected_filter}"%>
9   - </li>
10   - <% end %>
11   - </ul>
12   -
13   - <div class="search-filter">
14   - <h3 class="box-title"><%= _("Sort by") %></h3>
15   - <ul>
16   - <% for type, value in @filter_types %>
17   - <li class="select-search-type <%= "active" if type == @selected_filter %>">
18   - <%= link_to value[:label], "?selected_type=#{@selected_type}&query=#{@query}&filter=#{type}" %>
19   - </li>
20   - <% end %>
21   - </ul>
22   - </div>
23   - </div>
24   -
25 2 <div class="search_form">
26 3 <div class="search_field">
27 4 <%= form_tag '/plugin/elasticsearch/search', method: :get do %>
... ... @@ -43,7 +20,28 @@
43 20 <% end %>
44 21 </p>
45 22 </div>
  23 + </div>
46 24  
  25 + <div class="results-wrapper">
  26 + <div class="sidebar">
  27 + <ul class="search-options">
  28 + <% for type,value in @searchable_types %>
  29 + <li class="select-search-type <%= "active" if type == @selected_type %>">
  30 + <%= link_to value[:label], "?selected_type=#{type}&query=#{@query}&filter=#{@selected_filter}"%>
  31 + </li>
  32 + <% end %>
  33 + </ul>
  34 + <div class="search-filter">
  35 + <h3 class="box-title"><%= _("Sort by") %></h3>
  36 + <ul>
  37 + <% for type, value in @filter_types %>
  38 + <li class="select-search-type <%= "active" if type == @selected_filter %>">
  39 + <%= link_to value[:label], "?selected_type=#{@selected_type}&query=#{@query}&filter=#{type}" %>
  40 + </li>
  41 + <% end %>
  42 + </ul>
  43 + </div>
  44 + </div>
47 45  
48 46 <div class="results">
49 47 <% for result in @results.to_a %>
... ...