me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve a bunch of styles, formatting and layout

Browse Source
This commit is contained in:
Alessio 2023-08-13 05:19:13 -03:00
parent b0a44063e4
commit cd1043215c
6 changed files with 175 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
internal/webserver/response_helpers.go
View File

@ -99,7 +99,6 @@ func (app *Application) get_active_user() scraper.User {
return app.ActiveUser return app.ActiveUser
} }
func func_map(extras template.FuncMap) template.FuncMap { func func_map(extras template.FuncMap) template.FuncMap {
ret := sprig.FuncMap() ret := sprig.FuncMap()
for i := range extras { for i := range extras {

263
internal/webserver/static/styles.css
View File

@ -1,10 +1,10 @@
:root { :root {
--color-twitter-text-gray: #536171; --color-twitter-text-gray: #536171;
--color-twitter-blue: #1b95e0; /* hsv(203, 87.9, 87,8) */ --color-twitter-blue: #1b95e0; /* hsv(203, 87.9, 87,8) */
--color-twitter-blue-light: #7cc5f6; /* hsv(204, 49.6, 96.5) */ --color-twitter-blue-light: #7cc5f6; /* hsv(204, 49.6, 96.5) */
--color-twitter-off-white: #f7f9f9; /* hsv(180, 0.8, 97.6) */ --color-twitter-off-white: #f7f9f9; /* hsv(180, 0.8, 97.6) */
--color-twitter-off-white-dark: #dae5e5; /* hsv(180, 4.8, 89.8) */ --color-twitter-off-white-dark: #dae5e5; /* hsv(180, 4.8, 89.8) */
--color-outline-gray: #dcdcdc; --color-outline-gray: #dcdcdc;
/* /*
const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220); const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220);
@ -24,11 +24,11 @@ const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
} }
html { html {
/* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering / stuff moving btw page loads */ /* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering / stuff moving btw page loads */
overflow-y: scroll; overflow-y: scroll;
} }
body { body {
margin: 0 30%; margin: 0 30%;
border-color: var(--color-twitter-off-white-dark); border-color: var(--color-twitter-off-white-dark);
border-right-style: solid; border-right-style: solid;
border-left-style: solid; border-left-style: solid;
@ -38,212 +38,217 @@ body {
font-family: "Titillium Web"; font-family: "Titillium Web";
} }
main { main {
padding-top: 4em; padding-top: 4em;
} }
input, select { input, select {
font-family: inherit; font-family: inherit;
font-size: 1em; font-size: 1em;
padding: 0.2em 0.6em; padding: 0.2em 0.6em;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0.5em; border-radius: 0.5em;
} }
.tweet { .tweet {
padding: 0 1.5em; padding: 0 1.5em;
} }
:not(.focused-tweet) > .tweet { :not(.focused-tweet) > .tweet {
cursor: pointer; cursor: pointer;
} }
.quoted-tweet { .quoted-tweet {
padding: 1.3em; padding: 1.3em;
margin-top: 1em; margin-top: 1em;
outline-color: lightgray; outline-color: lightgray;
outline-style: solid; outline-style: solid;
outline-width: 1px; outline-width: 1px;
border-radius: 20px; border-radius: 20px;
} }
.profile-banner-image { .profile-banner-image {
width: 100%; width: 100%;
} }
.unstyled-link { .unstyled-link {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
.author-info { .author-info {
display: flex; display: flex;
align-items: center; align-items: center;
}
.author-info a {
line-height: 0;
} }
.author-info, .tweet-text { .author-info, .tweet-text {
cursor: default; cursor: default;
} }
.name-and-handle { .name-and-handle {
padding: 0 0.5em; padding: 0 0.6em !important; /* !important to make the ".quick-link .span" rule in the login button not overrule it */
} }
.display-name { .display-name {
font-weight: bold; font-weight: bold;
} }
.handle { .handle {
color: var(--color-twitter-text-gray); color: var(--color-twitter-text-gray);
} }
.tweet-header-container { .tweet-header-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.reply-mentions-container { .reply-mentions-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 5em; margin: 0 5em;
cursor: default;
} }
ul.reply-mentions { ul.reply-mentions {
list-style: none; list-style: none;
padding: 0.5em; padding: 0 0.5em;
margin: 0;
} }
ul.reply-mentions li { ul.reply-mentions li {
display: inline; display: inline;
} }
ul.reply-mentions li:after { ul.reply-mentions li:after {
content: " ⋅"; content: " ⋅";
} }
ul.reply-mentions li:last-child:after { ul.reply-mentions li:last-child:after {
content: ""; content: "";
} }
.replying-to-label { .replying-to-label {
color: var(--color-twitter-text-gray); color: var(--color-twitter-text-gray);
} }
a.mention { a.entity {
text-decoration: none; text-decoration: none;
color: var(--color-twitter-blue); color: var(--color-twitter-blue);
} }
.tweet-text { .tweet-text {
display: block; display: block;
margin-bottom: 0.4em; margin-bottom: 0.4em;
margin-top: 0; margin-top: 0;
/* padding-bottom: 0.5em;*/
} }
.focused-tweet .tweet-text { .focused-tweet .tweet-text {
font-size: 1.4em; font-size: 1.4em;
} }
.focused-tweet .quoted-tweet .tweet-text { .focused-tweet .quoted-tweet .tweet-text {
font-size: unset; font-size: unset;
} }
.thread-parent-tweet:first-child, .focused-tweet:first-child { .thread-parent-tweet:first-child, .focused-tweet:first-child {
padding-top: 1em; padding-top: 1em;
} }
.thread-parent-tweet .vertical-reply-line-container, .thread-parent-tweet .vertical-reply-line-container,
.reply-chain .vertical-reply-line-container { .reply-chain .vertical-reply-line-container {
width: 3em; width: 3em;
margin-right: 0.5em; margin-right: 0.5em;
} }
.thread-parent-tweet .vertical-reply-line, .thread-parent-tweet .vertical-reply-line,
.reply-chain > :not(:last-child) .vertical-reply-line { .reply-chain > :not(:last-child) .vertical-reply-line {
width: 2px; width: 2px;
background-color: var(--color-twitter-off-white-dark); background-color: var(--color-twitter-off-white-dark);
flex-grow: 1; flex-grow: 1;
margin: auto; margin: auto;
} }
.profile-image { .profile-image {
border-radius: 50%; border-radius: 50%;
width: 3em; width: 3em;
display: inline; display: inline;
border: 1px solid var(--color-outline-gray); border: 1px solid var(--color-outline-gray);
} }
.user-feed-header { .user-feed-header {
border-bottom: 1px solid var(--color-outline-gray); border-bottom: 1px solid var(--color-outline-gray);
} }
.user-feed-header .author-info { .user-feed-header .author-info {
font-size: 1.3em; font-size: 1.3em;
padding: 1em; padding: 1em;
} }
.user-feed-header .profile-image { .user-feed-header .profile-image {
width: 8em; width: 8em;
} }
.horizontal-container-1 { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
} }
.vertical-reply-line-container { .vertical-reply-line-container {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 1em; /* will be overridden by, e.g., parent-thread properties */ width: 1em; /* will be overridden by, e.g., parent-thread properties */
} }
.vertical-container-1 { .vertical-container-1 {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.posted-at-container { .posted-at-container {
flex-grow: 1; flex-grow: 1;
} }
p.posted-at { p.posted-at {
float: right; float: right;
color: var(--color-twitter-text-gray); color: var(--color-twitter-text-gray);
font-size: 0.875em; font-size: 0.875em;
} }
.interactions-bar { .interactions-bar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0.5em 0; margin: 0.5em 0;
} }
.interaction-stat { .interaction-stat {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
} }
.interaction-stat span { .interaction-stat span {
line-height: 1.5em; line-height: 1.5em;
padding: 0 0.5em; padding: 0 0.5em;
} }
.interactions-bar .dummy { .interactions-bar .dummy {
flex-grow: 5; flex-grow: 5;
} }
.focused-tweet { .focused-tweet {
border-bottom: 1px solid var(--color-twitter-off-white-dark); border-bottom: 1px solid var(--color-twitter-off-white-dark);
padding-bottom: 0.5em; padding-bottom: 0.5em;
} }
.reply-chain { .reply-chain {
margin-top: 1em; margin-top: 1em;
} }
.reply-chain > :last-child { .reply-chain > :last-child {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid var(--color-twitter-off-white-dark); border-bottom: 1px solid var(--color-twitter-off-white-dark);
} }
.nav-sidebar { .nav-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: fixed; position: fixed;
transform: translate(-100%, 0); transform: translate(-100%, 0);
font-size: 1.4em; font-size: 1.4em;
} }
ul.quick-links { ul.quick-links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
align-items: flex-start; align-items: flex-start;
padding: 0 2em; padding: 0 2em;
} }
.quick-link { .quick-link {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0.5em; padding: 0.5em;
@ -255,33 +260,33 @@ ul.quick-links {
background-color: var(--color-twitter-blue-light); background-color: var(--color-twitter-blue-light);
} }
.quick-link:active { .quick-link:active {
transform: translate(2px, 2px); transform: translate(0.1em, 0.1em);
background-color: var(--color-twitter-blue); background-color: var(--color-twitter-blue);
} }
.quick-link span { .quick-link span {
padding: 0 0.3em; padding: 0 0.3em;
} }
.followers-count, .following-count { .followers-count, .following-count {
font-weight: bold; font-weight: bold;
} }
.followers-label, .following-label { .followers-label, .following-label {
color: var(--color-twitter-text-gray); color: var(--color-twitter-text-gray);
} }
.bio-info-with-icon { .bio-info-with-icon {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.3em; gap: 0.3em;
} }
.user-feed-header-info-container { .user-feed-header-info-container {
padding: 2em; padding: 2em;
margin-bottom: 0.1em; margin-bottom: 0.1em;
border-bottom: 1px solid var(--color-outline-gray); border-bottom: 1px solid var(--color-outline-gray);
} }
.user-feed-tweets .tweet { .user-feed-tweets .tweet {
border-bottom: 1px solid var(--color-twitter-off-white-dark); border-bottom: 1px solid var(--color-twitter-off-white-dark);
padding-top: 0.8em; padding-top: 0.8em;
padding-bottom: 0.8em; padding-bottom: 0.8em;
} }
@ -291,7 +296,7 @@ ul.quick-links {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 4em; height: 4em;
padding: 0.5em 2em; padding: 0.5em 1em;
gap: 1em; gap: 1em;
border: 1px solid var(--color-outline-gray); border: 1px solid var(--color-outline-gray);
position: fixed; position: fixed;
@ -302,20 +307,22 @@ ul.quick-links {
} }
.back-button { .back-button {
flex-grow: 0; flex-grow: 0;
border-radius: 50%; border-radius: 50%;
border: 2px solid black; border: 2px solid black;
width: 2em; width: 2em;
position: relative; position: relative;
height: 2em; height: 2em;
box-sizing: border-box;
cursor: pointer;
} }
img.svg-icon { img.svg-icon {
width: 1.5em; width: 1.5em;
} }
svg { svg {
width: 1.5em; width: 1.5em;
} }
.back-button img { .back-button img {
color: rgb(239, 243, 244); color: rgb(239, 243, 244);
@ -325,12 +332,12 @@ svg {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.search-bar { .search-bar {
flex-grow: 1; flex-grow: 1;
} }
.login { .login {
width: 60%; width: 60%;
margin: 20% auto; margin: 20% auto;
} }
.login-form input { .login-form input {
width: 100%; width: 100%;
@ -349,13 +356,13 @@ svg {
} }
.field-container { .field-container {
padding: 0.5em 0; padding: 0.5em 0;
} }
.submit-container { .submit-container {
text-align: right; text-align: right;
} }
input[type="submit"] { input[type="submit"] {
background-color: var(--color-twitter-blue-light); background-color: var(--color-twitter-blue-light);
width: 10em; width: 10em;
padding: 1em; padding: 1em;
margin-top: 1em; margin-top: 1em;
@ -364,17 +371,17 @@ input[type="submit"] {
cursor: pointer; cursor: pointer;
} }
.change-session-form select { .change-session-form select {
display: block; display: block;
width: 100%; width: 100%;
} }
#logged-in-user-info { #logged-in-user-info {
font-size: 0.8em; font-size: 0.8em;
margin-top: 1em; margin-top: 1em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.quick-link .author-info { .quick-link .author-info {
pointer-events: none; pointer-events: none;
} }

4
internal/webserver/tpl/includes/base.tpl
View File

@ -11,9 +11,9 @@
</head> </head>
<body> <body>
<div class="top-bar"> <div class="top-bar">
<div class="back-button"> <a onclick="window.history.back()" class="back-button quick-link">
<img class="svg-icon" src="/static/icons/back.svg" /> <img class="svg-icon" src="/static/icons/back.svg" />
</div> </a>
<input class="search-bar" placeholder="Search" type="text" /> <input class="search-bar" placeholder="Search" type="text" />
</div> </div>
{{template "nav-sidebar"}} {{template "nav-sidebar"}}

14
internal/webserver/tpl/includes/nav_sidebar.tpl
View File

@ -55,12 +55,14 @@
<span>Verified</span> <span>Verified</span>
</li> </li>
</a> </a>
<a class="unstyled-link" href="/{{(active_user).Handle}}"> {{if (not (eq (active_user).Handle "[nobody]"))}}
<li class="quick-link"> <a class="unstyled-link" href="/{{(active_user).Handle}}">
<img class="svg-icon" src="/static/icons/profile.svg" /> <li class="quick-link">
<span>Profile</span> <img class="svg-icon" src="/static/icons/profile.svg" />
</li> <span>Profile</span>
</a> </li>
</a>
{{end}}
<a class="unstyled-link" href="#"> <a class="unstyled-link" href="#">
<li class="quick-link"> <li class="quick-link">
<img class="svg-icon" src="/static/icons/more.svg" /> <img class="svg-icon" src="/static/icons/more.svg" />

18
internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
View File

@ -15,11 +15,11 @@
{{template "author-info" $author}} {{template "author-info" $author}}
</div> </div>
{{if $main_tweet.ReplyMentions}} {{if $main_tweet.ReplyMentions}}
<div class="reply-mentions-container"> <div class="reply-mentions-container" hx-trigger="click consume">
<span class="replying-to-label">Replying to</span> <span class="replying-to-label">Replying&nbsp;to</span>
<ul class="reply-mentions"> <ul class="reply-mentions">
{{range $main_tweet.ReplyMentions}} {{range $main_tweet.ReplyMentions}}
<li><a class="mention" href="/{{.}}">@{{.}}</a></li> <li><a class="entity" href="/{{.}}">@{{.}}</a></li>
{{end}} {{end}}
</ul> </ul>
</div> </div>
@ -32,18 +32,18 @@
</p> </p>
</div> </div>
</div> </div>
<div class="horizontal-container-1"> <div class="row">
<span class="vertical-reply-line-container"> <span class="vertical-reply-line-container">
<div class="vertical-reply-line"> <div class="vertical-reply-line">
</div> </div>
</span> </span>
<span class="vertical-container-1"> <span class="vertical-container-1">
<div class="tweet-content"> <div class="tweet-content">
<p class="tweet-text"> {{range (split "\n" $main_tweet.Text)}}
{{range (split "\n" $main_tweet.Text)}} <p class="tweet-text">
<p>{{.}}</p> {{.}}
{{end}} </p>
</p> {{end}}
{{range $main_tweet.Images}} {{range $main_tweet.Images}}
<img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/> <img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/>

34
internal/webserver/tpl/user_feed.tpl
View File

@ -13,24 +13,32 @@
<div class="user-bio"> <div class="user-bio">
<span>{{$user.Bio}}</span> <span>{{$user.Bio}}</span>
</div> </div>
<div class="user-location bio-info-with-icon"> {{if $user.Location}}
<img class="svg-icon" src="/static/icons/location.svg" /> <div class="user-location bio-info-with-icon">
<span>{{$user.Location}}</span> <img class="svg-icon" src="/static/icons/location.svg" />
</div> <span>{{$user.Location}}</span>
<div class="user-website bio-info-with-icon"> </div>
<img class="svg-icon" src="/static/icons/website.svg" /> {{end}}
<span>{{$user.Website}}</span> {{if $user.Website}}
</div> <div class="user-website bio-info-with-icon">
<img class="svg-icon" src="/static/icons/website.svg" />
<a class="unstyled-link" target="_blank" href="{{$user.Website}}">{{$user.Website}}</a>
</div>
{{end}}
<div class="user-join-date bio-info-with-icon"> <div class="user-join-date bio-info-with-icon">
<img class="svg-icon" src="/static/icons/calendar.svg" /> <img class="svg-icon" src="/static/icons/calendar.svg" />
<span>{{$user.JoinDate.Time.Format "Jan 2, 2006"}}</span> <span>{{$user.JoinDate.Time.Format "Jan 2, 2006"}}</span>
</div> </div>
<div class="followers-followees-container"> <div class="followers-followees-container row">
<span class="followers-count">{{$user.FollowersCount}}</span> <div class="followers-container">
<span class="followers-label">followers</span> <span class="followers-count">{{$user.FollowersCount}}</span>
<span class="following-label">is following</span> <span class="followers-label">followers</span>
<span class="following-count">{{$user.FollowingCount}}</span> </div>
<div class="followees-container">
<span class="following-label">is following</span>
<span class="following-count">{{$user.FollowingCount}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>