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 --- package-lock.json | 27 +++++++++-- package.json | 1 + src/components/mao-app.js | 6 +++ src/components/mao-competitions.js | 98 ++++++++++++++++++++++++++++++-------- 4 files changed, 108 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index d0c079f..fb740f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -971,6 +971,14 @@ "@polymer/polymer": "3.0.2" } }, + "@polymer/iron-image": { + "version": "3.0.0-pre.21", + "resolved": "https://registry.npmjs.org/@polymer/iron-image/-/iron-image-3.0.0-pre.21.tgz", + "integrity": "sha512-2gYmp4D/W6CEWdSIqajE85bm0wYTK49doKSFFsehnO8E7/DINV1PyS9yuH/Y9g+iHiWLFwFm/dYPkLbfMa+Fwg==", + "requires": { + "@polymer/polymer": "3.0.2" + } + }, "@polymer/iron-input": { "version": "3.0.0-pre.21", "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.0-pre.21.tgz", @@ -1053,6 +1061,17 @@ "@polymer/polymer": "3.0.2" } }, + "@polymer/paper-card": { + "version": "3.0.0-pre.21", + "resolved": "https://registry.npmjs.org/@polymer/paper-card/-/paper-card-3.0.0-pre.21.tgz", + "integrity": "sha512-HWV+zSt8znSOX9XquELsxh+hBWrisXmB8AaS5d6+gXodQ2SXPp00ViS3Yh1EcrR/8sIAknqHVlCvTVCHrDVW2g==", + "requires": { + "@polymer/iron-flex-layout": "3.0.0-pre.21", + "@polymer/iron-image": "3.0.0-pre.21", + "@polymer/paper-styles": "3.0.0-pre.21", + "@polymer/polymer": "3.0.2" + } + }, "@polymer/paper-input": { "version": "3.0.0-pre.21", "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.0.0-pre.21.tgz", @@ -4477,10 +4496,10 @@ "dev": true, "optional": true, "requires": { - "deep-extend": "^0.5.1", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" + "deep-extend": "0.5.1", + "ini": "1.3.5", + "minimist": "1.2.0", + "strip-json-comments": "2.0.1" }, "dependencies": { "minimist": { diff --git a/package.json b/package.json index b3de73c..decaf60 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@polymer/app-layout": "^3.0.0-pre.21", "@polymer/lit-element": "^0.5.2", "@polymer/paper-button": "^3.0.0-pre.21", + "@polymer/paper-card": "^3.0.0-pre.21", "@polymer/paper-input": "^3.0.0-pre.21", "@webcomponents/webcomponentsjs": "^2.0.0", "pwa-helpers": "^0.8.2", 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