Cynosphere/nitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add proper mobile support

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

106
public/css/style.css
View file

@ -358,7 +358,7 @@ video, .video-container img {
.still-image img {
object-fit: cover;
max-width: 533px;
max-width: 100%;
max-height: 379.5px;
border-color: #222;
flex-basis: 300px;
@ -518,7 +518,15 @@ video, .video-container img {
display: flex;
}
.profile-card-info {
width: 100%;
overflow: auto;
overflow-wrap: break-word;
}
.profile-card-tabs-name {
overflow: auto;
overflow-wrap: break-word;
max-width: 100%;
}
@ -551,7 +559,7 @@ video, .video-container img {
.profile-card-avatar img {
display: block;
width: calc(100% - 4px);
width: calc(100% - 8px);
height: 100%;
margin: 0;
border: 4px solid #282828;
@ -594,13 +602,35 @@ video, .video-container img {
background: #161616;
border-radius: 0 0 4px 4px;
width: 100%;
margin-top: 5px;
margin: 5px 0;
}
.photo-rail-header {
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 {
display: grid;
grid-template-columns: repeat(4, 1fr);
@ -1010,6 +1040,7 @@ video, .video-container img {
.card-content-container {
color: unset;
overflow: auto;
}
.card-content-container:hover {
@ -1151,7 +1182,6 @@ video, .video-container img {
.preferences {
background-color: #1f1f1f;
width: 100%;
padding: 5px 15px 15px 15px;
}
@ -1196,6 +1226,10 @@ legend {
margin-bottom: 6px;
}
.pref-input label {
padding-right: 135px;
}
.pref-reset {
float: left;
}
@ -1223,6 +1257,7 @@ legend {
margin-bottom: 5px;
cursor: pointer;
user-select: none;
padding-right: 22px;
}
.checkbox-container input {
@ -1268,3 +1303,66 @@ legend {
font-family: "fontello";
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;
}
}

17
src/views/profile.nim
View file

@ -13,12 +13,13 @@ proc renderStat(num, class: string; text=""): VNode =
proc renderProfileCard*(profile: Profile; prefs: Prefs): VNode =
buildHtml(tdiv(class="profile-card")):
a(class="profile-card-avatar", href=profile.getUserPic().getSigUrl("pic")):
genImg(profile.getUserpic("_200x200"))
tdiv(class="profile-card-info"):
a(class="profile-card-avatar", href=profile.getUserPic().getSigUrl("pic")):
genImg(profile.getUserpic("_200x200"))
tdiv(class="profile-card-tabs-name"):
linkUser(profile, class="profile-card-fullname")
linkUser(profile, class="profile-card-username")
tdiv(class="profile-card-tabs-name"):
linkUser(profile, class="profile-card-fullname")
linkUser(profile, class="profile-card-username")
tdiv(class="profile-card-extra"):
if profile.bio.len > 0:
@ -52,6 +53,12 @@ proc renderPhotoRail(profile: Profile; photoRail: seq[GalleryPhoto]): VNode =
a(href=(&"/{profile.username}/media")):
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"):
for i, photo in photoRail:
if i == 16: break