@@ -800,6 +800,17 @@ html(lang="en")
800800 }
801801 }
802802
803+ /* Slider styles */
804+ .slider {position :relative ;margin :1rem 0 }
805+ .slider-track {display :flex ;gap :1rem ;overflow-x :auto ;padding :1rem 0 ;scroll-behavior :smooth }
806+ .slide-card {min-width :260px ;background :var (--darker );border :1px solid var (--gray-dark );padding :1rem ;border-radius :10px ;flex :0 0 auto }
807+ .slider-prev ,.slider-next {position :absolute ;top :50% ;transform :translateY (-50% );background :rgba (0 ,0 ,0 ,0.55 );border :none ;color :#fff ;padding :0.5rem ;border-radius :6px ;cursor :pointer ;z-index :5 }
808+ .slider-prev {left :0.5rem }
809+ .slider-next {right :0.5rem }
810+ .slide-link {color :var (--light );text-decoration :none ;display :block }
811+ .slide-title {font-weight :600 ;margin-bottom :0.5rem }
812+ .slide-meta {color :var (--gray );font-size :0.85rem }
813+
803814 body
804815 // Header
805816 header.dashboard-header
@@ -863,6 +874,57 @@ html(lang="en")
863874 h3 Settings
864875 p Manage your account preferences
865876
877+ // Problems Sliders (Owner / Member)
878+ section.slider-section
879+ .section-header
880+ .section-title Problems In Your Communities
881+ if ownerProblems && ownerProblems .length > 0
882+ .slider
883+ button.slider-prev ( type ="button" )
884+ i.fas.fa-chevron-left
885+ .slider-track #ownerSlider
886+ each problem in ownerProblems
887+ .slide-card
888+ a.slide-link ( href =` /com/${ problem .com_id } ` )
889+ .slide-title #{(problem .msg && problem .msg .length > 80 ) ? problem .msg .substring (0 ,80 ) + ' ...' : (problem .msg || ' Untitled problem' )}
890+ .slide-meta
891+ span #{problem .category || ' general' }
892+ | •
893+ span #{problem .solved ? ' Solved' : ' Open' }
894+ button.slider-next ( type ="button" )
895+ i.fas.fa-chevron-right
896+ else
897+ .empty-state
898+ .empty-icon
899+ i.fas.fa-list
900+ h3 No Problems In Your Owned Communities
901+ p There are no active problems raised in the communities you own.
902+
903+ section.slider-section
904+ .section-header
905+ .section-title Problems In Communities You Use
906+ if memberProblems && memberProblems .length > 0
907+ .slider
908+ button.slider-prev ( type ="button" )
909+ i.fas.fa-chevron-left
910+ .slider-track #memberSlider
911+ each problem in memberProblems
912+ .slide-card
913+ a.slide-link ( href =` /com/${ problem .com_id } ` )
914+ .slide-title #{(problem .msg && problem .msg .length > 80 ) ? problem .msg .substring (0 ,80 ) + ' ...' : (problem .msg || ' Untitled problem' )}
915+ .slide-meta
916+ span #{problem .category || ' general' }
917+ | •
918+ span #{problem .solved ? ' Solved' : ' Open' }
919+ button.slider-next ( type ="button" )
920+ i.fas.fa-chevron-right
921+ else
922+ .empty-state
923+ .empty-icon
924+ i.fas.fa-list
925+ h3 No Problems Found
926+ p There are no problems in communities you are a member of.
927+
866928 // Your Communities Section
867929 section.communities-section
868930 .section-header
@@ -932,6 +994,8 @@ html(lang="en")
932994 i.fas.fa-search
933995 | Find Communities
934996
997+
998+
935999 // Create Community Modal
9361000 .modal #createCommunityModal
9371001 .modal-content
@@ -1207,5 +1271,43 @@ html(lang="en")
12071271 // Auto-refresh notifications every 30 seconds
12081272 setInterval (loadNotifications, 30000 );
12091273
1210- // Load notifications on page load
1211- document .addEventListener (' DOMContentLoaded' , loadNotifications);
1274+ // Slider initialization: prev/next and drag-to-scroll
1275+ function initSliders () {
1276+ document .querySelectorAll (' .slider' ).forEach (slider => {
1277+ const track = slider .querySelector (' .slider-track' );
1278+ const prev = slider .querySelector (' .slider-prev' );
1279+ const next = slider .querySelector (' .slider-next' );
1280+ if (! track) return ;
1281+
1282+ if (prev) prev .addEventListener (' click' , () => {
1283+ track .scrollBy ({ left: - Math .round (track .clientWidth * 0.8 ), behavior: ' smooth' });
1284+ });
1285+ if (next) next .addEventListener (' click' , () => {
1286+ track .scrollBy ({ left: Math .round (track .clientWidth * 0.8 ), behavior: ' smooth' });
1287+ });
1288+
1289+ // Mouse drag to scroll
1290+ let isDown = false , startX, scrollLeft;
1291+ track .addEventListener (' mousedown' , (e ) => {
1292+ isDown = true ;
1293+ track .classList .add (' active' );
1294+ startX = e .pageX - track .offsetLeft ;
1295+ scrollLeft = track .scrollLeft ;
1296+ });
1297+ track .addEventListener (' mouseleave' , () => { isDown = false ; track .classList .remove (' active' ); });
1298+ track .addEventListener (' mouseup' , () => { isDown = false ; track .classList .remove (' active' ); });
1299+ track .addEventListener (' mousemove' , (e ) => {
1300+ if (! isDown) return ;
1301+ e .preventDefault ();
1302+ const x = e .pageX - track .offsetLeft ;
1303+ const walk = (x - startX) * 1 ; // scroll-fast factor
1304+ track .scrollLeft = scrollLeft - walk;
1305+ });
1306+ });
1307+ }
1308+
1309+ // Load notifications and initialize sliders on page load
1310+ document .addEventListener (' DOMContentLoaded' , () => {
1311+ loadNotifications ();
1312+ initSliders ();
1313+ });
0 commit comments