Continuing on adding content to mao-fourms and mao-tutoring

2 files changed, 107 insertions, 70 deletions

diff --git a/src/components/mao-fourms.js b/src/components/mao-fourms.js
index 66871dd..e7398b5 100644
--- a/src/components/mao-fourms.js
+++ b/src/components/mao-fourms.js
@@ -64,7 +64,7 @@ class MaoFourms extends connect(store)(PageViewElement) {
         text-align:   right;
         font-weight:  lighter;
         font-style:   italic;
-        word-break: break-all;
+        word-break:   break-all;
       }
 
       .card-content > h3, p {
@@ -83,7 +83,7 @@ class MaoFourms extends connect(store)(PageViewElement) {
         grid-template-columns: 1fr;
       }
 
-      @media (min-width: 550px) {
+      @media (min-width: 460px) {
         .post-grid {
           grid-template-columns: 1fr 1fr;
         }
@@ -157,7 +157,8 @@ class MaoFourms extends connect(store)(PageViewElement) {
 
   updateSection() {
     if(this.shadowRoot) {
-      var postsGrid  = this.shadowRoot.getElementById('posts-grid');
+      var postsGrid       = this.shadowRoot.getElementById('posts-grid');
+      postsGrid.innerHTML = "";
 
       for(var i = 0; i < this.fourmPosts.length; i++) {
         var paperCard     = document.createElement('paper-card');
diff --git a/src/components/mao-tutoring.js b/src/components/mao-tutoring.js
index e325f36..cf769cd 100644
--- a/src/components/mao-tutoring.js
+++ b/src/components/mao-tutoring.js
@@ -27,12 +27,11 @@ store.addReducers({
 
 // These are the shared styles needed by this element.
 import { SharedStyles }       from './shared-styles.js';
-import { ButtonSharedStyles } from './button-shared-styles.js'
+import { ButtonSharedStyles } from './button-shared-styles.js';
 
 // Import paper elements
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-card/paper-card.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-slider/paper-slider.js';
 import '@polymer/paper-button/paper-button.js';
@@ -91,6 +90,10 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         display: block;
       }
 
+      .hopeCard {
+        --paper-card-background-color: #b7e1cd;
+      }
+
       paper-button {
         margin-left: auto;
         margin-right: auto;
@@ -105,6 +108,13 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         margin-top: 10px;
       }
 
+      .tutoring-grid {
+        display:  grid;
+        grid-gap: 10px;
+
+        grid-template-columns: 1fr;
+      }
+
       @media (min-width: 460px) {
         .hours-grid {
           grid-template-areas:
@@ -115,101 +125,127 @@ class MaoTutoring extends connect(store)(PageViewElement) {
         .tutorCard, .hoursCard {
           padding:  1em;
         }
+
+        .tutoring-grid {
+          grid-template-columns: 1fr 1fr;
+        }
       }
 
       </style>
 
       <section>
 
-          <div class="title">
-            <h2 class="underline">Tutoring</h2>
-          </div>
+        <paper-card
+        elevation="0"
+        class="hoursCard"
+        hidden="${!props.signedIn}">
 
-          <div hidden="${props.signedIn}">
-            <h3>Hours</h3>
-            <p>Every national society member must have at least 5 hours.</p>
-            <p>You must sign in to see hours</p>
-          </div>
+          <div class="card-content">
 
+            <div class="hours-grid">
 
-          <paper-card
-          elevation="0"
-          class="hoursCard"
-          hidden="${!props.signedIn}">
+              <div class="title">
+                <h2 class="underline">Summmary</h2>
+              </div>
 
-            <div class="card-content">
+              <div class="approved-card">
+                <h3>Approved Hours</h3>
+                <div
+                hidden= "${props.hours===-1}"
+                class=  "circle"
+                style=  "background-color: #0f9d58;">${props.hours}</div>
+              </div>
 
-              <div class="hours-grid">
+              <div class="unapproved-card">
+                <h3>Requested Hours</h3>
+                <div
+                hidden= "${props.requestedHours===-1}"
+                class=  "circle"
+                style=  "background-color: #f4b400;">${props.requestedHours}</div>
+              </div>
 
-                <div class="title">
-                  <h2 class="underline">Summmary</h2>
-                </div>
+            </div>
 
-                <div class="approved-card">
-                  <h3>Approved Hours</h3>
-                  <div
-                  hidden= "${props.hours===-1}"
-                  class=  "circle"
-                  style=  "background-color: #0f9d58;">${props.hours}</div>
-                </div>
+          </div>
 
-                <div class="unapproved-card">
-                  <h3>Requested Hours</h3>
-                  <div
-                  hidden= "${props.requestedHours===-1}"
-                  class=  "circle"
-                  style=  "background-color: #f4b400;">${props.requestedHours}</div>
-                </div>
+          <div class="card-actions">
+            <paper-button
+            class="info"
+            id="submit-hours-btn"
+            on-tap="${() => this.toggleSubmitFields()}"
+            hidden="${props.submitFieldsOpened}"
+            raised>
+              Submit Hours
+            </paper-button>
 
-              </div>
+            <div class="submit-card" hidden="${!props.submitFieldsOpened}">
 
-            </div>
+              <h3>Fill Fields</h3>
+
+              <p>How many hours of tutoring?</p>
+
+              <paper-input
+              id=     "timeField"
+              label=  "Time"
+              type=   "number"
+              value=  "15"
+              step=   "15"
+              max=    "120">
+                <span slot="suffix">(minutes)</span>
+              </paper-input>
+
+              <paper-input id="traineeField" label="Trainee's Name" type="text"></paper-input>
+
+              <vaadin-date-picker id="dateField" placeholder="Choose Date">
+              </vaadin-date-picker>
+
+              <br/>
 
-            <div class="card-actions">
               <paper-button
               class="info"
-              id="submit-hours-btn"
-              on-tap="${() => this.toggleSubmitFields()}"
-              hidden="${props.submitFieldsOpened}"
+              id="submit-form-btn"
+              on-tap="${() => this.requestHours()}"
               raised>
-                Submit Hours
+                Submit Form
               </paper-button>
+            </div>
+          </div>
+        </paper-card>
 
-              <div class="submit-card" hidden="${!props.submitFieldsOpened}">
-
-                <h3>Fill Fields</h3>
-
-                <p>How many hours of tutoring?</p>
 
-                <paper-input
-                id=     "timeField"
-                label=  "Time"
-                type=   "number"
-                value=  "15"
-                step=   "15"
-                max=    "120">
-                  <span slot="suffix">(minutes)</span>
-                </paper-input>
+      </section>
 
-                <paper-input id="traineeField" label="Trainee's Name" type="text"></paper-input>
+      <section>
+        <div class="title">
+          <h2 class="underline">Tutoring</h2>
+        </div>
 
-                <vaadin-date-picker id="dateField" placeholder="Choose Date">
-                </vaadin-date-picker>
+        <div class="tutoring-grid">
+          <paper-card class="hopeCard">
+            <div class="card-actions">
+              <h3>Our Hope</h3>
+              <p>We want to encourage an enviornment of help.</p>
+            </div>
+          </paper-card>
 
-                <br/>
+          <paper-card class="hopeCard">
+            <div class="card-actions">
+              <h3>Need Help Finiding A Tutor?</h3>
+              <p>Please, meet with your friends to create tutring sessions.
+              Otherwise, contact our tutoring coordinator <em>Mike Binkowski</em>.</p>
+            </div>
 
-                <paper-button
-                class="info"
-                id="submit-form-btn"
-                on-tap="${() => this.requestHours()}"
-                raised>
-                  Submit Form
-                </paper-button>
+            <div class="card-actions">
+              <div role="listbox">
+                <paper-icon-item>
+                  <iron-iconset name="call" icons="communication"></iron-iconset>
+                  <iron-icon icon="communication:call" slot="item-icon"></iron-icon>
+                  (440)-256-1593
+                </paper-icon-item>
               </div>
-
             </div>
-
           </paper-card>
+        </div>
       </section>
     `;
   }