Browse Source

CSS adjustments for mobile/responsive view (#572)

I swear to all that is holy, this better pass drone testing...

Okay, so, this is to fix all the lovely fuck-ups.  I hope that this works for everybody.  Like I said I checked and re-checked quite a lot.

*What could go wrong...*

Added in class references for top navigation to adjust icons.

NO INLINE CSS. Yes yes, none of those shenanigans.

Co-authored-by: ullarah <phil@git.ullarah.com>
Reviewed-on: #572
Co-authored-by: ullarah <ullarah@noreply@mills.io>
Co-committed-by: ullarah <ullarah@noreply@mills.io>
pull/575/head
Phil S. 2 weeks ago
committed by James Mills
parent
commit
a3c3d7a9c2
  1. 8
      internal/theme/static/css/02-tabler-icons.css
  2. 59
      internal/theme/static/css/99-yarn.css
  3. 24
      internal/theme/templates/base.html
  4. 8
      internal/theme/templates/partials.html

8
internal/theme/static/css/02-tabler-icons.css

@ -125,6 +125,10 @@
content: "\eb19";
}
.ti-rss-nav:before {
content: "\eb19";
}
.ti-send:before {
content: "\eb1e";
}
@ -133,6 +137,10 @@
content: "\eb20";
}
.ti-settings-nav:before {
content: "\eb20";
}
.ti-shadow:before {
content: "\eed8";
}

59
internal/theme/static/css/99-yarn.css

