Merge pull request #545 from DemocracyEarth/mobile

Fixes for proper mobile rendering
DemocracyEarth · Oct 23, 2020 · 41e9c59 · 41e9c59
2 parents 78b12da + 3553758
commit 41e9c59
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/src/components/Expand/Expand.jsx b/src/components/Expand/Expand.jsx
@@ -30,8 +30,8 @@ export default class Expand extends Component {
     super(props);
     this.state = {
       open: props.open,
-      img: arrowDown,
-      logo: this.props.icon,
+      img: (props.open) ? arrowDownActive : arrowDown,
+      logo: (props.open) ? this.props.iconActive : this.props.icon,
     };
 
     this.mouseToggle = this.mouseToggle.bind(this);

diff --git a/src/components/Menu/Sidebar.jsx b/src/components/Menu/Sidebar.jsx
@@ -44,7 +44,7 @@ const _getMenu = (view, data, address, param) => {
   }
 
   return (
-    <div>
+    <div className="submenu">
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[0])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[0])} key={0} href={(atHome) ? `/` : baseRoute } />
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[1])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[1])} key={1} href={(atHome) ? '/period/queue' : `${baseRoute}/period/queue`} />
       <Item sharp hideEmpty={hideEmpty} label={`${i18n.t(defaultLabels[2])}`} score={(atHome) ? null : _getProposalCount(data.proposals, defaultLabels[2])} key={2} href={(atHome) ? '/period/voting' : `${baseRoute}/period/voting`} />
@@ -223,7 +223,9 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
             <div className="separator">
               {_getHeadline('proposals', address, view)}
             </div>
-            {<div className="option-placeholder identity-placeholder" />}
+            <div className="submenu">
+              <div className="option-placeholder identity-placeholder" />
+            </div>
           </div>
         </div>
       </div>
@@ -251,10 +253,14 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
       </div>
       {
       (daoList.length > 0) ?
-      daoList
+        <div className="submenu">
+          {daoList}
+        </div>
       :
-      <div className="empty">
-        {i18n.t('no-memberships-found')}
+      <div className="submenu">
+        <div className="empty">
+          {i18n.t('no-memberships-found')}
+        </div>
       </div>
       }
     </>
@@ -269,7 +275,9 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
         menuList
         :
         <div className="empty">
-          {i18n.t('no-proposals-found')}
+          <div className="submenu">
+            {i18n.t('no-proposals-found')}
+          </div>
         </div>
       }
     </>
@@ -278,10 +286,12 @@ const MenuQuery = ({ address, scrollUp, view, proposalId, param }) => {
   const goBack = (
     <>
       {(window.innerWidth < 768) ?
-        <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />
+        <div className="submenu">
+          <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />
+        </div>
         :
         null
-      }      
+      }          
     </>
   )
 
@@ -366,7 +376,9 @@ export default class Sidebar extends Component {
       <div id="sidebar" className={_getScrollClass(this.state.scrollUp)}>
         <div className="menu">
           {(this.props.view === routerView.SEARCH) ?
-            <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />  
+            <div className="submenu">
+              <Item sharp hideEmpty={false} icon={back} label={`${i18n.t('all-daos')}`} href={'/'} />  
+            </div>
             :
             null
           }

diff --git a/src/styles/Dapp.css b/src/styles/Dapp.css
@@ -6714,7 +6714,6 @@ blockquote {
   }
   .menu-item {
     font-weight: 400;
-    margin-bottom: 5px;
   }
   .content.content-feed {
     padding-right: 10px;
@@ -8239,6 +8238,13 @@ h4 {
   font-weight: 400;
 }
 
+.submenu {
+  padding: 10px 10px 2px;
+  background-color: #f0f0f5;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+
 @media (max-width: 991px) {
  h4 {
     margin-bottom: 10px;
@@ -8252,7 +8258,7 @@ h4 {
 
   .parameter {
     padding: 0px 10px 10px;
-    margin: 10px 10px 0px 0px;
+    margin: 10px 5px 0px 0px;
   }
 
   .details-wrapper {
@@ -8991,10 +8997,6 @@ h4 {
     top: -55px;
   }
 
-  .period { 
-    margin-bottom: -3px;
-  }
-
   .parameter-value {
     margin-top: 7px;
   }
@@ -9004,6 +9006,15 @@ h4 {
   .tab-menu {
     position: absolute;
   }
+
+  .details:hover {
+    text-decoration: none;
+    border: 1px solid #e6e0ee;
+  }
+
+  .details.details-open {
+    border: 1px solid var(--menu-sidebar-selected);
+  }
 }