Merge pull request #505 from DemocracyEarth/landing2020

Final tweaks for mobile navigation.
DemocracyEarth · Feb 14, 2020 · 55973bf · 55973bf
2 parents 67ebc0f + 263fb97
commit 55973bf
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 42 deletions.
diff --git a/imports/ui/modules/menu.js b/imports/ui/modules/menu.js
@@ -342,6 +342,10 @@ const animateMenu = () => {
       $('.inhibitor').css('display', 'block');
       $('.inhibitor').css('position', 'fixed');
       $('.inhibitor').css('left', `${sidebarPixelWidth}px`);
+      if (Meteor.Device.isPhone()) {
+        $('.content').css('overflow', 'hidden');
+        $('#menu').css({ width: `${sidebarPixelWidth}px` });
+      }
     }
 
     $('#menu').css({ marginLeft: '0px' });

diff --git a/imports/ui/templates/layout/sidebar/sidebar.js b/imports/ui/templates/layout/sidebar/sidebar.js
@@ -152,7 +152,7 @@ const _adapt = (list) => {
 */
 const _showSidebar = () => {
   const percentage = sidebarPercentage();
-  // $('.left').width(`${percentage}%`);
+  console.log(`showSidebar`);
   if (!Meteor.Device.isPhone()) {
     if ($(window).width() < gui.MOBILE_MAX_WIDTH) {
       $('.navbar').css('left', 0);
@@ -164,9 +164,13 @@ const _showSidebar = () => {
     if (($(window).width() < gui.MOBILE_MAX_WIDTH && Session.get('sidebar')) || ($(window).width() >= gui.MOBILE_MAX_WIDTH && !Session.get('sidebar'))) {
       toggleSidebar(true);
     }
+  } else {
+    console.log(`percentage ${percentage}`);
+    $('.left').width(`${percentage}%`);
   }
   if (!Session.get('sidebar')) {
-    const newMargin = parseInt(-10 - sidebarWidth(), 10);
+    const newMargin = parseInt((Meteor.Device.isPhone() ? 0 : -10) - sidebarWidth(), 10);
+    console.log(`newMargin: ${newMargin}`);
     $('#menu').css('margin-left', `${newMargin}px`);
     if (newMargin < 0) {
       Session.set('removedSidebar', true);
@@ -176,11 +180,14 @@ const _showSidebar = () => {
     if ($(window).width() < gui.MOBILE_MAX_WIDTH) {
       newRight = parseInt(0 - sidebarWidth(), 10);
     }
-    $('#content').css('left', '250px');
-    // $('#content').css('right', newRight);
 
     if (Meteor.Device.isPhone()) {
+      console.log(`sidebarWidth(): ${sidebarWidth()}`);
+      $('#content').css('left', sidebarWidth());
+      $('#content').css('right', newRight);
       $('#menu').css('margin-left', '0px');
+    } else {
+      $('#content').css('left', '250px');
     }
 
     if (Session.get('removedSidebar') && !Meteor.Device.isPhone()) {

diff --git a/imports/ui/templates/layout/url/topbar/topbar.html b/imports/ui/templates/layout/url/topbar/topbar.html
@@ -1,45 +1,47 @@
 <template name="topbar">
   <div class="hero-navbar topbar">
-    <div id="nav-home" class="hero-home-button" ontouchstart="">
-      <img class="hero-logo" src="{{pathFor route='home'}}{{picture}}" />
-    </div>
-    {{#unless currentUser}}
-      <div id="collective-login" class="hero-button hero-button-mobile hero-signin">
-        <div class="hero-menu-link hero-menu-link-signin {{loginMode}}" target="_blank">{{_ 'sign-in'}}</div>
+    <div class="topbar-max">
+      <div id="nav-home" class="hero-home-button" ontouchstart="">
+        <img class="hero-logo" src="{{pathFor route='home'}}{{picture}}" />
       </div>
-    {{else}}
-      <div class="hero-button hero-button-mobile hero-signin">
-
-        <div id="sign-out-button" class="hero-menu-link hero-menu-link-signin-simple hero-menu-link-signin-simple-icon" target="_blank">
-          <img src="{{getImage 'signout'}}" title="{{_ 'sign-out'}}" class="signout">
+      {{#unless currentUser}}
+        <div id="collective-login" class="hero-button hero-button-mobile hero-signin">
+          <div class="hero-menu-link hero-menu-link-signin {{loginMode}}" target="_blank">{{_ 'sign-in'}}</div>
         </div>
+      {{else}}
+        <div class="hero-button hero-button-mobile hero-signin">
 
-        <div  id="collective-login" class="hero-menu-link hero-menu-link-signin-simple" target="_blank">
-          {{#with currentUser}}
-            <div class="hero-crypto-login">
-              {{> avatar size=24 profile=this._id includeName=false includeNation=false editable=false microFont=true disabled=true includeRole=false imgStyle=this.imgStyle}}
-            </div>
-            {{cryptoName this.username}}
-          {{/with}}
-        </div>
-      </div>
-    {{/unless}}
-    <div class="hero-menu">
-      {{#each navbarItem}}
-        {{#if this.selected}}
-          <div class="hero-button">
-            {{#unless postMode}}
-              <a class="hero-menu-link hero-menu-link-selected" href="{{this.url}}">{{_ this.label}}</a>
-            {{else}}
-              <a class="hero-menu-link" href="{{this.url}}">{{_ this.label}}</a>
-            {{/unless}}
+          <div id="sign-out-button" class="hero-menu-link hero-menu-link-signin-simple hero-menu-link-signin-simple-icon" target="_blank">
+            <img src="{{getImage 'signout'}}" title="{{_ 'sign-out'}}" class="signout">
           </div>
-        {{else}}
-          <div class="hero-button">
-            <a class="hero-menu-link" href="{{this.url}}" target="_blank">{{_ this.label}}</a>
+
+          <div  id="collective-login" class="hero-menu-link hero-menu-link-signin-simple" target="_blank">
+            {{#with currentUser}}
+              <div class="hero-crypto-login">
+                {{> avatar size=24 profile=this._id includeName=false includeNation=false editable=false microFont=true disabled=true includeRole=false imgStyle=this.imgStyle}}
+              </div>
+              {{cryptoName this.username}}
+            {{/with}}
           </div>
-        {{/if}}
-      {{/each}}
+        </div>
+      {{/unless}}
+      <div class="hero-menu">
+        {{#each navbarItem}}
+          {{#if this.selected}}
+            <div class="hero-button">
+              {{#unless postMode}}
+                <a class="hero-menu-link hero-menu-link-selected" href="{{this.url}}">{{_ this.label}}</a>
+              {{else}}
+                <a class="hero-menu-link" href="{{this.url}}">{{_ this.label}}</a>
+              {{/unless}}
+            </div>
+          {{else}}
+            <div class="hero-button">
+              <a class="hero-menu-link" href="{{this.url}}" target="_blank">{{_ this.label}}</a>
+            </div>
+          {{/if}}
+        {{/each}}
+      </div>
     </div>
   </div>
 </template>
diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css
@@ -4299,6 +4299,19 @@ blockquote {
   text-align: left;
 }
 
+@media (max-width: 991px) {
+  .left {
+    width: 0px;
+  }
+}
+
+
+.topbar-max {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+
 .left.left-edit {
   width: 260px;
   margin-left: 0px;
@@ -4499,8 +4512,8 @@ blockquote {
   min-width: 100%;
   margin-top: 3px;
   margin-bottom: 12px;
-  padding: 1px 0px 1px 5px;
-  border-radius: 3px;
+  padding: 2px 5px 1px 10px;
+  border-radius: 20px;
   color: #0d0d17;
   font-size: 13px;
   line-height: 30px;

diff --git a/public/templates/daoverse/css/extra.css b/public/templates/daoverse/css/extra.css
@@ -78,11 +78,17 @@ input[type="file"] {
   left: 250px;
 }
 
+
 @media (max-width: 991px) {
   #content, #modalToggle, .modal { /* .title-input {*/
     overflow: scroll; /* has to be scroll, not auto */
     -webkit-overflow-scrolling: touch;
   }
+
+  .right {
+    left: 0px;
+  }
+
 }
 
 .modal {
@@ -1409,7 +1415,7 @@ h4 {
 
 .tab-button {
   margin: 0px 10px 0px 0px;
-  padding: 10px 20px 10px;
+  padding: 12px 20px 12px;
   display: inline-block;
   width: 40%;
 }