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