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

Fix weird scrolling issues by specifying width and height for image/video elements

Browse Source
This commit is contained in:
Alessio 2023-08-29 14:04:57 -03:00
parent b2df94f041
commit bf147a1313
4 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/webserver/static/icons/like.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 666 B

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

@ -564,3 +564,8 @@ ul.dropdown-items {
border-radius: 0.5em;
color: var(--color-twitter-text-gray);
}
.tweet-image {
max-width: 95%;
width: auto;
height: auto;
}

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

@ -14,7 +14,7 @@
<a onclick="window.history.back()" class="back-button quick-link">
<img class="svg-icon" src="/static/icons/back.svg" />
</a>
<form hx-get="/search" hx-push-url="true" hx-target="body">
<form hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
<input name="q" class="search-bar" placeholder="Search" type="text" />
</form>
</div>

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

@ -57,10 +57,15 @@
{{end}}
{{template "text-with-entities" $main_tweet.Text}}
{{range $main_tweet.Images}}
<img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/>
<img class="tweet-image" src="/content/images/{{.LocalFilename}}"
width="{{.Width}}" height="{{.Height}}"
{{if (gt (len $main_tweet.Images) 1)}}
style="max-width: 45%"
{{end}}
/>
{{end}}
{{range $main_tweet.Videos}}
<video controls hx-trigger="click consume">
<video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}">
<source src="/content/videos/{{.LocalFilename}}">
</video>
{{end}}
@ -72,7 +77,10 @@
style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}"
hx-trigger="click consume"
>
<img class="embedded-link-preview" src="/content/link_preview_images/{{.ThumbnailLocalPath}}"/>
<img src="/content/link_preview_images/{{.ThumbnailLocalPath}}"
class="embedded-link-preview"
width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}"
/>
<h3 class="embedded-link-title">{{.Title}}</h3>
<p class="embedded-link-description">{{.Description}}</p>
<span class="row embedded-link-domain-container">