Interface fixes

.gitignore

@@ -3,4 +3,4 @@ dist/
 node_modules/
 test/integration/screenshots-current/
 _site/
-.DS_Store
+.DS_Store 

README.md

@@ -43,4 +43,4 @@ Integration with the backend is still experimental and requires a few changes to
 
 ## Help
 
-Find us on [discord](https://discord.gg/RShTcdq).
+Find us on [discord](https://discord.gg/CcNnbGk).

index.html

@@ -37,6 +37,7 @@
 
     <!-- Open Sans Font-->
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap" rel="stylesheet"> 
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="manifest.json">
 

package.json

@@ -24,6 +24,7 @@
     "prepublish": "npm run snyk-protect"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@material/button": "^3.0.0",
     "@mdi/font": "^3.9.96",
     "@mdi/svg": "^3.7.95",

src/actions/app.js

@@ -37,9 +37,6 @@ const loadPage = page => dispatch => {
     case 'view2':
       import('../components/my-view2.js');
       break;
-    case 'view3':
-      import('../components/my-view3.js');
-      break;
     case 'oae':
       import('../components/oae.js');
       break;

src/components/dashboard.js

@@ -4,8 +4,8 @@ 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 './sidebarV2.js';
+import './top-navV2.js';
 import './info-card.js';
 import './tag-card.js';
 import './news-feed.js';
@@ -19,18 +19,21 @@ class OAEDashboard extends PageViewElement {
 
   render() {
     return html`
-      <section class="hero is-link is-fullheight">
+      <section class="hero is-fullheight">
+        <!-- Hero head: will stick at the top -->
+        <div class="hero-head">
+          <top-nav></top-nav>
+        </div>
+
+        <!-- Hero content: will be in the middle -->
         <div class="hero-body">
-          <div class="container is-fluid is-fullheight is-mobile">
+          <div class="container content-wrapResponsive is-fluid">
             <div class="columns dasboard">
-              <div class="column is-narrow sidebar">
+              <div class="column is-narrow sidebar is-fullheight">
                 <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-three-fifths main-left">
                       <section class="column activity-dashboard">
@@ -40,31 +43,30 @@ class OAEDashboard extends PageViewElement {
                             <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>
+                        <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>
-                            <!-- 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>
+                          <!-- 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>
-                          </nav>
+                          </div>
+                        </nav>
                         <news-feed></news-feed>
                         <news-feed></news-feed>
                         <news-feed></news-feed>
                       </section>
                     </div>
                     <div class="column">
-                      <quick-settings></quick-settings>
                       <info-card></info-card>
                     </div>
                   </div>

src/components/groups.js

@@ -4,8 +4,8 @@ import sharedStyles from '../../style/app.scss';
 import groupStyles from '../../style/groups.scss';
 import groupButtonStyles from '../../style/groups-filter.scss';
 import { PageViewElement } from './page-view-element.js';
-import './sidebar.js';
-import './top-nav.js';
+import './sidebarV2.js';
+import './top-navV2.js';
 import './groups-feed.js';
 import './groups-about.js';
 import './news-feed.js';
@@ -19,18 +19,19 @@ class OAEGroups extends PageViewElement {
 
   render() {
     return html`
-      <section class="hero is-link is-fullheight">
+      <section class="hero is-fullheight">
+        <div class="hero-head">
+          <top-nav></top-nav>
+        </div>
+
         <div class="hero-body">
-          <div class="container is-fluid is-fullheight is-mobile">
+          <div class="container content-wrapResponsive is-fluid">
             <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-three-fifths">
                       <section class="is-flex">
@@ -61,7 +62,7 @@ class OAEGroups extends PageViewElement {
                       <news-feed></news-feed>
                       <news-feed></news-feed>
                     </div>
-                    <div class="column">
+                    <div class="column is-one-fifth">
                       <groups-about></groups-about>
                     </div>
                   </div>

src/components/homepage-navV2.js

@@ -15,12 +15,13 @@ class homeNavV2 extends LitElement {
       <nav class="navbar home-nav">
         <div class="navbar-brand">
           <a class="navbar-item logo" href="http://0.0.0.0:8080/oae">
-            <img src="/images/logo-oae2.svg" />
+            <img src="/images/logo-oae9.svg" />
           </a>
         </div>
         <div class="navbar-end navEnd">
           <div class="navbar-item">
             <div class="buttons">
+              <a class="button is-round register-button">Register</a>
               <a class="button is-round signIn-button">Sign In</a>
             </div>
           </div>

src/components/homepage-searchV2.js

@@ -14,7 +14,7 @@ class homeSearchV2 extends LitElement {
     return html`
       <div class="field home-search">
         <div class="control has-icons-left home-searchIcon">
-          <input class="input is-rounded" type="search" placeholder="Hint: press ENTER to search" />
+          <input class="input is-rounded" type="search" placeholder="Search for keywords like 'open apereo' " />
           <span class="icon is-left ">
             <iron-icon icon="search"></iron-icon>
           </span>

src/components/library.js

@@ -3,8 +3,8 @@ import sharedStyles from '../../style/app.scss';
 import library from '../../style/library.scss';
 import { PageViewElement } from './page-view-element.js';
 import '@polymer/iron-icons/iron-icons.js';
-import './sidebar.js';
-import './top-nav.js';
+import './sidebarV2.js';
+import './top-navV2.js';
 import './info-card.js';
 import './tag-card.js';
 import './news-feed.js';
@@ -20,20 +20,22 @@ class OAELibrary extends PageViewElement {
 
   render() {
     return html`
-      <section class="hero is-link is-fullheight">
+      <section class="hero is-fullheight">
+        <div class="hero-head">
+          <top-nav></top-nav>
+        </div>
+
+        <!-- Hero head: will stick at the top -->
         <div class="hero-body">
-          <div class="container is-fluid is-fullheight is-mobile">
+          <div class="container content-wrapResponsive is-fluid">
             <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-four-fifths main-left">
+                    <div class="column is-two-thirds main-left">
                       <section class="column activity-dashboard">
                         <section class="is-flex">
                           <ul class="breadcrumb">