varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-02-12 14:40:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: video list

Browse Source
This commit is contained in:
officiallyutso
2025-06-27 23:00:46 +05:30
parent 1872f9bb28
commit 3adb946a8b
2 changed files with 159 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
css/mobile.css
View File

@ -35,17 +35,21 @@
width: auto; width: auto;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
gap: 0px; /* Add gap between logo and text */
} }
/* Logo and text container alignment */ /* Logo and text container alignment - FIXED */
.pre-nav .brand .logo { .pre-nav .brand .logo {
height: 50px; height: 50px;
margin-right: 15px; padding-left: 50px;
margin-right: 0; /* Remove margin, using gap instead */
flex-shrink: 0; /* Prevent logo from shrinking */
} }
.pre-nav .name-container { .pre-nav .name-container {
text-align: left; text-align: left;
padding-left: 10em; padding-left: 0; /* Remove excessive padding */
flex-grow: 0; /* Don't grow */
} }
.pre-nav .name-container .name { .pre-nav .name-container .name {
@ -904,151 +908,187 @@
border: 0; border: 0;
} }
/* Video Caption - Mobile */ /* Video Caption - Mobile - Fixed spacing */
#yt-videos-container .video-caption { #yt-videos-container .video-caption {
padding: 15px; padding: 20px 15px !important;
background: #fff; background: transparent !important;
border-radius: 0 0 8px 8px; border-radius: 0 !important;
margin-top: -5px; margin-top: 10px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: none !important;
} }
#yt-videos-container .video-caption .caption { #yt-videos-container .video-caption .caption {
font-size: 16px; font-size: 18px !important;
line-height: 1.4; line-height: 1.4 !important;
margin: 0; margin: 0 !important;
color: #333; color: #333 !important;
font-weight: 600; font-weight: 600 !important;
text-align: center !important;
} }
/* Video List - Mobile specific*/ /* Video List - Mobile specific - FORCED LAYOUT FIX */
#yt-videos-container .video-list { #yt-videos-container .video-list {
list-style: none; list-style: none !important;
padding: 0; padding: 0 !important;
margin: 0; margin: 0 !important;
width: 100%; width: 100% !important;
} }
#yt-videos-container .video-list .list-video { #yt-videos-container .video-list .list-video {
margin: 0 0 20px 0; margin: 0 0 20px 0 !important;
padding: 0; padding: 0 !important;
border-radius: 8px; border-radius: 8px !important;
overflow: hidden; overflow: hidden !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.1); box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
background: #fff; background: #fff !important;
display: block; display: block !important;
width: 100% !important;
} }
#yt-videos-container .video-list .list-video a { #yt-videos-container .video-list .list-video a {
display: block; display: block !important;
text-decoration: none; text-decoration: none !important;
color: inherit; color: inherit !important;
width: 100% !important;
} }
/* FORCE VERTICAL LAYOUT - Override all conflicting styles */
#yt-videos-container .video-list .list-video .row { #yt-videos-container .video-list .list-video .row {
margin: 0; margin: 0 !important;
display: flex; display: block !important;
flex-direction: column; width: 100% !important;
} }
#yt-videos-container .video-list .list-video .col-md-6 { #yt-videos-container .video-list .list-video .col-md-6 {
padding: 0; padding: 0 !important;
margin: 0; margin: 0 !important;
width: 100%; width: 100% !important;
float: none !important;
display: block !important;
position: relative !important;
} }
/* Video List Image Container - FULL WIDTH FORCED */
#yt-videos-container .video-list .list-video .img-container { #yt-videos-container .video-list .list-video .img-container {
width: 100%; width: 100% !important;
height: 150px; height: 160px !important;
overflow: hidden; overflow: hidden !important;
position: relative; position: relative !important;
margin-bottom: 0 !important;
display: block !important;
} }
#yt-videos-container .video-list .list-video .img-container img { #yt-videos-container .video-list .list-video .img-container img {
width: 100%; width: 100% !important;
height: 100%; height: 100% !important;
object-fit: cover; object-fit: cover !important;
display: block; display: block !important;
} }
/* Video List Caption - BELOW IMAGE FORCED */
#yt-videos-container .video-list .list-video .caption { #yt-videos-container .video-list .list-video .caption {
padding: 15px; padding: 15px !important;
width: 100%; width: 100% !important;
text-align: center !important;
display: block !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
background: #fff !important;
min-height: 60px !important;
} }
#yt-videos-container .video-list .list-video .caption span { #yt-videos-container .video-list .list-video .caption span {
font-size: 14px; font-size: 15px !important;
line-height: 1.4; line-height: 1.4 !important;
color: #333; color: #333 !important;
display: block; display: block !important;
font-weight: 500; font-weight: 600 !important;
} position: relative !important;
/* Hover effects for video list items */ top: auto !important;
#yt-videos-container .video-list .list-video:hover { left: auto !important;
transform: translateY(-2px); right: auto !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); bottom: auto !important;
transition: all 0.3s ease; transform: none !important;
text-align: center !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
} }
/* Facebook widget in video section */ /* Ensure the link text shows */
#yt-videos-container .fb-page { #yt-videos-container .video-list .list-video a {
color: #333 !important;
text-decoration: none !important;
}
#yt-videos-container .video-list .list-video a:hover {
color: #007bff !important;
text-decoration: none !important;
}
/* Remove any center-both, center-vertical classes that might be interfering */
#yt-videos-container .video-list .center-both,
#yt-videos-container .video-list .center-vertical,
#yt-videos-container .video-list .img-center-fill {
position: static !important;
transform: none !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important; width: 100% !important;
margin-top: 20px; height: 100% !important;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
} }
/* Remove any conflicting styles base.scss is too jumbled to figure out the conflicts */ /* FIX 1: Center-align the main video caption */
#yt-videos-container .center-both, #yt-videos-container .video-caption .caption {
#yt-videos-container .img-center-fill, font-size: 18px !important;
#yt-videos-container .center-vertical { line-height: 1.4 !important;
position: static; margin: 0 !important;
transform: none; color: #333 !important;
top: auto; font-weight: 600 !important;
left: auto; text-align: center !important;
right: auto;
bottom: auto;
} }
/* Ensure proper spacing between sections */ /* Ensure proper spacing between sections */
#featured-articles-container + #yt-videos-container { #featured-articles-container + #yt-videos-container {
margin-top: 40px; margin-top: 40px;
} }
}
/* Extra small devices adjustments */ /* Extra small devices adjustments */
@media (max-width: 480px) { @media (max-width: 480px) {
#yt-videos-container .container-title, #yt-videos-container .container-title,
#featured-articles-container .container-title { #featured-articles-container .container-title {
font-size: 16px; font-size: 16px;
padding: 8px 12px; padding: 8px 12px;
} }
#yt-videos-container .video-caption .caption { #yt-videos-container .video-caption .caption {
font-size: 15px; font-size: 15px;
} }
#featured-articles .article-horizontal .details .title { #featured-articles .article-horizontal .details .title {
font-size: 15px; font-size: 15px;
} }
#featured-articles .article-horizontal .details .excerpt { #featured-articles .article-horizontal .details .excerpt {
font-size: 12px; font-size: 12px;
} }
#yt-videos-container .video-list .list-video .img-container { #yt-videos-container .video-list .list-video .img-container {
width: 100px; height: 140px;
height: 70px; }
}
#yt-videos-container .video-list .list-video .caption { #yt-videos-container .video-list .list-video .caption {
padding: 12px; padding: 12px;
} }
#yt-videos-container .video-list .list-video .caption span { #yt-videos-container .video-list .list-video .caption span {
font-size: 13px; font-size: 13px;
}
} }
} }

7
index.html
View File

@ -32,10 +32,11 @@ title: "Watch Out, IIT Roorkee"
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe> <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
</div> </div>
<div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
<h2 class="caption">{{ video.title }}</h2>
</div>
</div> </div>
<div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
<h2 class="caption">{{ video.title }}</h2>
</div>
</div> <!-- col-md-8 --> </div> <!-- col-md-8 -->
<ul class="col-md-4 video-list"> <ul class="col-md-4 video-list">
{% for video in site.data.youtube offset: 1 limit: 4 %} {% for video in site.data.youtube offset: 1 limit: 4 %}