Improve mobile responsiveness

This commit is contained in:
Zed 2022-01-06 15:21:42 +01:00
parent ffcac982d0
commit f21e192a8f
7 changed files with 16 additions and 9 deletions

View file

@ -6,7 +6,8 @@
# disable annoying warnings # disable annoying warnings
warning("GcUnsafe2", off) warning("GcUnsafe2", off)
warning("ObservableStores", off) hint("XDeclaredButNotUsed", off)
hint("User", off)
const const
nimVersion = (major: NimMajor, minor: NimMinor, patch: NimPatch) nimVersion = (major: NimMajor, minor: NimMinor, patch: NimPatch)

View file

@ -51,9 +51,10 @@
margin-bottom: unset; margin-bottom: unset;
} }
@media(max-width: 600px) { @media(max-width: 700px) {
.profile-tabs { .profile-tabs {
width: 100vw; width: 100vw;
max-width: 600px;
.timeline-container { .timeline-container {
width: 100% !important; width: 100% !important;
@ -71,3 +72,9 @@
padding: 0; padding: 0;
} }
} }
@media (min-height: 900px) {
.profile-tab.sticky {
position: sticky;
}
}

View file

@ -103,7 +103,7 @@
color: var(--profile_stat); color: var(--profile_stat);
} }
@media(max-width: 600px) { @media(max-width: 700px) {
.profile-card-info { .profile-card-info {
display: flex; display: flex;
} }

View file

@ -59,7 +59,7 @@
padding-bottom: 12px; padding-bottom: 12px;
} }
@media(max-width: 600px) { @media(max-width: 700px) {
.photo-rail-header { .photo-rail-header {
display: none; display: none;
} }
@ -74,9 +74,7 @@
overflow: hidden; overflow: hidden;
transition: max-height 0.4s; transition: max-height 0.4s;
} }
}
@media(max-width: 600px) {
.photo-rail-grid { .photo-rail-grid {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
} }

View file

@ -75,6 +75,7 @@
&.wide { &.wide {
flex-grow: 1.2; flex-grow: 1.2;
flex-basis: 50px;
} }
} }

View file

@ -45,7 +45,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
let opensearchUrl = getUrlPrefix(cfg) & "/opensearch" let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
buildHtml(head): buildHtml(head):
link(rel="stylesheet", type="text/css", href="/css/style.css?v=8") link(rel="stylesheet", type="text/css", href="/css/style.css?v=9")
link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2") link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2")
if theme.len > 0: if theme.len > 0:

View file

@ -105,8 +105,8 @@ proc renderProfile*(profile: Profile; timeline: var Timeline;
tdiv(class="profile-banner"): tdiv(class="profile-banner"):
renderBanner(profile) renderBanner(profile)
let sticky = if prefs.stickyProfile: "sticky" else: "unset" let sticky = if prefs.stickyProfile: " sticky" else: ""
tdiv(class="profile-tab", style={position: sticky}): tdiv(class=(&"profile-tab{sticky}")):
renderProfileCard(profile, prefs) renderProfileCard(profile, prefs)
if photoRail.len > 0: if photoRail.len > 0:
renderPhotoRail(profile, photoRail) renderPhotoRail(profile, photoRail)