Merge pull request #27 from RitaOak/interface-updatesv2

Interface updatesv2
oaeproject · Dec 18, 2019 · 463f4d1 · 463f4d1
2 parents d554420 + c35220d
commit 463f4d1
Show file tree

Hide file tree

Showing 14 changed files with 311 additions and 76 deletions.
diff --git a/images/avatar.jpg b/images/avatar.jpg
diff --git a/images/user.jpg b/images/user.jpg
diff --git a/index.html b/index.html
@@ -35,6 +35,8 @@
     <!-- Material Design Icons-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+    <!-- Open Sans Font-->
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="manifest.json">
 

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -1,6 +1,9 @@
 import { html } from 'lit-element';
 import sharedStyles from '../../style/app.scss';
+import dashboardStyles from '../../style/dashboard.scss';
+import dashboardButtonsStyles from '../../style/dashboard-filter.scss';
 import { PageViewElement } from './page-view-element.js';
+import '@polymer/iron-icons/iron-icons.js';
 import './sidebar.js';
 import './top-nav.js';
 import './info-card.js';
@@ -11,7 +14,7 @@ import './tags.js';
 
 class OAEDashboard extends PageViewElement {
   static get styles() {
-    return [sharedStyles];
+    return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
   }
 
   render() {
@@ -29,14 +32,32 @@ class OAEDashboard extends PageViewElement {
                     <top-nav></top-nav>
                   </div>
                   <div class=" columns is-flex main-content">
-                    <div class="column is-two-thirds">
+                    <div class="column is-three-fifths main-left">
                       <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>
+                          <ul class="breadcrumb">
+                            <li><a href="#">User Profile Area</a></li>
+                            <li>Dashboard</li>
+                          </ul>
                         </section>
+                          <nav class="level">
+                            <!-- Left side -->
+                            <div class="level-left">
+                              <div class="level-item">
+                                <span class="dashboard-icon">
+                                  <iron-icon icon="icons:update"></iron-icon>
+                                </span>
+                                <h3>Recent Activity</h3>
+                              </div>
+                            </div>
+                            <!-- Right side -->
+                            <div class="level-right">
+                              <div class="buttons">
+                                <button class="button filter-feed filter-active-feed">Most Recent</button>
+                                <button class="button filter-feed">Oldest</button>
+                              </div>
+                            </div>
+                          </nav>
                         <news-feed></news-feed>
                         <news-feed></news-feed>
                         <news-feed></news-feed>

diff --git a/src/components/info-card.js b/src/components/info-card.js
@@ -12,16 +12,26 @@ class infoCard extends LitElement {
     return html`
       <div class="box info">
         <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>
+          <nav class="level news-feed-top">
+            <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="/images/avatar.jpg" />
+                  </figure>
+                  <section class=infoBox-followers">
+                    <h4>
+                      <a class="feed-user">Michael Brown</a>
+                    </h4>
+                    <p>
+                      Following since October 2019
+                    </p>
+                  </section>
+                </div>
+              </div>
+            </div>
+            </hr>
+          </nav>
         </div>
       </div>
     `;

diff --git a/src/components/news-feed.js b/src/components/news-feed.js
@@ -2,6 +2,11 @@ import { html, LitElement } from 'lit-element';
 import homepageStyles from '../../style/homepage.scss';
 import sharedStyles from '../../style/app.scss';
 import newsFeedComponent from '../../style/news-feed.scss';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/av-icons.js';
+import '@polymer/iron-icons/hardware-icons.js';
+import '@polymer/iron-icons/communication-icons.js';
 import './tags.js';
 
 class newsFeed extends LitElement {
@@ -13,19 +18,19 @@ class newsFeed extends LitElement {
     return html`
       <div class="box box-feed">
         <div class="content news-feed">
-          <nav class="level">
+          <nav class="level news-feed-top">
             <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" />
+                    <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
                   </figure>
                   <section>
                     <h4>
-                      <a> Rita Carvalho</a>
+                      <a class="feed-user">Michael Brown</a>
                       uploaded a file
-                      <span class="panel-icon">
-                        <i class="fas fa-book" aria-hidden="true"></i>
+                      <span class="panel-icon icon-feed">
+                        <iron-icon icon="icons:cloud-upload"></iron-icon>
                       </span>
                     </h4>
                     <p>
@@ -36,7 +41,11 @@ class newsFeed extends LitElement {
               </div>
             </div>
             <div class="level-right">
-              <p class="level-item"><a class="button is-info">Pin</a></p>
+              <p class="level-item">
+                <a class="button news-pin">
+                  <iron-icon icon="icons:bookmark-border"></iron-icon>
+                </a>
+              </p>
             </div>
           </nav>
           <section class="column news-feed-message">
@@ -47,25 +56,24 @@ class newsFeed extends LitElement {
               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>
+                <a class="button comments-button">
+                  <span class="comments-icon">
+                    <iron-icon icon="communication:forum"></iron-icon>
                   </span>
+                  <span>View (25) comments</span>
                 </a>
               </div>
-            </div>
-            <div class="level-right is-pulled-right">
               <div class="level-item">
-                <p>
-                  reply
-                </p>
+                <a class="button reply-button">
+                  <span class="reply-icon">
+                    <iron-icon icon="communication:import-export"></iron-icon>
+                  </span>
+                  <span>Reply</span>
+                </a>
               </div>
             </div>
           </nav>

diff --git a/src/components/user-button.js b/src/components/user-button.js
@@ -17,9 +17,9 @@ class User extends LitElement {
       <div class="navbar-item has-dropdown is-hoverable notifications-button">
         <a class="navbar-link">
           <span class="notifications-label">Hi, Rita Carvalho</span>
-          <span class="icon user-icon">
-            <iron-icon icon="social:person-outline"></iron-icon>
-          </span>
+          <figure class="image user-avatar">
+            <img class="is-rounded" src="/images/user.jpg" />
+          </figure>
         </a>
         <div class="navbar-dropdown">
           <a class="navbar-item">

diff --git a/style/app.scss b/style/app.scss
@@ -3,6 +3,8 @@
 // Open Sans - Bold (700)
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
 
+$link: #0060df;
+
 // Import Material Design
 //@import "../node_modules/material-design-icons/iconfont/";
 
@@ -12,6 +14,7 @@
 @import '../node_modules/bulma/sass/utilities/_all.sass';
 @import '../node_modules/bulma/sass/base/_all.sass';
 @import '../node_modules/bulma/sass/form/_all.sass';
+@import '../node_modules/bulma/sass/layout/_all.sass';
 
 // Components
 @import '../node_modules/bulma/sass/components/navbar.sass';
@@ -28,9 +31,6 @@
 @import '../node_modules/bulma/sass/elements/icon.sass';
 @import '../node_modules/bulma/sass/elements/table.sass';
 
-// Layout
-@import '../node_modules/bulma/sass/layout/_all.sass';
-
 // Should remake the structure in order to include these imports
 // @import "../node_modules/bulma/sass/elements/_all.sass";
 // @import "../node_modules/bulma/sass/components/_all.sass";
@@ -84,24 +84,19 @@ html,
 body {
   margin: 0;
   height: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1em;
 }
 
 * {
   font-family: 'Open Sans', sans-serif;
   font-size: 1em;
 }
 
-h2 {
-  color: green;
-  text-decoration-style: dotted;
-  text-decoration: underline;
-  font-size: 3rem;
-}
-
 .hero-body {
   margin: 0;
   padding: 0;
-  background-color: #fcfcfc;
+  background-color: #fafafa;
 }
 
 .container.is-fluid {
@@ -133,9 +128,7 @@ h2 {
 
 .column.is-narrow {
   background-color: white;
-  -moz-box-shadow: 3px 3px 5px 6px #ccc;
-  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
-  box-shadow: 5px 5px 6px #d8d3d3;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   z-index: 1;
   width: 210px;
   padding: 0;
@@ -171,14 +164,15 @@ h2 {
 
 .menu-list {
   font-size: 14px;
+  font-family: 'Open Sans', sans-serif;
 }
 
 .menu-list li {
   padding-left: 35px;
   margin-bottom: 18px;
   border-radius: 0 25px 25px 0;
   height: 30px;
-  color: #000000;
+  color: #212121;
   display: flex;
   align-items: center;
   &:hover {
@@ -196,7 +190,7 @@ h2 {
 }
 
 .menu-list a {
-  color: #000000;
+  color: #212121;
 }
 
 a.dashboard,
@@ -216,12 +210,12 @@ a.network {
 .topbar-search-icon {
   display: flex;
   align-items: center;
-  color: black;
+  color: #212121;
   padding-top: 10px;
 }
 
 .input {
-  color: black;
+  color: #212121;
   -webkit-appearance: none;
   border: none;
   background-color: transparent;
@@ -262,10 +256,45 @@ a.network {
 }
 
 .activity-dashboard h3 {
-  color: black;
-  font-weight: bold;
+  color: #212121;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.main-left {
+  padding: 0;
 }
 
 .tag-activity-dashboard {
   margin-right: 10px;
 }
+
+// Breadcrumbs
+ul.breadcrumb {
+  margin-bottom: 1em;
+  list-style: none;
+  background-color: transparent;
+}
+
+ul.breadcrumb li {
+  display: inline;
+  font-size: 13px;
+  color: #424242;
+  font-weight: 500;
+}
+
+ul.breadcrumb li + li:before {
+  padding: 8px;
+  color: black;
+  content: '/\ ';
+}
+
+ul.breadcrumb li a {
+  color: #0060df;
+  text-decoration: none;
+}
+
+ul.breadcrumb li a:hover {
+  color: #01447e;
+  text-decoration: underline;
+}
diff --git a/style/dashboard-filter.scss b/style/dashboard-filter.scss
@@ -0,0 +1,18 @@
+.filter-feed {
+  color: #0060df;
+  margin-right: 15px;
+  font-size: 13px;
+  height: 20px;
+  width: 6em;
+  border-radius: 25px;
+  border: none;
+  background-color: transparent;
+}
+
+.filter-active-feed {
+    background-color: #0060df;
+    color: white;
+    &:hover {
+        color: white;
+    }
+}
diff --git a/style/dashboard.scss b/style/dashboard.scss
@@ -0,0 +1,9 @@
+h3 {
+  color: #212121;
+  font-size: 14px;
+}
+
+.dashboard-icon {
+  color: #212121;
+  margin-right: 0.8em;
+}