oaeproject · RitaOak · Jun 7, 2020 · Jun 2, 2020 · Jun 2, 2020 · Jun 2, 2020
diff --git a/images/logo-01.svg b/images/logo-01.svg
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@polymer/polymer": "^3.1.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "babel-eslint": "^10.0.2",
-    "bulma": "^0.7.5",
+    "bulma": "^0.8.2",
     "cool-checkboxes-for-bulma.io": "^1.1.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "js-cookie": "^2.2.0",

diff --git a/src/components/groups-avatar.js b/src/components/groups-avatar.js
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit-element';
+import avatarStyles from '../../style/groups-avatar.scss';
+
+class avatarGroups extends LitElement {
+  static get styles() {
+    return [avatarStyles];
+  }
+
+  render() {
+    return html`
+      <section class="avatar">
+        <figure class="image is-128x128 avatar-figure">
+          <img class="is-rounded" src="https://scontent.fopo1-1.fna.fbcdn.net/v/l/t1.0-9/537484_224892540989084_1267897031_n.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=XFXRaFbyn0AAX84b7iF&_nc_ht=scontent.fopo1-1.fna&oh=a63ebf898d71c55443aab13cb60ce95d&oe=5EFFF95A" />
+        </figure>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-avatar', avatarGroups);
diff --git a/src/components/groups-banner.js b/src/components/groups-banner.js
@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit-element';
+import bannerStyles from '../../style/groups-banner.scss';
+
+class bannerGroups extends LitElement {
+  static get styles() {
+    return [bannerStyles];
+  }
+
+  render() {
+    return html`
+      <section>
+        <figure class="image is-1by3 is-fullwidth banner">
+          <img src="https://images.pexels.com/photos/3184660/pexels-photo-3184660.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
+        </figure>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-banner', bannerGroups);
diff --git a/src/components/groups-button.js b/src/components/groups-button.js
@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import sharedStyles from '../../style/app.scss';
+import buttonStyles from '../../style/groups-button.scss';
+
+class buttonGroups extends LitElement {
+  static get styles() {
+    return [sharedStyles, buttonStyles];
+  }
+
+  render() {
+    return html`
+      <button class="button group-join-button">
+        <span class="icon is-small group-join-icon">
+          <iron-icon icon="social:group-add"></iron-icon>
+        </span>
+        <span>Join Group</span>
+      </button>
+    `;
+  }
+}
+
+window.customElements.define('groups-button', buttonGroups);
diff --git a/src/components/groups-header.js b/src/components/groups-header.js
@@ -0,0 +1,41 @@
+import { html, LitElement } from 'lit-element';
+import headerStyles from '../../style/groups-header.scss';
+import sharedStyles from '../../style/app.scss';
+import './groups-button.js';
+
+class headerGroups extends LitElement {
+  static get styles() {
+    return [sharedStyles, headerStyles];
+  }
+
+  render() {
+    return html`
+      <section class="level">
+        <!-- Left side -->
+        <div class="level-left">
+          <div class="level-item">
+            <section class="title-header">
+              <h1>Open Apereo 2020</h1>
+            </section>
+          </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <groups-button></groups-button>
+          </div>
+        </div>
+      </section>
+
+      <section class="about-header">
+        <p>
+          The Open Apereo 2020 is scheduled for June 15-19. You’re probably aware of the significant changes to our
+          major annual international event, Open Apereo 2020, we were planning this year. If you hadn’t heard about the
+          changed shape of the event,
+          <a href="https://www.apereo.org/content/open-apereo-2020-vision">you can read about it here.</a>
+        </p>
+      </section>
+    `;
+  }
+}
+
+window.customElements.define('groups-header', headerGroups);
diff --git a/src/components/groups-tabs.js b/src/components/groups-tabs.js
@@ -0,0 +1,52 @@
+import { html, LitElement } from 'lit-element';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
+import '@polymer/iron-icons/av-icons.js';
+import tabsStyles from '../../style/groups-tabs.scss';
+
+class tabsGroups extends LitElement {
+  static get styles() {
+    return [tabsStyles];
+  }
+
+  render() {
+    return html`
+      <div class="tab">
+        <button class="tablinks" onclick="openTab(event, 'Home')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:home"></iron-icon>
+          </span>
+          <span>Home</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'About')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:error-outline"></iron-icon>
+          </span>
+          <span>About</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Library')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="av:library-books"></iron-icon>
+          </span>
+          <span>Library</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Members')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="social:people-outline"></iron-icon>
+          </span>
+          <span>Members</span>
+        </button>
+        <button class="tablinks" onclick="openTab(event, 'Settings')">
+          <span class="icon is-small button-icon">
+            <iron-icon icon="icons:settings"></iron-icon>
+          </span>
+          <span>Settings</span>
+        </button>
+      </div>
+
+      <hr class="section-divider">
+    `;
+  }
+}
+
+window.customElements.define('groups-tabs', tabsGroups);
diff --git a/src/components/groups.js b/src/components/groups.js
@@ -6,8 +6,12 @@ import groupButtonStyles from '../../style/groups-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import './top-nav.js';
 import './sidebar.js';
+import './groups-banner.js';
+import './groups-avatar.js';
+import './groups-header.js';
+import './groups-tabs.js';
 import './groups-feed.js';
-import './groups-about.js';
+import './groups-button.js';
 import './news-feed.js';
 import './quick-settings.js';
 import './tags.js';
@@ -40,30 +44,38 @@ class OAEGroups extends PageViewElement {
                           <li>Open Apereo 2019</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>
+
+                      <groups-banner></groups-banner>
+                      <groups-avatar></groups-avatar>
+                      <groups-header></groups-header>
+                      <groups-tabs></groups-tabs>
+
+                      <section>
+                        <div class="level">
+                          <!-- Left side -->
+                          <div class="level-left">
+                            <div class="level-item activity">
+                              <span class="dashboard-icon">
+                                <iron-icon icon="icons:update"></iron-icon>
+                              </span>
+                              <h3>Recent Activity</h3>
+                            </div>
                           </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>
+                          <!-- 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>
                         </div>
-                      </nav>
+                      </section>
+
                       <news-feed></news-feed>
                       <news-feed></news-feed>
                       <news-feed></news-feed>
                     </div>
                     <div class="column is-one-fifth">
-                      <groups-about></groups-about>
                     </div>
                   </div>
                 </div>

diff --git a/src/components/homepage-navV2.js b/src/components/homepage-navV2.js
@@ -15,7 +15,7 @@ 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-oae9.svg" />
+            <img src="/images/logo-01.svg" />
           </a>
         </div>
         <div class="navbar-end navEnd">

diff --git a/src/components/homepage-searchV2.js b/src/components/homepage-searchV2.js
@@ -20,6 +20,7 @@ class homeSearchV2 extends LitElement {
           </span>
         </div>
       </div>
+
     `;
   }
 }

diff --git a/src/components/library-table.js b/src/components/library-table.js
@@ -66,7 +66,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Design Matters
+                                            Design Matters
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -114,7 +114,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Open Apereo 
+                                            Open Apereo 
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -162,7 +162,7 @@ class libraryTable extends LitElement {
                  <div class="level-left">
                      <div class="level-item">
                          <p class="library-designation-hover">
-                             Group - OAE Development
+                            OAE Development
                          </p<
                      </div>
                      <div class="level-item library-designation-tag">
@@ -210,7 +210,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            Group - Marketing 
+                                            Marketing 
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">
@@ -258,7 +258,7 @@ class libraryTable extends LitElement {
                  <div class="level-left">
                      <div class="level-item">
                          <p class="library-designation-hover">
-                             RC - OAE Dissertation
+                             OAE Dissertation
                          </p<
                      </div>
                      <div class="level-item library-designation-tag">
@@ -306,7 +306,7 @@ class libraryTable extends LitElement {
                                 <div class="level-left">
                                     <div class="level-item">
                                         <p class="library-designation-hover">
-                                            SB - Classes
+                                            Classes
                                         </p<
                                     </div>
                                     <div class="level-item library-designation-tag">

diff --git a/src/components/library-tags-side.js b/src/components/library-tags-side.js
@@ -14,12 +14,16 @@ class tagsSide extends LitElement {
   render() {
     return html`
       <div>
+        <hr class="top-divider" />
         <section class="is-flex tag-menu-add-new-wrap">
           <div class="level-left">
             <div class="level-item">
-              <a class="add-menu-label">
-                Add New Label
-              </a>
+              <button class="add-menu-label button">
+                <span class="icon">
+                  <iron-icon icon="add"></iron-icon>
+                </span>
+                <span>New Label</span>
+              </button>
             </div>
           </div>
         </section>

diff --git a/src/components/library.js b/src/components/library.js
@@ -35,7 +35,7 @@ class OAELibrary extends PageViewElement {
               <div class="column content-base">
                 <div class=" column content-wrap">
                   <div class=" columns is-flex main-content">
-                    <div class="column is-two-thirds main-left">
+                    <div class="column is-four-fifths main-left">
                       <section class="column activity-dashboard">
                         <section class="is-flex">
                           <ul class="breadcrumb">
@@ -62,9 +62,6 @@ class OAELibrary extends PageViewElement {
                         <library-table></library-table>
                       </section>
                     </div>
-                    <div class="column is-one-fifth is-pulled-right">
-                      <tags-side></tags-side>
-                    </div>
                   </div>
                 </div>
               </div>

diff --git a/src/components/news-feed.js b/src/components/news-feed.js
@@ -26,13 +26,13 @@ class newsFeed extends LitElement {
                     <img class="is-rounded avatar-news-feed" src="/images/avatar.jpg" />
                   </figure>
                   <section>
-                    <h4>
+                    <p class="user-info" style="margin-bottom: 0;">
                       <a class="feed-user">Michael Brown</a>
                       uploaded a file
                       <span class="panel-icon icon-feed">
                         <iron-icon icon="icons:cloud-upload"></iron-icon>
                       </span>
-                    </h4>
+                    </p>
                     <p>
                       23 March 2017
                     </p>
@@ -42,16 +42,16 @@ class newsFeed extends LitElement {
             </div>
             <div class="level-right">
               <p class="level-item">
-                <a class="button news-pin">
-                  <iron-icon icon="icons:bookmark-border"></iron-icon>
-                </a>
+                <button class="button news-pin">
+                  <iron-icon icon="icons:more-vert"></iron-icon>
+                </button>
               </p>
             </div>
           </nav>
           <section class="column news-feed-message">
-            <h4>
+            <h5>
               Group assignment briefing
-            </h4>
+            </h5>
             <p>
               Here is the briefing for that group assignment we talked about.
             </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ class homeSearchV2 extends LitElement { @@
               </span>
             </div>
           </div>
         `;
       }
     }
@@ Expand Down @@