Update catalog view styles

index.html

@@ -11,13 +11,6 @@
     <script language="javascript" src="./dist/build/chandlr/chandlr.jsexe/lib.js"></script>
     <script language="javascript" src="./dist/build/chandlr/chandlr.jsexe/out.js"></script>
     <style>
-      .theme-catalog div.thread {
-        margin-top: .2em;
-        margin-bottom: .2em;
-        margin-left: .2em;
-        margin-right: .2em;
-      }
-
       .post.op.multifile,
       .post.reply.multifile .body {
         clear: both;

src/Component/CatalogGrid.hs

@@ -15,7 +15,7 @@ import qualified Data.Text as T
 import Data.JSString (append, JSString)
 import Miso
     ( View, div_ , class_ , img_ , href_ , a_
-    , src_ , title_ , strong_ , span_
+    , src_ , title_ , b_ , span_
     , p_ , id_ , Effect , noEff
     , text, rawHtml, onWithOptions
     , defaultOptions, preventDefault
@@ -72,32 +72,34 @@ view iface model =
 gridItem :: Interface a -> Model -> CatalogPost -> View a
 gridItem iface m post =
     div_
-        [ class_ "mix" ]
+        [ class_ "thread grid-li grid-size-small" ]
-        [ div_
+        [ a_
-            [ class_ "thread grid-li grid-size-small" ]
+            [ href_ thread_url
-            [ a_
+            , onClick_ (threadSelected iface post)
-                [ href_ thread_url
-                , onClick_ (threadSelected iface post)
-                ]
-                [ img_
-                    [ class_ "thread-image"
-                    , src_ thumb_url
-                    , title_ ( toMisoString $ show $ CatalogPost.bump_time post )
-                    ]
-                ]
-            , div_
-                [ class_ "replies" ]
-                (
-                  [ strong_ [][ text post_count_str ]
-                  , p_
-                      [ class_ "intro" ]
-                      [ span_
-                          [ class_ "subject" ]
-                          subject
-                      ]
-                  ] ++ body
-                )
             ]
+            [ img_
+                [ class_ "thread-image"
+                , src_ thumb_url
+                , title_ ( toMisoString $ show $ CatalogPost.bump_time post )
+                ]
+            ]
+        , div_
+            [ class_ "replies" ]
+            (
+              [ div_
+                  [ class_ "meta" ]
+                  [ "R: "
+                  , b_ [][ text post_count_str ]
+                  , "+"
+                  ]
+              , p_
+                  [ class_ "intro" ]
+                  [ span_
+                      [ class_ "subject" ]
+                      subject
+                  ]
+              ] ++ body
+            )
         ]
 
   where
@@ -108,7 +110,7 @@ gridItem iface m post =
     body = map (rawHtml . toMisoString) $ maybeToList $ CatalogPost.body post
 
     post_count_str :: MisoString
-    post_count_str = "R: " `append` (toMisoString $ (CatalogPost.estimated_post_count post) - 1) `append` "+"
+    post_count_str = toMisoString $ (CatalogPost.estimated_post_count post) - 1
 
     thumb_url :: MisoString
     thumb_url  =

static/style.css

@@ -851,9 +851,8 @@ pre {
   float: none!important;
   margin: auto;
   max-height: 150px;
-  max-width: 200px;
+  max-width: 150px;
   box-shadow: 0 0 4px rgba(0,0,0,0.55);
-  border: 2px solid rgba(153,153,153,0);
 }
 
 .theme-catalog div.thread {
@@ -861,18 +860,17 @@ pre {
   vertical-align: top;
   text-align: center;
   font-weight: normal;
-  margin-top: 2px;
+  max-height: 300px;
-  margin-bottom: 2px;
+  width: 180px;
-  padding: 2px;
-  height: 300px;
-  width: 205px;
   overflow: hidden;
   position: relative;
-  font-size: 11px;
+  font-size: 10pt;
-  max-height: 300px;
+  margin-top: 5px;
-  background: rgba(182, 182, 182, 0.12);
+  margin-bottom: 20px;
-  border: 2px solid rgba(111, 111, 111, 0.34);
+}
-  max-height:300px;
+
+.theme-catalog .thread .meta {
+    font-size: 11px;
 }
 
 .theme-catalog div.thread strong {
@@ -889,23 +887,33 @@ pre {
 }
 
 .theme-catalog div.grid-size-vsmall img {
-  max-height: 33%;
+  max-height: 80px;
-  max-width: 95%
+  max-width: 80px;
 }
 
 .theme-catalog div.grid-size-vsmall {
-  min-width:90px; max-width: 90px;
+  min-width: 90px;
+  max-width: 90px;
   max-height: 148px;
+  font-size: 11px;
+  margin-bottom: 10px;
 }
 
 .theme-catalog div.grid-size-small img {
-  max-height: 33%;
+  min-width: 50px;
-  max-width: 95%
+  min-height: 50px;
+  max-width: 150px;
+  max-width: 150px;
 }
 
+.theme-catalog .thread.grid-size-small .replies {
+    max-width: 150px;
+    padding: 0 15px;
+}
+
+
 .theme-catalog div.grid-size-small {
-  min-width:140px; max-width: 140px;
+    width: 180px;
-  max-height: 192px;
 }
 
 .theme-catalog div.grid-size-medium img {