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
}
func func_map(extras template.FuncMap) template.FuncMap {
ret := sprig.FuncMap()
for i := range extras {

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

@ -78,13 +78,16 @@ input, select {
display: flex;
align-items: center;
}
.author-info a {
line-height: 0;
}
.author-info, .tweet-text {
cursor: default;
}
.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 {
@ -102,10 +105,12 @@ input, select {
display: flex;
align-items: center;
margin: 0 5em;
cursor: default;
}
ul.reply-mentions {
list-style: none;
padding: 0.5em;
padding: 0 0.5em;
margin: 0;
}
ul.reply-mentions li {
display: inline;
@ -119,7 +124,7 @@ ul.reply-mentions li:last-child:after {
.replying-to-label {
color: var(--color-twitter-text-gray);
}
a.mention {
a.entity {
text-decoration: none;
color: var(--color-twitter-blue);
}
@ -128,7 +133,6 @@ a.mention {
display: block;
margin-bottom: 0.4em;
margin-top: 0;
/* padding-bottom: 0.5em;*/
}
.focused-tweet .tweet-text {
font-size: 1.4em;
@ -171,9 +175,10 @@ a.mention {
width: 8em;
}
.horizontal-container-1 {
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.vertical-reply-line-container {
flex-grow: 0;
@ -255,7 +260,7 @@ ul.quick-links {
background-color: var(--color-twitter-blue-light);
}
.quick-link:active {
transform: translate(2px, 2px);
transform: translate(0.1em, 0.1em);
background-color: var(--color-twitter-blue);
}
@ -291,7 +296,7 @@ ul.quick-links {
flex-direction: row;
align-items: center;
height: 4em;
padding: 0.5em 2em;
padding: 0.5em 1em;
gap: 1em;
border: 1px solid var(--color-outline-gray);
position: fixed;
@ -308,6 +313,8 @@ ul.quick-links {
width: 2em;
position: relative;
height: 2em;
box-sizing: border-box;
cursor: pointer;
}
img.svg-icon {

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

@ -11,9 +11,9 @@
</head>
<body>
<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" />
</div>
</a>
<input class="search-bar" placeholder="Search" type="text" />
</div>
{{template "nav-sidebar"}}

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

@ -55,12 +55,14 @@
<span>Verified</span>
</li>
</a>
{{if (not (eq (active_user).Handle "[nobody]"))}}
<a class="unstyled-link" href="/{{(active_user).Handle}}">
<li class="quick-link">
<img class="svg-icon" src="/static/icons/profile.svg" />
<span>Profile</span>
</li>
</a>
{{end}}
<a class="unstyled-link" href="#">
<li class="quick-link">
<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}}
</div>
{{if $main_tweet.ReplyMentions}}
<div class="reply-mentions-container">
<span class="replying-to-label">Replying to</span>
<div class="reply-mentions-container" hx-trigger="click consume">
<span class="replying-to-label">Replying&nbsp;to</span>
<ul class="reply-mentions">
{{range $main_tweet.ReplyMentions}}
<li><a class="mention" href="/{{.}}">@{{.}}</a></li>
<li><a class="entity" href="/{{.}}">@{{.}}</a></li>
{{end}}
</ul>
</div>
@ -32,18 +32,18 @@
</p>
</div>
</div>
<div class="horizontal-container-1">
<div class="row">
<span class="vertical-reply-line-container">
<div class="vertical-reply-line">
</div>
</span>
<span class="vertical-container-1">
<div class="tweet-content">
<p class="tweet-text">
{{range (split "\n" $main_tweet.Text)}}
<p>{{.}}</p>
{{end}}
<p class="tweet-text">
{{.}}
</p>
{{end}}
{{range $main_tweet.Images}}
<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">
<span>{{$user.Bio}}</span>
</div>
{{if $user.Location}}
<div class="user-location bio-info-with-icon">
<img class="svg-icon" src="/static/icons/location.svg" />
<span>{{$user.Location}}</span>
</div>
{{end}}
{{if $user.Website}}
<div class="user-website bio-info-with-icon">
<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>
{{end}}
<div class="user-join-date bio-info-with-icon">
<img class="svg-icon" src="/static/icons/calendar.svg" />
<span>{{$user.JoinDate.Time.Format "Jan 2, 2006"}}</span>
</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-label">followers</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 class="user-feed-tweets">
{{range .Items}}