note footer ordering #91
@ -105,6 +105,12 @@
|
|||||||
padding: 0px 10px;
|
padding: 0px 10px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: var(--font-secondary-color);
|
color: var(--font-secondary-color);
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash-icon {
|
||||||
|
color: var(--error);
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction-pill .reaction-pill-number {
|
.reaction-pill .reaction-pill-number {
|
||||||
|
@ -98,21 +98,8 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
return content;
|
return content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function repostIcon() {
|
||||||
return (
|
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 ${hasReposted() ? 'reacted' : ''}`} onClick={() => repost()}>
|
||||||
<div className="reaction-pill-icon">
|
<div className="reaction-pill-icon">
|
||||||
<FontAwesomeIcon icon={faRepeat} />
|
<FontAwesomeIcon icon={faRepeat} />
|
||||||
@ -123,6 +110,18 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="footer">
|
||||||
|
<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 ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
|
<div className={`reaction-pill ${hasReacted('+') ? 'reacted' : ''} `} onClick={(e) => react("+")}>
|
||||||
<div className="reaction-pill-icon">
|
<div className="reaction-pill-icon">
|
||||||
<FontAwesomeIcon icon={faHeart} />
|
<FontAwesomeIcon icon={faHeart} />
|
||||||
@ -139,7 +138,15 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
{formatShort(groupReactions[Reaction.Negative])}
|
{formatShort(groupReactions[Reaction.Negative])}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{repostIcon()}
|
||||||
{tipButton()}
|
{tipButton()}
|
||||||
|
{isMine && (
|
||||||
|
<div className="reaction-pill trash-icon">
|
||||||
|
<div className="reaction-pill-icon">
|
||||||
|
<FontAwesomeIcon icon={faTrash} onClick={(e) => deleteEvent()} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<NoteCreator
|
<NoteCreator
|
||||||
autoFocus={true}
|
autoFocus={true}
|
||||||
|
@ -30,10 +30,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text ul, .text ol {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text li {
|
.text li {
|
||||||
margin-top: -1em;
|
margin-top: -1em;
|
||||||
}
|
}
|
||||||
@ -60,37 +56,3 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user