@ -387,13 +387,13 @@ article .p-summary p {
margin: 0.75rem 0;
}
/* Twt Nav */
.settingsBtn, .logoutBtn {
color: var(--secondary);
}
/* Keep same size?
.twt-nav a {
font-size: 85%;
.settingsBtn:hover, .logoutBtn:hover {
color: var(--secondary-hover);
}
*/
/* Footer Style */
footer {
@ -452,7 +452,6 @@ footer .footer-menu a:last-child{
footer .footer-menu a:last-child::after{
content: none;
}
/* Toolbar styling */
@media (max-width: 576px) {
.toolbar-nav li {
@ -500,8 +499,11 @@ footer .footer-menu a:last-child::after{
margin: 10px auto 0px;
padding: 5px;
}
/* Name off timeline author */
#uploadImageButton, #uploadAudioButton, #uploadVideoButton {
display: block;
margin-top: 15px;
}
/* Name of timeline author */
hgroup .u-author.h-card{
display: inline;
}
@ -519,7 +521,7 @@ footer .footer-menu a:last-child::after{
object-fit: cover;
}
.u-author.h-card .author{
flex: 80%;
flex: 130%;
}
.u-author.h-card .author .p-name{
font-size: 20px;
@ -539,6 +541,45 @@ footer .footer-menu a:last-child::after{
nav.pagination-nav{
justify-content: space-between;
}
.ti-menu-2 {
font-size: 2rem;
}
.timelineBtn {
margin-top: 4rem;
}
.timelineBtn, .discoverBtn, .mentionsBtn, .feedsBtn, .settingsBtn, .logoutBtn, .loginBtn, .registerBtn {
padding-bottom: 1rem;
font-size: 1rem !important;
}
.ti-message-circle, .ti-compass, .ti-bell-ringing, .ti-rss-nav, .ti-settings-nav, .ti-door-exit, .ti-door-enter, .ti-user-plus {
margin-left: 2rem;
vertical-align: top;
font-size: 1.3rem !important;
}
.editBtn, .deleteBtn, .replyBtn, .forkBtn, .convBtn {
font-size: 0;
}
.ti-edit, .ti-trash, .ti-message, .ti-messages, .ti-message-plus {
padding-right: 1.1rem;
font-size: 1.5rem;
}
.yarn-count-badge {
font-size: 10px;
margin-left: -25px;
}
.mobile-menu {
padding-top: 15px;
padding-right: 25px;
}
}
@media (max-width: 768px) {
.timelineBtn, .discoverBtn, .mentionsBtn, .feedsBtn, .settingsBtn, .logoutBtn, .loginBtn, .registerBtn {
font-size: 0;
}
.ti-message-circle, .ti-compass, .ti-bell-ringing, .ti-rss-nav, .ti-settings-nav, .ti-door-exit, .ti-door-enter, .ti-user-plus {
padding-right: 1.1rem;
font-size: 1.5rem;
}
}
@media (max-width: 1200px) {
/* Footer Style */

24
internal/theme/templates/base.html

@ -46,29 +46,29 @@
<i class="ti ti-menu-2"></i>
</a>
</li>
<li><a href="/">{{ $.Logo }}</a></li>
<li><a class="podLogo" href="/">{{ $.Logo }}</a></li>
{{ if .Authenticated }}
<li>
<a href="/" title="Last updated {{ .TimelineUpdatedAt | time }}">
<a class="timelineBtn" href="/" title="Last updated {{ .TimelineUpdatedAt | time }}">
<i class="ti ti-message-circle"></i>
{{ tr . "NavTimeline" }}
</a>
</li>
<li>
<a href="/discover" title="Last updated {{ .DiscoverUpdatedAt | time }}">
<a class="discoverBtn" href="/discover" title="Last updated {{ .DiscoverUpdatedAt | time }}">
<i class="ti ti-compass"></i>
{{ tr . "NavDiscover" }}
</a>
</li>
<li>
<a href="/mentions" title="Last mentioned {{ .LastMentionedAt | time }}">
<a class="mentionsBtn" href="/mentions" title="Last mentioned {{ .LastMentionedAt | time }}">
<i class="ti ti-bell-ringing"></i>
{{ tr . "NavMentions" }}
</a>
</li>
<li>
<a href="/feeds">
<i class="ti ti-rss"></i>
<a class="feedsBtn" href="/feeds">
<i class="ti ti-rss-nav"></i>
{{ tr . "NavFeeds" }}
</a>
</li>
@ -77,27 +77,27 @@
<ul>
{{ if .Authenticated }}
<li>
<a class="secondary" href="/settings">
<i class="ti ti-settings"></i>
<a class="settingsBtn" class="secondary" href="/settings">
<i class="ti ti-settings-nav"></i>
{{ tr . "NavSettings" }}
</a>
</li>
<li>
<a class="secondary" href="/logout" onclick="return confirm('Are you sure you want logout?')">
<a class="logoutBtn" class="secondary" href="/logout" onclick="return confirm('Are you sure you want logout?')">
<i class="ti ti-door-exit"></i>
{{ tr . "NavLogout" }}
</a>
</li>
{{ else }}
<li>
<a href="/login">
<a class="loginBtn" href="/login">
<i class="ti ti-door-enter"></i>
{{ tr . "NavLogin" }}
</a>
</li>
{{ if not .RegisterDisabled }}
<li>
<a href="/register">
<a class="registerBtn" href="/register">
<i class="ti ti-user-plus"></i>
{{ tr . "NavRegister" }}
</a>
@ -121,7 +121,7 @@
<a href="/abuse" class="menu-item">{{tr . "MenuAbuse"}}</a>
<a href="/help" class="menu-item">{{tr . "MenuHelp"}}</a>
<a href="/support" class="menu-item">{{tr . "MenuSupport"}}</a>
<a href="/atom.xml"> <i class="ti ti-rss"></i></a>
<a href="/atom.xml" class="footer-rss"> <i class="ti ti-rss"></i></a>
</div>
</footer>
{{ if $.Debug }}

8
internal/theme/templates/partials.html

@ -159,13 +159,13 @@
<ul>
{{ if $.Authenticated }}
{{ if eq $.LastTwt.Hash $.Twt.Hash }}
<li><a class="editBtn" href="#" data-hash="{{ $.Twt.Hash }}" data-text="{{ $.Twt.Text | unparseTwt }}"><i class="ti ti-edit"></i> {{tr $.Ctx "TwtEditLinkTitle"}}</a></li>
<li><a class="deleteBtn" href="#" data-hash="{{ $.Twt.Hash }}"><i class="ti ti-trash"></i> {{tr $.Ctx "TwtDeleteLinkTitle"}}</a></li>
<li><a class="editBtn" href="#" data-hash="{{ $.Twt.Hash }}" data-text="{{ $.Twt.Text | unparseTwt }}"><i class="ti ti-edit" data-hash="{{ $.Twt.Hash }}" data-text="{{ $.Twt.Text | unparseTwt }}"></i> {{tr $.Ctx "TwtEditLinkTitle"}}</a></li>
<li><a class="deleteBtn" href="#" data-hash="{{ $.Twt.Hash }}"><i class="ti ti-trash" data-hash="{{ $.Twt.Hash }}"></i> {{tr $.Ctx "TwtDeleteLinkTitle"}}</a></li>
{{ end }}
<li><a class="replyBtn" href="#" data-reply="{{ $.User.Reply $.Twt }}"><i class="ti ti-message-plus"></i> {{tr $.Ctx "TwtReplyLinkTitle"}}</a></li>
<li><a class="replyBtn" href="#" data-reply="{{ $.User.Reply $.Twt }}"><i class="ti ti-message-plus" data-reply="{{ $.User.Reply $.Twt }}"></i> {{tr $.Ctx "TwtReplyLinkTitle"}}</a></li>
{{ if and (eq $.view "conv") (not (eq $.view "rootconv")) }}
{{ if lt (getForkLength $.Twt $.User) 1 }}
<li><a class="forkBtn" href="#" data-fork="{{ $.User.Fork $.Twt }}"><i class="ti ti-messages"></i> {{tr $.Ctx "TwtForkLinkTitle"}}</a></li>
<li><a class="forkBtn" href="#" data-fork="{{ $.User.Fork $.Twt }}"><i class="ti ti-messages" data-fork="{{ $.User.Fork $.Twt }}"></i> {{tr $.Ctx "TwtForkLinkTitle"}}</a></li>
{{ end }}
{{ end }}
{{ end }}

Loading…
Cancel
Save