devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat: 게시판 500px 모드

Browse Source
This commit is contained in:
Hide_D
2022-01-02 00:58:34 +09:00
parent d1835c71b7
commit dd46c02f09
9 changed files with 185 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/scss/board.scss
+76
View File
@@ -0,0 +1,76 @@
@import "./common/bootstrap5.scss";
@import "@scss/game_bg.scss";
@import "./common_legacy.scss";
@import "../../css/config.css";
@import "./util.scss";
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-500px {
#container {
width: 500px;
margin: 0 auto;
}
}
.date{
font-size: 0.9em;
}
.authorName,
.authorIcon,
.inputCommentHeader {
flex: 0 0 auto;
width: 120px;
}
#newArticle {
margin-top: 1em;
}
.titleInput {
width: 100%;
color: white;
background-color: transparent;
border: none;
margin: 1px 5px;
}
.contentInput {
width: 100%;
min-height: 3em;
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
.articleFrame {
margin: 20px auto;
}
.commentText {
width: 100%;
}
.text {
text-align: left;
padding: 1px 5px;
}
.submitComment {
width: 100%;
}
.commentText {
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
hwe/scss/chiefCenter.scss
+13
View File
@@ -5,6 +5,7 @@
@import "@scss/common/variables.scss"; @import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss"; @import "@scss/common/bootswatch_custom_variables.scss";
@import "@scss/game_bg.scss"; @import "@scss/game_bg.scss";
@import "@scss/util.scss";
$modcolor2: color.adjust($nbase2color, $lightness: -5%); $modcolor2: color.adjust($nbase2color, $lightness: -5%);
@@ -86,6 +87,12 @@ $modcolor2: color.adjust($nbase2color, $lightness: -5%);
background-color: $modcolor2; background-color: $modcolor2;
} }
} }
#bottomBar{
width: 1000px;
margin: 0 auto;
position: relative;
}
} }
@include media-500px { @include media-500px {
@@ -183,4 +190,10 @@ $modcolor2: color.adjust($nbase2color, $lightness: -5%);
text-align: center; text-align: center;
} }
} }
#bottomBar {
width: 500px;
margin: 0 auto;
position: relative;
}
} }
hwe/scss/util.scss
+4
View File
@@ -14,3 +14,7 @@
.avoid-wrap { .avoid-wrap {
display: inline-block; display: inline-block;
} }
.center {
text-align: center;
}
hwe/ts/PageBoard.vue
+37 -109
View File
@@ -1,18 +1,12 @@
<template> <template>
<top-back-bar :title="title" /> <div id="container">
<TopBackBar :title="title" />
<table id="newArticle" class="bg0"> <div id="newArticle" class="bg0">
<thead> <div class="newArticleHeader bg2 center">새 게시물 작성</div>
<tr> <div class="row gx-0">
<td colspan="2" class="newArticleHeader bg2">새 게시물 작성</td> <div class="col-2 col-md-1 articleTitle bg1 center">제목</div>
</tr> <div class="col-10 col-md-11">
</thead>
<tbody>
<tr>
<th class="bg1" style="width: 66px">
<span class="articleTitle">제목</span>
</th>
<td>
<input <input
class="titleInput" class="titleInput"
type="text" type="text"
@@ -20,11 +14,11 @@
placeholder="제목" placeholder="제목"
v-model="newArticle.title" v-model="newArticle.title"
/> />
</td> </div>
</tr> </div>
<tr> <div class="row gx-0">
<th class="bg1">내용</th> <div class="col-2 col-md-1 bg1 center">내용</div>
<td class="boardArticle"> <div class="col-10 col-md-11">
<textarea <textarea
class="contentInput autosize" class="contentInput autosize"
ref="newArticleTextForm" ref="newArticleTextForm"
@@ -32,40 +26,35 @@
v-model="newArticle.text" v-model="newArticle.text"
@input="autoResizeTextarea" @input="autoResizeTextarea"
/> />
</td> </div>
</tr> </div>
</tbody> <div class="row">
<tfoot> <div class="col-8 col-md-10"></div>
<tr> <div class="col-4 col-md-2 d-grid">
<td colspan="2"> <b-button id="submitArticle" @click="submitArticle"> 등록 </b-button>
<button type="button" id="submitArticle" @click="submitArticle"> </div>
등록 </div>
</button> </div>
</td> <div id="board">
</tr> <template v-if="articles && articles.length">
</tfoot> <board-article
</table> v-for="article in articles"
:key="article.no"
:article="article"
@submit-comment="reloadArticles"
/>
</template>
<template v-else> 게시물이 없습니다. </template>
</div>
<div id="board"> <BottomBar/>
<template v-if="articles && articles.length">
<board-article
v-for="article in articles"
:key="article.no"
:article="article"
@submit-comment="reloadArticles"
/>
</template>
<template v-else> 게시물이 없습니다. </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import "@scss/common/bootstrap5.scss";
import "@scss/game_bg.scss";
import "../../css/config.css";
import { defineComponent, onMounted, reactive, ref } from "vue"; import { defineComponent, onMounted, reactive, ref } from "vue";
import TopBackBar from "@/components/TopBackBar.vue"; import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import BoardArticle from "@/components/BoardArticle.vue"; import BoardArticle from "@/components/BoardArticle.vue";
import { convertFormData } from "@util/convertFormData"; import { convertFormData } from "@util/convertFormData";
import axios from "axios"; import axios from "axios";
@@ -105,6 +94,7 @@ export default defineComponent({
name: "PageBoard", name: "PageBoard",
components: { components: {
TopBackBar, TopBackBar,
BottomBar,
BoardArticle, BoardArticle,
}, },
props: { props: {
@@ -155,7 +145,7 @@ export default defineComponent({
this.newArticle = { title: "", text: "" }; this.newArticle = { title: "", text: "" };
const newArticleTextForm = unwrap(this.newArticleTextForm); const newArticleTextForm = unwrap(this.newArticleTextForm);
newArticleTextForm.style.height = 'auto'; newArticleTextForm.style.height = "auto";
await this.reloadArticles(); await this.reloadArticles();
}, },
@@ -188,7 +178,6 @@ export default defineComponent({
return; return;
} }
articles.length = 0; articles.length = 0;
articles.push(...Object.values(boardResponse.articles)); articles.push(...Object.values(boardResponse.articles));
articles.reverse(); articles.reverse();
@@ -205,65 +194,4 @@ export default defineComponent({
}; };
}, },
}); });
</script> </script>
<style>
#newArticle {
width: 1000px;
margin: 0 auto;
}
.titleInput {
width: 100%;
color: white;
background-color: transparent;
border: none;
margin: 1px 5px;
}
.contentInput {
width: 100%;
min-height: 3em;
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
.articleFrame {
width: 1000px;
margin: 20px auto;
}
.commentText {
width: 100%;
}
.authorName,
.comment .author {
width: 110px;
font-size: 85%;
}
.date {
width: 125px;
font-size: 85%;
}
.text {
text-align: left;
padding: 1px 5px;
}
.submitComment {
width: 100%;
}
.commentText {
color: white;
background-color: transparent;
border: none;
padding: 1px 5px;
}
</style>
hwe/ts/PageChiefCenter.vue
+5
View File
@@ -230,6 +230,9 @@
</template> </template>
</div> </div>
</div> </div>
<div id="bottomBar">
<BottomBar />
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import "@scss/common/bootstrap5.scss"; import "@scss/common/bootstrap5.scss";
@@ -239,6 +242,7 @@ import "../../css/config.css";
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue"; import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue"; import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
import TopBackBar from "@/components/TopBackBar.vue"; import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import VueTypes from "vue-types"; import VueTypes from "vue-types";
import { isString, range } from "lodash"; import { isString, range } from "lodash";
import { mb_strwidth } from "./util/mb_strwidth"; import { mb_strwidth } from "./util/mb_strwidth";
@@ -272,6 +276,7 @@ function isDropdownChildren(e?: Event): boolean {
export default defineComponent({ export default defineComponent({
components: { components: {
TopBackBar, TopBackBar,
BottomBar,
ChiefReservedCommand, ChiefReservedCommand,
TopItem, TopItem,
BottomItem, BottomItem,
hwe/ts/components/BoardArticle.vue
+40 -44
View File
@@ -1,53 +1,49 @@
<template> <template>
<table class="articleFrame bg0"> <div class="articleFrame bg0">
<thead> <div class="bg1 row gx-0">
<tr class="bg1"> <div class="authorName center">{{ article.author }}</div>
<th class="authorName">{{ article.author }}</th> <div class="col articleTitle center">{{ article.title }}</div>
<th class="articleTitle">{{ article.title }}</th> <div class="col-2 col-md-1 date center">{{ article.date.slice(5, 16) }}</div>
<th class="date">{{ article.date }}</th> </div>
</tr> <div class="row gx-0 s-border-b">
</thead> <div class="col-2 col-md-1 authorIcon center">
<tbody> <img
<tr> class="generalIcon"
<td> width="64"
<img height="64"
class="authorIcon generalIcon" :src="article.author_icon"
width="64" />
height="64" </div>
:src="article.author_icon" <div class="col text">{{ article.text }}</div>
/> </div>
</td> <div class="commentList">
<td class="text" colspan="2">{{ article.text }}</td>
</tr>
</tbody>
<tbody class="commentList">
<board-comment <board-comment
v-for="comment in article.comment" v-for="comment in article.comment"
:key="comment.no" :key="comment.no"
:comment="comment" :comment="comment"
/> />
</tbody> </div>
<tfoot> <div class="row gx-0">
<tr> <div class="bg2 inputCommentHeader center d-grid">
<td class="bg2 inputCommentHeader">댓글 달기</td> <div class="align-self-center">댓글 달기</div>
<td> </div>
<input <div class="col d-grid">
class="commentText" <input
type="text" class="commentText"
maxlength="250" type="text"
placeholder="새 댓글 내용" maxlength="250"
v-model.trim="newCommentText" placeholder="새 댓글 내용"
@keyup.enter="submitComment" v-model.trim="newCommentText"
/> @keyup.enter="submitComment"
</td> />
<td> </div>
<button type="button" class="submitComment" @click="submitComment"> <div class="col-2 col-md-1 d-grid">
등록 <b-button class="submitComment" @click="submitComment" size="sm"
</button> >등록</b-button
</td> >
</tr> </div>
</tfoot> </div>
</table> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { BoardArticleItem } from "@/PageBoard.vue"; import { BoardArticleItem } from "@/PageBoard.vue";
hwe/ts/components/BoardComment.vue
+5 -6
View File
@@ -1,10 +1,9 @@
<template> <template>
<tr class="comment"> <div class="row gx-0 comment s-border-b">
<th class="author">{{ comment.author }}</th> <div class="authorName center d-grid"><div class="align-self-center">{{ comment.author }}</div></div>
<td class="text">{{ comment.text }}</td> <div class="col text">{{ comment.text }}</div>
<td class="date">{{ comment.date }}</td> <div class="col-2 col-md-1 date center d-grid"><div class="align-self-center">{{ comment.date.slice(5, 16) }}</div></div>
<!-- 삭제도 나중에 추가? --> </div>
</tr>
</template> </template>
<script lang="ts"> <script lang="ts">
import { BoardCommentItem } from "@/PageBoard.vue"; import { BoardCommentItem } from "@/PageBoard.vue";
hwe/ts/components/BottomBar.vue
-5
View File
@@ -12,7 +12,6 @@ import { defineComponent, PropType } from "vue";
import "@scss/game_bg.scss"; import "@scss/game_bg.scss";
export default defineComponent({ export default defineComponent({
name: "TopBackBar",
methods: { methods: {
back(){ back(){
if(this.type === 'normal'){ if(this.type === 'normal'){
@@ -28,10 +27,6 @@ export default defineComponent({
} }
}, },
props: { props: {
title: {
type: String,
required: true,
},
type: { type: {
type: String as PropType<"normal"|"chief"|"close">, type: String as PropType<"normal"|"chief"|"close">,
default: "normal", default: "normal",
hwe/ts/v_board.ts
+5 -2
View File
@@ -1,14 +1,17 @@
import "@scss/board.scss";
import { createApp } from 'vue' import { createApp } from 'vue'
import PageBoard from '@/PageBoard.vue'; import PageBoard from '@/PageBoard.vue';
import BootstrapVue3 from 'bootstrap-vue-3' import BootstrapVue3 from 'bootstrap-vue-3'
import "@scss/common/bootstrap5.scss";
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest'; import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
import { auto500px } from "./util/auto500px";
declare const isSecretBoard: boolean; declare const isSecretBoard: boolean;
setAxiosXMLHttpRequest(); setAxiosXMLHttpRequest();
auto500px();
createApp(PageBoard, { createApp(PageBoard, {
isSecretBoard isSecretBoard
}).use(BootstrapVue3).mount('#app') }).use(BootstrapVue3).mount('#app')