WIP: This is where we got to in class

cgood92 · Jun 8, 2018 · 691b4c0 · 691b4c0
1 parent 9906efe
commit 691b4c0
Showing 1 changed file with 161 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,12 +6,171 @@
   <title>React App</title>
   <link rel="stylesheet" href="%PUBLIC_URL%/reset.css">
   <style>
-    /* @media only screen and (min-width: 768px) {
-    } */
+    .container > * {
+      border: 1px solid lightgray;
+    }
+
+    .container {
+      display: grid;
+      grid-template-rows: auto 1fr auto auto;
+      grid-template-columns: 100%;
+      grid-template-areas:
+        "header"
+        "main"
+        "sidebarLeft"
+        "sidebarRight"
+      ;
+      min-height: 100vh;
+    }
+
+    header {
+      grid-area: header;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      flex-wrap: wrap;
+    }
+
+    nav {
+      grid-area: sidebarLeft;
+    }
+
+    main {
+      grid-area: main;
+    }
+
+    aside {
+      grid-area: sidebarRight;
+    }
+
+    .icon {
+      border: 1px solid black;
+      width: 40px;
+      height: 40px;
+      margin: 0 4px;
+    }
+
+    .searchContainer {
+      height: 40px;
+      flex: 1 1 auto;
+      display: flex;
+      justify-content: center;
+      min-width: 100%;
+      order: 100;
+    }
+
+    .search {
+      max-width: 800px;
+      width: 100%;
+      border: 1px solid black;
+      height: 40px;
+      display: flex;
+      align-items: center;
+    }
+
+    .search input {
+      width: 100%;
+      height: 100%;
+    }
+
+    .right {
+      margin-left: auto;
+    }
+
+    .tile {
+      border: 1px solid black;
+      height: 50px;
+      display: flex;
+      align-items: center;
+    }
+
+    .chat {
+      border: 1px solid black;
+      height: 50px;
+      display: flex;
+      align-items: center;
+    }
+
+    @media only screen and (min-width: 768px) {
+      .container {
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 200px 1fr 200px;
+        grid-template-areas:
+          "header header header"
+          "sidebarLeft main sidebarRight"
+        ;
+      }
+      .searchContainer {
+        min-width: auto;
+        order: 0;
+      }
+    }
   </style>
 </head>
 
 <body>
+  <div class="container">
+    <header>
+      <div class="icon"></div>
+      Inbox
+      <div class="searchContainer">
+        <div class="search">
+          <div class="icon"></div>
+          <input type="text" placeholder="Search"/>
+        </div>
+        <div class="icon"></div>
+      </div>
+      <div class="icon right"></div>
+      <div class="icon"></div>
+      <div class="icon"></div>
+      <div class="icon"></div>
+    </header>
+    <nav>
+      <div class="tile">
+        <div class="icon"></div>
+        Inbox
+      </div>
+      <div class="tile">
+        <div class="icon"></div>
+        Snoozed
+      </div>
+      <div class="tile">
+        <div class="icon"></div>
+        Done
+      </div>
+    </nav>
+    <main>Main</main>
+    <aside>
+      <div class="chat">
+        <div class="icon"></div>
+        <div>
+          <div>Name</div>
+          <div>Preview of text...</div>
+        </div>
+      </div>
+      <div class="chat">
+        <div class="icon"></div>
+        <div>
+          <div>Name</div>
+          <div>Preview of text...</div>
+        </div>
+      </div>
+      <div class="chat">
+        <div class="icon"></div>
+        <div>
+          <div>Name</div>
+          <div>Preview of text...</div>
+        </div>
+      </div>
+      <div class="chat">
+        <div class="icon"></div>
+        <div>
+          <div>Name</div>
+          <div>Preview of text...</div>
+        </div>
+      </div>
+    </aside>
+  </div>
 </body>
 
 </html>