qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-10-23 05:22:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

profile

Browse source
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="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="preload" href="/assets/dist/_colors.css" as="style">
<link rel="preload" href="/assets/dist/base.css" as="style">
<link rel="preload" href="/assets/dist/page.css" as="style">
<link rel="preload" href="/assets/Fork-Awesome/css/fork-awesome.min.css" as="style">
<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="preload" href="/assets/fonts/noto-sans-v27-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/noto-sans-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/assets/dist/default.css">
<link rel="stylesheet" href="/assets/dist/style.css">
<link rel="stylesheet" href="/@admin/custom.css">
<script type="text/javascript" src="/assets/dist/frontend.js" async="" defer=""></script>
<title>@admin@localhost:8080</title>
</head>
<body class="page">
<body class="page wider">
<script type="text/javascript" src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>
<header class="page-header">
<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 {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 0;
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 min(92%, 50rem) 1fr;
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 {

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

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

214
web/source/css_old/profile.css → web/source/css/pages/profile.css
View file

@ -1,35 +1,102 @@
/*
GoToSocial
Copyright (C) GoToSocial Authors admin@gotosocial.org
SPDX-License-Identifier: AGPL-3.0-or-later
.profile {
.column-split {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
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.
.statuses-wrapper {
flex: 65 25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0%;
}
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.
.statuses {
display: flex;
flex-direction: column;
gap: 0.4rem;
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/>.
*/
.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;
}
}
.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;
}
.backnextlinks {
display: flex;
justify-content: space-between;
.profile .column-split {
display: flex;
flex-wrap: wrap;
gap: 1rem;
.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 {
@ -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;
}
}