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 { useMemo } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { HexKey } from "../nostr";
|
import { HexKey } from "../nostr";
|
||||||
@ -21,7 +22,7 @@ export default function FollowsYou({ pubkey }: FollowsYouProps ) {
|
|||||||
|
|
||||||
return (
|
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 {
|
.note-invoice {
|
||||||
background: var(--bg-color);
|
border: 1px solid var(--font-secondary-color);
|
||||||
Redundant Redundant
Redundant Redundant
|
|||||||
border-radius: 10px;
|
border-radius: 16px;
|
||||||
Redundant Redundant
Redundant Redundant
|
|||||||
border: 1px solid var(--gray-tertiary);
|
|
||||||
Redundant Redundant
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
@ -11,5 +10,5 @@
|
|||||||
Redundant Redundant
Redundant Redundant
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note-invoice small {
|
.note-invoice small {
|
||||||
color: var(--gray-medium);
|
color: var(--font-secondary-color);
|
||||||
Redundant Redundant
Redundant Redundant
|
|||||||
}
|
}
|
||||||
|
|||||||
Redundant Redundant
Redundant Redundant
|
@ -17,9 +17,24 @@
|
|||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnurl-tip .pill.active {
|
.sat-amount {
|
||||||
color: var(--bg-color);
|
display: inline-block;
|
||||||
background-color: var(--font-color);
|
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 {
|
.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}
|
<input type="text" placeholder="Comment" className="mb10 f-grow" maxLength={payService?.commentAllowed} onChange={(e) => setComment(e.target.value)} /> : null}
|
||||||
</div>
|
</div>
|
||||||
<div className="mb10">
|
<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()}
|
{a.toLocaleString()}
|
||||||
</span>)}
|
</span>)}
|
||||||
{payService ?
|
{payService ?
|
||||||
<span className={`pill ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
|
<span className={`sat-amount ${amount === -1 ? "active" : ""}`} onClick={() => selectAmount(-1)}>
|
||||||
Custom
|
Custom
|
||||||
</span> : null}
|
</span> : null}
|
||||||
</div>
|
</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 {
|
.note {
|
||||||
margin-bottom: 10px;
|
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)
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;
|
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)
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);
|
background-color: var(--note-bg);
|
||||||
padding: 10px 10px 8px 10px;
|
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)
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;
|
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 {
|
.note.thread {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note > .header > .pfp {
|
.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)
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;
|
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)
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 {
|
.note > .header .reply {
|
||||||
font-size: 12px;
|
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)
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);
|
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)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note > .header > .info {
|
.note > .header > .info {
|
||||||
font-size: 10px;
|
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)
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;
|
white-space: nowrap;
|
||||||
color: var(--gray-light);
|
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)
|
|||||||
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)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note > .body {
|
.note > .body {
|
||||||
padding: 10px 5px;
|
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)
|
|||||||
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)
|
|||||||
overflow: hidden;
|
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;
|
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 {
|
.note > .footer {
|
||||||
text-align: right;
|
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)
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 {
|
.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;
|
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 {
|
.indented .active {
|
||||||
background-color: var(--gray-tertiary);
|
background-color: var(--gray-tertiary);
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
border-left: 3px solid var(--highlight);
|
border-left: 3px solid var(--highlight);
|
||||||
|
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)
|
|||||||
}
|
}
|
@ -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(", ");
|
let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
|
||||||
return (
|
return (
|
||||||
<div className="reply">
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
|
|||||||
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
|
import { faHeart, faReply, faThumbsDown, faTrash, faBolt, faRepeat } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
import { formatShort } from "../Number";
|
||||||
import useEventPublisher from "../feed/EventPublisher";
|
import useEventPublisher from "../feed/EventPublisher";
|
||||||
import { getReactions, normalizeReaction, Reaction } from "../Util";
|
import { getReactions, normalizeReaction, Reaction } from "../Util";
|
||||||
import { NoteCreator } from "./NoteCreator";
|
import { NoteCreator } from "./NoteCreator";
|
||||||
@ -29,7 +30,6 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
const isMine = ev.RootPubKey === login;
|
const isMine = ev.RootPubKey === login;
|
||||||
const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related]);
|
const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related]);
|
||||||
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related]);
|
const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related]);
|
||||||
|
|
||||||
const groupReactions = useMemo(() => {
|
const groupReactions = useMemo(() => {
|
||||||
return reactions?.reduce((acc, { content }) => {
|
return reactions?.reduce((acc, { content }) => {
|
||||||
let r = normalizeReaction(content);
|
let r = normalizeReaction(content);
|
||||||
@ -50,8 +50,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function react(content: string) {
|
async function react(content: string) {
|
||||||
|
if (!hasReacted(content)) {
|
||||||
let evLike = await publisher.react(ev, content);
|
let evLike = await publisher.react(ev, content);
|
||||||
publisher.broadcast(evLike);
|
publisher.broadcast(evLike);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteEvent() {
|
async function deleteEvent() {
|
||||||
@ -73,9 +75,11 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
if (service) {
|
if (service) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span className="pill" onClick={(e) => setTip(true)}>
|
<div className="reaction-pill" onClick={(e) => setTip(true)}>
|
||||||
<FontAwesomeIcon icon={faBolt} />
|
<div className="reaction-pill-icon">
|
||||||
</span>
|
<FontAwesomeIcon icon={faBolt} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -85,10 +89,10 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
function reactionIcon(content: string, reacted: boolean) {
|
function reactionIcon(content: string, reacted: boolean) {
|
||||||
switch (content) {
|
switch (content) {
|
||||||
case Reaction.Positive: {
|
case Reaction.Positive: {
|
||||||
return <FontAwesomeIcon color={reacted ? "red" : "currentColor"} icon={faHeart} />;
|
return <FontAwesomeIcon icon={faHeart} />;
|
||||||
}
|
}
|
||||||
case Reaction.Negative: {
|
case Reaction.Negative: {
|
||||||
return <FontAwesomeIcon color={reacted ? "orange" : "currentColor"} icon={faThumbsDown} />;
|
return <FontAwesomeIcon icon={faThumbsDown} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return content;
|
return content;
|
||||||
@ -97,30 +101,45 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="footer">
|
<div className="footer">
|
||||||
{isMine ? <span className="pill">
|
{isMine && (
|
||||||
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
|
<div className="reaction-pill">
|
||||||
</span> : null}
|
<div className="reaction-pill-icon">
|
||||||
{tipButton()}
|
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
|
||||||
<span className="pill" onClick={() => repost()}>
|
</div>
|
||||||
<FontAwesomeIcon icon={faRepeat} color={hasReposted() ? "green" : "currenColor"} />
|
</div>
|
||||||
{reposts.length > 0 ? <> {reposts.length}</> : null}
|
)}
|
||||||
</span>
|
<div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
|
||||||
<span className="pill" onClick={(e) => setReply(s => !s)}>
|
<div className="reaction-pill-icon">
|
||||||
<FontAwesomeIcon icon={faReply} />
|
<FontAwesomeIcon icon={faReply} />
|
||||||
</span>
|
</div>
|
||||||
{Object.keys(groupReactions || {}).map((emoji) => {
|
</div>
|
||||||
let didReact = hasReacted(emoji);
|
<div className={`reaction-pill ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
|
||||||
return (
|
<div className="reaction-pill-icon">
|
||||||
<span className="pill" onClick={() => {
|
<FontAwesomeIcon icon={faRepeat} />
|
||||||
if (!didReact) {
|
</div>
|
||||||
react(emoji);
|
{reposts.length > 0 && (
|
||||||
}
|
<div className="reaction-pill-number">
|
||||||
}} key={emoji}>
|
{formatShort(reposts.length)}
|
||||||
{reactionIcon(emoji, didReact)}
|
</div>
|
||||||
{groupReactions[emoji] ? <> {groupReactions[emoji]}</> : null}
|
)}
|
||||||
</span>
|
</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>
|
</div>
|
||||||
<NoteCreator
|
<NoteCreator
|
||||||
autoFocus={true}
|
autoFocus={true}
|
||||||
|
@ -1,29 +1,24 @@
|
|||||||
.reaction {
|
.reaction {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction > .note {
|
.reaction > .note {
|
||||||
margin: 10px 20px;
|
margin: 10px 20px;
|
||||||
border: 1px solid var(--gray);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction > .header > .pfp {
|
.reaction > .header {
|
||||||
flex-grow: 1;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction > .header .reply {
|
.reaction > .header .reply {
|
||||||
font-size: small;
|
font-size: var(--font-size-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction > .header > .info {
|
.reaction > .header > .info {
|
||||||
color: var(--gray-light);
|
font-size: var(--font-size);
|
||||||
font-size: 10px;
|
white-space: nowrap;
|
||||||
align-self: flex-start;
|
color: var(--font-secondary-color);
|
||||||
}
|
margin-right: 24px;
|
||||||
|
|
||||||
.reaction .reaction-text {
|
|
||||||
margin-left: .2em;
|
|
||||||
color: var(--gray-light);
|
|
||||||
}
|
}
|
||||||
|
@ -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
|
* Some clients embed the reposted note in the content
|
||||||
*/
|
*/
|
||||||
|
@ -25,11 +25,10 @@ export default function NoteTime(props: NoteTimeProps) {
|
|||||||
return fallback
|
return fallback
|
||||||
} else {
|
} else {
|
||||||
let mins = Math.floor(absAgo / MinuteInMs);
|
let mins = Math.floor(absAgo / MinuteInMs);
|
||||||
let minutes = mins === 1 ? 'min' : 'mins'
|
|
||||||
if(ago < 0) {
|
if(ago < 0) {
|
||||||
return `in ${mins} ${minutes}`;
|
return `in ${mins}m`;
|
||||||
}
|
}
|
||||||
return `${mins} ${minutes} ago`;
|
return `${mins}m`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: min-content auto;
|
grid-template-columns: min-content auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-size: var(--font-size-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
.relay > div {
|
.relay > div {
|
||||||
@ -18,4 +19,24 @@
|
|||||||
background-color: var(--gray-tertiary);
|
background-color: var(--gray-tertiary);
|
||||||
border-radius: 0 0 5px 5px;
|
border-radius: 0 0 5px 5px;
|
||||||
white-space: nowrap;
|
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>
|
<b className="f-2">{name}</b>
|
||||||
<div className="f-1">
|
<div className="f-1">
|
||||||
Write
|
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} />
|
<FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="f-1">
|
<div className="f-1">
|
||||||
Read
|
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} />
|
<FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -62,7 +62,7 @@ export default function Relay(props: RelayProps) {
|
|||||||
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="pill" onClick={() => setShowExtra(s => !s)}>
|
<span className="icon-btn" onClick={() => setShowExtra(s => !s)}>
|
||||||
<FontAwesomeIcon icon={faEllipsisVertical} />
|
<FontAwesomeIcon icon={faEllipsisVertical} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -79,7 +79,7 @@ export default function Relay(props: RelayProps) {
|
|||||||
|
|
||||||
<div className="f-1">
|
<div className="f-1">
|
||||||
Delete
|
Delete
|
||||||
<span className="pill" onClick={() => dispatch(removeRelay(props.addr))}>
|
<span className="icon-btn" onClick={() => dispatch(removeRelay(props.addr))}>
|
||||||
<FontAwesomeIcon icon={faTrash} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,6 +23,7 @@
|
|||||||
|
|
||||||
.text p {
|
.text p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text pre {
|
.text pre {
|
||||||
@ -52,9 +53,44 @@
|
|||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text iframe, .text video {
|
.text iframe, .text video {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
aspect-ratio: 16 / 9;
|
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 />
|
return <video key={url.toString()} src={url.toString()} controls />
|
||||||
}
|
}
|
||||||
default:
|
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) {
|
} else if (tweetId) {
|
||||||
return (
|
return (
|
||||||
@ -62,11 +66,19 @@ function transformHttpLink(a: string) {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
} else {
|
} 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) {
|
} 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[]) {
|
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 { faBolt } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@ -14,9 +15,9 @@ const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span className="pill" onClick={(e) => setZap(true)}>
|
<div className="zap-button" onClick={(e) => setZap(true)}>
|
||||||
<FontAwesomeIcon icon={faBolt} />
|
<FontAwesomeIcon icon={faBolt} />
|
||||||
</span>
|
</div>
|
||||||
<LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
|
<LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
@ -1,21 +1,27 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--font-color: #FFF;
|
|
||||||
--bg-color: #000;
|
--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);
|
--modal-bg-color: rgba(0,0,0, 0.8);
|
||||||
--note-bg: #111;
|
--note-bg: #111;
|
||||||
|
--highlight-light: #ffd342;
|
||||||
|
--highlight: #ffc400;
|
||||||
|
--highlight-dark: #dba800;
|
||||||
|
--error: #FF6053;
|
||||||
|
--success: #2AD544;
|
||||||
|
|
||||||
--gray-superlight: #EEE;
|
--gray-superlight: #EEE;
|
||||||
--gray-light: #999;
|
--gray-light: #999;
|
||||||
--gray-medium: #666;
|
--gray-medium: #666;
|
||||||
--gray: #333;
|
--gray: #333;
|
||||||
--gray-secondary: #222;
|
--gray-secondary: #222;
|
||||||
--gray-tertiary: #444;
|
--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));
|
--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));
|
--snort-gradient: linear-gradient(to bottom right, var(--highlight-light), var(--highlight), var(--highlight-dark));
|
||||||
--nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
|
--nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5);
|
||||||
@ -24,13 +30,16 @@
|
|||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--font-color: #000;
|
|
||||||
--bg-color: #FFF;
|
--bg-color: #FFF;
|
||||||
|
--font-color: #000;
|
||||||
|
--font-secondary-color: #444;
|
||||||
|
--font-tertiary-color: #666;
|
||||||
--highlight-light: #FFC852;
|
--highlight-light: #FFC852;
|
||||||
--highlight: #FF9B00;
|
--highlight: #FF9B00;
|
||||||
--highlight-dark: #944F05;
|
--highlight-dark: #944F05;
|
||||||
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
||||||
--note-bg: #eee;
|
--note-bg: #EEE;
|
||||||
|
|
||||||
--gray: #CCC;
|
--gray: #CCC;
|
||||||
--gray-secondary: #DDD;
|
--gray-secondary: #DDD;
|
||||||
--gray-tertiary: #EEE;
|
--gray-tertiary: #EEE;
|
||||||
@ -46,12 +55,11 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
font-size: 14px;
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
monospace;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
@ -196,26 +204,6 @@ a {
|
|||||||
line-height: 1.3em;
|
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 {
|
div.form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -363,3 +351,5 @@ body.scroll-lock {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.highlight { color: var(--highlight); }
|
||||||
|
@ -18,7 +18,7 @@ const DonatePage = () => {
|
|||||||
Your donations are greatly appreciated
|
Your donations are greatly appreciated
|
||||||
</p>
|
</p>
|
||||||
<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>
|
</p>
|
||||||
<h3>Developers</h3>
|
<h3>Developers</h3>
|
||||||
{Developers.map(a => <ProfilePreview pubkey={a} key={a} actions={<ZapButton pubkey={a} />} />)}
|
{Developers.map(a => <ProfilePreview pubkey={a} key={a} actions={<ZapButton pubkey={a} />} />)}
|
||||||
|
@ -2,6 +2,7 @@ import { useMemo } from "react";
|
|||||||
import { useDispatch, useSelector } from "react-redux"
|
import { useDispatch, useSelector } from "react-redux"
|
||||||
|
|
||||||
import { HexKey, RawEvent } from "../nostr";
|
import { HexKey, RawEvent } from "../nostr";
|
||||||
|
import UnreadCount from "../element/UnreadCount";
|
||||||
import ProfileImage from "../element/ProfileImage";
|
import ProfileImage from "../element/ProfileImage";
|
||||||
import { hexToBech32 } from "../Util";
|
import { hexToBech32 } from "../Util";
|
||||||
import { incDmInteraction } from "../state/Login";
|
import { incDmInteraction } from "../state/Login";
|
||||||
@ -27,9 +28,7 @@ export default function MessagesPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex mb10" key={chat.pubkey}>
|
<div className="flex mb10" key={chat.pubkey}>
|
||||||
<ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
|
<ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
|
||||||
<span className="pill">
|
<UnreadCount unread={chat.unreadMessages} />
|
||||||
{chat.unreadMessages}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -48,10 +48,12 @@ export default function ProfilePage() {
|
|||||||
function username() {
|
function username() {
|
||||||
return (
|
return (
|
||||||
<div className="name">
|
<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 || ""} />
|
<Copy text={params.id || ""} />
|
||||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||||
<FollowsYou pubkey={id} />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -39,3 +39,7 @@
|
|||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings .actions {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
@ -230,7 +230,7 @@ export default function SettingsPage() {
|
|||||||
<div className="flex f-col">
|
<div className="flex f-col">
|
||||||
{Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
|
{Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex">
|
<div className="flex actions">
|
||||||
<div className="f-grow"></div>
|
<div className="f-grow"></div>
|
||||||
<div className="btn" onClick={() => saveRelays()}>Save</div>
|
<div className="btn" onClick={() => saveRelays()}>Save</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user
Very difficult to see