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

Interface v3 #64

Merged
merged 4 commits into from
Jan 6, 2021
Merged

Interface v3 #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d223241
fix: style library
RitaOak Jun 7, 2020
4c0b57c
test: testing grounds for new sidebar
RitaOak Dec 9, 2020
67c14c7
fix: dropdown styles
RitaOak Dec 9, 2020
294bb17
feature: footer for the sidebar with avatar and dropdown (hovering up…
RitaOak Dec 9, 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
3 changes: 3 additions & 0 deletions src/actions/app.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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