Add a ton of stuff to make everything look way better (no major behavior differences though)
This commit is contained in:
parent
bb6a7738ba
commit
dcdec91d62
@ -83,6 +83,8 @@ func (app *Application) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
http.StripPrefix("/static", http.FileServer(http.Dir(get_filepath("static")))).ServeHTTP(w, r)
|
||||
case "tweet":
|
||||
app.TweetDetail(w, r)
|
||||
case "content":
|
||||
http.StripPrefix("/content", http.FileServer(http.Dir(app.Profile.ProfileDir))).ServeHTTP(w, r)
|
||||
default:
|
||||
app.UserFeed(w, r)
|
||||
}
|
||||
@ -110,6 +112,7 @@ func (app *Application) Home(w http.ResponseWriter, r *http.Request) {
|
||||
app.traceLog.Printf("'Home' handler (path: %q)", r.URL.Path)
|
||||
tpl, err := template.ParseFiles(
|
||||
get_filepath("tpl/includes/base.tpl"),
|
||||
get_filepath("tpl/includes/nav_sidebar.tpl"),
|
||||
get_filepath("tpl/home.tpl"),
|
||||
)
|
||||
panic_if(err)
|
||||
|
||||
1
internal/webserver/static/icons/back.svg
Normal file
1
internal/webserver/static/icons/back.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" style="color: rgb(239, 243, 244);"><g><path d="M7.414 13l5.043 5.04-1.414 1.42L3.586 12l7.457-7.46 1.414 1.42L7.414 11H21v2H7.414z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 311 B |
1
internal/webserver/static/icons/bookmarks.svg
Normal file
1
internal/webserver/static/icons/bookmarks.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 356 B |
1
internal/webserver/static/icons/calendar.svg
Normal file
1
internal/webserver/static/icons/calendar.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1bwzh9t r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
1
internal/webserver/static/icons/communities.svg
Normal file
1
internal/webserver/static/icons/communities.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M7.501 19.917L7.471 21H.472l.029-1.027c.184-6.618 3.736-8.977 7-8.977.963 0 1.95.212 2.87.672-.444.478-.851 1.03-1.212 1.656-.507-.204-1.054-.329-1.658-.329-2.767 0-4.57 2.223-4.938 6.004H7.56c-.023.302-.05.599-.059.917zm15.998.056L23.528 21H9.472l.029-1.027c.184-6.618 3.736-8.977 7-8.977s6.816 2.358 7 8.977zM21.437 19c-.367-3.781-2.17-6.004-4.938-6.004s-4.57 2.223-4.938 6.004h9.875zm-4.938-9c-.799 0-1.527-.279-2.116-.73-.836-.64-1.384-1.638-1.384-2.77 0-1.93 1.567-3.5 3.5-3.5s3.5 1.57 3.5 3.5c0 1.132-.548 2.13-1.384 2.77-.589.451-1.317.73-2.116.73zm-1.5-3.5c0 .827.673 1.5 1.5 1.5s1.5-.673 1.5-1.5-.673-1.5-1.5-1.5-1.5.673-1.5 1.5zM7.5 3C9.433 3 11 4.57 11 6.5S9.433 10 7.5 10 4 8.43 4 6.5 5.567 3 7.5 3zm0 2C6.673 5 6 5.673 6 6.5S6.673 8 7.5 8 9 7.327 9 6.5 8.327 5 7.5 5z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 982 B |
1
internal/webserver/static/icons/explore.svg
Normal file
1
internal/webserver/static/icons/explore.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 531 B |
1
internal/webserver/static/icons/home.svg
Normal file
1
internal/webserver/static/icons/home.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M12 9c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zm0 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zm0-13.304L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM19 19.5c0 .276-.224.5-.5.5h-13c-.276 0-.5-.224-.5-.5V8.429l7-4.375 7 4.375V19.5z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
1
internal/webserver/static/icons/like.svg
Normal file
1
internal/webserver/static/icons/like.svg
Normal file
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 748 B |
1
internal/webserver/static/icons/lists.svg
Normal file
1
internal/webserver/static/icons/lists.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M3 4.5C3 3.12 4.12 2 5.5 2h13C19.88 2 21 3.12 21 4.5v15c0 1.38-1.12 2.5-2.5 2.5h-13C4.12 22 3 20.88 3 19.5v-15zM5.5 4c-.28 0-.5.22-.5.5v15c0 .28.22.5.5.5h13c.28 0 .5-.22.5-.5v-15c0-.28-.22-.5-.5-.5h-13zM16 10H8V8h8v2zm-8 2h8v2H8v-2z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 434 B |
1
internal/webserver/static/icons/location.svg
Normal file
1
internal/webserver/static/icons/location.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1bwzh9t r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M12 7c-1.93 0-3.5 1.57-3.5 3.5S10.07 14 12 14s3.5-1.57 3.5-3.5S13.93 7 12 7zm0 5c-.827 0-1.5-.673-1.5-1.5S11.173 9 12 9s1.5.673 1.5 1.5S12.827 12 12 12zm0-10c-4.687 0-8.5 3.813-8.5 8.5 0 5.967 7.621 11.116 7.945 11.332l.555.37.555-.37c.324-.216 7.945-5.365 7.945-11.332C20.5 5.813 16.687 2 12 2zm0 17.77c-1.665-1.241-6.5-5.196-6.5-9.27C5.5 6.916 8.416 4 12 4s6.5 2.916 6.5 6.5c0 4.073-4.835 8.028-6.5 9.27z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 610 B |
1
internal/webserver/static/icons/messages.svg
Normal file
1
internal/webserver/static/icons/messages.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M1.998 5.5c0-1.381 1.119-2.5 2.5-2.5h15c1.381 0 2.5 1.119 2.5 2.5v13c0 1.381-1.119 2.5-2.5 2.5h-15c-1.381 0-2.5-1.119-2.5-2.5v-13zm2.5-.5c-.276 0-.5.224-.5.5v2.764l8 3.638 8-3.636V5.5c0-.276-.224-.5-.5-.5h-15zm15.5 5.463l-8 3.636-8-3.638V18.5c0 .276.224.5.5.5h15c.276 0 .5-.224.5-.5v-8.037z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 492 B |
1
internal/webserver/static/icons/more.svg
Normal file
1
internal/webserver/static/icons/more.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M3.75 12c0-4.56 3.69-8.25 8.25-8.25s8.25 3.69 8.25 8.25-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12zM12 1.75C6.34 1.75 1.75 6.34 1.75 12S6.34 22.25 12 22.25 22.25 17.66 22.25 12 17.66 1.75 12 1.75zm-4.75 11.5c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25S6 11.31 6 12s.56 1.25 1.25 1.25zm9.5 0c.69 0 1.25-.56 1.25-1.25s-.56-1.25-1.25-1.25-1.25.56-1.25 1.25.56 1.25 1.25 1.25zM13.25 12c0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25 1.25.56 1.25 1.25z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 662 B |
1
internal/webserver/static/icons/notifications.svg
Normal file
1
internal/webserver/static/icons/notifications.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M19.993 9.042C19.48 5.017 16.054 2 11.996 2s-7.49 3.021-7.999 7.051L2.866 18H7.1c.463 2.282 2.481 4 4.9 4s4.437-1.718 4.9-4h4.236l-1.143-8.958zM12 20c-1.306 0-2.417-.835-2.829-2h5.658c-.412 1.165-1.523 2-2.829 2zm-6.866-4l.847-6.698C6.364 6.272 8.941 4 11.996 4s5.627 2.268 6.013 5.295L18.864 16H5.134z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 504 B |
1
internal/webserver/static/icons/profile.svg
Normal file
1
internal/webserver/static/icons/profile.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M5.651 19h12.698c-.337-1.8-1.023-3.21-1.945-4.19C15.318 13.65 13.838 13 12 13s-3.317.65-4.404 1.81c-.922.98-1.608 2.39-1.945 4.19zm.486-5.56C7.627 11.85 9.648 11 12 11s4.373.85 5.863 2.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H3.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46zM12 4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zM8 6c0-2.21 1.791-4 4-4s4 1.79 4 4-1.791 4-4 4-4-1.79-4-4z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 589 B |
1
internal/webserver/static/icons/reply.svg
Normal file
1
internal/webserver/static/icons/reply.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 508 B |
1
internal/webserver/static/icons/retweet.svg
Normal file
1
internal/webserver/static/icons/retweet.svg
Normal file
@ -0,0 +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="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 442 B |
1
internal/webserver/static/icons/verified.svg
Normal file
1
internal/webserver/static/icons/verified.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"><g><path d="M8.52 3.59c.8-1.1 2.04-1.84 3.48-1.84s2.68.74 3.49 1.84c1.34-.21 2.74.14 3.76 1.16s1.37 2.42 1.16 3.77c1.1.8 1.84 2.04 1.84 3.48s-.74 2.68-1.84 3.48c.21 1.34-.14 2.75-1.16 3.77s-2.42 1.37-3.76 1.16c-.8 1.1-2.05 1.84-3.49 1.84s-2.68-.74-3.48-1.84c-1.34.21-2.75-.14-3.77-1.16-1.01-1.02-1.37-2.42-1.16-3.77-1.09-.8-1.84-2.04-1.84-3.48s.75-2.68 1.84-3.48c-.21-1.35.14-2.75 1.16-3.77s2.43-1.37 3.77-1.16zm3.48.16c-.85 0-1.66.53-2.12 1.43l-.38.77-.82-.27c-.96-.32-1.91-.12-2.51.49-.6.6-.8 1.54-.49 2.51l.27.81-.77.39c-.9.46-1.43 1.27-1.43 2.12s.53 1.66 1.43 2.12l.77.39-.27.81c-.31.97-.11 1.91.49 2.51.6.61 1.55.81 2.51.49l.82-.27.38.77c.46.9 1.27 1.43 2.12 1.43s1.66-.53 2.12-1.43l.39-.77.82.27c.96.32 1.9.12 2.51-.49.6-.6.8-1.55.48-2.51l-.26-.81.76-.39c.91-.46 1.43-1.27 1.43-2.12s-.52-1.66-1.43-2.12l-.77-.39.27-.81c.32-.97.12-1.91-.48-2.51-.61-.61-1.55-.81-2.51-.49l-.82.27-.39-.77c-.46-.9-1.27-1.43-2.12-1.43zm4.74 5.68l-6.2 6.77-3.74-3.74 1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
internal/webserver/static/icons/website.svg
Normal file
1
internal/webserver/static/icons/website.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-1bwzh9t r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M18.36 5.64c-1.95-1.96-5.11-1.96-7.07 0L9.88 7.05 8.46 5.64l1.42-1.42c2.73-2.73 7.16-2.73 9.9 0 2.73 2.74 2.73 7.17 0 9.9l-1.42 1.42-1.41-1.42 1.41-1.41c1.96-1.96 1.96-5.12 0-7.07zm-2.12 3.53l-7.07 7.07-1.41-1.41 7.07-7.07 1.41 1.41zm-12.02.71l1.42-1.42 1.41 1.42-1.41 1.41c-1.96 1.96-1.96 5.12 0 7.07 1.95 1.96 5.11 1.96 7.07 0l1.41-1.41 1.42 1.41-1.42 1.42c-2.73 2.73-7.16 2.73-9.9 0-2.73-2.74-2.73-7.17 0-9.9z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 616 B |
@ -1,23 +1,53 @@
|
||||
:root {
|
||||
--color-twitter-text-gray: #536171;
|
||||
--color-twitter-blue: #1b95e0; /* hsv(203, 87.9, 87,8) */
|
||||
--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-dark: #dae5e5; /* hsv(180, 4.8, 89.8) */
|
||||
--color-outline-gray: #dcdcdc;
|
||||
|
||||
/*
|
||||
const QColor COLOR_OUTLINE_GRAY = QColor(220, 220, 220);
|
||||
const QColor COLOR_TWITTER_BLUE = QColor(27, 149, 224);
|
||||
const QColor COLOR_TWITTER_BLUE_LIGHT = QColor(124,197,246);
|
||||
const QColor COLOR_TWITTER_OFF_WHITE = QColor(247,249,249);
|
||||
const QColor COLOR_TWITTER_OFF_WHITE_DARK = QColor(218,229,229);
|
||||
const QColor COLOR_TWITTER_TEXT_GRAY = QColor(83, 100, 113);
|
||||
|
||||
const QColor COLOR_BACKGROUND_GREEN = QColor(40, 205, 50);
|
||||
|
||||
const QColor COLOR_RED = QColor(255, 0, 0);
|
||||
|
||||
const QColor COLOR_SPACE_PURPLE = QColor(164, 155, 253);
|
||||
const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
/* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering / stuff moving btw page loads */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
body {
|
||||
margin: 0 30%;
|
||||
border-color: var(--color-twitter-off-white-dark);
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
border-width: 1px;
|
||||
min-height: 100vh;
|
||||
|
||||
font-family: "Titillium Web";
|
||||
}
|
||||
main {
|
||||
padding-top: 4em;
|
||||
}
|
||||
|
||||
.tweet {
|
||||
padding: 20px;
|
||||
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
border-radius: 20px;
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
|
||||
.quoted-tweet {
|
||||
padding: 20px;
|
||||
padding: 1.3em;
|
||||
margin-top: 1em;
|
||||
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
@ -32,14 +62,11 @@ body {
|
||||
.unstyled-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.name-and-handle {
|
||||
@ -52,3 +79,238 @@ body {
|
||||
.handle {
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
|
||||
.tweet-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-mentions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5em;
|
||||
}
|
||||
ul.reply-mentions {
|
||||
list-style: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
ul.reply-mentions li {
|
||||
display: inline;
|
||||
}
|
||||
ul.reply-mentions li:after {
|
||||
content: " ⋅";
|
||||
}
|
||||
ul.reply-mentions li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
.replying-to-label {
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
a.mention {
|
||||
text-decoration: none;
|
||||
color: var(--color-twitter-blue);
|
||||
}
|
||||
|
||||
.tweet-text {
|
||||
display: block;
|
||||
margin-bottom: 0.4em;
|
||||
/* padding-bottom: 0.5em;*/
|
||||
}
|
||||
.focused-tweet .tweet-text {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.focused-tweet .quoted-tweet .tweet-text {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.thread-parent-tweet:first-child, .focused-tweet:first-child {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.thread-parent-tweet .vertical-reply-line-container,
|
||||
.reply-chain .vertical-reply-line-container {
|
||||
width: 3em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.thread-parent-tweet .vertical-reply-line,
|
||||
.reply-chain > :not(:last-child) .vertical-reply-line {
|
||||
width: 2px;
|
||||
background-color: var(--color-twitter-off-white-dark);
|
||||
flex-grow: 1;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
border-radius: 50%;
|
||||
width: 3em;
|
||||
display: inline;
|
||||
border: 1px solid var(--color-outline-gray);
|
||||
}
|
||||
|
||||
.user-feed-header {
|
||||
border-bottom: 1px solid var(--color-outline-gray);
|
||||
}
|
||||
.user-feed-header .author-info {
|
||||
font-size: 1.3em;
|
||||
padding: 1em;
|
||||
}
|
||||
.user-feed-header .profile-image {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.horizontal-container-1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.vertical-reply-line-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1em; /* will be overridden by, e.g., parent-thread properties */
|
||||
}
|
||||
.vertical-container-1 {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.posted-at-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
p.posted-at {
|
||||
float: right;
|
||||
color: var(--color-twitter-text-gray);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.interactions-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.interaction-stat {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.interaction-stat span {
|
||||
line-height: 1.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.interactions-bar .dummy {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.focused-tweet {
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.reply-chain {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.reply-chain > :last-child {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
}
|
||||
.nav-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
transform: translate(-100%, 0);
|
||||
font-size: 1.4em;
|
||||
}
|
||||
ul.quick-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
align-items: flex-start;
|
||||
padding: 0 2em;
|
||||
}
|
||||
li.quick-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
margin: 0.2em;
|
||||
border-radius: 100em; /* any large amount, just don't use % because then it makes an ellipse */
|
||||
}
|
||||
li.quick-link:hover {
|
||||
background-color: var(--color-twitter-blue-light);
|
||||
}
|
||||
li.quick-link:active {
|
||||
transform: translate(2px, 2px);
|
||||
background-color: var(--color-twitter-blue);
|
||||
}
|
||||
|
||||
.quick-link span {
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.followers-count, .following-count {
|
||||
font-weight: bold;
|
||||
}
|
||||
.followers-label, .following-label {
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
.bio-info-with-icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
}
|
||||
.user-feed-header-info-container {
|
||||
padding: 2em;
|
||||
margin-bottom: 0.1em;
|
||||
border-bottom: 1px solid var(--color-outline-gray);
|
||||
}
|
||||
.user-feed-tweets .tweet {
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-top: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4em;
|
||||
padding: 0.5em 2em;
|
||||
gap: 1em;
|
||||
border: 1px solid var(--color-outline-gray);
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
width: 40%;
|
||||
left: 30%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
flex-grow: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid black;
|
||||
width: 2em;
|
||||
position: relative;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
img.svg-icon {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.5em;
|
||||
}
|
||||
.back-button img {
|
||||
color: rgb(239, 243, 244);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.search-bar {
|
||||
flex-grow: 1;
|
||||
font-size: 1em;
|
||||
font-family: "Titillium Web";
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{define "author-info"}}
|
||||
<div class="author-info">
|
||||
<a class="unstyled-link" href="/{{.Handle}}">
|
||||
<img style="border-radius: 50%; width: 50px; display: inline;" src="{{.ProfileImageUrl}}" />
|
||||
<img class="profile-image" src="{{if .IsContentDownloaded}}/content/profile_images/{{.ProfileImageLocalPath}}{{else}}{{.ProfileImageUrl}}{{end}}" />
|
||||
</a>
|
||||
<span class="name-and-handle">
|
||||
<div class="display-name">{{.DisplayName}}</div>
|
||||
|
||||
@ -6,12 +6,16 @@
|
||||
<title>Offline Twitter | {{template "title" .}}</title>
|
||||
<link rel='stylesheet' href='/static/styles.css'>
|
||||
<link rel='shortcut icon' href='/static/img/favicon.ico' type='image/x-icon'>
|
||||
<!-- <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700'> -->
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:400,700'>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><a href='/'>Uhhhh</a></h1>
|
||||
</header>
|
||||
<div class="top-bar">
|
||||
<div class="back-button">
|
||||
<img class="svg-icon" src="/static/icons/back.svg" />
|
||||
</div>
|
||||
<input class="search-bar" placeholder="Search" type="text" />
|
||||
</div>
|
||||
{{template "nav-sidebar"}}
|
||||
<main>
|
||||
{{template "main" .}}
|
||||
</main>
|
||||
|
||||
66
internal/webserver/tpl/includes/nav_sidebar.tpl
Normal file
66
internal/webserver/tpl/includes/nav_sidebar.tpl
Normal file
@ -0,0 +1,66 @@
|
||||
{{define "nav-sidebar"}}
|
||||
<div class="nav-sidebar">
|
||||
<ul class="quick-links">
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/home.svg" />
|
||||
<span>Home</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/explore.svg" />
|
||||
<span>Explore</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/notifications.svg" />
|
||||
<span>Notifications</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/messages.svg" />
|
||||
<span>Messages</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/lists.svg" />
|
||||
<span>Lists</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/bookmarks.svg" />
|
||||
<span>Bookmarks</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/communities.svg" />
|
||||
<span>Communities</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/verified.svg" />
|
||||
<span>Verified</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/profile.svg" />
|
||||
<span>Profile</span>
|
||||
</li>
|
||||
</a>
|
||||
<a class="unstyled-link" href="#">
|
||||
<li class="quick-link">
|
||||
<img class="svg-icon" src="/static/icons/more.svg" />
|
||||
<span>More</span>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
@ -3,42 +3,81 @@
|
||||
{{$main_tweet := (tweet .)}}
|
||||
{{$author := (user $main_tweet.UserID)}}
|
||||
|
||||
{{template "author-info" $author}}
|
||||
<div class="tweet-content">
|
||||
<a href="/tweet/{{$main_tweet.ID}}" style="color: inherit; text-decoration: none" >{{$main_tweet.Text}}</a>
|
||||
|
||||
{{range $main_tweet.Images}}
|
||||
<img src="{{.RemoteURL}}" style="max-width: 45%"/>
|
||||
<div class="tweet-header-container">
|
||||
{{template "author-info" $author}}
|
||||
{{if $main_tweet.ReplyMentions}}
|
||||
<div class="reply-mentions-container">
|
||||
<span class="replying-to-label">Replying to</span>
|
||||
<ul class="reply-mentions">
|
||||
{{range $main_tweet.ReplyMentions}}
|
||||
<li><a class="mention" href="/{{.}}">@{{.}}</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="posted-at-container">
|
||||
<p class="posted-at">
|
||||
{{$main_tweet.PostedAt.Time.Format "Jan 2, 2006"}}
|
||||
<br/>
|
||||
{{$main_tweet.PostedAt.Time.Format "3:04 pm"}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="horizontal-container-1">
|
||||
<span class="vertical-reply-line-container">
|
||||
<div class="vertical-reply-line">
|
||||
</div>
|
||||
</span>
|
||||
<span class="vertical-container-1">
|
||||
<div class="tweet-content">
|
||||
<a href="/tweet/{{$main_tweet.ID}}" class="unstyled-link tweet-text">
|
||||
{{$main_tweet.Text}}
|
||||
</a>
|
||||
|
||||
{{if $main_tweet.QuotedTweetID}}
|
||||
{{$quoted_tweet := (tweet $main_tweet.QuotedTweetID)}}
|
||||
{{$quoted_author := (user $quoted_tweet.UserID)}}
|
||||
<a href="/tweet/{{$quoted_tweet.ID}}">
|
||||
<div class="quoted-tweet" style="padding: 20px; outline-color: lightgray; outline-style: solid; outline-width: 1px; border-radius: 20px">
|
||||
{{template "author-info" $quoted_author}}
|
||||
<div class="quoted-tweet-content">
|
||||
<p>{{$quoted_tweet.Text}}</p>
|
||||
{{range $quoted_tweet.Images}}
|
||||
<img src="{{.RemoteURL}}" style="max-width: 45%"/>
|
||||
{{end}}
|
||||
<p>{{$quoted_tweet.PostedAt}}</p>
|
||||
</div>
|
||||
{{range $main_tweet.Images}}
|
||||
<img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/>
|
||||
{{end}}
|
||||
|
||||
{{if $main_tweet.QuotedTweetID}}
|
||||
{{$quoted_tweet := (tweet $main_tweet.QuotedTweetID)}}
|
||||
{{$quoted_author := (user $quoted_tweet.UserID)}}
|
||||
<a href="/tweet/{{$quoted_tweet.ID}}">
|
||||
<div class="quoted-tweet">
|
||||
{{template "author-info" $quoted_author}}
|
||||
<div class="quoted-tweet-content">
|
||||
<a href="/tweet/{{$quoted_tweet.ID}}" class="unstyled-link tweet-text">
|
||||
{{$quoted_tweet.Text}}
|
||||
</a>
|
||||
{{range $quoted_tweet.Images}}
|
||||
<img src="{{.RemoteURL}}" style="max-width: 45%"/>
|
||||
{{end}}
|
||||
<p>{{$quoted_tweet.PostedAt.Time.Format "Jan 2, 2006"}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="interactions-bar">
|
||||
<!-- <div class="interaction-stat">
|
||||
{template "quote-tweet-icon"}
|
||||
<span>{{$main_tweet.NumQuoteTweets}}</span>
|
||||
</div> -->
|
||||
<div class="interaction-stat">
|
||||
<img class="svg-icon" src="/static/icons/reply.svg" />
|
||||
<span>{{$main_tweet.NumReplies}}</span>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
<p>{{$main_tweet.PostedAt}}</p>
|
||||
</div>
|
||||
|
||||
<div class="interactions-bar">
|
||||
<span>{{$main_tweet.NumQuoteTweets}} QTs</span>
|
||||
<span>{{$main_tweet.NumReplies}} replies</span>
|
||||
<span>{{$main_tweet.NumRetweets}} retweets</span>
|
||||
<span>{{$main_tweet.NumLikes}} likes</span>
|
||||
</div>
|
||||
<div class="interaction-buttons">
|
||||
|
||||
<div class="interaction-stat">
|
||||
<img class="svg-icon" src="/static/icons/retweet.svg" />
|
||||
<span>{{$main_tweet.NumRetweets}}</span>
|
||||
</div>
|
||||
<div class="interaction-stat">
|
||||
<img class="svg-icon" src="/static/icons/like.svg" />
|
||||
<span>{{$main_tweet.NumLikes}}</span>
|
||||
</div>
|
||||
<div class="dummy"></div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@ -3,15 +3,21 @@
|
||||
|
||||
{{define "main"}}
|
||||
{{range .ParentIDs}}
|
||||
{{template "tweet" .}}
|
||||
<div class="thread-parent-tweet">
|
||||
{{template "tweet" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{template "tweet" .MainTweetID}}
|
||||
<hr />
|
||||
<div class="focused-tweet">
|
||||
{{template "tweet" .MainTweetID}}
|
||||
</div>
|
||||
|
||||
{{range .ReplyChains}}
|
||||
{{range .}}
|
||||
{{template "tweet" .}}
|
||||
{{end}}
|
||||
<hr />
|
||||
<div class="reply-chain">
|
||||
{{range .}}
|
||||
<div class="reply-tweet">
|
||||
{{template "tweet" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@ -2,25 +2,42 @@
|
||||
|
||||
{{define "main"}}
|
||||
{{$user := (user .UserID)}}
|
||||
<img class="profile-banner-image" src="{{$user.BannerImageUrl}}" />
|
||||
<div class="user-feed-header">
|
||||
{{if $user.BannerImageLocalPath}}
|
||||
<img class="profile-banner-image" src="/content/profile_images/{{$user.BannerImageLocalPath}}" />
|
||||
{{end}}
|
||||
|
||||
{{template "author-info" $user}}
|
||||
<button>{{if $user.IsFollowed}}Unfollow{{else}}Follow{{end}}</button>
|
||||
<p class="user-bio">{{$user.Bio}}</p>
|
||||
<p class="user-location">{{$user.Location}}</p>
|
||||
<p class="user-website">{{$user.Website}}</p>
|
||||
<p class="user-join-date">{{$user.JoinDate}}</p>
|
||||
<div class="user-feed-header-info-container">
|
||||
{{template "author-info" $user}}
|
||||
<button>{{if $user.IsFollowed}}Unfollow{{else}}Follow{{end}}</button>
|
||||
<div class="user-bio">
|
||||
<span>{{$user.Bio}}</span>
|
||||
</div>
|
||||
<div class="user-location bio-info-with-icon">
|
||||
<img class="svg-icon" src="/static/icons/location.svg" />
|
||||
<span>{{$user.Location}}</span>
|
||||
</div>
|
||||
<div class="user-website bio-info-with-icon">
|
||||
<img class="svg-icon" src="/static/icons/website.svg" />
|
||||
<span>{{$user.Website}}</span>
|
||||
</div>
|
||||
<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">
|
||||
<span class="followers-count">{{$user.FollowersCount}}</span>
|
||||
<span class="followers-label">followers</span>
|
||||
<span class="following-label">is following</span>
|
||||
<span class="following-count">{{$user.FollowingCount}}</span>
|
||||
<div class="followers-followees-container">
|
||||
<span class="followers-count">{{$user.FollowersCount}}</span>
|
||||
<span class="followers-label">followers</span>
|
||||
<span class="following-label">is following</span>
|
||||
<span class="following-count">{{$user.FollowingCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
{{range .Items}}
|
||||
{{template "tweet" .TweetID}}
|
||||
{{end}}
|
||||
<div class="user-feed-tweets">
|
||||
{{range .Items}}
|
||||
{{template "tweet" .TweetID}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user