From 2627ed03a65634a2a323d2805839eac2766432ba Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Thu, 26 Jul 2018 18:21:05 -0400 Subject: Added paper cards for grid elements --- src/components/mao-app.js | 6 +++ src/components/mao-competitions.js | 98 ++++++++++++++++++++++++++++++-------- 2 files changed, 84 insertions(+), 20 deletions(-) (limited to 'src/components') diff --git a/src/components/mao-app.js b/src/components/mao-app.js index 9483cc6..2694950 100644 --- a/src/components/mao-app.js +++ b/src/components/mao-app.js @@ -69,6 +69,12 @@ class MaoApp extends connect(store)(LitElement) { background-color: var(--app-header-background-color); color: var(--app-header-text-color); border-bottom: 1px solid #eee; + + z-index: 101; + } + + app-drawer { + z-index: 101; } .toolbar-top { diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js index 26cd183..1c810a3 100644 --- a/src/components/mao-competitions.js +++ b/src/components/mao-competitions.js @@ -31,6 +31,7 @@ import { SharedStyles } from './shared-styles.js'; // Import paper elements import '@polymer/paper-input/paper-input.js'; import '@polymer/paper-button/paper-button.js'; +import '@polymer/paper-card/paper-card.js'; class MaoCompetitions extends connect(store)(PageViewElement) { _render(props) { @@ -46,11 +47,11 @@ class MaoCompetitions extends connect(store)(PageViewElement) { .competition-grid { display: grid; + grid-gap: 10px; grid-template-areas: "title" "item1" - "item2" - "item3"; + "item2"; @@ -64,6 +65,11 @@ class MaoCompetitions extends connect(store)(PageViewElement) { grid-area: item1; } + .amcComp { + grid-area: item1; + + } + .item2 { grid-area: item2; } @@ -72,11 +78,19 @@ class MaoCompetitions extends connect(store)(PageViewElement) { grid-area: item3; } + paper-button.info { + background-color: #c9eaff; + } + + .card-actions { + vertical-align: bottom; + } + @media (min-width: 460px) { .competition-grid { grid-template-areas: - "title title title" - "item1 item2 item3"; + "title title" + "item1 item2"; } } @@ -92,29 +106,73 @@ class MaoCompetitions extends connect(store)(PageViewElement) { -
+
-

Regional Competitions

+
-
-

Nationals

-

Grids are becoming a huge part of website design. - So, it is neccessary that we recap over them.

-
+
+

Regionals

+
-
-

States

-

Grids are becoming a huge part of website design. - So, it is neccessary that we recap over them.

-
+
+

December

+

Grids are becoming a huge part of website design. + So, it is neccessary that we recap over them.

+
+ +
+

January

+

Grids are becoming a huge part of website design. + So, it is neccessary that we recap over them.

+
-
-

Regionals

-

Grids are becoming a huge part of website design. - So, it is neccessary that we recap over them.

+ +
+ +
+ +
+

Non-MAO Tests

+

All students must register and complete two of the tests to be qualified for national and/or state competitions.

+
+ + +
+

The American Mathematics Exam is a difficult national exam; + it is a 25 multiple-choice question, + 40 minute test for middle schoolers designed to promote the development and enhancement of problem solving skills.

+
+ +
+ Register +
+ + + + +
+

FML

+

The Florida Math Leauge is a state-wide exam. + It has three parts, each being 30 minutes long.

+
+ +
+ Register +
+ + +
+ +
`; } -- cgit v1.2.3-70-g09d2