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 #64 from RitaOak/interface-v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@brecke
brecke authored Jan 6, 2021
2 parents 986b146 + 294bb17 commit bd1dfef
Show file tree
Hide file tree
Showing 10 changed files with 336 additions and 64 deletions.
3 changes: 3 additions & 0 deletions src/actions/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ const loadPage = page => dispatch => {
case 'groups':
import('../components/groups.js');
break;
case 'testing':
import('../components/testing-ground.js');
break;
default:
import('../components/homepage.js');
}
Expand Down
10 changes: 3 additions & 7 deletions src/components/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,18 @@ class OAEDashboard extends PageViewElement {
render() {
return html`
<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-wrapResponsive is-fluid">
<div class="columns dasboard">
<div class="column is-narrow sidebar is-fullheight">
<div class="column is-one-fifth 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">
<div class="column is-three-quarters main-left">
<section class="column activity-dashboard">
<section class="is-flex">
<ul class="breadcrumb">
Expand Down
1 change: 1 addition & 0 deletions src/components/my-app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ class MyApp extends connect(store)(LitElement) {
<user-library class="page" ?active="${this._page === 'library'}"></user-library>
<user-discussions class="page" ?active="${this._page === 'discussions'}"></user-discussions>
<user-groups class="page" ?active="${this._page === 'groups'}"></user-groups>
<dev-testing class="page" ?active="${this._page === 'testing'}"></dev-testing>
</main>
<snack-bar ?active="${this._snackbarOpened}">
Expand Down
106 changes: 68 additions & 38 deletions src/components/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,56 +14,63 @@ class Sidebar extends LitElement {
render() {
let version2 = html`
<aside class="menu">
<nav class="level sidebar-dropdown">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<figure class="image is-64x64">
<img class="is-rounded" src="/images/logo-01.svg" />
</figure>
</div>
<div class="level-item">
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button dropdown-sidebar" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Home</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<ul class="menu-list">
<li>
<span class="icon sidebar-icon">
<iron-icon icon="dashboard"></iron-icon>
<iron-icon icon="cloud-upload"></iron-icon>
</span>
<a class="dashboard">
Dashboard
New File
</a>
</li>
<li>
<span class="icon sidebar-icon">
<iron-icon icon="av:library-books"></iron-icon>
<iron-icon icon="create"></iron-icon>
</span>
<a class="library">
Library
Create
</a>
</li>
<li>
<span class="icon sidebar-icon">
<iron-icon icon="content-paste"></iron-icon>
</span>
<a class="discussions">
Discussions
</a>
</li>
<li>
<span class="icon sidebar-icon">
<iron-icon icon="social:people-outline"></iron-icon>
<iron-icon icon="settings"></iron-icon>
</span>
<a class="groups">
Groups
</a>
</li>
<li>
<span class="icon sidebar-icon">
<iron-icon icon="social:public"></iron-icon>
</span>
<a class="network">
Network
Settings
</a>
</li>
</ul>
<section>
<tags-side></tags-side>
</section>
</aside>
`;

let version1 = html`
<aside class="menu">
<hr class="navbar-divider sidebar-divider" />
<ul class="menu-list">
<li>
<span class="icon sidebar-icon">
Expand Down Expand Up @@ -97,15 +104,38 @@ class Sidebar extends LitElement {
Groups
</a>
</li>
<li>
<span class="icon sidebar-icon">
<iron-icon icon="social:public"></iron-icon>
</span>
<a class="network">
Network
</a>
</li>
</ul>
<footer class="footer sidebar-footer">
<nav class="level sidebar-avatar-logout">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<figure class="image is-48x48">
<img class="is-rounded" src="/images/user.jpg" />
</figure>
</div>
<div class="level-item">
<div class="dropdown is-hoverable dropdown is-up">
<div class="dropdown-trigger">
<button class="button dropdown-sidebar" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Sarah Jones</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<button>Logout</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</footer>
</aside>
`;

Expand Down
51 changes: 51 additions & 0 deletions src/components/testing-ground.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { html } from 'lit-element';
import sharedStyles from '../../style/testing-styles.scss';
import { PageViewElement } from './page-view-element.js';
import '@polymer/iron-icons/iron-icons.js';
import './news-feed.js';
import './sidebar.js';

class Test extends PageViewElement {
static get styles() {
return [sharedStyles];
}

render() {
return html`
<div class="container main-container">
<div class="columns columns-container">
<div class="column is-one-quarter sidebar">
<div class="menu sticky">
<sidebar-nav></sidebar-nav>
</div>
</div>
<div class="column is-three-fifths main-content">
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
<news-feed></news-feed>
</div>
<div class="column options">
<div class="menu sticky">
<p class="menu-label"><b>Quick Links</b></p>
<ul id="menu" class="menu-list">
<li><a href="#basic">Basic SEO Checklist</a></li>
<li><a href="#keyword">Keyword Research Checklist</a></li>
<li><a href="#onpage">On-Page SEO Checklist</a></li>
<li><a href="#content">Content Checklist</a></li>
<li><a href="#technical">Technical SEO Checklist</a></li>
<li><a href="#link">Link Building Checklist</a></li>
</ul>
</div>
</div>
</div>
</div>
`;
}
}
window.customElements.define('dev-testing', Test);
75 changes: 61 additions & 14 deletions style/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Code in the comments belongs to a previous iteration of the project that might need to be returned to


// Import a Google Font
// Open Sans - Regular (400)
// Open Sans - Bold (700)
Expand Down Expand Up @@ -87,6 +86,7 @@ body {
.hero-body {
margin: 0;
padding: 0;
height: 100%;
}

.content-wrapResponsive {
Expand All @@ -95,7 +95,6 @@ body {
}

.container.is-fluid {
margin: 0.5em 5.5em 0 5em;
padding: 0;
height: 100%;
}
Expand All @@ -104,6 +103,10 @@ body {
height: 100%;
}

.dashboard {
height: 100%;
}

.columns.dasboard {
margin: 0;
}
Expand Down Expand Up @@ -141,6 +144,10 @@ body {
}

// Sidebar Menu
.sidebar {
background-color: white;
}

.aside {
height: 100%;
}
Expand All @@ -150,12 +157,13 @@ body {
}

.menu {
width: 185px;
// Previous menu position, might be useful once we remove the top tabs bar from the default polymer project
width: 100%;
// Previous menu position, might be useful once we remove the top tabs bar from the default polymer project
// Code is commented in case we need to use this approach again
//position: fixed;
//top: 8.5em;
margin-top: 3.5em;
margin-top: 1em;
min-height: 90vh;
}

.menu-list {
Expand All @@ -164,48 +172,87 @@ body {
}

.menu-list li {
padding-left: 0;
margin-bottom: 18px;
border-radius: 0 25px 25px 0;
padding: 2%;
margin-left: 2%;
margin-bottom: 1%;
border-radius: 5px;
height: 30px;
color: #212121;
display: flex;
align-items: center;
&:hover {
color: #0060df;
background-color: #EDEDF0;
background-color: #f6f8f7;
}
&:active {
color: #0060df;
background-color: #EDEDF0;
background-color: #f6f8f7;
}
&:focus {
color: #0060df;
background-color: #EDEDF0;
background-color: #f6f8f7;
}
}

.menu-list li a {
&:hover {
color: #0060df;
}
}

.menu-list a {
color: #212121;
}

.menu-list span {
padding-left: 1%;
}

a.dashboard,
a.library,
a.discussions,
a.groups,
a.user-settings,
a.network {
padding-left: 1em;
padding-left: 0.8em;
&:hover {
color: #0060df;
}
}

.sidebar-divider {
margin: 2%;
}

.navbar-divider {
margin: 5px 0 5px 0;
.sidebar-dropdown {
padding: 1%;
margin-left: 1%;
}

.top-divider {
margin: 30px 0 5px 0;
}

// Sidebar Dropdown

button.button.dropdown-sidebar {
background-color: transparent;
border: none;
}

// Footer
.footer.sidebar-footer {
position: absolute;
bottom: 0;
padding: 0;
background-color: transparent;
}

// Sidebar Avatar
.sidebar-avatar-logout {
padding-left: 2%;
}

// Top Bar
.top-nav {
margin: 0.5em 2.5em 0.5em 2.5em;
Expand Down
Loading

0 comments on commit bd1dfef

Please sign in to comment.