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

fixes: scaling and new topbar version #40

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

fixes: scaling and new topbar version #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
08ccb50
fix: changed invite link to welcome channel
RitaOak Mar 16, 2020
b13225b
fix: responsive height dashboard (position: absolute)
RitaOak Mar 24, 2020
7c3b676
feat: sidebar+top nav V2
RitaOak Mar 24, 2020
0bafc0a
fix: responsive container scaling for library and groups
RitaOak Mar 26, 2020
1e6c2db
Merge pull request #1 from RitaOak/interface-fixes
RitaOak Mar 26, 2020
aaf974c
fix: invite link
RitaOak Mar 26, 2020
59d2380
Merge pull request #2 from RitaOak/interface-fixes
RitaOak Mar 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
48 changes: 24 additions & 24 deletions src/components/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,17 +19,17 @@ 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">
<section class="hero is-fullheight">
<div class="hero-body is-fullheight">
<div class="container content-wrapResponsive is-fluid">
<div class="columns dasboard">
<div class="column is-narrow sidebar">
<sidebar-nav></sidebar-nav>
<div class="column is-narrow sidebar is-fullheight">
<sidebar-nav2></sidebar-nav2>
</div>
<div class="column content-base">
<div class=" column content-wrap">
<div class="column top-nav">
<top-nav></top-nav>
<top-nav2></top-nav2>
</div>
<div class=" columns is-flex main-content">
<div class="column is-three-fifths main-left">
Expand All @@ -40,24 +40,24 @@ 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>
Expand Down
14 changes: 7 additions & 7 deletions src/components/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -19,17 +19,17 @@ class OAEGroups 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">
<section class="hero is-fullheight">
<div class="hero-body is-fullheight">
<div class="container content-wrapResponsive is-fluid">
<div class="columns dasboard">
<div class="column is-narrow sidebar">
<sidebar-nav></sidebar-nav>
<sidebar-nav2></sidebar-nav2>
</div>
<div class="column content-base">
<div class=" column content-wrap">
<div class="column top-nav">
<top-nav></top-nav>
<top-nav2></top-nav2>
</div>
<div class=" columns is-flex main-content">
<div class="column is-three-fifths">
Expand Down
14 changes: 7 additions & 7 deletions src/components/library.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -20,17 +20,17 @@ class OAELibrary 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">
<section class="hero is-fullheight">
<div class="hero-body is-fullheight">
<div class="container content-wrapResponsive is-fluid">
<div class="columns dasboard">
<div class="column is-narrow sidebar">
<sidebar-nav></sidebar-nav>
<sidebar-nav2></sidebar-nav2>
</div>
<div class="column content-base">
<div class=" column content-wrap">
<div class="column top-nav">
<top-nav></top-nav>
<top-nav2></top-nav2>
</div>
<div class=" columns is-flex main-content">
<div class="column is-four-fifths main-left">
Expand Down
112 changes: 71 additions & 41 deletions src/components/my-view1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,85 @@
/**
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

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';

// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
import '@polymer/iron-icons/iron-icons.js';
import './top-nav.js';
import './sidebar.js';
import './info-card.js';
import './tag-card.js';
import './news-feed.js';
import './quick-settings.js';
import './tags.js';

class MyView1 extends PageViewElement {
static get styles() {
return [SharedStyles];
return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
}

render() {
return html`
<section>
<h2>Static page</h2>
<p>This is a text-only page.</p>
<p>It doesn't do anything other than display some static text.</p>
</section>
<section>
<h2>Welcome</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in
diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu
ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id
purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare,
aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in
sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at
laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.
</p>
</section>
<section>
<p>
Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo
rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat
metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor
vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a
ligula tincidunt, id hendrerit tellus sollicitudin.
</p>
<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 content-dashboard is-fluid">
<div class="columns dasboard">
<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=" columns is-flex main-content">
<div class="column is-three-fifths main-left">
<section class="column activity-dashboard">
<section class="is-flex">
<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>
</section>
</div>
<div class="column">
<quick-settings></quick-settings>
<info-card></info-card>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</section>
`;
}
}

window.customElements.define('my-view1', MyView1);
Empty file added src/components/navbar.js
View file
Open in desktop
Empty file.
75 changes: 8 additions & 67 deletions src/components/shop-products.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,75 +10,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN

/* eslint-disable import/no-unassigned-import */

import { LitElement, html, css } from 'lit-element';
import { connect } from 'pwa-helpers/connect-mixin.js';

// This element is connected to the Redux store.
import { store } from '../store.js';

// These are the elements needed by this element.
import './shop-item.js';

// These are the actions needed by this element.
import { getAllProducts, addToCart } from '../actions/shop.js';

// These are the elements needed by this element.
import { addToCartIcon } from './my-icons.js';

// These are the shared styles needed by this element.
import { ButtonSharedStyles } from './button-shared-styles.js';

class ShopProducts extends connect(store)(LitElement) {
static get properties() {
return {
_products: { type: Object }
};
}

class ShopProducts extends PageViewElement {
static get styles() {
return [
ButtonSharedStyles,
css`
:host {
display: block;
}
`
];
return [sharedStyles, dashboardStyles, dashboardButtonsStyles];
}

render() {
return html`
${Object.keys(this._products).map(key => {
const item = this._products[key];
return html`
<div>
<shop-item name="${item.title}" amount="${item.inventory}" price="${item.price}"></shop-item>
<button
.disabled="${item.inventory === 0}"
@click="${this._addButtonClicked}"
data-index="${item.id}"
title="${item.inventory === 0 ? 'Sold out' : 'Add to cart'}"
>
${item.inventory === 0 ? 'Sold out' : addToCartIcon}
</button>
</div>
`;
})}
`;
}

firstUpdated() {
store.dispatch(getAllProducts());
}

_addButtonClicked(e) {
store.dispatch(addToCart(e.currentTarget.dataset.index));
}

// This is called every time something is updated in the store.
stateChanged(state) {
this._products = state.shop.products;

render() {
return html`

`;
}
}
}

window.customElements.define('shop-products', ShopProducts);
5 changes: 0 additions & 5 deletions src/components/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@ class Sidebar extends LitElement {
render() {
return html`
<aside class="menu">
<div class="navbar-brand sidebar-brand">
<a class="navbar-item" href="http://0.0.0.0:8080/oae">
<img src="/images/logo-oae2.svg" width="112" height="28" />
</a>
</div>
<ul class="menu-list">
<li>
<span class="icon sidebar-icon">
Expand Down
Loading