From dc49cdcf5980448c8ed0a102133ab063c6416581 Mon Sep 17 00:00:00 2001
From: Michael Foiani <mfoiani2019@communityschoolnaples.org>
Date: Thu, 26 Jul 2018 20:18:16 -0400
Subject: Separated the grids for the two different competitions.

---
 package-lock.json                     |  2 +-
 src/components/competition-element.js |  7 ++-
 src/components/mao-competitions.js    | 97 ++++++++++++++++++++++-------------
 3 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fb740f3..e71c0c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12967,7 +12967,7 @@
               "dev": true,
               "optional": true,
               "requires": {
-                "minimatch": "^3.0.4"
+                "minimatch": "3.0.4"
               }
             },
             "inflight": {
diff --git a/src/components/competition-element.js b/src/components/competition-element.js
index afa94d2..072f654 100644
--- a/src/components/competition-element.js
+++ b/src/components/competition-element.js
@@ -25,11 +25,12 @@ class CompetitionElement extends LitElement {
         }
 
       </style>
-      <paper-card 
-      onmouseover   ="${() => this.toggleTab()}" 
+      <paper-card
+      onmouseover   ="${() => this.toggleTab()}"
       onmouseout    ="${() => this.toggleTab()}">
         <div class="card-content">
             <h3>${props.name}</h3>
+            <h4>${props.location}</h4>
             <p hidden="${!this.infoTabOpen}"> ${props.information}</p>
         </div>
       </paper-card>
@@ -39,6 +40,7 @@ class CompetitionElement extends LitElement {
   static get properties() { return {
     name:           String,
     information:    String,
+    location:       String,
     infoTabOpen:    Boolean
   }};
 
@@ -47,6 +49,7 @@ class CompetitionElement extends LitElement {
 
     this.name           =   "Competition";
     this.information    =   "Competition Information";
+    this.location       =   "Competition Location";
     this.infoTabOpen    =   false;
   }
 
diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js
index c804d16..42a90b4 100644
--- a/src/components/mao-competitions.js
+++ b/src/components/mao-competitions.js
@@ -48,41 +48,52 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
         text-overflow: ellipsis;
       }
 
-      .competition-grid {
+      .non-mao-test-grid {
         display:  grid;
         grid-gap: 10px;
         grid-template-areas:
                         "title"
-                        "item1"
-                        "item2";
+                        "test1"
+                        "test2";
+      }
 
+      .amcComp {
+        grid-area:  test1;
 
+      }
 
+      .fmlComp {
+        grid-area:  test2;
       }
 
-      .title {
-        grid-area:  title;
+      .regional-competition-grid {
+        display:  grid;
+        grid-gap: 10px;
+        grid-template-areas:
+                        "title"
+                        "comp1"
+                        "comp2"
+                        "comp3";
       }
 
-      .item1 {
-        grid-area:  item1;
-        width:      100%;
+      .regional-comp1 {
+        grid-area:  comp1;
       }
 
-      .amcComp {
-        grid-area: item1;
-        
+      .regional-comp2 {
+        grid-area:  comp2;
       }
 
-      .item2 {
-        grid-area: item2;
-        width:      100%;
+      .regional-comp3 {
+        grid-area:  comp3;
       }
 
-      .item3 {
-        grid-area: item3;
+      .title {
+        grid-area:  title;
       }
 
+
+
       paper-button.info {
         background-color: #c9eaff;
       }
@@ -92,10 +103,16 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
       }
 
       @media (min-width: 460px) {
-        .competition-grid {
+        .non-mao-test-grid {
           grid-template-areas:
                           "title title"
-                          "item1 item2";
+                          "test1 test2";
+        }
+
+        .regional-competition-grid {
+          grid-template-areas:
+                          "title title title"
+                          "comp1 comp2 comp3";
         }
       }
       </style>
@@ -113,23 +130,33 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
 
       <section>
 
-        <div class="competition-grid">
+        <div class="regional-competition-grid">
 
           <div class="title">
             <h2 class="underline">Regionals</h2>
           </div>
 
-          <div class="item1">
-            <competition-element 
+          <div class="regional-comp1">
+            <competition-element
             name="December"
-            information="Dank ass regional competition"> 
+            information="Dank ass regional competition"
+            location="Miami, American Heritage">
             </competition-element>
           </div>
 
-          <div class="item2">
-            <competition-element 
+          <div class="regional-comp2">
+            <competition-element
             name="January"
-            information="Other dank comp"> 
+            information="Other dank comp"
+            location="Immokalee, Cypress Bay">
+            </competition-element>
+          </div>
+
+          <div class="regional-comp3">
+            <competition-element
+            name="February"
+            information="The dankest comp"
+            location="Orlando, Science School">
             </competition-element>
           </div>
 
@@ -139,39 +166,39 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
 
       <section>
 
-      <div class="competition-grid">
+      <div class="non-mao-test-grid">
 
         <div class="title">
           <h2 class="underline">Non-MAO Tests</h2>
           <p>All students must register and complete two of the tests to be qualified for national and/or state competitions.</p>
         </div>
 
-        <paper-card 
-        class="amcComp" 
+        <paper-card
+        class="amcComp"
         image="https://www.maa.org/sites/default/files/AMC%20Logo.png"
         elevation="0">
-          <div class="card-content"> 
+          <div class="card-content">
             <p>The American Mathematics Exam is a difficult national exam;
-            it is a 25 multiple-choice question, 
+            it is a 25 multiple-choice question,
             40 minute test for middle schoolers designed to promote the development and enhancement of problem solving skills.</p>
           </div>
 
-          <div class="card-actions"> 
+          <div class="card-actions">
             <paper-button class="info" raised>Register</paper-button>
           </div>
         </paper-card>
-        
 
-        <paper-card 
+
+        <paper-card
         class="fmlComp"
         elevation="0">
-          <div class="card-content"> 
+          <div class="card-content">
             <h3>FML</h3>
             <p>The Florida Math Leauge is a state-wide exam.
             It has three parts, each being 30 minutes long.</p>
           </div>
 
-          <div class="card-actions"> 
+          <div class="card-actions">
             <paper-button class="info" raised>Register</paper-button>
           </div>
         </paper-card>
-- 
cgit v1.2.3-70-g09d2