parent
6b963d6e77
commit
cc58ad95ac
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue