feat: mobile support

decentraland · Dec 22, 2023 · c26f6ea · c26f6ea
1 parent 9602c42
commit c26f6ea
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 1 deletion.
diff --git a/webapp/src/components/NamesPage/MintName/MintNamePage.module.css b/webapp/src/components/NamesPage/MintName/MintNamePage.module.css
@@ -302,7 +302,7 @@
 .mintNamePage .ctasContainer .card {
   background-color: #242129;
   height: 209px;
-  width: 305px;
+  min-width: 305px;
   padding: 0;
   overflow: hidden;
 }
@@ -351,3 +351,112 @@
 .mintNamePage .ctasContainer .whyImgContainer.standOut {
   align-items: flex-end;
 }
+
+@media (max-width: 768px) {
+  .mintNamePage .claimContainer {
+    height: 587px;
+    margin: 0;
+    padding: 12px;
+  }
+
+  .mintNamePage .mainContainer .imageContainer {
+    height: 222px;
+  }
+
+  .mintNamePage .mainContainer:global(.ui.container) {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 12px;
+  }
+
+  .mintNamePage .claimContainer h2 {
+    font-size: 30px;
+    text-align: center;
+  }
+
+  .mintNamePage .claimContainer .subtitle {
+    font-size: 20px;
+  }
+
+  .mintNamePage .ctasContainer .cardsContainer {
+    width: 100%;
+    overflow-x: scroll;
+    padding: 0 16px;
+  }
+
+  .mintNamePage .ctasContainer .cardsContainer:last-of-type {
+    flex-direction: column;
+  }
+
+  .mintNamePage .nameTakenCard {
+    margin-right: 0;
+    margin-bottom: 16px;
+    justify-content: center;
+  }
+
+  .mintNamePage .nameTakenCard .buttons,
+  .mintNamePage .manageNames .buttons {
+    flex-direction: column;
+  }
+
+  .mintNamePage .manageNames .buttons,
+  .mintNamePage .nameTakenCard .buttons div {
+    align-items: center;
+  }
+
+  .mintNamePage .buttons > div + div {
+    margin-left: 0;
+  }
+
+  .mintNamePage .nameTakenCard .buttons div button {
+    margin-top: 28px;
+  }
+
+  .mintNamePage .claimInput {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .mintNamePage .claimContainer .remainingCharactersContainer {
+    right: 12px;
+    top: 6px;
+  }
+
+  .mintNamePage .claimContainer :global(.ui.primary.button) {
+    min-height: 48px;
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .mintNamePage .claimInput :global(.dcl.field.simple) {
+    min-height: 100%;
+  }
+
+  .mintNamePage .nameCost {
+    text-align: center;
+    margin-top: 72px;
+  }
+
+  .mintNamePage .mainContainer .claimContainer img.banner {
+    left: 0;
+    width: 340px;
+    height: 129px;
+    top: 50px;
+  }
+
+  .mintNamePage .mainContainer .ctasContainer .card {
+    margin-right: 20px;
+  }
+
+  .mintNamePage .manageNames {
+    justify-content: center;
+  }
+
+  .mintNamePage .buttons img {
+    padding-left: 0;
+  }
+
+  .mintNamePage .availableContainer {
+    top: 97px;
+  }
+}
diff --git a/webapp/src/components/NamesPage/MintName/MintNamePage.tsx b/webapp/src/components/NamesPage/MintName/MintNamePage.tsx
@@ -260,6 +260,7 @@ const MintNamePage = (props: Props) => {
                 {t('names_page.claim_a_name')}
               </Button>
               {name &&
+              isInputFocus &&
               name !== PLACEHOLDER_NAME &&
               isAvailable !== undefined &&
               !isLoadingStatus ? (