improve sort dropdown and communities page layout

NEAR-DevHub · Nov 22, 2023 · beb968a · beb968a
1 parent 05ea484
commit beb968a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 54 deletions.
diff --git a/src/devhub/entity/community/Card.jsx b/src/devhub/entity/community/Card.jsx
@@ -26,6 +26,13 @@ const CommunityCard = ({
     line-height: 30px; /* 41.667% */
   `;
 
+  const CommunityDataContainer = styled.div`
+    max-width: 60%;
+    @media screen and (max-width: 576px) {
+      max-width: 90%;
+    }
+  `;
+
   const CommunityDescription = styled.p`
     color: #818181;
     font-size: 1rem;
@@ -39,7 +46,7 @@ const CommunityCard = ({
     height: 8rem;
     object-fit: cover;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 992px) {
       width: 4rem;
       height: 4rem;
     }
@@ -52,7 +59,7 @@ const CommunityCard = ({
       className={[
         "d-flex p-0 p-lg-3",
         "rounded-2 border border-2",
-        "text-black text-decoration-none attractable flex-grow-1",
+        "text-black text-decoration-none attractable flex-grow-1 h-100",
       ].join(" ")}
       style={{
         background: isBannerEnabled
@@ -74,7 +81,7 @@ const CommunityCard = ({
           src={metadata.logo_url}
         />
 
-        <div className="d-flex flex-column justify-content-center gap-1 w-100">
+        <CommunityDataContainer className="d-flex flex-column justify-content-center gap-1 w-100">
           <CommunityName
             style={{ textOverflow: "ellipsis", wordWrap: "break-word" }}
           >
@@ -86,22 +93,21 @@ const CommunityCard = ({
           >
             {metadata.description}
           </CommunityDescription>
-        </div>
+        </CommunityDataContainer>
       </div>
     </Link>
   );
 
   const formatMedium = (
     <Link
-      className="card d-flex flex-column flex-shrink-0 text-decoration-none text-reset attractable"
+      className="card d-flex flex-column flex-shrink-0 text-decoration-none text-reset attractable h-100"
       to={link}
       style={{ width: "23%", maxWidth: 304 }}
     >
       <div
         className="card-img-top w-100"
         style={{
           background: `center / cover no-repeat url(${metadata.banner_url})`,
-          height: 164,
         }}
       />
 

diff --git a/src/devhub/page/communities.jsx b/src/devhub/page/communities.jsx
@@ -91,21 +91,6 @@ const CTA = styled.button`
   }
 `;
 
-const CardGrid = styled.div`
-  width: 100%;
-  height: 100%;
-
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 3rem;
-
-  @media screen and (max-width: 1000px) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-  }
-`;
-
 return (
   <div className="w-100">
     <Widget src={`${REPL_DEVHUB}/widget/devhub.components.island.banner`} />
@@ -131,16 +116,36 @@ return (
                 value={searchKey}
                 onChange={(e) => setSearchKey(e.target.value)}
               />
-              <select
-                class="form-select"
-                onChange={(e) => setSort(e.target.value)}
-              >
-                <option selected value="">
-                  Sort
-                </option>
-                <option value="a-z">A-Z</option>
-                <option value="z-a">Z-A</option>
-              </select>
+              <div class="dropdown">
+                <button
+                  class="btn dropdown-toggle bg-white"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  Sort: {sort?.toUpperCase() || "Latest"}
+                </button>
+                <ul class="dropdown-menu px-2 shadow">
+                  <li
+                    onClick={() => setSort("")}
+                    class="dropdown-item link-underline link-underline-opacity-0"
+                  >
+                    Latest
+                  </li>
+                  <li
+                    onClick={() => setSort("a-z")}
+                    class="dropdown-item link-underline link-underline-opacity-0"
+                  >
+                    A-Z
+                  </li>
+                  <li
+                    onClick={() => setSort("z-a")}
+                    class="dropdown-item link-underline link-underline-opacity-0"
+                  >
+                    Z-A
+                  </li>
+                </ul>
+              </div>
             </div>
             {context.accountId && (
               <div className="d-flex flex-column justify-content-center">
@@ -164,29 +169,37 @@ return (
             }}
           />
         )}
-        <CardGrid>
-          {searchKey === "" && sort === ""
-            ? (communitiesMetadata ?? []).reverse().map((communityMetadata) => (
-                <Widget
-                  src="${REPL_DEVHUB}/widget/devhub.entity.community.Card"
-                  props={{
-                    format: "small",
-                    isBannerEnabled: false,
-                    metadata: communityMetadata,
-                  }}
-                />
-              ))
-            : SortedAndFiltered(searchKey, sort).map((communityMetadata) => (
-                <Widget
-                  src="${REPL_DEVHUB}/widget/devhub.entity.community.Card"
-                  props={{
-                    format: "small",
-                    isBannerEnabled: false,
-                    metadata: communityMetadata,
-                  }}
-                />
-              ))}
-        </CardGrid>
+        <div class="container">
+          <div class="row">
+            {searchKey === "" && sort === ""
+              ? (communitiesMetadata ?? [])
+                  .reverse()
+                  .map((communityMetadata) => (
+                    <div className="col-lg-4 col-sm-6 col-12 mb-3">
+                      <Widget
+                        src="${REPL_DEVHUB}/widget/devhub.entity.community.Card"
+                        props={{
+                          format: "small",
+                          isBannerEnabled: false,
+                          metadata: communityMetadata,
+                        }}
+                      />
+                    </div>
+                  ))
+              : SortedAndFiltered(searchKey, sort).map((communityMetadata) => (
+                  <div className="col-lg-4 col-sm-6 col-12 mb-3">
+                    <Widget
+                      src="${REPL_DEVHUB}/widget/devhub.entity.community.Card"
+                      props={{
+                        format: "small",
+                        isBannerEnabled: false,
+                        metadata: communityMetadata,
+                      }}
+                    />
+                  </div>
+                ))}
+          </div>
+        </div>
       </div>
     </div>
   </div>