Add template with only poster and title for movies

lib/librarix/assets/application.scss

@@ -26,11 +26,13 @@ body > form #search-main {
   }
 }
 
-ul {
+ul#movies {
   list-style-type: none;
   margin: 0;
   padding: 0;
+}
 
+.default, .compact {
   li {
     padding: 10px 0;
   }
@@ -38,9 +40,8 @@ ul {
   li:nth-child(even) {
     background-color: #f4f4f4;
   }
-}
 
-.movie {
+  .movie {
     display: flex;
     flex-flow: row wrap;
     align-items: center;
@@ -54,4 +55,14 @@ ul {
       align-self: flex-start;
       flex: 1 1 300px;
     }
+  }
+}
+
+.poster {
+  display: flex;
+  flex-flow: row wrap;
+
+  .movie {
+    width: 160px;
+  }
 }

lib/librarix/helpers.rb

@@ -1,7 +1,11 @@
 module Librarix
   module Helpers
-    def compact?
+    def template
-      params.key?('compact')
+      if %w{default compact poster}.include?(params['template'])
+        params['template']
+      else
+        'default'
+      end
     end
   end
 end

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{list-style-type:none;margin:0;padding:0}ul li{padding:10px 0}ul li:nth-child(even){background-color:#f4f4f4}.movie{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.movie .poster{margin-right:10px}.movie .informations{align-self:flex-start;flex:1 1 300px}
+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}

lib/librarix/views/index.slim

@@ -9,8 +9,10 @@ form method="get" action="/" id="filter"
       option value="all" selected=(params['view_state'].nil? || params['view_state'] == '' || params['view_state'] == 'all') All movies
       option value="viewed" selected=(params['view_state'] == 'viewed') Only viewed
       option value="not_viewed" selected=(params['view_state'] == 'not_viewed') Not viewed
-    input type="checkbox" name="compact" id="compact" checked=(params['compact'])
+    select name="template"
-    label for="compact" Compact view
+      option value="default" selected=(template == 'default') Default
+      option value="compact" selected=(template == 'compact') Compact
+      option value="poster" selected=(template == 'poster') Poster
 
 
 == slim :list, locals: {movies: movies}

lib/librarix/views/list.slim

@@ -1,4 +1,4 @@
-ul#movies
+ul#movies class="#{template}"
   - movies.each do |movie|
     li
       == slim :movie, locals: {movie: movie}

lib/librarix/views/movie.slim

@@ -1,23 +1,2 @@
 .movie data-id="#{movie.id}"
-  .poster
+  == slim :"movie/#{template}", locals: {movie: movie}
-    - if movie.poster_path
-      img src="#{poster_url(movie.poster_path, compact? ? 'w92' : 'w154')}"
-  .informations
-    h2
-      a href="https://www.themoviedb.org/movie/#{movie.id}" #{movie.original_title}
-    p = movie.release_date
-    - unless compact?
-      p = movie.overview
-  .actions
-    - if movie.added?
-      - unless movie.viewed?
-        form method="post" action="/view"
-          input type="hidden" name="id" value="#{movie.id}"
-          button type="submit" data-action="view-movie" View
-      form method="post" action="/remove"
-        input type="hidden" name="id" value="#{movie.id}"
-        button type="submit" data-action="remove-movie" Remove
-    - else
-      form method="post" action="/add"
-        input type="hidden" name="id" value="#{movie.id}"
-        button type="submit" data-action="add-movie" Add

lib/librarix/views/movie/compact.slim

@@ -0,0 +1,19 @@
+.poster
+  - if movie.poster_path
+    img src="#{poster_url(movie.poster_path, 'w92')}"
+.informations
+  h2
+    a href="https://www.themoviedb.org/movie/#{movie.id}" #{movie.original_title}
+.actions
+  - if movie.added?
+    - unless movie.viewed?
+      form method="post" action="/view"
+        input type="hidden" name="id" value="#{movie.id}"
+        button type="submit" data-action="view-movie" View
+    form method="post" action="/remove"
+      input type="hidden" name="id" value="#{movie.id}"
+      button type="submit" data-action="remove-movie" Remove
+  - else
+    form method="post" action="/add"
+      input type="hidden" name="id" value="#{movie.id}"
+      button type="submit" data-action="add-movie" Add

lib/librarix/views/movie/default.slim

@@ -0,0 +1,21 @@
+.poster
+  - if movie.poster_path
+    img src="#{poster_url(movie.poster_path, 'w154')}"
+.informations
+  h2
+    a href="https://www.themoviedb.org/movie/#{movie.id}" #{movie.original_title}
+  p = movie.release_date
+  p = movie.overview
+.actions
+  - if movie.added?
+    - unless movie.viewed?
+      form method="post" action="/view"
+        input type="hidden" name="id" value="#{movie.id}"
+        button type="submit" data-action="view-movie" View
+    form method="post" action="/remove"
+      input type="hidden" name="id" value="#{movie.id}"
+      button type="submit" data-action="remove-movie" Remove
+  - else
+    form method="post" action="/add"
+      input type="hidden" name="id" value="#{movie.id}"
+      button type="submit" data-action="add-movie" Add

lib/librarix/views/movie/poster.slim

@@ -0,0 +1,6 @@
+.poster
+  - if movie.poster_path
+    img src="#{poster_url(movie.poster_path, 'w154')}"
+.informations
+  h2
+    a href="https://www.themoviedb.org/movie/#{movie.id}" #{movie.original_title}