Kieran
/
snort
5
14
Fork 14
Code Issues 53 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

note footer ordering (#91) 

* note footer ordering

* dont show number if no reposts
This commit is contained in:
Alejandro 2023-01-19 18:56:39 +01:00 committed by GitHub
parent 546acc8d9a
commit 39cd6fc3a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/element/Note.css
View File

@ -105,6 +105,12 @@
padding: 0px 10px;
user-select: none;
color: var(--font-secondary-color);
font-feature-settings: "tnum";
}
.trash-icon {
color: var(--error);
margin-right: auto;
}
.reaction-pill .reaction-pill-number {

41
src/element/NoteFooter.tsx
View File

@ -98,31 +98,30 @@ export default function NoteFooter(props: NoteFooterProps) {
return content;
}
function repostIcon() {
return (
<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>
)
}
return (
<>
<div className="footer">
{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} />
</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} />
@ -139,7 +138,15 @@ export default function NoteFooter(props: NoteFooterProps) {
{formatShort(groupReactions[Reaction.Negative])}
</div>
</div>
{repostIcon()}
{tipButton()}
{isMine && (
<div className="reaction-pill trash-icon">
<div className="reaction-pill-icon">
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
</div>
</div>
)}
</div>
<NoteCreator
autoFocus={true}

38
src/element/Text.css
View File

@ -30,10 +30,6 @@
margin: 0;
}
.text ul, .text ol {
margin: 0;
}
.text li {
margin-top: -1em;
}
@ -60,37 +56,3 @@
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;
}
}