snxraven/ravenscott-rocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css

Browse Source
This commit is contained in:
snxraven
2025-06-22 04:57:52 -04:00
parent af7b2da88f
commit 7bd03f0630
1 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
views/index.ejs
View File

@ -133,7 +133,8 @@
/* Page container styling */ /* Page container styling */
.page-container { .page-container {
display: none; display: none;
width: 100%; /* Ensure full width for grid */ width: 100%;
/* Ensure full width for grid */
} }
.page-container.active { .page-container.active {
@ -156,13 +157,54 @@
margin-right: -15px; margin-right: -15px;
margin-left: -15px; margin-left: -15px;
} }
.pagination-btn {
margin: 0 10px;
color: white;
/* Ensure text is white for consistency */
font-weight: bold;
/* Match the bold style of other UI elements */
}
/* Hover state (already defined for btn-primary, but reinforcing for clarity) */
.pagination-btn.btn-primary:hover {
background-color: #ff3300;
border-color: #ff3300;
}
/* Disabled state */
.pagination-btn.btn-primary:disabled,
.pagination-btn.btn-primary[disabled] {
background-color: #444;
/* Darker, muted gray to indicate inactivity */
border-color: #444;
color: #888;
/* Lighter gray text for readability */
opacity: 1;
/* Override Bootstrap's default opacity */
cursor: not-allowed;
/* Clear visual cue for disabled state */
}
/* Active state (when button is clicked, if applicable) */
.pagination-btn.btn-primary:active,
.pagination-btn.btn-primary:focus {
background-color: #cc4400;
/* Slightly darker orange for feedback */
border-color: #cc4400;
box-shadow: 0 0 8px rgba(255, 85, 0, 0.5);
/* Subtle glow to match theme */
outline: none;
/* Remove default focus outline */
}
</style> </style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="https://raven-scott.rocks">Raven Scott Music</a> <a class="navbar-brand" href="https://raven-scott.rocks">Raven Scott Music</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
@ -185,9 +227,10 @@
<%= genre.charAt(0).toUpperCase() + genre.slice(1) %> Tracks <%= genre.charAt(0).toUpperCase() + genre.slice(1) %> Tracks
</h2> </h2>
<div id="<%= genre %>-tracks"> <div id="<%= genre %>-tracks">
<div class="page-container active" data-page="1" data-total-pages="<%= genreTracks[genre].totalPages %>"> <div class="page-container active" data-page="1"
data-total-pages="<%= genreTracks[genre].totalPages %>">
<div class="row"> <div class="row">
<% genreTracks[genre].tracks.forEach(track => { %> <% genreTracks[genre].tracks.forEach(track=> { %>
<div class="col-md-6 mb-4" data-slug="<%= track.slug %>"> <div class="col-md-6 mb-4" data-slug="<%= track.slug %>">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
@ -195,11 +238,13 @@
<%= track.title %> <%= track.title %>
</h5> </h5>
<p class="card-text"></p> <p class="card-text"></p>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" <iframe width="100%" height="166" scrolling="no" frameborder="no"
allow="autoplay"
data-src="https://w.soundcloud.com/player/?url=<%= track.url %>&color=%23ff5500&auto_play=false&show_artwork=true" data-src="https://w.soundcloud.com/player/?url=<%= track.url %>&color=%23ff5500&auto_play=false&show_artwork=true"
loading="lazy"> loading="lazy">
</iframe> </iframe>
<a href="/<%= genre %>/track/<%= track.slug %>" class="btn btn-primary mt-3" target="_blank">More Details</a> <a href="/<%= genre %>/track/<%= track.slug %>" class="btn btn-primary mt-3"
target="_blank">More Details</a>
</div> </div>
</div> </div>
</div> </div>
@ -208,9 +253,13 @@
</div> </div>
</div> </div>
<div class="text-center mb-4"> <div class="text-center mb-4">
<button class="btn btn-primary pagination-btn" id="<%= genre %>-prev" data-page="<%= genreTracks[genre].page - 1 %>" <%= genreTracks[genre].page === 1 ? 'disabled' : '' %>>Previous</button> <button class="btn btn-primary pagination-btn" id="<%= genre %>-prev"
data-page="<%= genreTracks[genre].page - 1 %>" <%=genreTracks[genre].page===1 ? 'disabled' : ''
%>>Previous</button>
<span>Page <%= genreTracks[genre].page %> of <%= genreTracks[genre].totalPages %></span> <span>Page <%= genreTracks[genre].page %> of <%= genreTracks[genre].totalPages %></span>
<button class="btn btn-primary pagination-btn" id="<%= genre %>-next" data-page="<%= genreTracks[genre].page + 1 %>" <%= genreTracks[genre].page === genreTracks[genre].totalPages ? 'disabled' : '' %>>Next</button> <button class="btn btn-primary pagination-btn" id="<%= genre %>-next"
data-page="<%= genreTracks[genre].page + 1 %>"
<%=genreTracks[genre].page===genreTracks[genre].totalPages ? 'disabled' : '' %>>Next</button>
</div> </div>
</section> </section>
<% } %> <% } %>