minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

feat: Implement blog API service and refactor components for improved data fetching

Browse Source
This commit is contained in:
Wini_Fy
2026-02-04 15:33:02 +07:00
parent d46c420aaf
commit 9a71d39ebf
16 changed files with 790 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
public/assets/css/main.css
View File

@@ -99,6 +99,54 @@ Version: 1.0.0
color: var(--header);
}
/* --------------------------------------------
Pagination (match theme-btn style: round, red/white)
---------------------------------------------- */
.hai-pagination {
gap: 10px;
}
.hai-pagination .page-item {
margin: 0;
}
.hai-pagination .page-link {
width: 48px;
height: 48px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50% !important;
border: 1px solid var(--border);
background: var(--white);
color: var(--header);
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
line-height: 1;
transition: all 0.3s ease-in-out;
box-shadow: none;
}
.hai-pagination .page-link:focus {
box-shadow: none;
}
.hai-pagination .page-link:hover {
background-color: var(--theme);
border-color: var(--theme);
color: var(--white);
}
.hai-pagination .page-item.active .page-link,
.hai-pagination .page-item.active span.page-link {
background-color: var(--theme);
border-color: var(--theme);
color: var(--white);
}
.hai-pagination .page-item.disabled .page-link,
.hai-pagination .page-item.disabled span.page-link {
opacity: 0.6;
background: var(--white);
border-color: var(--border);
color: var(--header);
}
.link-btn {
color: var(--theme-2);
text-transform: capitalize;
@@ -6548,6 +6596,10 @@ html.lenis body {
.recent-thumb
img {
border-radius: 8px;
width: 88px;
min-width: 88px;
height: 80px;
object-fit: cover;
}
.main-sideber
.news-sideber-box
@@ -6633,10 +6685,28 @@ html.lenis body {
}
.news-details-wrapper .news-details-post .news-details-image img {
width: 100%;
height: 100%;
width: 852px;
height: 400px;
object-fit: cover;
border-radius: 16px;
}
@media (max-width: 1399px) {
.news-details-wrapper .news-details-post .news-details-image img {
width: 100%;
height: 300px;
object-fit: cover;
}
}
@media (max-width: 991px) {
.news-details-wrapper .news-details-post .news-details-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
}
.news-details-wrapper .news-details-post .details-content {
margin-top: 24px;
}
@@ -6669,6 +6739,32 @@ html.lenis body {
height: 100%;
border-radius: 16px;
}
/* Gallery images responsive for mobile */
@media (max-width: 991px) {
.news-details-wrapper .news-details-post .details-content .gallery-images-row {
justify-content: space-between;
margin-left: 0;
margin-right: 0;
margin-top: 1.5rem;
gap: 0.5rem;
}
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item {
flex: 0 0 47.5%;
max-width: 47.5%;
padding-left: 0;
padding-right: 0;
margin: 0;
}
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item .thumb {
margin: 0;
}
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item .thumb img {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
}
}
.news-details-wrapper .news-details-post .details-content .sideber {
background-color: var(--theme-2);
padding: 24px 30px;
@@ -6813,9 +6909,19 @@ html.lenis body {
.comments-area
.news-single-comment {
flex-wrap: wrap;
gap: 20px;
gap: 10px;
}
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment
.image {
flex-shrink: 0;
width: 80px;
min-width: 80px;
}
.news-details-wrapper
.news-details-post
.details-content
@@ -6823,7 +6929,12 @@ html.lenis body {
.news-single-comment
.image
img {
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
border-radius: 12px;
object-fit: cover;
}
.news-details-wrapper
.news-details-post
@@ -6836,6 +6947,33 @@ html.lenis body {
h4 {
margin-bottom: 5px;
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment {
position: relative;
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment
.content
.head {
flex-wrap: nowrap;
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment
.content
.head
.con {
flex: 1;
min-width: 0;
}
.news-details-wrapper
.news-details-post
.details-content
@@ -6852,6 +6990,8 @@ html.lenis body {
color: var(--white);
background-color: var(--header);
border-radius: 100px;
flex-shrink: 0;
margin-left: auto;
}
.news-details-wrapper
.news-details-post
@@ -6863,6 +7003,34 @@ html.lenis body {
.reply:hover {
background-color: var(--theme);
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment
.reply-absolute {
position: absolute;
top: 16px;
right: 0;
font-weight: 500;
font-size: 16px;
color: var(--white);
background-color: var(--header);
border-radius: 100px;
padding: 6px 14px;
text-transform: uppercase;
border: none;
cursor: pointer;
z-index: 10;
}
.news-details-wrapper
.news-details-post
.details-content
.comments-area
.news-single-comment
.reply-absolute:hover {
background-color: var(--theme);
}
.news-details-wrapper
.news-details-post
.details-content
@@ -6879,6 +7047,116 @@ html.lenis body {
margin-left: 0;
}
}
/* Comments responsive for mobile */
@media (max-width: 767px) {
.news-details-wrapper .news-details-post .details-content .comments-area {
margin-top: 30px;
padding-top: 20px;
margin-bottom: 30px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .comments-heading {
margin-bottom: 20px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .comments-heading h3 {
font-size: 20px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment {
gap: 12px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image {
flex-shrink: 0;
width: 50px;
min-width: 50px;
max-width: 50px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image img {
width: 50px;
height: 50px;
object-fit: cover;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
width: 50px;
height: 50px;
font-size: 18px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content {
flex: 1;
min-width: 0;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head {
gap: 8px !important;
margin-bottom: 8px;
flex-wrap: nowrap !important;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con {
flex: 1;
min-width: 0;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .reply-absolute {
top: 12px;
right: 0;
font-size: 12px;
padding: 4px 10px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con span {
font-size: 12px;
display: block;
margin-bottom: 4px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con h4 {
font-size: 14px;
margin-bottom: 0;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .reply {
font-size: 12px;
padding: 4px 10px;
white-space: nowrap;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content p {
font-size: 14px;
line-height: 1.5;
margin-top: 8px !important;
margin-bottom: 12px !important;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .replies {
margin-top: 8px;
}
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .replies .news-single-comment {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.news-details-wrapper .news-details-post .details-content .comments-area .btn-outline-primary,
.news-details-wrapper .news-details-post .details-content .comments-area .btn-outline-secondary {
font-size: 14px;
padding: 10px 20px;
}
}
/* Comment avatar (initial letter) */
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
width: 60px;
height: 60px;
border-radius: 14px;
background: #6c757d;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
font-weight: 700;
user-select: none;
}
@media (max-width: 767px) {
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
width: 50px;
height: 50px;
font-size: 18px;
}
}
.news-details-wrapper .news-details-post .details-content .form-clt {
position: relative;
}

4
public/assets/scss/_news.scss
View File

@@ -644,9 +644,7 @@
.news-details-image {
img {
width: 852px;
height: 400px;
object-fit: cover;
@include imgw;
border-radius: 16px;
}
}