Compare commits
No commits in common. "1526e4b2fe27bb27a6778d4d13b00b4f7ad18f66" and "d2d244c4d7abbfa7cfcb38a8ce6933979a3d2998" have entirely different histories.
1526e4b2fe
...
d2d244c4d7
3 changed files with 22 additions and 41 deletions
|
@ -18,7 +18,7 @@ Tutu trys to push the Web technology to its limit. Some features might not be av
|
||||||
|
|
||||||
The "next" branch of the app is built on every commit pushed into "master". You can tatse latest change but risks your data.
|
The "next" branch of the app is built on every commit pushed into "master". You can tatse latest change but risks your data.
|
||||||
|
|
||||||
[Launch Tutu (Next)](https://master.tututheapp.pages.dev)
|
[Launch Tutu (Next)](https://next.tututheapp.pages.dev)
|
||||||
|
|
||||||
## Build & Depoly
|
## Build & Depoly
|
||||||
|
|
||||||
|
|
|
@ -8,21 +8,6 @@
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)));
|
|
||||||
|
|
||||||
>img {
|
|
||||||
object-fit: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
& a {
|
& a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -38,11 +23,11 @@
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&> :nth-child(2) {
|
& > :nth-child(2) {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&> :last-child {
|
& > :last-child {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
@ -66,14 +51,14 @@
|
||||||
table.acct-fields {
|
table.acct-fields {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|
||||||
& td>a {
|
& td > a {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& a>.invisible {
|
& a > .invisible {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -104,4 +89,4 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,6 @@ import {
|
||||||
IconButton,
|
IconButton,
|
||||||
ListItemAvatar,
|
ListItemAvatar,
|
||||||
ListItemIcon,
|
ListItemIcon,
|
||||||
ListItemSecondaryAction,
|
|
||||||
ListItemText,
|
ListItemText,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
|
@ -39,8 +38,8 @@ import {
|
||||||
PlaylistAdd,
|
PlaylistAdd,
|
||||||
Send,
|
Send,
|
||||||
Share,
|
Share,
|
||||||
|
SmartToy,
|
||||||
SmartToySharp,
|
SmartToySharp,
|
||||||
Subject,
|
|
||||||
Translate,
|
Translate,
|
||||||
Verified,
|
Verified,
|
||||||
} from "@suid/icons-material";
|
} from "@suid/icons-material";
|
||||||
|
@ -296,23 +295,7 @@ const Profile: Component = () => {
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<Group />
|
<Group />
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText>Followers</ListItemText>
|
<ListItemText>Subscribers</ListItemText>
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<span aria-label="The number of the account follower">
|
|
||||||
{profile()?.followersCount ?? ""}
|
|
||||||
</span>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem disabled>
|
|
||||||
<ListItemIcon>
|
|
||||||
<Subject />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>Following</ListItemText>
|
|
||||||
<ListItemSecondaryAction>
|
|
||||||
<span aria-label="The number the account following">
|
|
||||||
{profile()?.followingCount ?? ""}
|
|
||||||
</span>
|
|
||||||
</ListItemSecondaryAction>
|
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem disabled>
|
<MenuItem disabled>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
|
@ -320,6 +303,12 @@ const Profile: Component = () => {
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText>Blocklist</ListItemText>
|
<ListItemText>Blocklist</ListItemText>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
<MenuItem disabled>
|
||||||
|
<ListItemIcon>
|
||||||
|
<Translate />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>Translate Name and Bio...</ListItemText>
|
||||||
|
</MenuItem>
|
||||||
<MenuItem disabled>
|
<MenuItem disabled>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<Send />
|
<Send />
|
||||||
|
@ -347,14 +336,21 @@ const Profile: Component = () => {
|
||||||
</Menu>
|
</Menu>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
width: "100%",
|
||||||
height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
|
height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
|
||||||
|
"margin-top":
|
||||||
|
"calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)))",
|
||||||
}}
|
}}
|
||||||
class="banner"
|
|
||||||
role="presentation"
|
role="presentation"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
ref={(e) => obx.observe(e)}
|
ref={(e) => obx.observe(e)}
|
||||||
src={bannerImg()}
|
src={bannerImg()}
|
||||||
|
style={{
|
||||||
|
"object-fit": "cover",
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
crossOrigin="anonymous"
|
crossOrigin="anonymous"
|
||||||
alt={`Banner image for ${profile()?.displayName || "the user"}`}
|
alt={`Banner image for ${profile()?.displayName || "the user"}`}
|
||||||
onLoad={(event) => {
|
onLoad={(event) => {
|
||||||
|
|
Loading…
Reference in a new issue