Merge pull request #1 from RitaOak/interface-fixes

fix: responsive container scaling for library and groups
oaeproject · Mar 26, 2020 · 1e6c2db · 1e6c2db · datreeio · Mar 26, 2020
2 parents 7c3b676 + 0bafc0a
commit 1e6c2db
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -21,7 +21,7 @@ class OAEDashboard extends PageViewElement {
     return html`
       <section class="hero is-fullheight">
         <div class="hero-body is-fullheight">
-          <div class="container content-dashboard is-fluid">
+          <div class="container content-wrapResponsive is-fluid">
             <div class="columns dasboard">
               <div class="column is-narrow sidebar is-fullheight">
                 <sidebar-nav2></sidebar-nav2>

diff --git a/src/components/groups.js b/src/components/groups.js
@@ -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';
@@ -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">

diff --git a/src/components/library.js b/src/components/library.js
@@ -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';
@@ -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">

diff --git a/style/app.scss b/style/app.scss
@@ -100,6 +100,10 @@ body {
   //background-color: #fafafa;
 }
 
+.content-wrapResponsive {
+  position: absolute;
+}
+
 .container.is-fluid {
   margin: 0;
   padding: 0;