Developing mao fourms.

1 files changed, 60 insertions, 49 deletions

diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
index c0fd509..e6a2998 100644
--- a/src/components/mao-fourms.js
+++ b/src/components/mao-fourms.js
@@ -31,6 +31,7 @@ import { ButtonSharedStyles } from './button-shared-styles.js'
 
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-input/paper-textarea.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-item/paper-item.js';
@@ -47,79 +48,89 @@ class MaoFourms extends connect(store)(PageViewElement) {
       ${ButtonSharedStyles}
 
       <style>
-      .title {
-        grid-area: title;
+
+      paper-card {
+        display: block;
       }
 
-      .tutorCard, .hoursCard {
-        background-color: #f7f7f7;
-        padding:          1px;
+      .card-actions > paper-button {
+        margin-left:  auto;
+        margin-right: auto;
+        display: block;
+        width: 50%;
       }
 
-      .hours-grid {
+      .post-grid {
         display:  grid;
         grid-gap: 10px;
 
         grid-template-areas:
-                        "title"
-                        "item1"
-                        "item2";
+                        "card1"
+                        "card2"
+                        "card3"
+                        "card4";
       }
 
-      .approved-card {
-        grid-area:  item1;
-
-        background-color: #b7e1cd;
-        margin:           1px;
-        padding:          0 10px 15px 10px;
+      .post1 {
+        grid-area: card1;
       }
 
-      .unapproved-card {
-        grid-area:  item2;
-
-        background-color: #fce8b2;
-        margin:           1px;
-        padding:          0 10px 15px 10px;
+      .post2 {
+        grid-area: card2;
       }
 
-      .submit-hours {
-        width: 100%;
-      }
 
-      paper-card {
-        --paper-card-background-color: #f7f7f7;
-        display: block;
+      @media (min-width: 460px) {
+        .post-grid {
+          grid-template-areas:
+                          "card1 card2"
+                          "card3 card4";
+        }
       }
 
-      paper-button {
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-      }
+      </style>
 
-      h3 {
-        text-align: center;
-      }
+      <section>
 
-      #datePicker {
-        margin-top: 10px;
-      }
+        <paper-card elevation="0">
 
-      @media (min-width: 460px) {
-        .hours-grid {
-          grid-template-areas:
-                          "title    title"
-                          "item1    item2";
-        }
+          <div class="card-content">
+            <h3>Create Fourm Post</h3>
+            <paper-input label="Subject" id="subject-field"></paper-input>
+            <paper-textarea label="Content" id="content-field"></paper-textarea>
+          </div>
 
-        .tutorCard, .hoursCard {
-          padding:  1em;
-        }
-      }
+          <div class="card-actions">
+            <paper-button raised class="info">Create Post</paper-button>
+          </div>
 
-      </style>
+        </paper-card>
+
+      </section>
 
       <section>
+
+        <h2 class="underline">Recent Posts</h2>
+
+        <div class="post-grid">
+
+          <paper-card elevation="0" class="post1">
+            <div class="card-content">
+              <h3>Michael Foiani</h3>
+              <p>Some content here. Lmao.</p>
+            </div>
+          </paper-card>
+
+          <paper-card elevation="0" class="post2">
+            <div class="card-content">
+              <h3>Michael Foiani</h3>
+              <p>Some content here. Lmao.</p>
+            </div>
+          </paper-card>
+
+
+        </div>
+
       </section>
     `;
   }