fix: remove grid in proposals page

decentraland · Oct 3, 2023 · 808646f · 808646f
1 parent 62d09a6
commit 808646f
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 85 deletions.
diff --git a/src/pages/proposal.css b/src/pages/proposal.css
@@ -2,7 +2,6 @@
   display: flex !important;
   flex-direction: column;
   flex-wrap: wrap;
-  --proposal-sidebar-width: 284px;
 }
 
 .ProposalDetailPage__Description {
@@ -12,7 +11,7 @@
 
 .ProposalDetail__Left {
   display: flex;
-  width: 284px;
+  width: var(--dao-sidebar-width);
   flex-direction: column;
   justify-content: flex-start;
   padding-right: 1em;
@@ -25,18 +24,18 @@
 
   .ProposalDetailPage__Description {
     flex: 1;
-    max-width: calc(100% - var(--proposal-sidebar-width));
+    max-width: calc(100% - var(--dao-sidebar-width));
     padding-right: 2rem;
   }
 
   .ProposalDetailActions {
-    width: 284px;
+    width: var(--dao-sidebar-width);
   }
 }
 
 @media (min-width: 1200px) {
   .ProposalDetailPage__Description {
-    max-width: calc(100% - 2 * var(--proposal-sidebar-width));
+    max-width: calc(100% - 2 * var(--dao-sidebar-width));
   }
 }
 

diff --git a/src/pages/proposals.css b/src/pages/proposals.css
@@ -1,61 +1,57 @@
-.ui.pagination.menu {
-  justify-content: flex-end;
+.ProposalsPage__Container .ui.pagination.menu {
   width: 100%;
+  justify-content: center !important;
 }
 
-.SubmitButton {
+.ProposalsPage__SubmitButton {
   display: none !important;
 }
 
-.Animated {
-  width: 100%;
-  transition: all 0.5s ease 0s;
-}
-
-.ui.pagination.menu {
-  justify-content: center !important;
+.ProposalsPage__Empty {
+  margin-top: 60px;
 }
 
-.ProposalsTable__Empty {
-  margin-top: 60px;
+.ProposalsPage__Sidebar {
+  max-width: var(--dao-sidebar-width);
+  width: 100%;
 }
 
-.column.Proposals__FiltersColumn {
-  width: 21.87% !important;
-  max-width: 300px !important;
+.ProposalsPage__Content {
+  width: 100%;
 }
 
-.column.ProposalsTable {
-  width: 100% !important;
+.ProposalsPage__List {
+  margin-bottom: 16px;
 }
 
-/* Only Mobile */
 @media only screen and (max-width: 767px) {
-  .ui.pagination.menu .item + .item {
+  .ProposalsPage__Container .ui.pagination.menu .item + .item {
     margin-left: 5px;
   }
 
-  .ui.pagination.menu .item[type='nextItem'],
-  .ui.pagination.menu .item[type='prevItem'] {
+  .ProposalsPage__Container .ui.pagination.menu .item[type='nextItem'],
+  .ProposalsPage__Container .ui.pagination.menu .item[type='prevItem'] {
     display: none !important;
   }
 
-  .ui.container > .ui.stackable.grid > .row > .column {
-    padding-bottom: 0 !important;
-  }
-
-  .ActionableLayout {
+  .ProposalsPage__Container .ActionableLayout {
     min-height: 300px;
   }
 }
 
-/* Desktop Only */
 @media only screen and (min-width: 768px) {
-  .SubmitButton {
+  .ProposalsPage__SubmitButton {
     display: inline !important;
   }
+}
 
-  .column.ProposalsTable {
-    width: 78.13% !important;
-  }
+.ProposalsPage__Container {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}
+
+.Animated {
+  width: 100%;
+  transition: all 0.5s ease 0s;
 }
diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { useLocation } from '@reach/router'
 import Head from 'decentraland-gatsby/dist/components/Head/Head'
@@ -12,7 +12,6 @@ import {
   useTabletAndBelowMediaQuery,
 } from 'decentraland-ui/dist/components/Media/Media'
 import { Pagination } from 'decentraland-ui/dist/components/Pagination/Pagination'
-import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'
 
 import RandomBanner from '../components/Banner/RandomBanner'
 import CategoryBanner from '../components/Category/CategoryBanner'
@@ -149,43 +148,49 @@ export default function ProposalsPage() {
             <RandomBanner isVisible={!searching} />
           </div>
           {!isMobile && search && proposals && <SearchTitle />}
-          <Grid stackable>
-            <Grid.Row>
-              <Grid.Column className="Proposals__FiltersColumn">
-                <NotMobile>
-                  <div>
-                    <CategoryFilter filterType={ProposalType} startOpen />
-                    <StatusFilter statusType={ProposalStatus} />
-                    <TimeFrameFilter />
-                  </div>
-                </NotMobile>
-              </Grid.Column>
-              <BurgerMenuLayout activeTab={NavigationTab.Proposals}>
-                <Grid.Column className="ProposalsTable">
-                  {isMobile && proposals && <SearchTitle />}
-                  <ActionableLayout
-                    leftAction={
-                      <Header sub>
-                        {!proposals && ''}
-                        {proposals && t('general.count_proposals', { count: proposals.total || 0 })}
-                      </Header>
-                    }
-                    rightAction={
-                      !searching && (
-                        <>
-                          {proposals && <SortingMenu />}
-                          <Button primary size="small" className="SubmitButton" as={Link} href={locations.submit()}>
-                            {t('page.proposal_list.new_proposal')}
-                          </Button>
-                        </>
-                      )
-                    }
-                  >
+          <div className="ProposalsPage__Container">
+            <NotMobile>
+              <div className="ProposalsPage__Sidebar">
+                <div>
+                  <CategoryFilter filterType={ProposalType} startOpen />
+                  <StatusFilter statusType={ProposalStatus} />
+                  <TimeFrameFilter />
+                </div>
+              </div>
+            </NotMobile>
+            <BurgerMenuLayout activeTab={NavigationTab.Proposals}>
+              <div className="ProposalsPage__Content">
+                {isMobile && proposals && <SearchTitle />}
+                <ActionableLayout
+                  leftAction={
+                    <Header sub>
+                      {!proposals && ''}
+                      {proposals && t('general.count_proposals', { count: proposals.total || 0 })}
+                    </Header>
+                  }
+                  rightAction={
+                    !searching && (
+                      <>
+                        {proposals && <SortingMenu />}
+                        <Button
+                          primary
+                          size="small"
+                          className="ProposalsPage__SubmitButton"
+                          as={Link}
+                          href={locations.submit()}
+                        >
+                          {t('page.proposal_list.new_proposal')}
+                        </Button>
+                      </>
+                    )
+                  }
+                >
+                  <div className="ProposalsPage__List">
                     <Loader active={!proposals || isLoadingProposals} />
                     {type && !searching && <CategoryBanner type={type} />}
                     {proposals && proposals.data.length === 0 && (
                       <Empty
-                        className="ProposalsTable__Empty"
+                        className="ProposalsPage__Empty"
                         description={
                           searching || status || timeFrame?.length > 0
                             ? t('navigation.search.no_matches')
@@ -216,20 +221,20 @@ export default function ProposalsPage() {
                           />
                         )
                       })}
-                    {proposals && proposals.total > ITEMS_PER_PAGE && (
-                      <Pagination
-                        onPageChange={(e, { activePage }) => handlePageFilter(activePage as number)}
-                        totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)}
-                        activePage={page}
-                        firstItem={null}
-                        lastItem={null}
-                      />
-                    )}
-                  </ActionableLayout>
-                </Grid.Column>
-              </BurgerMenuLayout>
-            </Grid.Row>
-          </Grid>
+                  </div>
+                  {proposals && proposals.total > ITEMS_PER_PAGE && (
+                    <Pagination
+                      onPageChange={(e, { activePage }) => handlePageFilter(activePage as number)}
+                      totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)}
+                      activePage={page}
+                      firstItem={null}
+                      lastItem={null}
+                    />
+                  )}
+                </ActionableLayout>
+              </div>
+            </BurgerMenuLayout>
+          </div>
         </WiderContainer>
       )}
     </>

diff --git a/src/theme.css b/src/theme.css
@@ -78,6 +78,7 @@
   --dao-footer-height: 156px;
   --dao-header-height: 64px;
   --dao-navigation-height: 89px;
+  --dao-sidebar-width: 284px;
 
   /* Font Weights */
   --weight-light: 300;