Use a fixed left sidebar for filters

linrock · May 21, 2018 · 1c7e2aa · 1c7e2aa
1 parent 033045a
commit 1c7e2aa
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 6 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,4 +1,5 @@
 /*
+ *= require reset
  *= require_tree .
  *= require_self
  */
diff --git a/app/assets/stylesheets/home.styl b/app/assets/stylesheets/home.styl
@@ -1,12 +1,30 @@
 body
   font-family "Helvetica Neue", Arial, sans-serif
 
+h1
+  font-size 18px
+  font-weight bold
+  margin-bottom 30px
+
 .container
   margin 50px auto
-  width 450px
+  width 600px
+
+.sidebar
+  position fixed
+  left 50px
+  top 20px
+
+  .filters
+    .filter
+      display flex
+      margin 5px 0
+
+      .label
+        width 100px
 
-.stats
-  margin 20px auto
+  .stats
+    margin-top 40px
 
 .replays
   margin-bottom 50px

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,6 +1,44 @@
 <div class="container">
-  <section class="stats">
-    <%= @replays.count %> replays found
+  <section class="sidebar">
+    <h1>Hearthstone replay finder</h1>
+
+    <div class="filters">
+      <div class="filter">
+        <div class="label">class</div>
+        <div class="select">
+          <select>
+            <option>Rogue</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="filter">
+        <div class="label">archetype</div>
+        <div class="select">
+          <select>
+            <option>Odd</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="filter">
+        <div class="label">outcome</div>
+        <div class="select">
+          <select>
+            <option>Win</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="filter">
+        <div class="label">rank</div>
+        <div class="select">Legend</div>
+      </div>
+    </div>
+
+    <div class="stats">
+      <%= @replays.count %> replays found
+    </div>
   </section>
 
   <section class="replays">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>HsReplayFinder</title>
+    <title>Hearthstone Replay Finder</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 

diff --git a/lib/assets/stylesheets/reset.css b/lib/assets/stylesheets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}