diff --git a/src/components/dashboard.js b/src/components/dashboard.js index 18a4c13..b684443 100644 --- a/src/components/dashboard.js +++ b/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,17 +19,17 @@ class OAEDashboard extends PageViewElement { render() { return html` -
+
-
- +
+
- +
diff --git a/src/components/my-view1.js b/src/components/my-view1.js index 9035028..5f487c9 100644 --- a/src/components/my-view1.js +++ b/src/components/my-view1.js @@ -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` -
-

Static page

-

This is a text-only page.

-

It doesn't do anything other than display some static text.

-
-
-

Welcome

-

- 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. -

-
-
-

- 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. -

+
+ +
+ +
+ + +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ + + + +
+
+
+ + +
+
+
+
+
+
+
+ +
`; } } - window.customElements.define('my-view1', MyView1); diff --git a/src/components/navbar.js b/src/components/navbar.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/shop-products.js b/src/components/shop-products.js index ededeb5..a42794c 100644 --- a/src/components/shop-products.js +++ b/src/components/shop-products.js @@ -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` -
- - -
- `; - })} - `; - } - - 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); diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 5d18bb1..d600761 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -13,11 +13,6 @@ class Sidebar extends LitElement { render() { return html`
+
+ + + `; } } diff --git a/src/components/top-navV2.js b/src/components/top-navV2.js new file mode 100644 index 0000000..9b3ce7f --- /dev/null +++ b/src/components/top-navV2.js @@ -0,0 +1,51 @@ +import { html, LitElement } from 'lit-element'; +import '@polymer/iron-icons/iron-icons.js'; +import '@polymer/iron-icons/social-icons.js'; +import '@polymer/iron-icons/maps-icons.js'; +import homepageStyles from '../../style/homepage.scss'; +import sharedStyles from '../../style/app.scss'; +import './notifications.js'; +import './context.js'; +import './user-button.js'; + +class topNavV2 extends LitElement { + static get styles() { + return [sharedStyles, homepageStyles]; + } + + render() { + return html` +
+
+
+
+

+ + + +

+

+ +

+
+
+ + + + + +
+ + +
+ `; + } +} + +window.customElements.define('top-nav2', topNavV2); diff --git a/style/app.scss b/style/app.scss index 3d0f586..8c62827 100644 --- a/style/app.scss +++ b/style/app.scss @@ -21,6 +21,7 @@ $link: #0060df; @import '../node_modules/bulma/sass/components/dropdown.sass'; @import '../node_modules/bulma/sass/components/modal.sass'; @import '../node_modules/bulma/sass/components/level.sass'; +@import '../node_modules/bulma/sass/components/tabs.sass'; // Elements @import '../node_modules/bulma/sass/elements/box.sass'; @@ -96,7 +97,7 @@ body { .hero-body { margin: 0; padding: 0; - background-color: #fafafa; + //background-color: #fafafa; } .container.is-fluid { @@ -127,10 +128,10 @@ body { } .column.is-narrow { - background-color: white; - 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; + //background-color: white; + //box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + //z-index: 1; + width: 200px; padding: 0; } @@ -149,8 +150,8 @@ body { } .sidebar-brand { - margin: -70px 0 30px 0; - padding-left: 30px; + margin: -10px 0 30px 0; + padding-left: 25px; } .navbar-item img { @@ -159,7 +160,9 @@ body { .menu { width: 185px; - position: fixed; + //position: fixed; + //top: 8.5em; + margin-top: 3.5em; } .menu-list { @@ -168,7 +171,7 @@ body { } .menu-list li { - padding-left: 35px; + padding-left: 30px; margin-bottom: 18px; border-radius: 0 25px 25px 0; height: 30px; @@ -207,6 +210,11 @@ a.network { } // Top Bar +.top-nav { + margin: 0.5em; + max-width: 97%; +} + .topbar-search-icon { display: flex; align-items: center; @@ -244,7 +252,7 @@ a.network { // Navbar .navbar { - background-color: transparent; + background-color: #fafafa; } .tags { diff --git a/style/dashboard.scss b/style/dashboard.scss index 71b348e..1df4fd2 100644 --- a/style/dashboard.scss +++ b/style/dashboard.scss @@ -10,4 +10,8 @@ h3 { .content-dashboard { position: absolute; +} + +.sidebar { + height: 100%; } \ No newline at end of file diff --git a/style/topnav-buttons.scss b/style/topnav-buttons.scss index 4c10505..fa0392b 100644 --- a/style/topnav-buttons.scss +++ b/style/topnav-buttons.scss @@ -12,13 +12,14 @@ .navbar-item.has-dropdown { color: #0060df; - margin-right: 15px; + margin-top: 18px; + margin-right: 10px; font-size: 14px; height: 35px; - border-radius: 25px; - border: solid; - border-color: #EEEEEE; - border-width: 1px; + //border-radius: 25px; + //border: solid; + //border-color: #EEEEEE; + //border-width: 1px; } .notification-icon { @@ -43,7 +44,7 @@ } .navbar-item.is-hoverable { - background-color: white; + background-color: transparent; } .notification-icon {