wixon/wixon_blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile - update

Browse Source
This commit is contained in:
lbard33
2026-01-16 16:12:48 +09:00
parent 2635aff0ea
commit 39de8edde4
8 changed files with 305 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app.py
View File

@@ -279,12 +279,12 @@ def list(cate=None):
query = f"""SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
FROM `blog`
WHERE `use_yn` = 'Y' {cate_condition}
ORDER BY `add_date` DESC;"""
ORDER BY `add_date` DESC LIMIT 10;"""
else:
query = f"""SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
FROM `blog`
WHERE `use_yn` = 'Y' AND `public_yn` = 'Y' {cate_condition}
ORDER BY `add_date` DESC;"""
ORDER BY `add_date` DESC LIMIT 10;"""
r, posts = sql_execute(query, params, is_data=True)
@@ -294,6 +294,38 @@ def list(cate=None):
return render_template('list.html', posts=posts)
@app.route('/list_more')
def list_more():
page = int(request.args.get('page', 1))
limit = 10
offset = (page - 1) * limit
cate = request.args.get('cate')
cate_condition = ""
params = []
if cate:
cate_condition = "AND `category` = %s"
params.append(cate)
query = f"""
SELECT `id`, `title`, `category`, `thumbnail_img`, `contents`, `add_date`
FROM `blog`
WHERE `use_yn` = 'Y'
{ "AND `public_yn` = 'Y'" if 'user_info' not in session else "" }
{cate_condition}
ORDER BY `add_date` DESC
LIMIT %s OFFSET %s
"""
params.extend([limit, offset])
r, posts = sql_execute(query, tuple(params), is_data=True)
for post in posts:
post['contents'] = remove_html_tags(post['contents'])[:150]
post['add_date_str'] = post['add_date'].strftime("%b %d / %Y")
return jsonify(posts)
# ============================================
# 관리자 페이지
# ============================================

58
static/css/style.css
View File

@@ -280,3 +280,61 @@
.list__posts li a{display:block;width:100%;height:100%;}
.list__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
.list__posts li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
@media (max-width: 1023px) {
html, body{margin:0;overflow-x:hidden;min-height:100%;}
.body__wrap{width:100%;max-width:640px;margin:0 auto;position:relative;}
.nav__div{height:30px;border:none;padding:20px;position:absolute;}
.nav__title{display:none;}
.menu__wrap{width:calc(100% - 40px);z-index:999;max-width:640px;position:absolute;height:100vh;}
.wixon__wrap{width:100%;}
header{height:70px;}
.header__inner{width:100%;height:70px;}
h1{margin:0 !important;}
.header__inner h1 img{height:70px;padding:10px 20px;}
.container{margin-top:30px;}
.content{border:none;}
.content__inner{display:none;}
.fake__lists{display:block;}
.fake__lists li{border-bottom: 1px solid #e7e6e7;padding-top:30px;}
footer{height:100%;position:relative;}
.footer__inner{display:block;padding:0 20px;width:auto;}
.footer__tel{padding-top:30px;}
.footer__info{text-align:center;}
.footer__info ul{display:none;}
footer address{margin-top:10px;}
.slogan{display:none;}
.footer__logo{margin:0;padding:50px 0;text-align:center;}
.footer__logo img{width:70%;}
.container__post .content{width:auto;padding:0 30px;}
.title__div{display:block;height:auto;line-height:1em;padding:10px;width:auto;}
.content__title{line-height:1.5em;text-indent:0;}
.content__date{padding-top:10px;}
.content__desc{padding:10px;word-break:break-word;}
.content__desc > div{width:auto !important;}
.other__list__way{flex-shrink: 0;}
.other__list__title{padding-left:20px;}
.other__list__date{display:none;}
.btn__area{text-align:center;display:flex;justify-content: space-around;padding-top:30px;padding-bottom:0;}
.btn__area a{margin:0;width:30%;}
.login__container{padding-top:50px;}
.login__container .uk-form-stacked{padding-top:50px;width:auto !important;min-width:auto !important;}
.post__container form{width:auto !important;min-width:auto !important;}
}

27
templates/base.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<title>WIXON Blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<!-- include libraries(jQuery, bootstrap) -->
@@ -19,6 +20,7 @@
{% block staticfiles %}{% endblock %}
</head>
<body>
<div class="body__wrap">
<div class="nav__div">
<span class="uk-icon menu__open" uk-icon="icon: menu"></span>
<span class="nav__title">WXNNER BLOG</span>
@@ -62,8 +64,13 @@
{% block content %}{% endblock %}
<script>
$(document).ready(function(){
function isMobile() {
return $(window).width() <= 1023;
}
// 로그인 메뉴 활성화
let check_state = 0;
@@ -80,17 +87,29 @@
// 메뉴 토글
$(".menu__open").click(function() {
if(isMobile()){
// 모바일용 메뉴 동작
$(".menu__wrap").fadeIn(300).css({"right": "0"});
}else{
// PC용 메뉴 동작
$(".menu__wrap").show();
$(".nav__div").animate({"right":"-68px"}, 300, function(){
$(".menu__wrap").animate({"right":"0"}, 700);
$(".nav__div").animate({"right": "-68px"}, 300, function(){
$(".menu__wrap").animate({"right": "0"}, 700);
});
}
});
$('.menu__close').click(function() {
$(".menu__wrap").animate({"right":"-440px"}, 700, function(){
if (isMobile()) {
// 모바일용 메뉴 닫기
$(".menu__wrap").fadeOut(300);
} else {
// PC용 메뉴 닫기
$(".menu__wrap").animate({"right": "-440px"}, 700, function(){
$(".menu__wrap").hide();
$(".nav__div").animate({"right":"0"}, 300);
$(".nav__div").animate({"right": "0"}, 300);
});
}
});
})
</script>

6
templates/edit_post.html
View File

@@ -14,8 +14,8 @@
font-size: 16px !important;
}
</style>
<div class="uk-container uk-margin-top" style="margin-bottom: 30px">
<h1 class="uk-text-center"><span>포스트 수정</span></h1>
<div class="uk-container uk-margin-top post__container" style="margin-bottom: 30px">
<h2 class="uk-text-center"><span>포스트 수정</span></h2>
<form action="/edit_post/{{ post.id }}" method="post" class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="title">제목</label>
@@ -82,6 +82,8 @@
}
}
});
$(".nav__div").hide();
});
</script>
{% endblock %}

