mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

profile

This commit is contained in:
f0x 2024-07-30 13:35:56 +02:00
parent 202fdf1ec1
commit 589ac5da55
5 changed files with 106 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/assets/static-pages/profile.html
View File

@ -20,27 +20,16 @@
<link rel="icon" href="http://localhost:8080/assets/logo.webp" type="image/webp"> <link rel="icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
<link rel="apple-touch-icon" href="http://localhost:8080/assets/logo.webp" type="image/webp"> <link rel="apple-touch-icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
<link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp"> <link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp">
<link rel="preload" href="/assets/dist/_colors.css" as="style"> <link rel="preload" href="/assets/fonts/noto-sans-v27-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/dist/base.css" as="style"> <link rel="preload" href="/assets/fonts/noto-sans-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/dist/page.css" as="style"> <link rel="stylesheet" href="/assets/dist/default.css">
<link rel="preload" href="/assets/Fork-Awesome/css/fork-awesome.min.css" as="style"> <link rel="stylesheet" href="/assets/dist/style.css">
<link rel="preload" href="/assets/dist/status.css" as="style">
<link rel="preload" href="/assets/dist/thread.css" as="style">
<link rel="preload" href="/assets/dist/profile.css" as="style">
<link rel="preload" href="/@admin/custom.css" as="style">
<link rel="stylesheet" href="/assets/dist/_colors.css">
<link rel="stylesheet" href="/assets/dist/base.css">
<link rel="stylesheet" href="/assets/dist/page.css">
<link rel="stylesheet" href="/assets/Fork-Awesome/css/fork-awesome.min.css">
<link rel="stylesheet" href="/assets/dist/status.css">
<link rel="stylesheet" href="/assets/dist/thread.css">
<link rel="stylesheet" href="/assets/dist/profile.css">
<link rel="stylesheet" href="/@admin/custom.css"> <link rel="stylesheet" href="/@admin/custom.css">
<script type="text/javascript" src="/assets/dist/frontend.js" async="" defer=""></script> <script type="text/javascript" src="/assets/dist/frontend.js" async="" defer=""></script>
<title>@admin@localhost:8080</title> <title>@admin@localhost:8080</title>
</head> </head>
<body class="page"> <body class="page wider">
<script type="text/javascript" src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script> <script type="text/javascript" src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>
<header class="page-header"> <header class="page-header">
<a aria-label="GoToSocial Testrig Instance. Go to instance homepage" href="/" class="nounderline"> <a aria-label="GoToSocial Testrig Instance. Go to instance homepage" href="/" class="nounderline">

1
web/source/css/base/main.css
View File

@ -51,7 +51,6 @@ a {
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem;
padding: 0; padding: 0;
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {

5
web/source/css/layout/page.css
View File

@ -5,6 +5,11 @@
grid-template-columns: 1fr minmax(auto, 50rem) 1fr; grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
grid-template-columns: 1fr min(92%, 50rem) 1fr; grid-template-columns: 1fr min(92%, 50rem) 1fr;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
&.wider { /* used on profile.tmpl, giving more space for it's own 2 column layout */
grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
grid-template-columns: 1fr min(92%, 65rem) 1fr;
}
} }
.page-header, .page-footer { .page-header, .page-footer {

2
web/source/css/layout/sectioned.css
View File

@ -1,4 +1,6 @@
main.sectioned { main.sectioned {
gap: 2rem;
section { section {
padding: 1.5rem; padding: 1.5rem;
background: $bg-accent; background: $bg-accent;

218
web/source/css_old/profile.css → web/source/css/pages/profile.css
View File

@ -1,37 +1,104 @@
/* .profile {
GoToSocial .column-split {
Copyright (C) GoToSocial Authors admin@gotosocial.org
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.page {
/*
Profile page can be a little wider than default
page, since we're using a side-by-side column view.
*/
grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
grid-template-columns: 1fr min(92%, 65rem) 1fr;
}
.profile .column-split {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
} }
.statuses-wrapper {
flex: 65 25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0%;
}
.statuses {
display: flex;
flex-direction: column;
gap: 0.4rem;
.rss-icon {
display: block;
margin: -0.25rem 0;
.fa {
font-size: 2rem;
object-fit: contain;
vertical-align: middle;
color: $orange2;
/*
Can't size a single-color background, so we use
a linear-gradient that's effectively white.
*/
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
}
.backnextlinks {
display: flex;
justify-content: space-between;
.next {
margin-left: auto;
}
}
}
.about-user {
flex: 35 14rem;
border-radius: $br;
overflow: hidden;
.col-header {
margin-bottom: -0.25rem;
}
dt {
font-weight: bold;
}
.fields {
background: $profile-bg;
display: flex;
flex-direction: column;
padding: 0 0.5rem;
padding-top: 0.25rem;
.field {
padding: 0.25rem;
display: flex;
flex-direction: column;
border-bottom: 0.1rem solid $gray2;
> dt, > dd {
word-break: break-word;
}
&:first-child {
border-top: 0.1rem solid $gray2;
}
}
}
.bio {
background: $profile-bg;
padding: 1rem 0.75rem;
padding-bottom: 1.25rem;
}
.accountstats {
background: $bg-accent;
padding: 0.75rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1rem;
}
}
}
.profile .profile-header { .profile .profile-header {
background: $profile-bg; background: $profile-bg;
border-radius: $br; border-radius: $br;
@ -231,96 +298,3 @@
} }
} }
} }
.profile .statuses-wrapper {
flex: 65 25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0%;
}
.profile .statuses {
display: flex;
flex-direction: column;
gap: 0.4rem;
.rss-icon {
display: block;
margin: -0.25rem 0;
.fa {
font-size: 2rem;
object-fit: contain;
vertical-align: middle;
color: $orange2;
/*
Can't size a single-color background, so we use
a linear-gradient that's effectively white.
*/
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
}
.backnextlinks {
display: flex;
justify-content: space-between;
.next {
margin-left: auto;
}
}
}
.profile .about-user {
flex: 35 14rem;
border-radius: $br;
overflow: hidden;
.col-header {
margin-bottom: -0.25rem;
}
dt {
font-weight: bold;
}
.fields {
background: $profile-bg;
display: flex;
flex-direction: column;
padding: 0 0.5rem;
padding-top: 0.25rem;
.field {
padding: 0.25rem;
display: flex;
flex-direction: column;
border-bottom: 0.1rem solid $gray2;
> dt, > dd {
word-break: break-word;
}
&:first-child {
border-top: 0.1rem solid $gray2;
}
}
}
.bio {
background: $profile-bg;
padding: 1rem 0.75rem;
padding-bottom: 1.25rem;
}
.accountstats {
background: $bg-accent;
padding: 0.75rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1rem;
}
}