Dashboard interface

index.html

@@ -29,8 +29,8 @@
 
 
     <link rel="icon" href="images/favicon.ico">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />
-
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.8.95/css/materialdesignicons.min.css">
+    
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="manifest.json">
 

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@material/button": "^3.0.0",
+    "@mdi/font": "^3.9.96",
     "@mdi/svg": "^3.7.95",
     "@polymer/app-layout": "^3.0.0",
     "@polymer/polymer": "^3.1.0",

src/components/breadcrumb.js

@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit-element';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+
+class breadCrumb extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <nav class="breadcrumb" aria-label="breadcrumbs">
+        <ul>
+          <li><a href="#">Bulma</a></li>
+          <li><a href="#">Documentation</a></li>
+          <li><a href="#">Components</a></li>
+          <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+window.customElements.define('breadcrumb', breadCrumb);

src/components/dashboard.js

@@ -1,9 +1,13 @@
 import { html } from 'lit-element';
+import sharedStyles from '../../style/app.scss';
 import { PageViewElement } from './page-view-element.js';
-import sharedStyles from './../../style/app.scss';
 import './sidebar.js';
 import './top-nav.js';
-import './info-cards.js';
+import './info-card.js';
+import './tag-card.js';
+import './news-feed.js';
+import './quick-settings.js';
+import './tags.js';
 
 class OAEDashboard extends PageViewElement {
   static get styles() {
@@ -12,26 +16,44 @@ class OAEDashboard extends PageViewElement {
 
   render() {
     return html`
-    <section class="hero is-link is-fullheight">
-    <div class="hero-body">
-      <div class="container is-fluid is-fullheight is-mobile">
-        <div class="columns test">
-        <div class="column is-narrow"> 
-          <sidebar-nav></sidebar-nav>
+      <section class="hero is-link is-fullheight">
+        <div class="hero-body">
+          <div class="container is-fluid is-fullheight is-mobile">
+            <div class="columns dasboard">
+              <div class="column is-narrow sidebar">
+                <sidebar-nav></sidebar-nav>
+              </div>
+              <div class="column content-base">
+                <div class=" column content-wrap">
+                  <div class="column top-nav">
+                    <top-nav></top-nav>
+                  </div>
+                  <div class=" columns is-flex main-content">
+                    <div class="column is-two-thirds">
+                      <section class="column is-inline-flex">
+                        <info-card></info-card>
+                        <tag-card></tag-card>
+                      </section>
+                      <section class="column activity-dashboard">
+                        <section class="is-flex">
+                          <span class="icon tag-activity-dashboard">
+                            <img src="./../../node_modules/@mdi/svg/svg/tag-text-outline.svg" />
+                          </span>
+                          <h3>RECENT ACTIVITY</h3>
+                        </section>
+                        <news-feed></news-feed>
+                      </section>
+                    </div>
+                    <div class="column">
+                      <quick-settings></quick-settings>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="column content-base">  
-          <div class="column top-nav">
-            <top-nav></top-nav>
-          </div>
-          <info-cards></info-cards>
-         </div>
-
         </div>
-      </div>
-    </div>
-</section>
-
-
+      </section>
     `;
   }
 }

src/components/homepage.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
-import homepageStyles from "../../style/homepage.scss";
-import sharedStyles from "../../style/app.scss";
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
 import { PageViewElement } from './page-view-element.js';
 
 class OAEHomepage extends PageViewElement {

src/components/info-card.js

@@ -0,0 +1,34 @@
+import { html, LitElement } from 'lit-element';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+
+class infoCard extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <div class="box info">
+        <article class="media">
+          <div class="media-content">
+            <div class="content info-card">
+              <h3>
+                <strong>USER DASHBOARD</strong>
+              </h3>
+              <p>
+                Welcome to your dashboard. From here, you can access different sections of the OAE.
+              </p>
+              <hr class="navbar-divider" />
+              <a>
+                Open Link
+              </a>
+            </div>
+          </div>
+        </article>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('info-card', infoCard);

src/components/news-feed.js

@@ -0,0 +1,77 @@
+import { html, LitElement } from 'lit-element';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+import './tags.js';
+
+class newsFeed extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <div class="box box-feed">
+        <div class="content news-feed">
+          <nav class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <div class="column is-flex news-feed-nav">
+                  <figure class="image avatar-news-feed">
+                    <img class="is-rounded avatar-news-feed" src="https://bulma.io/images/placeholders/128x128.png" />
+                  </figure>
+                  <section>
+                    <h4>
+                      <a> Rita Carvalho</a>
+                      uploaded a file
+                      <span class="panel-icon">
+                        <i class="fas fa-book" aria-hidden="true"></i>
+                      </span>
+                    </h4>
+                    <p>
+                      23 March 2017
+                    </p>
+                  </section>
+                </div>
+              </div>
+            </div>
+            <div class="level-right">
+              <p class="level-item"><a class="button is-info">Pin</a></p>
+            </div>
+          </nav>
+          <section class="column news-feed-message">
+            <h4>
+              Group assignment briefing
+            </h4>
+            <p>
+              Here is the briefing for that group assignment we talked about.
+            </p>
+            <tags-button></tags-button>
+            <tags-button></tags-button>
+          </section>
+          <hr class="news-feed-break" />
+          <nav class="level bottom-nav-news">
+            <div class="level-left">
+              <div class="level-item">
+                <a class="button is-inverted is-link">
+                  <span>View (25) comments</span>
+                  <span class="icon is-small">
+                    <i class="mdi mdi-alert"></i>
+                  </span>
+                </a>
+              </div>
+            </div>
+            <div class="level-right is-pulled-right">
+              <div class="level-item">
+                <p>
+                  reply
+                </p>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('news-feed', newsFeed);

src/components/quick-settings.js

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit-element';
+import homepageStyles from '../../style/homepage.scss';
+import sharedStyles from '../../style/app.scss';
+
+class quickSettings extends LitElement {
+  static get styles() {
+    return [sharedStyles, homepageStyles];
+  }
+
+  render() {
+    return html`
+      <div class="box info">
+        <article class="media">
+          <div class="media-content">
+            <div class="content info-card">
+              <p>
+                LAST SIGN IN
+              </p>
+              <h3>
+                <strong>TUESDAY APRIL 4 2019</strong>
+              </h3>
+            </div>
+          </div>
+        </article>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define('quick-settings', quickSettings);