fix multiline logs, add txt link again
This commit is contained in:
parent
6138493d2a
commit
e8193c00c8
5 changed files with 64 additions and 31 deletions
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,7 @@
|
|||
import React, { useContext } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useAvailableLogs } from "../hooks/useAvailableLogs";
|
||||
import { Txt } from "../icons/Txt";
|
||||
import { store } from "../store";
|
||||
import { Log } from "./Log";
|
||||
|
||||
|
@ -9,6 +10,18 @@ const LogContainerDiv = styled.div`
|
|||
padding: 2rem;
|
||||
padding-top: 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.txt {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 20px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function LogContainer() {
|
||||
|
@ -17,6 +30,9 @@ export function LogContainer() {
|
|||
const availableLogs = useAvailableLogs(state.currentChannel, state.currentUsername);
|
||||
|
||||
return <LogContainerDiv>
|
||||
{availableLogs.map((log, index) => <Log key={`${log.year}:${log.month}`} year={log.year} month={log.month} initialLoad={index === 0} />)}
|
||||
{availableLogs.map((log, index) => <React.Fragment key={`${log.year}:${log.month}`}>
|
||||
<a className="txt" target="__blank" href={`${state.apiBaseUrl}/channel/${state.currentChannel}/user/${state.currentUsername}/${log.year}/${log.month}`} rel="noopener noreferrer"><Txt /></a>
|
||||
<Log year={log.year} month={log.month} initialLoad={index === 0} />
|
||||
</React.Fragment>)}
|
||||
</LogContainerDiv>
|
||||
}
|
|
@ -15,22 +15,27 @@ dayjs.tz.guess()
|
|||
|
||||
const LogLineContainer = styled.li`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1px;
|
||||
|
||||
.timestamp {
|
||||
color: var(--text-dark);
|
||||
user-select: none;
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 5px;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-left: 5px;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -8,8 +8,6 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
|
|||
const MessageContainer = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
|
||||
a {
|
||||
margin: 0 2px;
|
||||
|
@ -17,8 +15,8 @@ const MessageContainer = styled.div`
|
|||
`;
|
||||
|
||||
const Emote = styled.img`
|
||||
/* transform: scale(0.5); */
|
||||
max-height: 14px;
|
||||
margin: 0 2px;
|
||||
width: auto;
|
||||
`;
|
||||
|
||||
|
|
14
web/src/icons/Txt.tsx
Normal file
14
web/src/icons/Txt.tsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import React from "react";
|
||||
|
||||
export function Txt() {
|
||||
return (
|
||||
<svg className={"txt"} height={32} viewBox="0 0 32 32" width={32}>
|
||||
<title />
|
||||
<path
|
||||
d="M21 26v2.003A1.995 1.995 0 0119.003 30H3.997A2 2 0 012 27.993V5.007C2 3.898 2.9 3 4.009 3H14v6.002c0 1.111.898 1.998 2.006 1.998H21v2h-8.993A3.003 3.003 0 009 15.999V23A2.996 2.996 0 0012.007 26H21zM15 3v5.997c0 .554.451 1.003.99 1.003H21l-6-7zm-3.005 11C10.893 14 10 14.9 10 15.992v7.016A2 2 0 0011.995 25h17.01C30.107 25 31 24.1 31 23.008v-7.016A2 2 0 0029.005 14h-17.01zM14 17v6h1v-6h2v-1h-5v1h2zm6 2.5L18 16h1l1.5 2.625L22 16h1l-2 3.5 2 3.5h-1l-1.5-2.625L19 23h-1l2-3.5zm6-2.5v6h1v-6h2v-1h-5v1h2z"
|
||||
fill="#929292"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
Loading…
Add table
Reference in a new issue