11
templates/index.html
View File

@@ -90,6 +90,16 @@
console.log(moment().format('ll'));
$(document).ready(function() {
function Mobile() {
return $(window).width() <= 1023;
}
if(Mobile()){
// 모바일용 메뉴 동작
}else{
// PC용 메뉴 동작
const count__lists = $(".fake__lists li").length;
if (count__lists < 4) {
for (let i = 0; i < count__lists; i++) {
@@ -132,6 +142,7 @@
$(".post__lists2").append($(".fake__lists li:first-child"));
}
$(".fake__lists").html("");
}
})
</script>
{% endblock %}

105
templates/list.html
View File

@@ -65,27 +65,96 @@
</div>
</footer>
<script>
moment.locale('en');
console.log(moment().format('ll'));
let currentPage = 1;
let isLoading = false;
$(document).ready(function() {
const count__lists = $(".fake__lists li").length;
for (let i = 0; i < count__lists; i++) {
let n_1 = i % 3;
switch (n_1) {
case 1.:
$(".list__posts1").append($(".fake__lists li:first-child"));
break;
case 2:
$(".list__posts2").append($(".fake__lists li:first-child"));
break;
case 0:
$(".list__posts0").append($(".fake__lists li:first-child"));
break;
function Mobile() {
return $(window).width() <= 1023;
}
function getShortestColumnIndex() {
const lengths = [
$(".list__posts0 li").length,
$(".list__posts1 li").length,
$(".list__posts2 li").length
];
return lengths.indexOf(Math.min(...lengths));
}
})
</script>
function distributePosts(posts) {
posts.forEach((post) => {
const postHTML = `
<li>
<a href="/post/${post.id}">
<div class="lists__img">
<img src="${post.thumbnail_img || 'https://via.placeholder.com/300x200'}" alt="${post.title}" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200';" />
</div>
<div class="lists__desc">
<p class="lists__category">${post.category}</p>
<h3 class="lists__title">${post.title}</h3>
<p class="lists__content">${post.contents}</p>
<p class="lists__date"><b>${post.add_date_str}</b></p>
</div>
</a>
</li>
`;
if (Mobile()) {
$(".fake__lists").append(postHTML);
} else {
const columnIndex = getShortestColumnIndex(); // 가장 짧은 컬럼
$(`.list__posts${columnIndex}`).append(postHTML);
}
});
}
function loadMorePosts() {
if (isLoading) return;
isLoading = true;
currentPage++;
$.ajax({
url: "/list_more",
type: "GET",
data: { page: currentPage },
success: function(data) {
if (data.length === 0) {
$(window).off("scroll");
return;
}
distributePosts(data);
isLoading = false;
},
error: function() {
console.error("게시물 로딩 실패");
}
});
}
// 스크롤 감지
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
loadMorePosts();
}
});
if (!Mobile()) {
let initialPosts = [];
$(".fake__lists li").each(function() {
let $li = $(this);
initialPosts.push({
id: $li.find("a").attr("href").split("/post/")[1],
title: $li.find(".lists__title").text(),
category: $li.find(".lists__category").text(),
thumbnail_img: $li.find("img").attr("src"),
contents: $li.find(".lists__content").text(),
add_date_str: $li.find(".lists__date").text()
});
});
distributePosts(initialPosts);
}
</script>
{% endblock %}
</div>
</body>

2
templates/login.html
View File

@@ -1,7 +1,7 @@
{% extends 'base.html' %}
{% block content %}
<div class="uk-container uk-margin-top">
<div class="uk-container uk-margin-top login__container">
<h1 class="uk-text-center"><span>LOGIN</span></h1>
{% with messages = get_flashed_messages() %}
{% if messages %}

6
templates/write.html
View File

@@ -13,8 +13,8 @@
font-size: 16px !important;
}
</style>
<div class="uk-container uk-margin-top" style="margin-bottom: 30px">
<h1 class="uk-text-center"><span>포스트 작성</span></h1>
<div class="uk-container uk-margin-top post__container" style="margin-bottom: 30px">
<h2 class="uk-text-center"><span>포스트 작성</span></h2>
<form action="/write" method="post" class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="title">제목</label>
@@ -79,6 +79,8 @@
}
}
});
$(".nav__div").hide();
}
</script>
{% endblock %}