Phone view: zaps

PrimalHQ · Dec 18, 2024 · 82fcf7b · 82fcf7b
1 parent 65712fd
commit 82fcf7b
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 27 deletions.
diff --git a/src/components/ProfileNoteZap/ProfileNoteZap.module.scss b/src/components/ProfileNoteZap/ProfileNoteZap.module.scss
@@ -34,14 +34,6 @@
         gap: 4px;
         height: 16px;
 
-        .zapIcon {
-          width: 10px;
-          height: 14px;
-          background-color: var(--text-primary);
-          -webkit-mask: url(../../assets/icons/lightning_white.svg) no-repeat 0 / 100%;
-          mask: url(../../assets/icons/lightning_white.svg) no-repeat 0 / 100%;
-        }
-
         .number {
           color: var(--text-primary);
           font-size: 15px;
@@ -137,3 +129,141 @@
     }
   }
 }
+
+.contentZapPhone {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 6px;
+  border-radius: 20px;
+  background-color: var(--background-header-input);
+
+  .zapSender {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    width: 100%;
+    border-radius: 99px;
+    background-color: var(--background-site);
+
+    .amount {
+      display: flex;
+      gap: 4px;
+      height: 16px;
+
+      .number {
+        color: var(--text-primary);
+        font-size: 15px;
+        font-weight: 800;
+        line-height: 16px;
+
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    .message {
+      color: var(--text-primary);
+      text-align: center;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  .zapReceiver {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 8px;
+    width: 100%;
+
+    .leftSide {
+      width: 28px;
+    }
+  }
+
+  .subject {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: center;
+    overflow: hidden;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none !important;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 4px;
+
+      div {
+        color: var(--text-secondary);
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 16px;
+        max-width: 260px;
+
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+
+      .bullet {
+        font-weight: 800;
+      }
+
+      .time {
+        font-weight: 400;
+      }
+    }
+
+    .body {
+      max-width: calc(100dvw - 58px);
+
+      color: var(--text-tertiary);
+
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+
+
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+
+      padding-right: 20px;
+    }
+  }
+}
+
+.zapIcon {
+  width: 10px;
+  height: 14px;
+  background-color: var(--text-primary);
+  -webkit-mask: url(../../assets/icons/lightning_white.svg) no-repeat 0 / 100%;
+  mask: url(../../assets/icons/lightning_white.svg) no-repeat 0 / 100%;
+}
diff --git a/src/components/ProfileNoteZap/ProfileNoteZap.tsx b/src/components/ProfileNoteZap/ProfileNoteZap.tsx
@@ -1,5 +1,5 @@
 import { A } from "@solidjs/router";
-import { Component, createSignal, onMount, Show } from "solid-js";
+import { Component, createSignal, Match, onMount, Show, Switch } from "solid-js";
 import { Kind } from "../../constants";
 import { useAppContext } from "../../contexts/AppContext";
 import { date } from "../../lib/dates";
@@ -10,6 +10,7 @@ import { userName } from "../../stores/profile";
 import { MenuItem, PrimalArticle, PrimalNote, PrimalUser, PrimalZap } from "../../types/primal";
 import Avatar from "../Avatar/Avatar";
 import styles from  "./ProfileNoteZap.module.scss";
+import { isPhone } from "../../utils";
 
 
 const ProfileNoteZap: Component<{
@@ -80,29 +81,59 @@ const ProfileNoteZap: Component<{
   }
 
   return (
-    <div class={styles.contentZap} data-zap-id={props.zap.id}>
-      <div class={styles.zapInfo}>
-        <A href={app?.actions.profileLink(userNpub(props.zap.sender)) || ''} class={styles.sender}>
-          <Avatar size="vs2" user={props.zap.sender} />
-        </A >
-
-        <div class={styles.data}>
-          <div class={styles.amount}>
-            <div class={styles.zapIcon}></div>
-            <div class={styles.number}>{props.zap.amount.toLocaleString()}</div>
+    <Switch>
+      <Match when={isPhone()}>
+        <div class={styles.contentZapPhone} data-zap-id={props.zap.id}>
+          <div class={styles.zapSender}>
+            <Avatar size="xxs" user={props.zap.sender} />
+            <div class={styles.amount}>
+              <div class={styles.zapIcon}></div>
+              <div class={styles.number}>{props.zap.amount.toLocaleString()}</div>
+            </div>
+            <div class={styles.message}>
+              {props.zap.message}
+            </div>
           </div>
-          <div class={styles.message}>
-            {props.zap.message}
+
+          <div class={styles.zapReceiver}>
+            <div class={styles.leftSide}>
+              <A href={app?.actions.profileLink(userNpub(props.zap.reciver)) || ''} class={styles.receiver}>
+                <Avatar size="xxs" user={props.zap.reciver} />
+              </A>
+            </div>
+            <div class={styles.rightSide}>
+              {subject()}
+            </div>
           </div>
         </div>
+      </Match>
+
+      <Match when={!isPhone()}>
+        <div class={styles.contentZap} data-zap-id={props.zap.id}>
+          <div class={styles.zapInfo}>
+            <A href={app?.actions.profileLink(userNpub(props.zap.sender)) || ''} class={styles.sender}>
+              <Avatar size="vs2" user={props.zap.sender} />
+            </A >
+
+            <div class={styles.data}>
+              <div class={styles.amount}>
+                <div class={styles.zapIcon}></div>
+                <div class={styles.number}>{props.zap.amount.toLocaleString()}</div>
+              </div>
+              <div class={styles.message}>
+                {props.zap.message}
+              </div>
+            </div>
 
-        <A href={app?.actions.profileLink(userNpub(props.zap.reciver)) || ''} class={styles.receiver}>
-          <Avatar size="vs2" user={props.zap.reciver} />
-        </A>
-      </div>
+            <A href={app?.actions.profileLink(userNpub(props.zap.reciver)) || ''} class={styles.receiver}>
+              <Avatar size="vs2" user={props.zap.reciver} />
+            </A>
+          </div>
 
-      {subject()}
-    </div>
+          {subject()}
+        </div>
+      </Match>
+    </Switch>
   )
 }
 

diff --git a/src/components/ProfileTabs/ProfileTabs.module.scss b/src/components/ProfileTabs/ProfileTabs.module.scss
@@ -328,6 +328,10 @@
   flex-direction: column;
   gap: 12px;
   padding: 18px 20px;
+
+  @media only screen and (max-width: 720px) {
+    padding: 18px 12px;
+  }
 }
 
 // .galleryGrid {

diff --git a/src/pages/Explore/Explore.module.scss b/src/pages/Explore/Explore.module.scss
@@ -223,6 +223,11 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+
+  @media only screen and (max-width: 720px) {
+    width: 100dvw;
+    padding-inline: 12px;
+  }
 }
 
 .explorePeople {

diff --git a/src/pages/Premium/Premium.module.scss b/src/pages/Premium/Premium.module.scss
@@ -566,6 +566,11 @@
   align-items: center;
   width: 440px;
 
+  @media only screen and (max-width: 720px) {
+    width: 100dvw;
+    padding-inline: 12px;
+  }
+
   .ogCaption {
     color: var(--text-primary);
     text-align: center;

diff --git a/src/pages/Profile.module.scss b/src/pages/Profile.module.scss
@@ -757,6 +757,7 @@
   }
   .profileAbout {
     margin-top: 0px;
+    max-width: calc(100dvw - 26px);
   }
 
   .mutedProfile {