Improve mobile responsiveness
This commit is contained in:
parent
ffcac982d0
commit
f21e192a8f
7 changed files with 16 additions and 9 deletions
|
@ -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)
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -75,6 +75,7 @@
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
flex-grow: 1.2;
|
flex-grow: 1.2;
|
||||||
|
flex-basis: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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:
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in a new issue