From c1e2fca751279f59d1e4b9c35d6eff4034666453 Mon Sep 17 00:00:00 2001
From: Guillaume Dott <guillaume+github@dott.fr>
Date: Fri, 13 Nov 2015 12:41:25 +0100
Subject: [PATCH] Improve style

---
 lib/librarix/assets/application.scss | 42 ++++++++++++++++++++++------
 lib/librarix/menu.rb                 |  2 +-
 lib/librarix/public/application.css  |  2 +-
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/lib/librarix/assets/application.scss b/lib/librarix/assets/application.scss
index f9d2014..2af243a 100644
--- a/lib/librarix/assets/application.scss
+++ b/lib/librarix/assets/application.scss
@@ -2,11 +2,41 @@ body {
   margin: 10px;
 }
 
-h2 {
-  margin-top: 0;
+a {
+  text-decoration: none;
+  color: #666;
+
+  &:hover {
+    color: #888;
+  }
 }
 
-body > form #search-main {
+h2 {
+  margin-top: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  font-size: 1.2em;
+  font-family: Verdana,Arial,sans-serif;
+}
+
+ul#movies, ul#menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+ul#menu {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+
+  li {
+    margin: 5px;
+  }
+}
+
+form #search-main {
   display: flex;
 
   input {
@@ -26,12 +56,6 @@ body > form #search-main {
   }
 }
 
-ul#movies {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
 .default, .compact {
   li {
     padding: 10px 0;
diff --git a/lib/librarix/menu.rb b/lib/librarix/menu.rb
index d622da8..d5b0552 100644
--- a/lib/librarix/menu.rb
+++ b/lib/librarix/menu.rb
@@ -27,7 +27,7 @@ module Librarix
     private
 
     def around(content)
-      "<ul>#{content}</ul>"
+      "<ul id=\"menu\">#{content}</ul>"
     end
 
     class Element
diff --git a/lib/librarix/public/application.css b/lib/librarix/public/application.css
index b5854e9..611cc15 100644
--- a/lib/librarix/public/application.css
+++ b/lib/librarix/public/application.css
@@ -1 +1 @@
-body{margin:10px}h2{margin-top:0}body>form #search-main{display:flex}body>form #search-main input{border-radius:0.4em;border:solid 3px #f4f4f4}body>form #search-main input[type="submit"]{background-color:#f4f4f4}body>form #search-main input[type="text"]{flex-grow:1;min-width:50px;font-size:1.4em;padding:5px}ul#movies{list-style-type:none;margin:0;padding:0}.default li,.compact li{padding:10px 0}.default li:nth-child(even),.compact li:nth-child(even){background-color:#f4f4f4}.default .movie,.compact .movie{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.default .movie .poster,.compact .movie .poster{margin-right:10px}.default .movie .informations,.compact .movie .informations{align-self:flex-start;flex:1 1 300px}.poster{display:flex;flex-flow:row wrap}.poster .movie{width:160px}
+body{margin:10px}a{text-decoration:none;color:#666}a:hover{color:#888}h2{margin-top:0;overflow:hidden;text-overflow:ellipsis;font-size:1.2em;font-family:Verdana,Arial,sans-serif}ul#movies,ul#menu{list-style-type:none;margin:0;padding:0}ul#menu{display:flex;flex-flow:row wrap;justify-content:flex-end}ul#menu li{margin:5px}form #search-main{display:flex}form #search-main input{border-radius:0.4em;border:solid 3px #f4f4f4}form #search-main input[type="submit"]{background-color:#f4f4f4}form #search-main input[type="text"]{flex-grow:1;min-width:50px;font-size:1.4em;padding:5px}.default li,.compact li{padding:10px 0}.default li:nth-child(even),.compact li:nth-child(even){background-color:#f4f4f4}.default .movie,.compact .movie{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.default .movie .poster,.compact .movie .poster{margin-right:10px}.default .movie .informations,.compact .movie .informations{align-self:flex-start;flex:1 1 300px}.poster{display:flex;flex-flow:row wrap}.poster .movie{width:160px}