通知中心优化
This commit is contained in:
superlishunqin
parent
5933289d6e
commit
70cdc6fea4
312
app/static/css/announcement-list.css
Normal file
312
app/static/css/announcement-list.css
Normal file
@ -0,0 +1,312 @@
|
||||
/* Fresh & Vibrant Style for Announcement List */
|
||||
|
||||
:root {
|
||||
--mint-green: #A8E6CF;
|
||||
--pale-yellow: #FFD3B6;
|
||||
--coral-pink: #FFAAA5;
|
||||
--sky-blue: #BDE4F4;
|
||||
--clean-white: #FFFFFF;
|
||||
--bright-orange: #FF8C69; /* Emphasis for buttons/key info */
|
||||
--lemon-yellow: #FFFACD;
|
||||
|
||||
--text-dark: #424242;
|
||||
--text-medium: #616161; /* Slightly darker medium for better contrast */
|
||||
--text-light: #888888; /* Adjusted light text */
|
||||
|
||||
--font-title: 'Poppins', sans-serif;
|
||||
--font-body: 'Nunito Sans', sans-serif;
|
||||
|
||||
--card-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
|
||||
--card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
--border-radius-main: 16px; /* Slightly larger radius for a softer look */
|
||||
--border-radius-small: 10px;
|
||||
}
|
||||
|
||||
/* Apply base font and background to body (likely in base.css) */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: #fcfdfe; /* Very light off-white, almost white */
|
||||
color: var(--text-dark);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.announcement-container {
|
||||
padding: 25px 30px;
|
||||
max-width: 960px;
|
||||
margin: 25px auto;
|
||||
background-color: var(--clean-white);
|
||||
border-radius: var(--border-radius-main);
|
||||
/* Optional: Subtle gradient background for the container itself */
|
||||
/* background-image: linear-gradient(to bottom right, #f0f9ff, #ffffff); */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eef2f5; /* Softer border */
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-family: var(--font-title);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page-icon { /* Icon for page title */
|
||||
color: var(--coral-pink);
|
||||
margin-right: 12px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* Optional: Style for a "Create New" button if you add one */
|
||||
.btn-fresh-create {
|
||||
background-color: var(--mint-green);
|
||||
color: #3a7c68; /* Darker mint for text */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 8px rgba(168, 230, 207, 0.4);
|
||||
}
|
||||
|
||||
.btn-fresh-create:hover {
|
||||
background-color: #97e0c6;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(168, 230, 207, 0.5);
|
||||
}
|
||||
.btn-fresh-create i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.announcement-list {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
gap: 25px; /* Spacing between announcement items */
|
||||
}
|
||||
|
||||
.announcement-item {
|
||||
background-color: var(--clean-white);
|
||||
border-radius: var(--border-radius-main);
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 25px 30px;
|
||||
position: relative; /* For pin-badge */
|
||||
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
|
||||
overflow: hidden; /* If using pseudo-elements for borders */
|
||||
}
|
||||
|
||||
.announcement-item:hover {
|
||||
transform: translateY(-5px) scale(1.01);
|
||||
box-shadow: var(--card-hover-shadow);
|
||||
}
|
||||
|
||||
.announcement-item.pinned {
|
||||
/* Use a top border or a more distinct background */
|
||||
border-top: 4px solid var(--mint-green);
|
||||
background-color: #f6fffb; /* Light mint */
|
||||
}
|
||||
|
||||
.pin-badge {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
background: linear-gradient(135deg, var(--mint-green), #8fdcc3);
|
||||
color: var(--clean-white);
|
||||
padding: 6px 15px 6px 20px;
|
||||
border-radius: 0 0 0 var(--border-radius-main); /* Creative corner */
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
box-shadow: -2px 2px 8px rgba(168, 230, 207, 0.3);
|
||||
}
|
||||
.pin-badge i {
|
||||
margin-right: 6px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.announcement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start; /* Align date to top if title wraps */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem; /* Slightly larger title */
|
||||
font-family: var(--font-title);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-right: 15px; /* Space between title and date */
|
||||
}
|
||||
|
||||
.announcement-header h3 a {
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.announcement-header h3 a:hover {
|
||||
color: var(--coral-pink);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--text-light);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
white-space: nowrap; /* Prevent date from wrapping */
|
||||
padding-top: 3px; /* Align better with h3 */
|
||||
}
|
||||
|
||||
.announcement-preview {
|
||||
margin: 15px 0;
|
||||
color: var(--text-medium);
|
||||
line-height: 1.7;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.announcement-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #f0f4f7; /* Lighter separator */
|
||||
}
|
||||
|
||||
.publisher {
|
||||
color: var(--text-light);
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.publisher i {
|
||||
margin-right: 6px;
|
||||
color: var(--sky-blue);
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--bright-orange);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-body);
|
||||
display: inline-flex; /* Allows icon alignment and hover effects */
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
background-color: var(--bright-orange);
|
||||
color: var(--clean-white);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.read-more i {
|
||||
margin-left: 6px;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
/* .read-more:hover i {
|
||||
transform: translateX(4px);
|
||||
} */ /* Handled by transform on .read-more now */
|
||||
|
||||
/* Pagination Styles (copied and adapted from previous for consistency) */
|
||||
.pagination-container {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pagination .page-item .page-link {
|
||||
color: var(--coral-pink);
|
||||
background-color: var(--clean-white);
|
||||
border: 1px solid var(--pale-yellow);
|
||||
margin: 0 5px; /* Slightly more spacing */
|
||||
border-radius: 50%;
|
||||
width: 40px; /* Slightly larger */
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font-body);
|
||||
transition: all 0.25s ease-in-out;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.pagination .page-item .page-link:hover {
|
||||
background-color: var(--pale-yellow);
|
||||
color: var(--coral-pink);
|
||||
border-color: var(--coral-pink);
|
||||
text-decoration: none;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 3px 8px rgba(255, 211, 182, 0.5);
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--coral-pink);
|
||||
border-color: var(--coral-pink);
|
||||
color: var(--clean-white);
|
||||
box-shadow: 0 4px 10px rgba(255, 170, 165, 0.6);
|
||||
}
|
||||
|
||||
.pagination .page-item.disabled .page-link {
|
||||
color: #cccccc;
|
||||
background-color: #f9f9f9;
|
||||
border-color: #eeeeee;
|
||||
pointer-events: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.no-records {
|
||||
text-align: center;
|
||||
padding: 60px 30px;
|
||||
background-color: #fffaf8; /* Very light coral/yellow tint */
|
||||
border-radius: var(--border-radius-main);
|
||||
color: var(--text-medium);
|
||||
margin-top: 20px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.no-records-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
/* Fallback for FontAwesome if SVG doesn't load or is removed */
|
||||
.no-records .fas.fa-info-circle {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--coral-pink);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.no-records p {
|
||||
font-size: 1.15rem;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
.announcement-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.announcement-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.announcement-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.announcement-item.pinned {
|
||||
border-left: 4px solid #dc3545;
|
||||
background-color: #fff9f9;
|
||||
}
|
||||
|
||||
.pin-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 0 8px 0 8px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.announcement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.announcement-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.announcement-header h3 a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.announcement-header h3 a:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.announcement-preview {
|
||||
margin: 15px 0;
|
||||
color: #495057;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.announcement-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.publisher {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.read-more i {
|
||||
margin-left: 5px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.read-more:hover i {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.no-records {
|
||||
text-align: center;
|
||||
padding: 50px 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.no-records i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.no-records p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@ -1,148 +1,338 @@
|
||||
/* Fresh & Vibrant Style for Notifications */
|
||||
|
||||
:root {
|
||||
--mint-green: #A8E6CF;
|
||||
--pale-yellow: #FFD3B6;
|
||||
--coral-pink: #FFAAA5;
|
||||
--sky-blue: #BDE4F4;
|
||||
--clean-white: #FFFFFF;
|
||||
--bright-orange: #FF8C69; /* Emphasis for buttons/key info */
|
||||
--lemon-yellow: #FFFACD; /* Can be used for subtle highlights */
|
||||
|
||||
--text-dark: #424242; /* Slightly softer than pure black */
|
||||
--text-medium: #757575;
|
||||
--text-light: #9E9E9E;
|
||||
|
||||
--font-title: 'Poppins', sans-serif;
|
||||
--font-body: 'Nunito Sans', sans-serif;
|
||||
|
||||
--card-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
||||
--card-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
--border-radius-main: 12px;
|
||||
--border-radius-small: 8px;
|
||||
}
|
||||
|
||||
/* Apply base font and background to body (likely in base.css, but good for context) */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background-color: var(--clean-white); /* Or a very light tint like #FDFCFA */
|
||||
color: var(--text-dark);
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.notifications-container {
|
||||
padding: 20px;
|
||||
padding: 25px 30px;
|
||||
max-width: 900px;
|
||||
margin: 20px auto;
|
||||
background-color: var(--clean-white);
|
||||
/* Optional: add a subtle pattern or a large soft circular gradient */
|
||||
/* background-image: linear-gradient(135deg, var(--mint-green) -20%, var(--clean-white) 30%); */
|
||||
border-radius: var(--border-radius-main);
|
||||
/* box-shadow: 0 10px 30px rgba(168, 230, 207, 0.2); */ /* Subtle shadow for container */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f0f0f0; /* Softer border */
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.page-header h1 {
|
||||
font-family: var(--font-title);
|
||||
font-size: 2rem; /* Slightly larger */
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Fresh Action Button Style */
|
||||
.btn-fresh-action {
|
||||
background-color: var(--bright-orange);
|
||||
color: var(--clean-white);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px; /* Pill shape */
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 8px rgba(255, 140, 105, 0.3);
|
||||
}
|
||||
|
||||
.btn-fresh-action:hover {
|
||||
background-color: #ff7b5a; /* Slightly darker orange */
|
||||
color: var(--clean-white);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(255, 140, 105, 0.4);
|
||||
}
|
||||
|
||||
.btn-fresh-action i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
margin-bottom: 25px;
|
||||
gap: 10px;
|
||||
/* border-bottom: 2px solid var(--pale-yellow); */ /* Optional subtle line */
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 10px 20px;
|
||||
color: #495057;
|
||||
color: var(--text-medium);
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: 500;
|
||||
border-radius: var(--border-radius-small); /* Rounded tabs */
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 3px solid transparent; /* Underline effect for active */
|
||||
}
|
||||
|
||||
.filter-tab:hover {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
color: var(--coral-pink);
|
||||
background-color: rgba(255, 170, 165, 0.1); /* Light coral tint on hover */
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: #007bff;
|
||||
border-bottom-color: #007bff;
|
||||
color: var(--coral-pink);
|
||||
border-bottom-color: var(--coral-pink);
|
||||
/* background-color: var(--coral-pink); */
|
||||
/* color: var(--clean-white); */
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.notification-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background-color: var(--clean-white);
|
||||
border-radius: var(--border-radius-main);
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 20px 25px;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
display: flex; /* For icon alignment */
|
||||
align-items: flex-start; /* Align icon to top of content */
|
||||
gap: 15px;
|
||||
border-left: 5px solid transparent; /* Placeholder for unread state */
|
||||
}
|
||||
.notification-icon-area {
|
||||
font-size: 1.5rem;
|
||||
color: var(--sky-blue);
|
||||
padding-top: 5px; /* Align with title */
|
||||
}
|
||||
.notification-card.unread .notification-icon-area {
|
||||
color: var(--mint-green);
|
||||
}
|
||||
|
||||
|
||||
.notification-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--card-hover-shadow);
|
||||
}
|
||||
|
||||
.notification-card.unread {
|
||||
border-left: 4px solid #007bff;
|
||||
background-color: #f8fbff;
|
||||
border-left-color: var(--mint-green);
|
||||
background-color: #f6fffb; /* Very light mint */
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.15rem; /* Adjusted size */
|
||||
font-family: var(--font-title);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-title a {
|
||||
color: #333;
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.notification-title a:hover {
|
||||
color: #007bff;
|
||||
color: var(--coral-pink);
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
background-color: #007bff;
|
||||
background-color: var(--bright-orange);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.7rem;
|
||||
padding: 4px 10px;
|
||||
border-radius: 15px; /* Pill shape */
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
color: #495057;
|
||||
color: var(--text-medium);
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.notification-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #6c757d;
|
||||
font-size: 0.85rem;
|
||||
align-items: center;
|
||||
color: var(--text-light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.notification-type {
|
||||
background-color: #f1f1f1;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--sky-blue); /* Sky Blue for type */
|
||||
color: #3E84A8; /* Darker text for contrast on sky blue */
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--border-radius-small);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-container {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pagination .page-item .page-link {
|
||||
color: var(--coral-pink);
|
||||
background-color: var(--clean-white);
|
||||
border: 1px solid var(--pale-yellow);
|
||||
margin: 0 4px;
|
||||
border-radius: 50%; /* Circular pagination items */
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.pagination .page-item .page-link:hover {
|
||||
background-color: var(--pale-yellow);
|
||||
color: var(--coral-pink);
|
||||
border-color: var(--coral-pink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--coral-pink);
|
||||
border-color: var(--coral-pink);
|
||||
color: var(--clean-white);
|
||||
box-shadow: 0 2px 5px rgba(255, 170, 165, 0.5);
|
||||
}
|
||||
|
||||
.pagination .page-item.disabled .page-link {
|
||||
color: #ccc;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #eee;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.no-records {
|
||||
text-align: center;
|
||||
padding: 50px 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
color: #6c757d;
|
||||
background-color: #fafffd; /* Very light mint/yellow mix */
|
||||
border-radius: var(--border-radius-main);
|
||||
color: var(--text-medium);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.no-records i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
.no-records-icon { /* Style for the inline SVG */
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
/* If using Font Awesome for no-records icon: */
|
||||
.no-records .fas.fa-bell-slash {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--mint-green);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
.no-records p {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* 通知下拉菜单样式 */
|
||||
/* Notification Dropdown Styles (assuming this is for a navbar dropdown or similar) */
|
||||
/* These are kept minimal as the main focus was the page content */
|
||||
.notification-dropdown {
|
||||
width: 320px;
|
||||
width: 350px; /* Wider for more content */
|
||||
padding: 0;
|
||||
max-height: 400px;
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
border-radius: var(--border-radius-small);
|
||||
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
|
||||
background-color: var(--clean-white);
|
||||
}
|
||||
|
||||
.notification-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 12px 15px;
|
||||
background-color: var(--pale-yellow); /* Light yellow header */
|
||||
border-bottom: 1px solid #f0e0d0;
|
||||
}
|
||||
.notification-header h5 {
|
||||
margin:0;
|
||||
font-family: var(--font-title);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.mark-all-read {
|
||||
.mark-all-read { /* Link in dropdown header */
|
||||
font-size: 0.8rem;
|
||||
color: #007bff;
|
||||
color: var(--coral-pink);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.mark-all-read:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.notification-items {
|
||||
@ -151,38 +341,61 @@
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.notification-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notification-item:hover {
|
||||
background-color: var(--mint-green-light, #e6f7f0); /* Very light mint on hover */
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background-color: #f8fbff;
|
||||
background-color: #fff8f0; /* Very light orange/yellow for unread in dropdown */
|
||||
border-left: 3px solid var(--bright-orange);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.notification-content h6 {
|
||||
.notification-item .notification-content h6 { /* Assuming title in dropdown is h6 */
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font-title);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
.notification-item .notification-text { /* Text snippet in dropdown */
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-medium);
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
.notification-item .notification-time {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.view-all {
|
||||
.view-all { /* Footer link in dropdown */
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
padding: 12px 15px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: var(--bright-orange);
|
||||
background-color: #fffaf5;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.view-all:hover {
|
||||
background-color: var(--pale-yellow);
|
||||
}
|
||||
|
||||
.no-notifications {
|
||||
padding: 20px;
|
||||
.no-notifications { /* Message in empty dropdown */
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
color: var(--text-medium);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
@ -3,13 +3,20 @@
|
||||
{% block title %}通知公告 - 图书管理系统{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/announcement-list.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="announcement-container">
|
||||
<div class="page-header">
|
||||
<h1>通知公告</h1>
|
||||
<h1><i class="fas fa-bullhorn page-icon"></i> 通知公告</h1>
|
||||
{# Optional: Add a create button if applicable for admins #}
|
||||
{# <a href="{{ url_for('announcement.create_announcement') }}" class="btn btn-fresh-create">
|
||||
<i class="fas fa-plus"></i> 发布新公告
|
||||
</a> #}
|
||||
</div>
|
||||
|
||||
<div class="announcement-list">
|
||||
@ -18,19 +25,24 @@
|
||||
<div class="announcement-item {% if announcement.is_top %}pinned{% endif %}">
|
||||
{% if announcement.is_top %}
|
||||
<div class="pin-badge">
|
||||
<i class="fas fa-thumbtack"></i> 置顶
|
||||
<i class="fas fa-thumbtack"></i> 置顶推荐
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="announcement-header">
|
||||
<h3><a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}">{{ announcement.title }}</a></h3>
|
||||
<span class="date">{{ announcement.created_at }}</span>
|
||||
<span class="date">{{ announcement.created_at.strftime('%Y年%m月%d日') }}</span>
|
||||
</div>
|
||||
<div class="announcement-preview">
|
||||
{{ announcement.content|striptags|truncate(150) }}
|
||||
{{ announcement.content|striptags|truncate(130) }}
|
||||
</div>
|
||||
<div class="announcement-footer">
|
||||
<span class="publisher">发布者: {{ announcement.publisher.username if announcement.publisher else '系统' }}</span>
|
||||
<a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
|
||||
<span class="publisher">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
发布者: {{ announcement.publisher.username if announcement.publisher else '系统管理员' }}
|
||||
</span>
|
||||
<a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}" class="read-more">
|
||||
阅读全文 <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@ -54,7 +66,7 @@
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
|
||||
{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=1) %}
|
||||
{% if page_num %}
|
||||
{% if page_num == pagination.page %}
|
||||
<li class="page-item active">
|
||||
@ -91,8 +103,8 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="no-records">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<p>目前没有通知公告</p>
|
||||
<img src="data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z' fill='%23FFAAA5'/%3e%3c/svg%3e" alt="No announcements icon" class="no-records-icon">
|
||||
<p>暂时还没有新的通知公告哦，敬请期待！</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -100,5 +112,6 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', filename='js/announcement-list.js') }}"></script>
|
||||
{# <script src="{{ url_for('static', filename='js/announcement-list.js') }}"></script> #}
|
||||
{# Assuming announcement-list.js is for interactivity not directly tied to styling #}
|
||||
{% endblock %}
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
{% block title %}我的通知 - 图书管理系统{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/notifications.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
@ -12,7 +15,7 @@
|
||||
<h1>我的通知</h1>
|
||||
<div class="notification-actions">
|
||||
{% if pagination.items and not (unread_only and pagination.total == 0) %}
|
||||
<a href="{{ url_for('announcement.mark_all_as_read') }}" class="btn btn-outline-primary">
|
||||
<a href="{{ url_for('announcement.mark_all_as_read') }}" class="btn btn-fresh-action">
|
||||
<i class="fas fa-check-double"></i> 全部标为已读
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -28,6 +31,14 @@
|
||||
{% if pagination.items %}
|
||||
{% for notification in pagination.items %}
|
||||
<div class="notification-card {% if notification.status == 0 %}unread{% endif %}">
|
||||
<div class="notification-icon-area">
|
||||
<!-- Example: could use different icons based on notification.type -->
|
||||
{% if notification.status == 0 %}
|
||||
<i class="fas fa-envelope"></i> {# Icon for unread #}
|
||||
{% else %}
|
||||
<i class="fas fa-envelope-open-text"></i> {# Icon for read #}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<h3 class="notification-title">
|
||||
<a href="{{ url_for('announcement.view_notification', notification_id=notification.id) }}">{{ notification.title }}</a>
|
||||
@ -35,7 +46,7 @@
|
||||
<span class="unread-badge">未读</span>
|
||||
{% endif %}
|
||||
</h3>
|
||||
<div class="notification-text">{{ notification.content|striptags|truncate(150) }}</div>
|
||||
<div class="notification-text">{{ notification.content|striptags|truncate(120) }}</div>
|
||||
<div class="notification-meta">
|
||||
<span class="notification-type">{{ notification.type }}</span>
|
||||
<span class="notification-time">{{ notification.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
|
||||
@ -63,7 +74,7 @@
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
|
||||
{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=1) %}
|
||||
{% if page_num %}
|
||||
{% if page_num == pagination.page %}
|
||||
<li class="page-item active">
|
||||
@ -100,8 +111,9 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="no-records">
|
||||
<i class="fas fa-bell-slash"></i>
|
||||
<p>{{ '暂无未读通知' if unread_only else '暂无通知' }}</p>
|
||||
{# Suggestion: Use a more vibrant/friendly icon or illustration #}
|
||||
<img src="data:image/svg+xml;charset=UTF-8,%3csvg width='80' height='80' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M12 16.5C12.9665 16.5 13.75 15.7165 13.75 14.75C13.75 13.7835 12.9665 13 12 13C11.0335 13 10.25 13.7835 10.25 14.75C10.25 15.7165 11.0335 16.5 12 16.5Z' fill='%23A8E6CF'/%3e%3cpath d='M12 7V10' stroke='%23A8E6CF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e" alt="No notifications icon" class="no-records-icon">
|
||||
<p>{{ '还没有未读通知哦～' if unread_only else '这里空空如也，暂时没有新通知。' }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -109,5 +121,6 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
|
||||
{# <script src="{{ url_for('static', filename='js/notifications.js') }}"></script> #}
|
||||
{# Assuming notifications.js is for interactivity not directly tied to styling #}
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user