diff --git a/src/actions/app.js b/src/actions/app.js index 050bf71..76480ff 100644 --- a/src/actions/app.js +++ b/src/actions/app.js @@ -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'); } diff --git a/src/components/dashboard.js b/src/components/dashboard.js index ec45159..13ab72c 100644 --- a/src/components/dashboard.js +++ b/src/components/dashboard.js @@ -20,22 +20,18 @@ class OAEDashboard extends PageViewElement { render() { return html`
- -
- -
- +
-
+
-
+
    diff --git a/src/components/my-app.js b/src/components/my-app.js index 463e123..68b2429 100644 --- a/src/components/my-app.js +++ b/src/components/my-app.js @@ -201,6 +201,7 @@ class MyApp extends connect(store)(LitElement) { + diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 6fe3fb9..da1be07 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -14,56 +14,63 @@ class Sidebar extends LitElement { render() { let version2 = html` - `; - - let version1 = html` - `; diff --git a/src/components/testing-ground.js b/src/components/testing-ground.js new file mode 100644 index 0000000..e178b8d --- /dev/null +++ b/src/components/testing-ground.js @@ -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` +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + +
    +
    +
    +

    Quick Links

    + +
    +
    +
    +
    + `; + } +} +window.customElements.define('dev-testing', Test); diff --git a/style/app.scss b/style/app.scss index 87b8675..0ec9745 100644 --- a/style/app.scss +++ b/style/app.scss @@ -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) @@ -87,6 +86,7 @@ body { .hero-body { margin: 0; padding: 0; + height: 100%; } .content-wrapResponsive { @@ -95,7 +95,6 @@ body { } .container.is-fluid { - margin: 0.5em 5.5em 0 5em; padding: 0; height: 100%; } @@ -104,6 +103,10 @@ body { height: 100%; } +.dashboard { + height: 100%; +} + .columns.dasboard { margin: 0; } @@ -141,6 +144,10 @@ body { } // Sidebar Menu +.sidebar { + background-color: white; +} + .aside { height: 100%; } @@ -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 { @@ -164,24 +172,31 @@ 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; } } @@ -189,23 +204,55 @@ body { 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; diff --git a/style/homepage-v2.scss b/style/homepage-v2.scss index 44c0396..2032b6e 100644 --- a/style/homepage-v2.scss +++ b/style/homepage-v2.scss @@ -58,6 +58,15 @@ $secondaryFontColor: #424242; padding-left: 10%; } +#launch-dialog { + background: tomato; + border-radius: 4px; + color: #fff; + font-family: Helvetica, Arial, sans-serif; + padding: 0.5rem 1rem; + position: static; +} + /*.cover { box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 15px rgba(0, 0, 0, 0.22); transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1); diff --git a/style/library-table-entries.scss b/style/library-table-entries.scss index dc2eb83..676d197 100644 --- a/style/library-table-entries.scss +++ b/style/library-table-entries.scss @@ -23,7 +23,7 @@ tr:nth-child(even) { .library-section tr { &:hover { - background: #deecff; + background: #EDEDF0; } } @@ -50,7 +50,6 @@ tr:nth-child(even) { .table p { font-size: 0.9em; - text-transform: uppercase; } p.library-checkbox-label-top { diff --git a/style/tag-menu.scss b/style/tag-menu.scss index 0479d42..e44f5ea 100644 --- a/style/tag-menu.scss +++ b/style/tag-menu.scss @@ -2,9 +2,7 @@ .tag-menu-label { color: #212121; - text-transform: uppercase; - font-weight: 500; - font-size: 0.9em; + font-size: 1em; } .add-menu-label { diff --git a/style/testing-styles.scss b/style/testing-styles.scss new file mode 100644 index 0000000..8125a08 --- /dev/null +++ b/style/testing-styles.scss @@ -0,0 +1,138 @@ +// 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) +@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); + +$link: #0060df; + +// Import Material Design +// @import "../node_modules/material-design-icons/iconfont/"; + +// Bulma *ALL SASS imports +@import '../node_modules/bulma/sass/utilities/_all.sass'; +@import '../node_modules/bulma/sass/grid/_all.sass'; +@import '../node_modules/bulma/sass/utilities/_all.sass'; +@import '../node_modules/bulma/sass/base/_all.sass'; +@import '../node_modules/bulma/sass/form/_all.sass'; +@import '../node_modules/bulma/sass/layout/_all.sass'; +@import '../node_modules/bulma/sass/elements/_all.sass'; + +// Components +@import '../node_modules/bulma/sass/components/navbar.sass'; +@import '../node_modules/bulma/sass/components/dropdown.sass'; +@import '../node_modules/bulma/sass/components/modal.sass'; +@import '../node_modules/bulma/sass/components/level.sass'; + +// Material Design Icons +// Default Styles +.alert.mdi::before, +.breadcrumb .mdi::before, +.btn.mdi::before, +.card-title.mdi::before, +.card-subtitle.mdi::before, +.card-link.mdi::before, +.dropdown-item.mdi::before, +.list-group-item.mdi::before, +.nav-link.mdi::before { + font-size: 1.25em; + line-height: initial; + position: relative; + top: 0.09rem; +} +.alert.mdi::before, +.breadcrumb .mdi:not(:empty)::before, +.btn.mdi:not(:empty)::before, +.card-title.mdi:not(:empty)::before, +.card-subtitle.mdi:not(:empty)::before, +.card-link.mdi:not(:empty)::before, +.dropdown-item.mdi:not(:empty)::before, +.nav-link.mdi:not(:empty)::before { + margin-right: 0.25rem; +} +.list-group-item.mdi:not(:empty)::before { + margin-right: 0.5rem; +} +.dropdown-item.mdi:not(:empty)::before { + margin-left: -0.75rem; +} +.alert.mdi::before, +.list-group-item.mdi:not(:empty)::before { + margin-left: -0.5rem; +} +.modal-title.mdi::before { + font-size: 1em; + line-height: 0.5; + position: relative; + top: 0.26rem; + margin-right: 0.5rem; +} + +// Structure +html, +body { + margin: 0; + height: 100%; + font-family: 'Open Sans', sans-serif; + font-size: 1em; + background-color: #f6f8f7; +} + +* { + font-family: 'Open Sans', sans-serif; + font-size: 1em; +} + +// Main Content +.main-container { + height: 100vh; + max-width: 100%; + margin: 0; +} + +.columns-container { + margin-right: 0; +} + +.columns:not(:last-child) { + margin-bottom: 0; +} + +// Sidebar +.sidebar { + background-color: white; + padding: 0; + margin: 0; +} + +.sticky { + position: sticky; + top: 30px; + margin: 3%; +} + +// Dropdown +button.button.dropdown-sidebar { + background-color: brown; +} + +.level.sidebar-dropdown { + margin-bottom: 0; +} + +// Sidebar Avatar +.sidebar-avatar-logout { + padding-left: 2%; +} + +// Main content +.main-content { + height: 100%; +} + +.sidebar-notifications { + width: 50px; + height: 50px; + border-radius: 50%; +} +