Skip to content
This repository has been archived by the owner on Jul 30, 2021. It is now read-only.

Commit

Permalink
Merge pull request #49 from RitaOak/groups-changes
Browse files Browse the repository at this point in the history
Groups changes
  • Loading branch information
RitaOak authored Jun 7, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents c1c4a78 + f383a44 commit 986b146
Show file tree
Hide file tree
Showing 30 changed files with 413 additions and 122 deletions.
1 change: 1 addition & 0 deletions images/logo-01.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions src/components/groups-avatar.js
Original file line number Diff line number Diff line change
@@ -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);
20 changes: 20 additions & 0 deletions src/components/groups-banner.js
Original file line number Diff line number Diff line change
@@ -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);
24 changes: 24 additions & 0 deletions src/components/groups-button.js
Original file line number Diff line number Diff line change
@@ -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);
41 changes: 41 additions & 0 deletions src/components/groups-header.js
Original file line number Diff line number Diff line change
@@ -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);
52 changes: 52 additions & 0 deletions src/components/groups-tabs.js
Original file line number Diff line number Diff line change
@@ -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);
46 changes: 29 additions & 17 deletions src/components/groups.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/homepage-navV2.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions src/components/homepage-searchV2.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ class homeSearchV2 extends LitElement {
</span>
</div>
</div>
`;
}
}
Expand Down
12 changes: 6 additions & 6 deletions src/components/library-table.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
10 changes: 7 additions & 3 deletions src/components/library-tags-side.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 1 addition & 4 deletions src/components/library.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions src/components/news-feed.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 986b146

Please sign in to comment.