Theme #87
14
src/Number.ts
Normal file
14
src/Number.ts
Normal file
@ -0,0 +1,14 @@
|
||||
const intl = new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
export function formatShort(n: number) {
|
||||
if (n < 999) {
|
||||
return n
|
||||
} else if (n < 1e8) {
|
||||
return `${intl.format(Math.floor(n / 1e3))}K`
|
||||
} else {
|
||||
return `${intl.format(Math.floor(n / 1e6))}M`
|
||||
}
|
||||
}
|
6
src/element/FollowsYou.css
Normal file
6
src/element/FollowsYou.css
Normal file
@ -0,0 +1,6 @@
|
||||
.follows-you {
|
||||
|
||||
color: var(--font-tertiary-color);
|
||||
font-size: var(--font-size-tiny);
|
||||
margin-left: .2em;
|
||||
font-weight: normal
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
import "./FollowsYou.css";
|
||||
import { useMemo } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { HexKey } from "../nostr";
|
||||
@ -21,7 +22,7 @@ export default function FollowsYou({ pubkey }: FollowsYouProps ) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{ followsMe ? <span className="pill">follows you</span> : null }
|
||||
{ followsMe ? <span className="follows-you">follows you</span> : null }
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -1,7 +1,6 @@
|
||||
Redundant Redundant
Redundant Redundant
|
||||
.note-invoice {
|
||||
background: var(--bg-color);
|
||||
Redundant Redundant
|
||||
border-radius: 10px;
|
||||
Redundant Redundant
|
||||
border: 1px solid var(--gray-tertiary);
|
||||
Redundant Redundant
|
||||
border: 1px solid var(--font-secondary-color);
|
||||
Redundant Redundant
|
||||
border-radius: 16px;
|
||||
Redundant Redundant
|
||||
padding: 12px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
@ -11,5 +10,5 @@
|
||||
Redundant Redundant
Redundant Redundant
|
||||
}
|
||||
|
||||
.note-invoice small {
|
||||
color: var(--gray-medium);
|
||||
Redundant Redundant
|
||||
color: var(--font-secondary-color);
|
||||
Redundant Redundant
|
||||
}
|
||||
|
||||
Redundant Redundant
Redundant Redundant
|
@ -17,9 +17,24 @@
|
||||
background-color: var(--gray);
|
||||
}
|
||||
|
||||
.lnurl-tip .pill.active {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--font-color);
|
||||
.sat-amount {
|
||||
display: inline-block;
|
||||
background-color: var(--gray-secondary);
|
||||
color: var(--font-color);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
.sat-amount:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sat-amount.active {
|
||||
font-weight: bold;
|
||||
color: var(--note-bg);
|
||||
background-color: var(--font-color);
|
||||
}
|
||||
|
||||
.lnurl-tip .invoice {
|
||||
|
@ -188,11 +188,11 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
<input type="text" placeholder="Comment" className="mb10 f-grow" maxLength={payService?.commentAllowed} onChange={(e) => setComment(e.target.value)} /> : null}
|
||||
</div>
|
||||
<div className="mb10">
|
||||
{serviceAmounts.map(a => <span className={`pill ${amount === a ? "active" : ""}`} key={a} onClick={() => selectAmount(a)}>
|
||||
{serviceAmounts.map(a => <span className={`sat-amount ${amount === a ? "active" : ""}`} key={a} onClick={() => selectAmount(a)}>
|
||||
{a.toLocaleString()}
|
||||
</span>)}
|
||||
{payService ?
|
||||
<span className={`pill ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
|
||||
<span className={`sat-amount ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
|
||||
Custom
|
||||
</span> : null}
|
||||
</div>
|
||||
|
@ -1,35 +1,40 @@
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note {
|
||||
margin-bottom: 10px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-radius: 10px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-bottom: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-radius: 16px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
background-color: var(--note-bg);
|
||||
padding: 10px 10px 8px 10px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
padding: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
min-height: 110px;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note { margin-bottom: 24px; padding: 24px; }
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
.note.thread {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.note > .header > .pfp {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
flex-grow: 1;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note .header {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
display: flex;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
flex-direction: row;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
justify-content: space-between;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
|
||||
.note > .header .reply {
|
||||
font-size: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--gray-light);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
font-size: var(--font-size-tiny);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-secondary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
|
||||
.note > .header > .info {
|
||||
font-size: 10px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
font-size: var(--font-size);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
white-space: nowrap;
|
||||
color: var(--gray-light);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
align-self: flex-start;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-secondary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
|
||||
.note > .body {
|
||||
padding: 10px 5px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
white-space: pre-wrap;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-top: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
white-space: pre-wrap;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
@ -38,7 +43,32 @@
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
|
||||
.note > .footer {
|
||||
text-align: right;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
display: flex;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
flex-direction: row-reverse;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-top: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note > .note-creator {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-top: 12px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
@media (min-width: 720px) {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note > .footer { margin-top: 24px; }
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note > .note-creator { margin-top: 24px; }
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.thread.note {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-bottom-left-radius: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-bottom-right-radius: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.thread.note, .indented .note {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-bottom: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.indented .note {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-radius: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
|
||||
.indented {
|
||||
@ -46,8 +76,73 @@
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.note:last-child {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-bottom-right-radius: 16px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-bottom: 24px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.indented .note.active:last-child {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-bottom-right-radius: 16px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-bottom: 24px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.indented > .indented .note:last-child {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-bottom-right-radius: 0px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-bottom: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.indented .active {
|
||||
background-color: var(--gray-tertiary);
|
||||
margin-left: -5px;
|
||||
border-left: 3px solid var(--highlight);
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
border-radius: 0;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.reaction-pill {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
display: flex;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
flex-direction: row;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
padding: 0px 10px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
user-select: none;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-secondary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.reaction-pill .reaction-pill-number {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
margin-left: 8px;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.reaction-pill.reacted {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--highlight);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.reaction-pill:hover {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
cursor: pointer;
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .header .reply {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-tertiary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .header > .info {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-tertiary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .footer > .reaction-pill {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-tertiary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
@media (prefers-color-scheme: light) {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.indented .active {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
background-color: var(--gray-secondary);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .header .reply {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-secondary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .header > .info {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-secondary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
.note.active > .footer > .reaction-pill {
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
color: var(--font-seco666ndary-color);
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
}
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
||||
|
||||
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
Way too much padding for mobile, almost no space left
![theme snort-social pages dev_p_npub107jk7htfv243u0x5ynn43scq9wrxtaasmrwwa8lfu2ydwag6cx2quqncxg(Samsung Galaxy S20 Ultra)](https://user-images.githubusercontent.com/1172179/213430192-0a1dbb1b-005c-44a7-afe2-a5ddc39870c2.png)
|
@ -78,7 +78,7 @@ export default function Note(props: NoteProps) {
|
||||
let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
|
||||
return (
|
||||
<div className="reply">
|
||||
➡️ {(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
|
||||
{(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -100,4 +100,4 @@ export function NoteCreator(props: NoteCreatorProps) {
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
|
||||
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { formatShort } from "../Number";
|
||||
import useEventPublisher from "../feed/EventPublisher";
|
||||
import { getReactions, normalizeReaction, Reaction } from "../Util";
|
||||
import { NoteCreator } from "./NoteCreator";
|
||||
@ -29,7 +30,6 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
const isMine = ev.RootPubKey === login;
|
||||
const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related]);
|
||||
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related]);
|
||||
|
||||
const groupReactions = useMemo(() => {
|
||||
return reactions?.reduce((acc, { content }) => {
|
||||
let r = normalizeReaction(content);
|
||||
@ -50,8 +50,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
}
|
||||
|
||||
async function react(content: string) {
|
||||
if (!hasReacted(content)) {
|
||||
let evLike = await publisher.react(ev, content);
|
||||
publisher.broadcast(evLike);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteEvent() {
|
||||
@ -73,9 +75,11 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
if (service) {
|
||||
return (
|
||||
<>
|
||||
<span className="pill" onClick={(e) => setTip(true)}>
|
||||
<FontAwesomeIcon icon={faBolt} />
|
||||
</span>
|
||||
<div className="reaction-pill" onClick={(e) => setTip(true)}>
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faBolt} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -85,10 +89,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
function reactionIcon(content: string, reacted: boolean) {
|
||||
switch (content) {
|
||||
case Reaction.Positive: {
|
||||
return <FontAwesomeIcon color={reacted ? "red" : "currentColor"} icon={faHeart} />;
|
||||
return <FontAwesomeIcon icon={faHeart} />;
|
||||
}
|
||||
case Reaction.Negative: {
|
||||
return <FontAwesomeIcon color={reacted ? "orange" : "currentColor"} icon={faThumbsDown} />;
|
||||
return <FontAwesomeIcon icon={faThumbsDown} />;
|
||||
}
|
||||
}
|
||||
return content;
|
||||
@ -97,30 +101,45 @@ export default function NoteFooter(props: NoteFooterProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="footer">
|
||||
{isMine ? <span className="pill">
|
||||
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
|
||||
</span> : null}
|
||||
{tipButton()}
|
||||
<span className="pill" onClick={() => repost()}>
|
||||
<FontAwesomeIcon icon={faRepeat} color={hasReposted() ? "green" : "currenColor"} />
|
||||
{reposts.length > 0 ? <> {reposts.length}</> : null}
|
||||
</span>
|
||||
<span className="pill" onClick={(e) => setReply(s => !s)}>
|
||||
{isMine && (
|
||||
<div className="reaction-pill">
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faReply} />
|
||||
</span>
|
||||
{Object.keys(groupReactions || {}).map((emoji) => {
|
||||
let didReact = hasReacted(emoji);
|
||||
return (
|
||||
<span className="pill" onClick={() => {
|
||||
if (!didReact) {
|
||||
react(emoji);
|
||||
}
|
||||
}} key={emoji}>
|
||||
{reactionIcon(emoji, didReact)}
|
||||
{groupReactions[emoji] ? <> {groupReactions[emoji]}</> : null}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`reaction-pill ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faRepeat} />
|
||||
</div>
|
||||
{reposts.length > 0 && (
|
||||
<div className="reaction-pill-number">
|
||||
{formatShort(reposts.length)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faHeart} />
|
||||
</div>
|
||||
<div className="reaction-pill-number">
|
||||
{formatShort(groupReactions[Reaction.Positive])}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`reaction-pill ${hasReacted('-') ? 'reacted' : ''}`} onClick={(e) => react("-")}>
|
||||
<div className="reaction-pill-icon">
|
||||
<FontAwesomeIcon icon={faThumbsDown} />
|
||||
</div>
|
||||
<div className="reaction-pill-number">
|
||||
{formatShort(groupReactions[Reaction.Negative])}
|
||||
</div>
|
||||
</div>
|
||||
{tipButton()}
|
||||
</div>
|
||||
<NoteCreator
|
||||
autoFocus={true}
|
||||
|
@ -1,29 +1,24 @@
|
||||
.reaction {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.reaction > .note {
|
||||
margin: 10px 20px;
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.reaction > .header > .pfp {
|
||||
flex-grow: 1;
|
||||
.reaction > .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.reaction > .header .reply {
|
||||
font-size: small;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.reaction > .header > .info {
|
||||
color: var(--gray-light);
|
||||
font-size: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.reaction .reaction-text {
|
||||
margin-left: .2em;
|
||||
color: var(--gray-light);
|
||||
font-size: var(--font-size);
|
||||
white-space: nowrap;
|
||||
color: var(--font-secondary-color);
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
@ -44,13 +44,6 @@ export default function NoteReaction(props: NoteReactionProps) {
|
||||
}
|
||||
}
|
||||
|
||||
function tagLine() {
|
||||
switch (ev.Kind) {
|
||||
case EventKind.Reaction: return <small className="reaction-text">reacted with {mapReaction(ev.Content)}</small>;
|
||||
case EventKind.Repost: return <small className="reaction-text">reposted</small>
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Some clients embed the reposted note in the content
|
||||
*/
|
||||
|
@ -25,11 +25,10 @@ export default function NoteTime(props: NoteTimeProps) {
|
||||
return fallback
|
||||
} else {
|
||||
let mins = Math.floor(absAgo / MinuteInMs);
|
||||
let minutes = mins === 1 ? 'min' : 'mins'
|
||||
if(ago < 0) {
|
||||
return `in ${mins} ${minutes}`;
|
||||
return `in ${mins}m`;
|
||||
}
|
||||
return `${mins} ${minutes} ago`;
|
||||
return `${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,4 +47,4 @@ export default function NoteTime(props: NoteTimeProps) {
|
||||
}, [from]);
|
||||
|
||||
return <>{time}</>
|
||||
}
|
||||
}
|
||||
|
@ -6,6 +6,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.relay > div {
|
||||
@ -18,4 +19,24 @@
|
||||
background-color: var(--gray-tertiary);
|
||||
border-radius: 0 0 5px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--gray);
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
margin-left: .5em;
|
||||
padding: 2px 10px;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
@ -44,13 +44,13 @@ export default function Relay(props: RelayProps) {
|
||||
<b className="f-2">{name}</b>
|
||||
<div className="f-1">
|
||||
Write
|
||||
<span className="pill" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
|
||||
<span className="checkmark" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
|
||||
<FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="f-1">
|
||||
Read
|
||||
<span className="pill" onClick={() => configure({ write: relaySettings.write, read: !relaySettings.read })}>
|
||||
<span className="checkmark" onClick={() => configure({ write: relaySettings.write, read: !relaySettings.read })}>
|
||||
<FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
|
||||
</span>
|
||||
</div>
|
||||
@ -62,7 +62,7 @@ export default function Relay(props: RelayProps) {
|
||||
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
||||
</div>
|
||||
<div>
|
||||
<span className="pill" onClick={() => setShowExtra(s => !s)}>
|
||||
<span className="icon-btn" onClick={() => setShowExtra(s => !s)}>
|
||||
<FontAwesomeIcon icon={faEllipsisVertical} />
|
||||
</span>
|
||||
</div>
|
||||
@ -79,7 +79,7 @@ export default function Relay(props: RelayProps) {
|
||||
|
||||
<div className="f-1">
|
||||
Delete
|
||||
<span className="pill" onClick={() => dispatch(removeRelay(props.addr))}>
|
||||
<span className="icon-btn" onClick={() => dispatch(removeRelay(props.addr))}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</span>
|
||||
</div>
|
||||
|
@ -23,6 +23,7 @@
|
||||
|
||||
.text p {
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text pre {
|
||||
@ -52,9 +53,44 @@
|
||||
max-height: 500px;
|
||||
margin: 10px auto;
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.text iframe, .text video {
|
||||
width: -webkit-fill-available;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.text .truncate {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
max-width: 260px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--highlight);
|
||||
height: var(--font-size);
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.text .truncate {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
.text .truncate {
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.text .truncate {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.text .truncate {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
@ -37,7 +37,11 @@ function transformHttpLink(a: string) {
|
||||
return <video key={url.toString()} src={url.toString()} controls />
|
||||
}
|
||||
default:
|
||||
return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
||||
return (
|
||||
<div className="truncate">
|
||||
<a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
} else if (tweetId) {
|
||||
return (
|
||||
@ -62,11 +66,19 @@ function transformHttpLink(a: string) {
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||
return (
|
||||
<div className="truncate">
|
||||
<a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
}
|
||||
return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||
return (
|
||||
<div className="truncate">
|
||||
<a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function extractLinks(fragments: Fragment[]) {
|
||||
|
19
src/element/UnreadCount.css
Normal file
19
src/element/UnreadCount.css
Normal file
@ -0,0 +1,19 @@
|
||||
.pill {
|
||||
font-size: var(--font-size-small);
|
||||
display: inline-block;
|
||||
background-color: var(--gray-tertiary);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
.pill.unread {
|
||||
background-color: var(--gray);
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
.pill:hover {
|
||||
cursor: pointer;
|
||||
}
|
11
src/element/UnreadCount.tsx
Normal file
11
src/element/UnreadCount.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import "./UnreadCount.css"
|
||||
|
||||
const UnreadCount = ({ unread }: { unread: number }) => {
|
||||
return (
|
||||
<span className={`pill ${unread > 0 ? 'unread' : ''}`}>
|
||||
{unread}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default UnreadCount
|
6
src/element/ZapButton.css
Normal file
6
src/element/ZapButton.css
Normal file
@ -0,0 +1,6 @@
|
||||
.zap-button {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--highlight);
|
||||
padding: 4px 8px;
|
||||
border-radius: 16px;
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
import "./ZapButton.css";
|
||||
import { faBolt } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
@ -14,12 +15,12 @@ const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className="pill" onClick={(e) => setZap(true)}>
|
||||
<div className="zap-button" onClick={(e) => setZap(true)}>
|
||||
<FontAwesomeIcon icon={faBolt} />
|
||||
</span>
|
||||
</div>
|
||||
<LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ZapButton;
|
||||
export default ZapButton;
|
||||
|
@ -1,21 +1,27 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--font-color: #FFF;
|
||||
--bg-color: #000;
|
||||
--font-color: #FFF;
|
||||
--font-secondary-color: #555;
|
||||
--font-tertiary-color: #999;
|
||||
--font-size: 16px;
|
||||
--font-size-small: 14px;
|
||||
16? 16?
|
||||
--font-size-tiny: 12px;
|
||||
--modal-bg-color: rgba(0,0,0, 0.8);
|
||||
--note-bg: #111;
|
||||
--highlight-light: #ffd342;
|
||||
--highlight: #ffc400;
|
||||
--highlight-dark: #dba800;
|
||||
--error: #FF6053;
|
||||
--success: #2AD544;
|
||||
|
||||
--gray-superlight: #EEE;
|
||||
--gray-light: #999;
|
||||
--gray-medium: #666;
|
||||
--gray: #333;
|
||||
--gray-secondary: #222;
|
||||
--gray-tertiary: #444;
|
||||
--highlight-light: #ffd342;
|
||||
--highlight: #ffc400;
|
||||
--highlight-dark: #dba800;
|
||||
--error: #FF6053;
|
||||
--success: #2AD544;
|
||||
--gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light));
|
||||
--snort-gradient: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--highlight-dark));
|
||||
--nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
|
||||
@ -24,13 +30,16 @@
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--font-color: #000;
|
||||
--bg-color: #FFF;
|
||||
--font-color: #000;
|
||||
--font-secondary-color: #444;
|
||||
--font-tertiary-color: #666;
|
||||
--highlight-light: #FFC852;
|
||||
--highlight: #FF9B00;
|
||||
--highlight-dark: #944F05;
|
||||
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
||||
--note-bg: #eee;
|
||||
--note-bg: #EEE;
|
||||
|
||||
--gray: #CCC;
|
||||
--gray-secondary: #DDD;
|
||||
--gray-tertiary: #EEE;
|
||||
@ -46,12 +55,11 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--font-color);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.page {
|
||||
@ -196,26 +204,6 @@ a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
span.pill {
|
||||
display: inline-block;
|
||||
background-color: var(--gray);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
span.pill.active {
|
||||
background-color: var(--gray-tertiary);
|
||||
color: var(--font-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.pill:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -362,4 +350,6 @@ body.scroll-lock {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight { color: var(--highlight); }
|
||||
|
@ -30,4 +30,4 @@
|
||||
|
||||
.write-dm-spacer {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
@ -18,7 +18,7 @@ const DonatePage = () => {
|
||||
Your donations are greatly appreciated
|
||||
</p>
|
||||
<p>
|
||||
Check out the code here: <a href="https://github.com/v0l/snort" rel="noreferrer" target="_blank">https://github.com/v0l/snort</a>
|
||||
Check out the code here: <a className="highlight" href="https://github.com/v0l/snort" rel="noreferrer" target="_blank">https://github.com/v0l/snort</a>
|
||||
</p>
|
||||
<h3>Developers</h3>
|
||||
{Developers.map(a => <ProfilePreview pubkey={a} key={a} actions={<ZapButton pubkey={a} />} />)}
|
||||
@ -26,4 +26,4 @@ const DonatePage = () => {
|
||||
);
|
||||
}
|
||||
|
||||
export default DonatePage;
|
||||
export default DonatePage;
|
||||
|
@ -2,6 +2,7 @@ import { useMemo } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux"
|
||||
|
||||
import { HexKey, RawEvent } from "../nostr";
|
||||
import UnreadCount from "../element/UnreadCount";
|
||||
import ProfileImage from "../element/ProfileImage";
|
||||
import { hexToBech32 } from "../Util";
|
||||
import { incDmInteraction } from "../state/Login";
|
||||
@ -27,9 +28,7 @@ export default function MessagesPage() {
|
||||
return (
|
||||
<div className="flex mb10" key={chat.pubkey}>
|
||||
<ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
|
||||
<span className="pill">
|
||||
{chat.unreadMessages}
|
||||
</span>
|
||||
<UnreadCount unread={chat.unreadMessages} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -48,10 +48,12 @@ export default function ProfilePage() {
|
||||
function username() {
|
||||
return (
|
||||
<div className="name">
|
||||
<h2>{user?.display_name || user?.name || 'Nostrich'}</h2>
|
||||
<h2>
|
||||
{user?.display_name || user?.name || 'Nostrich'}
|
||||
<FollowsYou pubkey={id} />
|
||||
</h2>
|
||||
<Copy text={params.id || ""} />
|
||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||
<FollowsYou pubkey={id} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -39,3 +39,7 @@
|
||||
max-height: 300px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.settings .actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
@ -230,11 +230,11 @@ export default function SettingsPage() {
|
||||
<div className="flex f-col">
|
||||
{Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex actions">
|
||||
<div className="f-grow"></div>
|
||||
<div className="btn" onClick={() => saveRelays()}>Save</div>
|
||||
</div>
|
||||
{addRelay()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user
Very difficult to see