diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/competition-element.js | 7 | ||||
| -rw-r--r-- | src/components/mao-competitions.js | 97 |
2 files changed, 67 insertions, 37 deletions
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> |