Add proper mobile support

Fixes #30
This commit is contained in:
Zed 2019-09-08 00:55:12 +02:00
parent 6b963d6e77
commit cc58ad95ac
2 changed files with 114 additions and 9 deletions

View file

@ -358,7 +358,7 @@ video, .video-container img {
.still-image img { .still-image img {
object-fit: cover; object-fit: cover;
max-width: 533px; max-width: 100%;
max-height: 379.5px; max-height: 379.5px;
border-color: #222; border-color: #222;
flex-basis: 300px; flex-basis: 300px;
@ -518,7 +518,15 @@ video, .video-container img {
display: flex; display: flex;
} }
.profile-card-info {
width: 100%;
overflow: auto;
overflow-wrap: break-word;
}
.profile-card-tabs-name { .profile-card-tabs-name {
overflow: auto;
overflow-wrap: break-word;
max-width: 100%; max-width: 100%;
} }
@ -551,7 +559,7 @@ video, .video-container img {
.profile-card-avatar img { .profile-card-avatar img {
display: block; display: block;
width: calc(100% - 4px); width: calc(100% - 8px);
height: 100%; height: 100%;
margin: 0; margin: 0;
border: 4px solid #282828; border: 4px solid #282828;
@ -594,13 +602,35 @@ video, .video-container img {
background: #161616; background: #161616;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
width: 100%; width: 100%;
margin-top: 5px; margin: 5px 0;
} }
.photo-rail-header { .photo-rail-header {
padding: 5px 12px 0px 12px; padding: 5px 12px 0px 12px;
} }
.photo-rail-header-mobile {
padding: 5px 12px 0px 12px;
display: none;
}
#photo-rail-toggle {
display: none;
}
.photo-rail-label {
width: 100%;
float: unset;
color: #ff6c60;
display: flex;
justify-content: space-between;
}
#photo-rail-toggle:checked ~ .photo-rail-grid {
max-height: 600px;
padding-bottom: 12px;
}
.photo-rail-grid { .photo-rail-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
@ -1010,6 +1040,7 @@ video, .video-container img {
.card-content-container { .card-content-container {
color: unset; color: unset;
overflow: auto;
} }
.card-content-container:hover { .card-content-container:hover {
@ -1151,7 +1182,6 @@ video, .video-container img {
.preferences { .preferences {
background-color: #1f1f1f; background-color: #1f1f1f;
width: 100%;
padding: 5px 15px 15px 15px; padding: 5px 15px 15px 15px;
} }
@ -1196,6 +1226,10 @@ legend {
margin-bottom: 6px; margin-bottom: 6px;
} }
.pref-input label {
padding-right: 135px;
}
.pref-reset { .pref-reset {
float: left; float: left;
} }
@ -1223,6 +1257,7 @@ legend {
margin-bottom: 5px; margin-bottom: 5px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding-right: 22px;
} }
.checkbox-container input { .checkbox-container input {
@ -1268,3 +1303,66 @@ legend {
font-family: "fontello"; font-family: "fontello";
content: '\e803'; content: '\e803';
} }
@media (max-width: 600px) {
.profile-tabs {
width: 100vw;
}
.profile-tab {
width: 100%;
max-width: unset;
position: initial !important;
padding: 0;
}
.profile-tabs > .timeline-tab {
width: 100% !important;
}
.profile-card-info {
display: flex;
}
.profile-card-tabs-name {
overflow: auto;
overflow-wrap: break-word;
}
.profile-card-avatar {
padding-bottom: 6px;
height: 60px;
width: unset;
}
.profile-card-avatar img {
border-width: 2px;
width: unset;
}
.photo-rail-header {
display: none;
}
.photo-rail-header-mobile {
display: block;
}
.photo-rail-grid {
max-height: 0px;
padding-bottom: 0;
overflow: hidden;
transition: padding-bottom 0.4s ease-in;
transition: max-height 0.4s;
}
.quote-media-container {
width: 70px;
max-height: 70px;
}
.preferences-container {
max-width: 95vw;
margin: 0;
}
}

View file

@ -13,6 +13,7 @@ proc renderStat(num, class: string; text=""): VNode =
proc renderProfileCard*(profile: Profile; prefs: Prefs): VNode = proc renderProfileCard*(profile: Profile; prefs: Prefs): VNode =
buildHtml(tdiv(class="profile-card")): buildHtml(tdiv(class="profile-card")):
tdiv(class="profile-card-info"):
a(class="profile-card-avatar", href=profile.getUserPic().getSigUrl("pic")): a(class="profile-card-avatar", href=profile.getUserPic().getSigUrl("pic")):
genImg(profile.getUserpic("_200x200")) genImg(profile.getUserpic("_200x200"))
@ -52,6 +53,12 @@ proc renderPhotoRail(profile: Profile; photoRail: seq[GalleryPhoto]): VNode =
a(href=(&"/{profile.username}/media")): a(href=(&"/{profile.username}/media")):
icon "picture", $profile.media & " Photos and videos" icon "picture", $profile.media & " Photos and videos"
input(id="photo-rail-toggle", `type`="checkbox")
tdiv(class="photo-rail-header-mobile"):
label(`for`="photo-rail-toggle", class="photo-rail-label"):
icon "picture", $profile.media & " Photos and videos"
icon "down"
tdiv(class="photo-rail-grid"): tdiv(class="photo-rail-grid"):
for i, photo in photoRail: for i, photo in photoRail:
if i == 16: break if i == 16: break