Improve mobile responsiveness - touch targets, better grids, smaller screens
This commit is contained in:
ghassan
parent
a28023c29b
commit
1888f77886
@ -677,3 +677,134 @@
|
||||
@yield('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Extra Mobile Responsive Styles -->
|
||||
<style>
|
||||
/* Touch-friendly improvements */
|
||||
@media (max-width: 480px) {
|
||||
/* Better touch targets */
|
||||
.yt-menu-btn, .yt-icon-btn, .yt-mobile-search-toggle {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Reduce padding on main content */
|
||||
.yt-main {
|
||||
padding: 12px 8px !important;
|
||||
}
|
||||
|
||||
/* Smaller video title */
|
||||
.yt-video-title, .video-title {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* Channel info compact */
|
||||
.channel-info {
|
||||
gap: 8px !important;
|
||||
}
|
||||
.channel-avatar {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
.channel-name {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.channel-subs {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Video meta smaller */
|
||||
.yt-channel-name, .yt-video-meta {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Action buttons horizontal scroll on mobile */
|
||||
.video-actions {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.yt-action-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Comment improvements */
|
||||
.comment-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
.comment-item > img {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
/* Search input mobile */
|
||||
.yt-search-input {
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* Header spacing */
|
||||
.yt-header {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* User dropdown full width on mobile */
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small screens */
|
||||
@media (max-width: 360px) {
|
||||
.yt-main {
|
||||
padding: 8px 4px !important;
|
||||
}
|
||||
|
||||
.yt-header-right .yt-icon-btn:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape mobile */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.yt-sidebar {
|
||||
width: 200px;
|
||||
}
|
||||
.yt-video-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent horizontal scroll */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* Better video player on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.video-container {
|
||||
border-radius: 0 !important;
|
||||
margin: 0 -16px !important;
|
||||
max-width: calc(100% + 32px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar link padding for touch */
|
||||
@media (hover: none) {
|
||||
.yt-sidebar-link {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.yt-sidebar-link:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.yt-sidebar-link:active {
|
||||
background: var(--border-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -694,3 +694,43 @@ document.querySelectorAll('.pagination a').forEach(function(link) {
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
||||
<!-- Extra Mobile Styles -->
|
||||
<style>
|
||||
@media (max-width: 480px) {
|
||||
.channel-header {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.channel-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.channel-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
.channel-stats {
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.channel-stat-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
.yt-video-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
.yt-video-thumb {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.yt-video-info {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.yt-channel-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.yt-video-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -286,3 +286,35 @@ document.addEventListener('touchend', function(e) {
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
|
||||
<!-- Extra Mobile Styles -->
|
||||
<style>
|
||||
@media (max-width: 400px) {
|
||||
.yt-video-grid {
|
||||
gap: 12px;
|
||||
}
|
||||
.yt-video-thumb {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.yt-video-info {
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.yt-channel-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.yt-video-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
.yt-channel-name, .yt-video-meta {
|
||||
font-size: 11px;
|
||||
}
|
||||
.search-info {
|
||||
padding: 12px;
|
||||
}
|
||||
.search-info h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -492,3 +492,33 @@
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
<!-- Extra Mobile Styles -->
|
||||
<style>
|
||||
@media (max-width: 400px) {
|
||||
.video-layout-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.video-title {
|
||||
font-size: 15px !important;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.video-stats-left {
|
||||
font-size: 12px;
|
||||
}
|
||||
.video-description-box {
|
||||
margin: 12px 4px;
|
||||
padding: 10px !important;
|
||||
}
|
||||
.comments-section {
|
||||
margin-top: 16px;
|
||||
padding: 12px 4px;
|
||||
}
|
||||
.comment-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
.comment-form > img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user