Created basic responsive grid for regiional competitions on new competition page.

4 files changed, 136 insertions, 6 deletions

diff --git a/src/actions/app.js b/src/actions/app.js
index d943671..be4cc95 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -34,8 +34,8 @@ const loadPage = (page) => (dispatch) => {
         // navigating to view1 after my-view1.js is loaded.
       });
       break;
-    case 'view2':
-      import('../components/my-view2.js');
+    case 'compete':
+      import('../components/mao-competitions.js');
       break;
     case 'view3':
       import('../components/my-view3.js');
diff --git a/src/components/mao-app.js b/src/components/mao-app.js
index 59c811a..9483cc6 100644
--- a/src/components/mao-app.js
+++ b/src/components/mao-app.js
@@ -191,7 +191,7 @@ class MaoApp extends connect(store)(LitElement) {
       <nav class="toolbar-list">
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'view2'}" href="/view2">View Two</a>
-        <a selected?="${_page === 'view3'}" href="/view3">View Three</a>
+        <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
       </nav>
     </app-header>
 
@@ -201,7 +201,7 @@ class MaoApp extends connect(store)(LitElement) {
       <nav class="drawer-list">
         <a selected?="${_page === 'home'}" href="/home">Home</a>
         <a selected?="${_page === 'view2'}" href="/view2">View Two</a>
-        <a selected?="${_page === 'view3'}" href="/view3">View Three</a>
+        <a selected?="${_page === 'compete'}" href="/compete">Compete</a>
       </nav>
     </app-drawer>
 
@@ -209,7 +209,7 @@ class MaoApp extends connect(store)(LitElement) {
     <main role="main" class="main-content">
       <mao-home class="page" active?="${_page === 'home'}"></mao-home>
       <my-view2 class="page" active?="${_page === 'view2'}"></my-view2>
-      <my-view3 class="page" active?="${_page === 'view3'}"></my-view3>
+      <mao-competitions class="page" active?="${_page === 'compete'}"></mao-competitions>
       <my-view404 class="page" active?="${_page === 'view404'}"></my-view404>
     </main>
 
diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js
new file mode 100644
index 0000000..26cd183
--- /dev/null
+++ b/src/components/mao-competitions.js
@@ -0,0 +1,130 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { html } from '@polymer/lit-element';
+import { PageViewElement } from './page-view-element.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+
+// This element is connected to the Redux store.
+import { store } from '../store.js';
+
+//These are the actions needed by this element.
+import { } from '../actions/firebase.js';
+
+// We are lazy loading its reducer.
+import firebase from '../reducers/firebase.js';
+
+store.addReducers({
+  firebase
+});
+
+// These are the shared styles needed by this element.
+import { SharedStyles } from './shared-styles.js';
+
+// Import paper elements
+import '@polymer/paper-input/paper-input.js';
+import '@polymer/paper-button/paper-button.js';
+
+class MaoCompetitions extends connect(store)(PageViewElement) {
+  _render(props) {
+    return html`
+      ${SharedStyles}
+      <style>
+      .underline {
+        border-bottom: 1px solid var(--app-primary-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .competition-grid {
+        display:  grid;
+        grid-template-areas:
+                        "title"
+                        "item1"
+                        "item2"
+                        "item3";
+
+
+
+      }
+
+      .title {
+        grid-area:  title;
+      }
+
+      .item1 {
+        grid-area: item1;
+      }
+
+      .item2 {
+        grid-area: item2;
+      }
+
+      .item3 {
+        grid-area: item3;
+      }
+
+      @media (min-width: 460px) {
+        .competition-grid {
+          grid-template-areas:
+                          "title title title"
+                          "item1 item2 item3";
+        }
+      }
+      </style>
+
+      <section class="section-nationals">
+
+        <h2 class="underline">Nationals</h2>
+        <p>Grids are becoming a huge part of website design. So, it is neccessary that we recap over them.</p>
+      </section>
+      <section>
+        <h2>Welcome ${props.authMessage}</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.</p>
+
+      </section>
+
+      <section class="competition-grid">
+
+      <div class="title"><h2 class="underline">Regional Competitions</h2></div>
+
+        <div class="item1">
+          <h2>Nationals</h2>
+          <p>Grids are becoming a huge part of website design.
+          So, it is neccessary that we recap over them.</p>
+        </div>
+
+        <div class="item2">
+          <h2>States</h2>
+          <p>Grids are becoming a huge part of website design.
+          So, it is neccessary that we recap over them.</p>
+        </div>
+
+        <div class="item3">
+          <h2>Regionals</h2>
+          <p>Grids are becoming a huge part of website design.
+          So, it is neccessary that we recap over them.</p>
+        </div>
+
+      </section>
+    `;
+  }
+
+  static get properties() { return {
+    // This is the data from the store.
+  }}
+
+  _stateChanged(state) {
+  }
+
+}
+
+window.customElements.define('mao-competitions', MaoCompetitions);
diff --git a/src/components/shared-styles.js b/src/components/shared-styles.js
index 0c91063..4e938ed 100644
--- a/src/components/shared-styles.js
+++ b/src/components/shared-styles.js
@@ -23,7 +23,7 @@ export const SharedStyles = html`
   }
 
   section > * {
-    max-width: 600px;
+    max-width: 80%;
     margin-right: auto;
     margin-left: auto;
   }