aboutsummaryrefslogtreecommitdiff
path: root/src/components/mao-home.js
blob: 20bcac94aba2ff7223b18fccc88485ef837b1953 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/**
@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 { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';

// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
import { ButtonSharedStyles } from './button-shared-styles.js';

// Import paper elements
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';

class MaoHome extends PageViewElement {
  _render(props) {
    return html`
    ${SharedStyles}
    ${ButtonSharedStyles}

    <style>
      paper-card {
        width: 100%;
        display: block;
      }

      .welcomeCard {
        margin-top: 5px;
        text-align: center;
      }

      .info {
        font-weight: bold;
      }

      .home-grid {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: 1fr;
      }

      @media (min-width: 460px) {
        .home-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    </style>

      <section class="img-section">
        <div class="container">
          <img src="http://www.advancedroofingandsheetmetal.com/wp-content/uploads/2016/02/community-school-naples.jpg" alt="Maths">
          <div class="centered">We &hearts; Math At CSN</div>
        </div>
      </section>

      <section>
        <div class="home-grid">
          <paper-card elevation=0>
            <div class="card-content">
              <h2 class="underline">
                Announcements
              </h2>
              <ol>
                <li>
                  <strong>Scrapbook-</strong> Please upload any mao pictures from this or last year to this google drive. Jaime Trope will compile these into an amazing scrapbook for states! <a href='https://drive.google.com/drive/folders/1EnuSXOKE0j-lwCPnrKcehNBeQFfJGv96?usp=sharing' target='_blank'>Upload Here</a>
                </li>
                <br>
                <li>
                  T-shirts are in! See Mrs. Coombs to claim yours.
                </li>
                <br>
                <li>
                  If you haven't yet, please add this website to your home screen. It will act like an app. Cool!
                </li>
              </ol>
            </div>
          </paper-card>

          <paper-card elevation=0>
            <div class="card-content">
              <h2 class="underline">
                Dates
              </h2>
              <p>
                We meet once a week on <strong>D Day Flex</strong>.
              </p>
              <p>
                Math Madness during lunch on Thursday.
              </p>
            </div>

            <div class="card-actions">
              <div>
                <h3>Upcoming Dates</h3>
                <ul>
                  <li><strong>States</strong>:\t April 11th</li>
                </ul>
              </div>
            </div>
          </paper-card>
        </div>

        <paper-card elevation=0 class='welcomeCard'>
          <div class="card-content">
            <h2 class="underline">
              Competitions
            </h2>
            <p>
            States and nationals are the last competitions.
            </p>
          </div>
        </paper-card>

      </section>
    `;
  }

}

window.customElements.define('mao-home', MaoHome);