Improve a bunch of styles, formatting and layout
This commit is contained in:
parent
b0a44063e4
commit
cd1043215c
@ -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 {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
: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;
|
||||
--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);
|
||||
@ -24,11 +24,11 @@ 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;
|
||||
/* 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%;
|
||||
margin: 0 30%;
|
||||
border-color: var(--color-twitter-off-white-dark);
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
@ -38,212 +38,217 @@ body {
|
||||
font-family: "Titillium Web";
|
||||
}
|
||||
main {
|
||||
padding-top: 4em;
|
||||
padding-top: 4em;
|
||||
}
|
||||
input, select {
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
padding: 0.2em 0.6em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
padding: 0.2em 0.6em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.tweet {
|
||||
padding: 0 1.5em;
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
:not(.focused-tweet) > .tweet {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quoted-tweet {
|
||||
padding: 1.3em;
|
||||
margin-top: 1em;
|
||||
padding: 1.3em;
|
||||
margin-top: 1em;
|
||||
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
border-radius: 20px;
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.profile-banner-image {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.unstyled-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.author-info a {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.author-info, .tweet-text {
|
||||
cursor: default;
|
||||
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 {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.handle {
|
||||
color: var(--color-twitter-text-gray);
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
|
||||
.tweet-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-mentions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5em;
|
||||
cursor: default;
|
||||
}
|
||||
ul.reply-mentions {
|
||||
list-style: none;
|
||||
padding: 0.5em;
|
||||
list-style: none;
|
||||
padding: 0 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
ul.reply-mentions li {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
ul.reply-mentions li:after {
|
||||
content: " ⋅";
|
||||
content: " ⋅";
|
||||
}
|
||||
ul.reply-mentions li:last-child:after {
|
||||
content: "";
|
||||
content: "";
|
||||
}
|
||||
.replying-to-label {
|
||||
color: var(--color-twitter-text-gray);
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
a.mention {
|
||||
text-decoration: none;
|
||||
color: var(--color-twitter-blue);
|
||||
a.entity {
|
||||
text-decoration: none;
|
||||
color: var(--color-twitter-blue);
|
||||
}
|
||||
|
||||
.tweet-text {
|
||||
display: block;
|
||||
margin-bottom: 0.4em;
|
||||
margin-top: 0;
|
||||
/* padding-bottom: 0.5em;*/
|
||||
display: block;
|
||||
margin-bottom: 0.4em;
|
||||
margin-top: 0;
|
||||
}
|
||||
.focused-tweet .tweet-text {
|
||||
font-size: 1.4em;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
.focused-tweet .quoted-tweet .tweet-text {
|
||||
font-size: unset;
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
.thread-parent-tweet:first-child, .focused-tweet:first-child {
|
||||
padding-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
.thread-parent-tweet .vertical-reply-line-container,
|
||||
.reply-chain .vertical-reply-line-container {
|
||||
width: 3em;
|
||||
margin-right: 0.5em;
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
font-size: 1.3em;
|
||||
padding: 1em;
|
||||
}
|
||||
.user-feed-header .profile-image {
|
||||
width: 8em;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.horizontal-container-1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.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 */
|
||||
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;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.posted-at-container {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
p.posted-at {
|
||||
float: right;
|
||||
color: var(--color-twitter-text-gray);
|
||||
font-size: 0.875em;
|
||||
float: right;
|
||||
color: var(--color-twitter-text-gray);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.interactions-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.5em 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.interaction-stat {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.interaction-stat span {
|
||||
line-height: 1.5em;
|
||||
padding: 0 0.5em;
|
||||
line-height: 1.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.interactions-bar .dummy {
|
||||
flex-grow: 5;
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
.focused-tweet {
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.reply-chain {
|
||||
margin-top: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.reply-chain > :last-child {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
}
|
||||
.nav-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
align-items: flex-start;
|
||||
padding: 0 2em;
|
||||
}
|
||||
.quick-link {
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5em;
|
||||
@ -255,33 +260,33 @@ 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);
|
||||
}
|
||||
|
||||
.quick-link span {
|
||||
padding: 0 0.3em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.followers-count, .following-count {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.followers-label, .following-label {
|
||||
color: var(--color-twitter-text-gray);
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
.bio-info-with-icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
}
|
||||
.user-feed-header-info-container {
|
||||
padding: 2em;
|
||||
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);
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
padding-top: 0.8em;
|
||||
padding-bottom: 0.8em;
|
||||
}
|
||||
@ -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;
|
||||
@ -302,20 +307,22 @@ ul.quick-links {
|
||||
}
|
||||
|
||||
.back-button {
|
||||
flex-grow: 0;
|
||||
flex-grow: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px solid black;
|
||||
width: 2em;
|
||||
position: relative;
|
||||
height: 2em;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img.svg-icon {
|
||||
width: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
.back-button img {
|
||||
color: rgb(239, 243, 244);
|
||||
@ -325,12 +332,12 @@ svg {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.search-bar {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 60%;
|
||||
margin: 20% auto;
|
||||
width: 60%;
|
||||
margin: 20% auto;
|
||||
}
|
||||
.login-form input {
|
||||
width: 100%;
|
||||
@ -349,13 +356,13 @@ svg {
|
||||
}
|
||||
|
||||
.field-container {
|
||||
padding: 0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.submit-container {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-twitter-blue-light);
|
||||
background-color: var(--color-twitter-blue-light);
|
||||
width: 10em;
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
@ -364,17 +371,17 @@ input[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.change-session-form select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
#logged-in-user-info {
|
||||
font-size: 0.8em;
|
||||
margin-top: 1em;
|
||||
font-size: 0.8em;
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-link .author-info {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -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"}}
|
||||
|
||||
@ -55,12 +55,14 @@
|
||||
<span>Verified</span>
|
||||
</li>
|
||||
</a>
|
||||
<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>
|
||||
{{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" />
|
||||
|
||||
@ -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 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>
|
||||
{{range (split "\n" $main_tweet.Text)}}
|
||||
<p class="tweet-text">
|
||||
{{.}}
|
||||
</p>
|
||||
{{end}}
|
||||
|
||||
{{range $main_tweet.Images}}
|
||||
<img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/>
|
||||
|
||||
@ -13,24 +13,32 @@
|
||||
<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>
|
||||
{{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" />
|
||||
<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">
|
||||
<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 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user