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 {

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

@ -78,13 +78,16 @@ input, select {
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 {
@ -102,10 +105,12 @@ input, select {
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;
@ -119,7 +124,7 @@ ul.reply-mentions li:last-child:after {
.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);
} }
@ -128,7 +133,6 @@ a.mention {
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;
@ -171,9 +175,10 @@ a.mention {
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;
@ -255,7 +260,7 @@ 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);
} }
@ -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;
@ -308,6 +313,8 @@ ul.quick-links {
width: 2em; width: 2em;
position: relative; position: relative;
height: 2em; height: 2em;
box-sizing: border-box;
cursor: pointer;
} }
img.svg-icon { img.svg-icon {

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"}}

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

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

14
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>{{.}}</p> <p class="tweet-text">
{{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%"/>

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

@ -13,27 +13,35 @@
<div class="user-bio"> <div class="user-bio">
<span>{{$user.Bio}}</span> <span>{{$user.Bio}}</span>
</div> </div>
{{if $user.Location}}
<div class="user-location bio-info-with-icon"> <div class="user-location bio-info-with-icon">
<img class="svg-icon" src="/static/icons/location.svg" /> <img class="svg-icon" src="/static/icons/location.svg" />
<span>{{$user.Location}}</span> <span>{{$user.Location}}</span>
</div> </div>
{{end}}
{{if $user.Website}}
<div class="user-website bio-info-with-icon"> <div class="user-website bio-info-with-icon">
<img class="svg-icon" src="/static/icons/website.svg" /> <img class="svg-icon" src="/static/icons/website.svg" />
<span>{{$user.Website}}</span> <a class="unstyled-link" target="_blank" href="{{$user.Website}}">{{$user.Website}}</a>
</div> </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">
<div class="followers-container">
<span class="followers-count">{{$user.FollowersCount}}</span> <span class="followers-count">{{$user.FollowersCount}}</span>
<span class="followers-label">followers</span> <span class="followers-label">followers</span>
</div>
<div class="followees-container">
<span class="following-label">is following</span> <span class="following-label">is following</span>
<span class="following-count">{{$user.FollowingCount}}</span> <span class="following-count">{{$user.FollowingCount}}</span>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="user-feed-tweets"> <div class="user-feed-tweets">
{{range .Items}} {{range .Items}}