fix list view for mobile

samuelcolvin · samuelcolvin · commit 89f1bdaee391 · 2018-01-22T13:37:14.000Z
diff --git a/public/simple.html b/public/simple.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>tutorcruncher-socket</title>
+    <style>
+      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500);
+      body {
+        background: #eee;
+        font-family: 'Open Sans', sans-serif;
+      }
+      * {
+        box-sizing: border-box;  /* bootstrap does this on most sites. */
+      }
+      main {
+        max-width: 800px;
+        margin: 20px auto;
+      }
+      main > div {
+        background-color: white;
+        border: 1px solid #aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/">back to index</a></p>
+      <p>simple socket view:</p>
+      <div id="socket"></div>
+    </main>
+  </body>
+  <script>
+    window.socket = socket('9c79f14df986a1ec693c')
+  </script>
+</html>
diff --git a/src/styles/list.scss b/src/styles/list.scss
@@ -46,8 +46,35 @@ $box-height: 186px;
 
 .tcs-list-extra {
   display: grid;
-  grid-template-rows: 100px 1fr auto;
+  grid-template-rows: auto 1fr;
   .tcs-stars {
     grid-row: span 2;
   }
 }
+
+@media(max-width: 600px) {
+  .tcs-list {
+    .tcs-item {
+      grid-template-columns: $dft-image-size auto;
+    }
+    .tcs-primary-description {
+      display: none;
+    }
+    h3.tcs-name {
+      font-size: 20px;
+    }
+    .tcs-aside {
+      font-size: 16px;
+    }
+  }
+  .tcs-image-col {
+    grid-row: 1 / span 2;
+  }
+
+  .tcs-list-extra {
+    grid-template-rows: auto;
+    .tcs-stars {
+      grid-row: span 1;
+    }
+  }
+}
