Support dark mode in the frontend
This commit is contained in:
@ -345,20 +345,9 @@ function EpisodeList() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
>
|
||||
<h2>
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
<div className="episode-header">
|
||||
<h2 className="episode-title">
|
||||
エピソード一覧 (
|
||||
{searchQuery
|
||||
? `検索結果: ${filteredEpisodes.length}件`
|
||||
@ -369,8 +358,8 @@ function EpisodeList() {
|
||||
: `${episodes.length}件`}
|
||||
)
|
||||
</h2>
|
||||
<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
|
||||
<span style={{ fontSize: "12px", color: "#666" }}>
|
||||
<div className="episode-meta">
|
||||
<span className="episode-meta-text">
|
||||
データソース: {useDatabase ? "データベース" : "XML"}
|
||||
</span>
|
||||
<button className="btn btn-secondary" onClick={fetchEpisodes}>
|
||||
@ -379,27 +368,13 @@ function EpisodeList() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div className="episode-search-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="エピソードを検索..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
flex: "1",
|
||||
minWidth: "200px",
|
||||
padding: "8px 12px",
|
||||
fontSize: "14px",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
className="episode-search-input"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
@ -417,13 +392,7 @@ function EpisodeList() {
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
fontSize: "14px",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
minWidth: "120px",
|
||||
}}
|
||||
className="episode-category-select"
|
||||
>
|
||||
<option value="">全カテゴリ</option>
|
||||
{categories.map((category) => (
|
||||
@ -434,7 +403,7 @@ function EpisodeList() {
|
||||
</select>
|
||||
)}
|
||||
{isSearching && (
|
||||
<span style={{ fontSize: "14px", color: "#666" }}>検索中...</span>
|
||||
<span className="episode-meta-text">検索中...</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -456,24 +425,18 @@ function EpisodeList() {
|
||||
<strong>
|
||||
<Link
|
||||
to={`/episode/${episode.id}`}
|
||||
style={{ textDecoration: "none", color: "#007bff" }}
|
||||
className="episode-link"
|
||||
>
|
||||
{episode.title}
|
||||
</Link>
|
||||
</strong>
|
||||
</div>
|
||||
{episode.feedTitle && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#666",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
<div className="episode-feed-info">
|
||||
フィード:{" "}
|
||||
<Link
|
||||
to={`/feeds/${episode.feedId}`}
|
||||
style={{ color: "#007bff" }}
|
||||
className="episode-link"
|
||||
>
|
||||
{episode.feedTitle}
|
||||
</Link>
|
||||
@ -481,7 +444,7 @@ function EpisodeList() {
|
||||
<span
|
||||
style={{
|
||||
marginLeft: "8px",
|
||||
color: "#999",
|
||||
color: "var(--text-muted)",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
@ -492,13 +455,7 @@ function EpisodeList() {
|
||||
)}
|
||||
{episode.articleTitle &&
|
||||
episode.articleTitle !== episode.title && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#666",
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
>
|
||||
<div className="episode-article-info">
|
||||
元記事: <strong>{episode.articleTitle}</strong>
|
||||
</div>
|
||||
)}
|
||||
@ -507,46 +464,26 @@ function EpisodeList() {
|
||||
href={episode.articleLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ fontSize: "12px", color: "#666" }}
|
||||
className="episode-article-link"
|
||||
>
|
||||
元記事を見る
|
||||
</a>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
maxWidth: "200px",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<div className="episode-description">
|
||||
{episode.description || "No description"}
|
||||
</div>
|
||||
{episode.fileSize && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#666",
|
||||
marginTop: "4px",
|
||||
}}
|
||||
>
|
||||
<div className="episode-file-size">
|
||||
{formatFileSize(episode.fileSize)}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td>{formatDate(episode.createdAt)}</td>
|
||||
<td>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "8px",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<div className="episode-actions">
|
||||
<div className="episode-action-buttons">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() =>
|
||||
@ -593,16 +530,7 @@ function EpisodeList() {
|
||||
|
||||
{/* Pagination Controls - only show for database mode */}
|
||||
{useDatabase && totalPages > 1 && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: "20px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div className="pagination-container">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
@ -612,7 +540,7 @@ function EpisodeList() {
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
<div style={{ display: "flex", gap: "5px", alignItems: "center" }}>
|
||||
<div className="pagination-pages">
|
||||
{/* First page */}
|
||||
{currentPage > 3 && (
|
||||
<>
|
||||
@ -635,11 +563,8 @@ function EpisodeList() {
|
||||
return (
|
||||
<button
|
||||
key={pageNum}
|
||||
className={`btn ${currentPage === pageNum ? "btn-primary" : "btn-secondary"}`}
|
||||
className={`btn pagination-page-btn ${currentPage === pageNum ? "btn-primary" : "btn-secondary"}`}
|
||||
onClick={() => setCurrentPage(pageNum)}
|
||||
style={{
|
||||
minWidth: "40px",
|
||||
}}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
@ -669,7 +594,7 @@ function EpisodeList() {
|
||||
</button>
|
||||
|
||||
{/* Page size selector */}
|
||||
<div style={{ marginLeft: "20px", display: "flex", alignItems: "center", gap: "5px" }}>
|
||||
<div className="pagination-size-selector">
|
||||
<span style={{ fontSize: "14px" }}>表示件数:</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
@ -677,12 +602,7 @@ function EpisodeList() {
|
||||
setPageSize(Number.parseInt(e.target.value, 10));
|
||||
setCurrentPage(1); // Reset to first page when changing page size
|
||||
}}
|
||||
style={{
|
||||
padding: "4px 8px",
|
||||
fontSize: "14px",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
className="pagination-size-select"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={20}>20</option>
|
||||
|
||||
Reference in New Issue
Block a user