From 427501ab63a909948fc5c08e2474be4878d69869 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Thu, 26 Jul 2018 19:28:42 -0400 Subject: Created competition-element to display regional competitions. --- src/components/competition-element.js | 58 +++++++++++++++++++++++++++++++++++ src/components/mao-competitions.js | 24 +++++++++------ 2 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 src/components/competition-element.js (limited to 'src') diff --git a/src/components/competition-element.js b/src/components/competition-element.js new file mode 100644 index 0000000..afa94d2 --- /dev/null +++ b/src/components/competition-element.js @@ -0,0 +1,58 @@ +/** +@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 { LitElement, html } from '@polymer/lit-element'; + +// Import paper elements +import '@polymer/paper-card/paper-card.js'; + +class CompetitionElement extends LitElement { + _render(props) { + return html` + + +
+

${props.name}

+ +
+ + `; + } + + static get properties() { return { + name: String, + information: String, + infoTabOpen: Boolean + }}; + + constructor() { + super(); + + this.name = "Competition"; + this.information = "Competition Information"; + this.infoTabOpen = false; + } + + toggleTab() { + this.infoTabOpen = !this.infoTabOpen; + } +} + +window.customElements.define('competition-element', CompetitionElement); diff --git a/src/components/mao-competitions.js b/src/components/mao-competitions.js index 1c810a3..c804d16 100644 --- a/src/components/mao-competitions.js +++ b/src/components/mao-competitions.js @@ -33,6 +33,9 @@ import '@polymer/paper-input/paper-input.js'; import '@polymer/paper-button/paper-button.js'; import '@polymer/paper-card/paper-card.js'; +// Import custom elements +import './competition-element.js' + class MaoCompetitions extends connect(store)(PageViewElement) { _render(props) { return html` @@ -62,7 +65,8 @@ class MaoCompetitions extends connect(store)(PageViewElement) { } .item1 { - grid-area: item1; + grid-area: item1; + width: 100%; } .amcComp { @@ -72,6 +76,7 @@ class MaoCompetitions extends connect(store)(PageViewElement) { .item2 { grid-area: item2; + width: 100%; } .item3 { @@ -115,15 +120,17 @@ class MaoCompetitions extends connect(store)(PageViewElement) {
-

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.

+ +
@@ -156,8 +163,7 @@ class MaoCompetitions extends connect(store)(PageViewElement) {

FML

-- cgit v1.2.3-70-g09d2