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

109
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,51 +20,57 @@
{% block staticfiles %}{% endblock %}
</head>
<body>
<div class="nav__div">
<span class="uk-icon menu__open" uk-icon="icon: menu"></span>
<span class="nav__title">WXNNER BLOG</span>
</div>
<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>
</div>
<div class="menu__wrap">
<div class="menu__close"><button class="uk-icon" uk-icon="icon: close"></button></div>
<div class="menu__box">
<ul>
<li><a href="/list">최신테크뉴스</a></li>
<li><a href="/list/NEWS">WXN 뉴스</a></li>
<li><a href="/list/IT">IT 요즘</a></li>
<!-- <li><a href="/list">IT활용자료(윅슨전용)</a></li> -->
<li><a href="/list/ETC">ETC</a></li>
<div class="menu__wrap">
<div class="menu__close"><button class="uk-icon" uk-icon="icon: close"></button></div>
<div class="menu__box">
<ul>
<li><a href="/list">최신테크뉴스</a></li>
<li><a href="/list/NEWS">WXN 뉴스</a></li>
<li><a href="/list/IT">IT 요즘</a></li>
<!-- <li><a href="/list">IT활용자료(윅슨전용)</a></li> -->
<li><a href="/list/ETC">ETC</a></li>
</ul>
</div>
<ul class="login__section">
{% if g.is_login %}
<li>
<a class="user__nav__open" href="#">{{ g.user_info.mb_name }} <span class="uk-icon" uk-icon="icon: triangle-down"></span></a>
<div class="login_nav">
<ul>
<li class="uk-active"><a href="/write">포스트 작성</a></li>
<li class="uk-active"><a href="/admin/">관리자 페이지</a></li>
<li class="uk-active"><a href="/logout">LOGOUT</a></li>
</ul>
</div>
</li>
{% else %}
<li class="login__btn"><a href="/login">LOGIN</a></li>
{% endif %}
</ul>
</div>
<ul class="login__section">
{% if g.is_login %}
<li>
<a class="user__nav__open" href="#">{{ g.user_info.mb_name }} <span class="uk-icon" uk-icon="icon: triangle-down"></span></a>
<div class="login_nav">
<ul>
<li class="uk-active"><a href="/write">포스트 작성</a></li>
<li class="uk-active"><a href="/admin/">관리자 페이지</a></li>
<li class="uk-active"><a href="/logout">LOGOUT</a></li>
</ul>
</div>
</li>
{% else %}
<li class="login__btn"><a href="/login">LOGIN</a></li>
{% endif %}
</ul>
</div>
<div class="wixon__wrap">
<header>
<div class="header__inner">
<h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
</div>
</header>
<div class="wixon__wrap">
<header>
<div class="header__inner">
<h1><a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a></h1>
</div>
</header>
{% block content %}{% endblock %}
{% 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() {
$(".menu__wrap").show();
$(".nav__div").animate({"right":"-68px"}, 300, function(){
$(".menu__wrap").animate({"right":"0"}, 700);
});
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);
});
}
});
$('.menu__close').click(function() {
$(".menu__wrap").animate({"right":"-440px"}, 700, function(){
$(".menu__wrap").hide();
$(".nav__div").animate({"right":"0"}, 300);
});
if (isMobile()) {
// 모바일용 메뉴 닫기
$(".menu__wrap").fadeOut(300);
} else {
// PC용 메뉴 닫기
$(".menu__wrap").animate({"right": "-440px"}, 700, function(){
$(".menu__wrap").hide();
$(".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 %}

93
templates/index.html
View File

@@ -90,48 +90,59 @@
console.log(moment().format('ll'));
$(document).ready(function() {
const count__lists = $(".fake__lists li").length;
if (count__lists < 4) {
for (let i = 0; i < count__lists; i++) {
let n_1 = i % 3;
switch (n_1) {
case 1.:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 2:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
case 0:
$(".post__lists2").append($(".fake__lists li:first-child"));
break;
}
}
}else if(count__lists>3 && count__lists<7){
$(".post__lists2").append($(".fake__lists li:first-child"));
for (let i = 0; i < count__lists-1; i++) {
let n_1 = i % 2;
switch (n_1) {
case 0:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
}else{
for(let i=0;i<6;i++){
let n_1 = i % 2;
switch(n_1){
case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
$(".post__lists2").append($(".fake__lists li:first-child"));
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++) {
let n_1 = i % 3;
switch (n_1) {
case 1.:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 2:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
case 0:
$(".post__lists2").append($(".fake__lists li:first-child"));
break;
}
}
}else if(count__lists>3 && count__lists<7){
$(".post__lists2").append($(".fake__lists li:first-child"));
for (let i = 0; i < count__lists-1; i++) {
let n_1 = i % 2;
switch (n_1) {
case 0:
$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:
$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
}else{
for(let i=0;i<6;i++){
let n_1 = i % 2;
switch(n_1){
case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
break;
case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
break;
}
}
$(".post__lists2").append($(".fake__lists li:first-child"));
}
$(".fake__lists").html("");
}
$(".fake__lists").html("");
})
</script>
{% endblock %}

107
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;
}
})
</script>
function getShortestColumnIndex() {
const lengths = [
$(".list__posts0 li").length,
$(".list__posts1 li").length,
$(".list__posts2 li").length
];
return lengths.indexOf(Math.min(...lengths));
}
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 %}