Implement legacy-compatible survey and unique rewards
This commit is contained in:
@@ -1,865 +1,682 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import PanelCard from '../components/ui/PanelCard.vue';
|
||||
import SkeletonLines from '../components/ui/SkeletonLines.vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
import { trpc } from '../utils/trpc';
|
||||
|
||||
type VoteListResponse = Awaited<ReturnType<typeof trpc.vote.getVoteList.query>>;
|
||||
type VoteDetailResponse = Awaited<ReturnType<typeof trpc.vote.getVoteDetail.query>>;
|
||||
|
||||
type RevealMode = 'after_vote' | 'after_end';
|
||||
|
||||
type VoteDetail = Awaited<ReturnType<typeof trpc.vote.getVoteDetail.query>>;
|
||||
type PollSummary = VoteListResponse['polls'][number];
|
||||
|
||||
type VoteDetail = VoteDetailResponse;
|
||||
|
||||
type VoteResultEntry = VoteDetail['votes'][number];
|
||||
|
||||
const loading = ref(false);
|
||||
const detailLoading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const polls = ref<PollSummary[]>([]);
|
||||
const voteReward = ref(0);
|
||||
const activeVoteId = ref<number | null>(null);
|
||||
const voteDetail = ref<VoteDetail | null>(null);
|
||||
const adminEnabled = ref(false);
|
||||
const currentVoteId = ref<number | null>(null);
|
||||
const currentVote = ref<VoteDetail | null>(null);
|
||||
const loading = ref(false);
|
||||
const detailLoading = ref(false);
|
||||
const isVoteAdmin = ref(false);
|
||||
const showNewVote = ref(false);
|
||||
const message = ref('');
|
||||
const messageKind = ref<'success' | 'error'>('success');
|
||||
const mySinglePick = ref(0);
|
||||
const myMultiPick = ref<number[]>([]);
|
||||
const myComment = ref('');
|
||||
const newVoteTitle = ref('');
|
||||
const newVoteOptionsText = ref('');
|
||||
const newVoteMultipleOptions = ref(1);
|
||||
|
||||
const selectionSingle = ref<number | null>(null);
|
||||
const selectionMulti = ref<number[]>([]);
|
||||
const commentDraft = ref('');
|
||||
const actionMessage = ref<string | null>(null);
|
||||
|
||||
const newPollTitle = ref('');
|
||||
const newPollBody = ref('');
|
||||
const newPollOptionsText = ref('');
|
||||
const newPollMultipleOptions = ref(1);
|
||||
const newPollEndAt = ref('');
|
||||
const newPollRevealMode = ref<RevealMode>('after_vote');
|
||||
const newPollClosePrevious = ref(true);
|
||||
|
||||
const updateTitle = ref('');
|
||||
const updateBody = ref('');
|
||||
const updateOptionsText = ref('');
|
||||
const updateMultipleOptions = ref<number | null>(null);
|
||||
const updateEndAt = ref('');
|
||||
const updateRevealMode = ref<RevealMode>('after_vote');
|
||||
|
||||
const resolveErrorMessage = (value: unknown): string => {
|
||||
if (value instanceof Error) {
|
||||
return value.message;
|
||||
const getErrorMessage = (error: unknown): string => {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return value;
|
||||
}
|
||||
return 'unknown_error';
|
||||
return typeof error === 'string' ? error : '요청을 처리하지 못했습니다.';
|
||||
};
|
||||
|
||||
const formatDate = (value: string | null): string => {
|
||||
if (!value) {
|
||||
return '-';
|
||||
const showMessage = (text: string, kind: 'success' | 'error') => {
|
||||
message.value = text;
|
||||
messageKind.value = kind;
|
||||
};
|
||||
|
||||
const isEnded = (poll: { endAt: string | null; closedAt: string | null }): boolean => {
|
||||
if (poll.closedAt) {
|
||||
return true;
|
||||
}
|
||||
return poll.endAt ? new Date(poll.endAt).getTime() < Date.now() : false;
|
||||
};
|
||||
|
||||
const canVote = computed(
|
||||
() => Boolean(currentVote.value) && !currentVote.value?.myVote && !isEnded(currentVote.value!.voteInfo)
|
||||
);
|
||||
|
||||
const voteTotal = computed(() => (currentVote.value?.votes ?? []).reduce((total, vote) => total + vote.count, 0));
|
||||
|
||||
const voteDistribution = computed(() => {
|
||||
const result = Array.from({ length: currentVote.value?.voteInfo.options.length ?? 0 }, () => 0);
|
||||
for (const vote of currentVote.value?.votes ?? []) {
|
||||
for (const selection of vote.selection) {
|
||||
if (selection >= 0 && selection < result.length) {
|
||||
result[selection] += vote.count;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const newVoteOptions = computed(() => newVoteOptionsText.value.split('\n').filter((option) => option.length > 0));
|
||||
|
||||
const percentage = (count: number, total: number): string => ((count / Math.max(1, total)) * 100).toFixed(1);
|
||||
|
||||
const formatStartDate = (value: string): string => value.slice(0, 10);
|
||||
|
||||
const formatCommentDate = (value: string): string => {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value;
|
||||
}
|
||||
return date.toLocaleString('ko-KR');
|
||||
const pad = (part: number) => String(part).padStart(2, '0');
|
||||
return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||
};
|
||||
|
||||
const parseOptionsText = (text: string): string[] =>
|
||||
text
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0);
|
||||
const voteColor = (index: number): string =>
|
||||
['#ff0000', '#ffa500', '#ffff00', '#008000', '#0000ff', '#000080', '#800080'][index % 7]!;
|
||||
|
||||
const resolveDateInput = (value: string): string | undefined => {
|
||||
if (!value) {
|
||||
return undefined;
|
||||
}
|
||||
const parsed = new Date(value);
|
||||
if (Number.isNaN(parsed.getTime())) {
|
||||
return undefined;
|
||||
}
|
||||
return parsed.toISOString();
|
||||
};
|
||||
|
||||
const isPollEnded = (poll: { endAt: string | null; closedAt: string | null }): boolean => {
|
||||
if (poll.closedAt) {
|
||||
return true;
|
||||
}
|
||||
if (!poll.endAt) {
|
||||
return false;
|
||||
}
|
||||
const endDate = new Date(poll.endAt);
|
||||
if (Number.isNaN(endDate.getTime())) {
|
||||
return false;
|
||||
}
|
||||
return endDate <= new Date();
|
||||
};
|
||||
|
||||
const currentPoll = computed(() => {
|
||||
if (!polls.value.length) {
|
||||
return null;
|
||||
}
|
||||
const selected = polls.value.find((poll) => poll.id === activeVoteId.value);
|
||||
return selected ?? polls.value[0] ?? null;
|
||||
});
|
||||
|
||||
const revealLabel = computed(() => {
|
||||
if (!voteDetail.value) {
|
||||
return '';
|
||||
}
|
||||
return voteDetail.value.voteInfo.revealMode === 'after_vote' ? '투표 후 공개' : '종료 후 공개';
|
||||
});
|
||||
|
||||
const pollEnded = computed(() => {
|
||||
if (!voteDetail.value) {
|
||||
return false;
|
||||
}
|
||||
return isPollEnded({
|
||||
endAt: voteDetail.value.voteInfo.endAt,
|
||||
closedAt: voteDetail.value.voteInfo.closedAt,
|
||||
});
|
||||
});
|
||||
|
||||
const canVote = computed(() => {
|
||||
if (!voteDetail.value) {
|
||||
return false;
|
||||
}
|
||||
if (voteDetail.value.myVote) {
|
||||
return false;
|
||||
}
|
||||
return !pollEnded.value;
|
||||
});
|
||||
|
||||
const canReveal = computed(() => {
|
||||
if (!voteDetail.value) {
|
||||
return false;
|
||||
}
|
||||
if (voteDetail.value.voteInfo.revealMode === 'after_vote') {
|
||||
return Boolean(voteDetail.value.myVote) || pollEnded.value;
|
||||
}
|
||||
return pollEnded.value;
|
||||
});
|
||||
|
||||
const isSingleChoice = computed(() => voteDetail.value?.voteInfo.multipleOptions === 1);
|
||||
|
||||
const voteDistribution = computed(() => {
|
||||
if (!voteDetail.value) {
|
||||
return [] as number[];
|
||||
}
|
||||
const optionCount = voteDetail.value.voteInfo.options.length;
|
||||
const counts = Array.from({ length: optionCount }, () => 0);
|
||||
for (const entry of voteDetail.value.votes as VoteResultEntry[]) {
|
||||
for (const index of entry.selection) {
|
||||
if (index >= 0 && index < counts.length) {
|
||||
counts[index] += entry.count;
|
||||
}
|
||||
}
|
||||
}
|
||||
return counts;
|
||||
});
|
||||
|
||||
const voteTotal = computed(() =>
|
||||
(voteDetail.value?.votes ?? []).reduce((sum, entry) => sum + entry.count, 0)
|
||||
);
|
||||
|
||||
const selectPoll = (pollId: number) => {
|
||||
if (activeVoteId.value === pollId) {
|
||||
return;
|
||||
}
|
||||
activeVoteId.value = pollId;
|
||||
};
|
||||
|
||||
const loadVoteList = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const result = await trpc.vote.getVoteList.query();
|
||||
polls.value = result.polls;
|
||||
voteReward.value = result.voteReward ?? 0;
|
||||
if (!activeVoteId.value || !result.polls.some((poll) => poll.id === activeVoteId.value)) {
|
||||
const openPoll = result.polls.find((poll) => !isPollEnded(poll));
|
||||
activeVoteId.value = openPoll?.id ?? result.polls[0]?.id ?? null;
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
const voteColorText = (index: number): string => ([1, 2].includes(index % 7) ? '#000' : '#fff');
|
||||
|
||||
const loadVoteDetail = async (voteId: number) => {
|
||||
if (detailLoading.value) {
|
||||
return;
|
||||
}
|
||||
detailLoading.value = true;
|
||||
error.value = null;
|
||||
actionMessage.value = null;
|
||||
try {
|
||||
const result = await trpc.vote.getVoteDetail.query({ voteId });
|
||||
voteDetail.value = result;
|
||||
if (result.myVote && result.myVote.length > 0) {
|
||||
if (result.voteInfo.multipleOptions === 1) {
|
||||
selectionSingle.value = result.myVote[0] ?? null;
|
||||
selectionMulti.value = [...result.myVote];
|
||||
} else {
|
||||
selectionSingle.value = null;
|
||||
selectionMulti.value = [...result.myVote];
|
||||
}
|
||||
} else {
|
||||
selectionSingle.value = null;
|
||||
selectionMulti.value = [];
|
||||
}
|
||||
commentDraft.value = '';
|
||||
updateTitle.value = result.voteInfo.title;
|
||||
updateBody.value = result.voteInfo.body;
|
||||
updateMultipleOptions.value = result.voteInfo.multipleOptions;
|
||||
updateRevealMode.value = result.voteInfo.revealMode;
|
||||
updateEndAt.value = result.voteInfo.endAt ? result.voteInfo.endAt.slice(0, 16) : '';
|
||||
} catch (err) {
|
||||
error.value = resolveErrorMessage(err);
|
||||
const detail = await trpc.vote.getVoteDetail.query({ voteId });
|
||||
currentVote.value = detail;
|
||||
currentVoteId.value = voteId;
|
||||
mySinglePick.value = detail.myVote?.[0] ?? 0;
|
||||
myMultiPick.value = detail.myVote ? [...detail.myVote] : [];
|
||||
myComment.value = '';
|
||||
} catch (error) {
|
||||
showMessage(getErrorMessage(error), 'error');
|
||||
} finally {
|
||||
detailLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshAll = async () => {
|
||||
await loadVoteList();
|
||||
if (activeVoteId.value) {
|
||||
await loadVoteDetail(activeVoteId.value);
|
||||
const reloadVote = async () => {
|
||||
if (loading.value) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
message.value = '';
|
||||
try {
|
||||
const result = await trpc.vote.getVoteList.query();
|
||||
polls.value = result.polls;
|
||||
voteReward.value = result.voteReward;
|
||||
const nextVoteId =
|
||||
(currentVoteId.value && result.polls.some((poll) => poll.id === currentVoteId.value)
|
||||
? currentVoteId.value
|
||||
: result.polls[0]?.id) ?? null;
|
||||
if (nextVoteId) {
|
||||
await loadVoteDetail(nextVoteId);
|
||||
} else {
|
||||
currentVoteId.value = null;
|
||||
currentVote.value = null;
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage(getErrorMessage(error), 'error');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const selectVote = (voteId: number) => {
|
||||
if (voteId !== currentVoteId.value) {
|
||||
void loadVoteDetail(voteId);
|
||||
}
|
||||
};
|
||||
|
||||
const changeMultiPick = (index: number, checked: boolean) => {
|
||||
const limit = currentVote.value?.voteInfo.multipleOptions ?? 0;
|
||||
if (checked && limit > 0 && myMultiPick.value.length > limit) {
|
||||
myMultiPick.value = myMultiPick.value.filter((value) => value !== index);
|
||||
showMessage(`${limit}개까지만 선택할 수 있습니다.`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const submitVote = async () => {
|
||||
if (!voteDetail.value) {
|
||||
if (!currentVote.value) {
|
||||
return;
|
||||
}
|
||||
const optionLimit = voteDetail.value.voteInfo.multipleOptions;
|
||||
const selected = isSingleChoice.value
|
||||
? selectionSingle.value !== null
|
||||
? [selectionSingle.value]
|
||||
: []
|
||||
: [...selectionMulti.value];
|
||||
|
||||
if (selected.length === 0) {
|
||||
actionMessage.value = '선택한 항목이 없습니다.';
|
||||
const selection = currentVote.value.voteInfo.multipleOptions === 1 ? [mySinglePick.value] : [...myMultiPick.value];
|
||||
if (selection.length === 0) {
|
||||
showMessage('선택한 항목이 없습니다.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (optionLimit >= 1 && selected.length > optionLimit) {
|
||||
actionMessage.value = '선택한 항목이 너무 많습니다.';
|
||||
return;
|
||||
}
|
||||
|
||||
actionMessage.value = null;
|
||||
try {
|
||||
const result = await trpc.vote.submitVote.mutate({
|
||||
voteId: voteDetail.value.voteInfo.id,
|
||||
selection: selected,
|
||||
voteId: currentVote.value.voteInfo.id,
|
||||
selection,
|
||||
});
|
||||
actionMessage.value = result.wonLottery
|
||||
? '투표 완료! 유니크 추첨에 당첨되었습니다.'
|
||||
: '투표가 완료되었습니다.';
|
||||
await refreshAll();
|
||||
} catch (err) {
|
||||
actionMessage.value = resolveErrorMessage(err);
|
||||
showMessage(result.wonLottery ? '특별한 설문 보상이 제공되었습니다!' : '설문을 마쳤습니다.', 'success');
|
||||
await loadVoteDetail(currentVote.value.voteInfo.id);
|
||||
} catch (error) {
|
||||
showMessage(getErrorMessage(error), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const submitComment = async () => {
|
||||
if (!voteDetail.value) {
|
||||
if (!currentVote.value || myComment.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
const text = commentDraft.value.trim();
|
||||
if (!text) {
|
||||
return;
|
||||
}
|
||||
actionMessage.value = null;
|
||||
try {
|
||||
await trpc.vote.addComment.mutate({
|
||||
voteId: voteDetail.value.voteInfo.id,
|
||||
text,
|
||||
voteId: currentVote.value.voteInfo.id,
|
||||
text: myComment.value,
|
||||
});
|
||||
commentDraft.value = '';
|
||||
await loadVoteDetail(voteDetail.value.voteInfo.id);
|
||||
} catch (err) {
|
||||
actionMessage.value = resolveErrorMessage(err);
|
||||
myComment.value = '';
|
||||
showMessage('댓글을 달았습니다.', 'success');
|
||||
await loadVoteDetail(currentVote.value.voteInfo.id);
|
||||
} catch (error) {
|
||||
showMessage(getErrorMessage(error), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const createPoll = async () => {
|
||||
const options = parseOptionsText(newPollOptionsText.value);
|
||||
const endAt = resolveDateInput(newPollEndAt.value);
|
||||
actionMessage.value = null;
|
||||
const submitNewVote = async () => {
|
||||
try {
|
||||
await trpc.vote.createPoll.mutate({
|
||||
title: newPollTitle.value.trim(),
|
||||
body: newPollBody.value.trim(),
|
||||
options,
|
||||
multipleOptions: newPollMultipleOptions.value,
|
||||
endAt,
|
||||
revealMode: newPollRevealMode.value,
|
||||
closePrevious: newPollClosePrevious.value,
|
||||
title: newVoteTitle.value,
|
||||
body: '',
|
||||
options: newVoteOptions.value,
|
||||
multipleOptions: newVoteMultipleOptions.value,
|
||||
revealMode: 'after_vote',
|
||||
closePrevious: true,
|
||||
});
|
||||
newPollTitle.value = '';
|
||||
newPollBody.value = '';
|
||||
newPollOptionsText.value = '';
|
||||
newPollMultipleOptions.value = 1;
|
||||
newPollEndAt.value = '';
|
||||
newPollRevealMode.value = 'after_vote';
|
||||
newPollClosePrevious.value = true;
|
||||
await refreshAll();
|
||||
} catch (err) {
|
||||
actionMessage.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const updatePoll = async () => {
|
||||
if (!voteDetail.value) {
|
||||
return;
|
||||
}
|
||||
const appendOptions = parseOptionsText(updateOptionsText.value);
|
||||
const endAt = resolveDateInput(updateEndAt.value);
|
||||
actionMessage.value = null;
|
||||
try {
|
||||
await trpc.vote.updatePoll.mutate({
|
||||
voteId: voteDetail.value.voteInfo.id,
|
||||
title: updateTitle.value.trim() || undefined,
|
||||
body: updateBody.value.trim() || undefined,
|
||||
appendOptions: appendOptions.length > 0 ? appendOptions : undefined,
|
||||
multipleOptions: updateMultipleOptions.value ?? undefined,
|
||||
endAt,
|
||||
revealMode: updateRevealMode.value,
|
||||
});
|
||||
updateOptionsText.value = '';
|
||||
await refreshAll();
|
||||
} catch (err) {
|
||||
actionMessage.value = resolveErrorMessage(err);
|
||||
}
|
||||
};
|
||||
|
||||
const closePoll = async () => {
|
||||
if (!voteDetail.value) {
|
||||
return;
|
||||
}
|
||||
actionMessage.value = null;
|
||||
try {
|
||||
await trpc.vote.closePoll.mutate({ voteId: voteDetail.value.voteInfo.id });
|
||||
await refreshAll();
|
||||
} catch (err) {
|
||||
actionMessage.value = resolveErrorMessage(err);
|
||||
showMessage('설문 조사가 생성되었습니다.', 'success');
|
||||
newVoteTitle.value = '';
|
||||
newVoteOptionsText.value = '';
|
||||
newVoteMultipleOptions.value = 1;
|
||||
showNewVote.value = false;
|
||||
await reloadVote();
|
||||
} catch (error) {
|
||||
showMessage(getErrorMessage(error), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
void refreshAll();
|
||||
void trpc.vote.getAdminStatus.query().then((result) => {
|
||||
adminEnabled.value = Boolean(result?.ok);
|
||||
}).catch(() => {
|
||||
adminEnabled.value = false;
|
||||
});
|
||||
});
|
||||
|
||||
watch(activeVoteId, (voteId) => {
|
||||
if (voteId) {
|
||||
void loadVoteDetail(voteId);
|
||||
}
|
||||
void reloadVote();
|
||||
void trpc.vote.getAdminStatus
|
||||
.query()
|
||||
.then((result) => {
|
||||
isVoteAdmin.value = result.ok === true;
|
||||
})
|
||||
.catch(() => {
|
||||
isVoteAdmin.value = false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="survey-view">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">설문조사</h1>
|
||||
<p class="page-subtitle">투표 참여 보상과 유니크 추첨이 함께 진행됩니다.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<RouterLink class="ghost" to="/">메인으로</RouterLink>
|
||||
<button class="ghost" @click="refreshAll" :disabled="loading">새로고침</button>
|
||||
</div>
|
||||
<main id="container" class="pageVote bg0">
|
||||
<header class="back_bar bg0">
|
||||
<RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
|
||||
<button class="btn btn-sammo-base2 reload_btn" type="button" :disabled="loading" @click="reloadVote">
|
||||
갱신
|
||||
</button>
|
||||
<h2 class="title"></h2>
|
||||
<div> </div>
|
||||
<div></div>
|
||||
</header>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<div v-if="actionMessage" class="notice">{{ actionMessage }}</div>
|
||||
<div
|
||||
v-if="message"
|
||||
class="vote-notice"
|
||||
:class="messageKind"
|
||||
:role="messageKind === 'error' ? 'alert' : 'status'"
|
||||
>
|
||||
{{ message }}
|
||||
</div>
|
||||
<div id="vote-title" class="bg2">설문 조사({{ voteReward }}금과 추첨으로 유니크템 증정!)</div>
|
||||
|
||||
<section class="survey-grid">
|
||||
<div class="survey-main">
|
||||
<PanelCard title="보상 안내">
|
||||
<div class="reward-block">
|
||||
<div>투표 참여 보상: <strong>{{ voteReward }}</strong> 금</div>
|
||||
<div>추첨 보상: 유니크 장비 1종</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
<div v-if="detailLoading && !currentVote" class="loading">불러오는 중...</div>
|
||||
<table v-if="currentVote" id="vote-result">
|
||||
<colgroup>
|
||||
<col class="vote-idx" />
|
||||
<col class="vote-count" />
|
||||
<col class="vote-percent" />
|
||||
<col class="vote-option" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3" class="text-end bg1">설문 제목</th>
|
||||
<th id="vote-detail-title">
|
||||
{{ currentVote.voteInfo.title }}
|
||||
<template v-if="currentVote.voteInfo.multipleOptions !== 1">
|
||||
({{
|
||||
currentVote.voteInfo.multipleOptions === 0
|
||||
? currentVote.voteInfo.options.length
|
||||
: currentVote.voteInfo.multipleOptions
|
||||
}}개 선택 가능 )
|
||||
</template>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" class="text-end bg1">게시자</th>
|
||||
<th id="vote-detail-opener">{{ currentVote.voteInfo.openerName || '[SYSTEM]' }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(option, index) in currentVote.voteInfo.options" :key="index">
|
||||
<td v-if="canVote" class="text-center">
|
||||
<input
|
||||
v-if="currentVote.voteInfo.multipleOptions === 1"
|
||||
:id="`v-vote-${index}`"
|
||||
v-model="mySinglePick"
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
:value="index"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
:id="`v-vote-${index}`"
|
||||
v-model="myMultiPick"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:value="index"
|
||||
@change="changeMultiPick(index, ($event.target as HTMLInputElement).checked)"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-else
|
||||
class="text-end f_tnum"
|
||||
:style="{ backgroundColor: voteColor(index), color: voteColorText(index) }"
|
||||
>
|
||||
{{ index + 1 }}.
|
||||
</td>
|
||||
<td class="text-end f_tnum vote-count">
|
||||
<label :for="`v-vote-${index}`">{{ voteDistribution[index] }}명</label>
|
||||
</td>
|
||||
<td class="text-end f_tnum vote-percent">
|
||||
<label :for="`v-vote-${index}`">
|
||||
({{ percentage(voteDistribution[index] ?? 0, voteTotal) }}%)
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label :for="`v-vote-${index}`">{{ option }}</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<template v-if="canVote">
|
||||
<td class="text-center">투표</td>
|
||||
<td colspan="2">
|
||||
<button class="btn btn-primary vote-submit" @click="submitVote">투표</button>
|
||||
</td>
|
||||
</template>
|
||||
<td v-else colspan="3" class="text-center">결산</td>
|
||||
<td>
|
||||
투표율: {{ voteTotal }} / {{ currentVote.userCnt }} ({{
|
||||
percentage(voteTotal, currentVote.userCnt)
|
||||
}}%)
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<PanelCard title="현재 설문" :subtitle="currentPoll?.title ?? '설문 정보 없음'">
|
||||
<SkeletonLines v-if="loading || detailLoading" :lines="6" />
|
||||
<div v-else-if="!voteDetail" class="placeholder">설문 정보가 없습니다.</div>
|
||||
<div v-else class="poll-detail">
|
||||
<div class="poll-meta">
|
||||
<div><strong>제목</strong> {{ voteDetail.voteInfo.title }}</div>
|
||||
<div v-if="voteDetail.voteInfo.body"><strong>본문</strong> {{ voteDetail.voteInfo.body }}</div>
|
||||
<div><strong>작성자</strong> {{ voteDetail.voteInfo.openerName }}</div>
|
||||
<div>
|
||||
<strong>선택 제한</strong>
|
||||
{{
|
||||
voteDetail.voteInfo.multipleOptions === 0
|
||||
? '제한 없음'
|
||||
: voteDetail.voteInfo.multipleOptions === 1
|
||||
? '1개 선택'
|
||||
: `${voteDetail.voteInfo.multipleOptions}개 선택`
|
||||
}}
|
||||
</div>
|
||||
<div><strong>공개 정책</strong> {{ revealLabel }}</div>
|
||||
<div><strong>시작</strong> {{ formatDate(voteDetail.voteInfo.startAt) }}</div>
|
||||
<div><strong>종료</strong> {{ formatDate(voteDetail.voteInfo.endAt) }}</div>
|
||||
<div><strong>닫힘</strong> {{ formatDate(voteDetail.voteInfo.closedAt) }}</div>
|
||||
</div>
|
||||
<form v-if="currentVote" @submit.prevent="submitComment">
|
||||
<table id="vote-comment">
|
||||
<colgroup>
|
||||
<col class="comment-idx" />
|
||||
<col class="comment-name" />
|
||||
<col class="comment-text" />
|
||||
<col class="comment-date" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr class="bg1 text-center">
|
||||
<th>#</th>
|
||||
<th><span>국가명</span><span>장수명</span></th>
|
||||
<th>댓글</th>
|
||||
<th>일시</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(comment, index) in currentVote.comments" :key="comment.id">
|
||||
<td class="comment-idx f_tnum">{{ index + 1 }}.</td>
|
||||
<td class="comment-name">
|
||||
<span>{{ comment.nationName }}</span
|
||||
><span>{{ comment.generalName }}</span>
|
||||
</td>
|
||||
<td>{{ comment.text }}</td>
|
||||
<td class="comment-date f_tnum">{{ formatCommentDate(comment.createdAt) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><button class="btn btn-primary comment-submit" type="submit">댓글 달기</button></td>
|
||||
<td colspan="2">
|
||||
<input v-model="myComment" class="form-control" maxlength="200" aria-label="댓글" />
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<div class="poll-options">
|
||||
<div
|
||||
v-for="(option, idx) in voteDetail.voteInfo.options"
|
||||
:key="`${voteDetail.voteInfo.id}-${idx}`"
|
||||
class="poll-option"
|
||||
>
|
||||
<label>
|
||||
<input
|
||||
v-if="isSingleChoice"
|
||||
type="radio"
|
||||
:value="idx"
|
||||
v-model="selectionSingle"
|
||||
:disabled="!canVote"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
type="checkbox"
|
||||
:value="idx"
|
||||
v-model="selectionMulti"
|
||||
:disabled="!canVote"
|
||||
/>
|
||||
<span>{{ option }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="poll-actions">
|
||||
<button class="ghost" @click="submitVote" :disabled="!canVote">투표하기</button>
|
||||
<span v-if="voteDetail.myVote" class="muted">이미 투표했습니다.</span>
|
||||
<span v-else-if="pollEnded" class="muted">설문이 종료되었습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="결과">
|
||||
<SkeletonLines v-if="detailLoading" :lines="4" />
|
||||
<div v-else-if="!voteDetail" class="placeholder">설문 결과가 없습니다.</div>
|
||||
<div v-else-if="!canReveal" class="placeholder">
|
||||
결과는 {{ revealLabel }}됩니다.
|
||||
</div>
|
||||
<div v-else class="poll-results">
|
||||
<div class="result-summary">
|
||||
참여 인원 {{ voteTotal }} / {{ voteDetail.userCnt }}
|
||||
</div>
|
||||
<div v-for="(option, idx) in voteDetail.voteInfo.options" :key="`result-${idx}`" class="result-row">
|
||||
<div class="result-option">{{ option }}</div>
|
||||
<div class="result-count">{{ voteDistribution[idx] ?? 0 }}명</div>
|
||||
<div class="result-percent">
|
||||
{{
|
||||
voteTotal > 0
|
||||
? ((voteDistribution[idx] ?? 0) / voteTotal * 100).toFixed(1)
|
||||
: '0.0'
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
|
||||
<PanelCard title="댓글">
|
||||
<SkeletonLines v-if="detailLoading" :lines="4" />
|
||||
<div v-else-if="!voteDetail" class="placeholder">댓글을 불러오는 중입니다.</div>
|
||||
<div v-else>
|
||||
<div v-if="voteDetail.comments.length === 0" class="placeholder">아직 댓글이 없습니다.</div>
|
||||
<div v-else class="comment-list">
|
||||
<div v-for="comment in voteDetail.comments" :key="comment.id" class="comment-item">
|
||||
<div class="comment-header">
|
||||
<span>{{ comment.nationName }}</span>
|
||||
<span>{{ comment.generalName }}</span>
|
||||
<span class="comment-date">{{ formatDate(comment.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="comment-text">{{ comment.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-form">
|
||||
<input
|
||||
v-model="commentDraft"
|
||||
type="text"
|
||||
maxlength="200"
|
||||
placeholder="댓글을 입력하세요"
|
||||
/>
|
||||
<button class="ghost" @click="submitComment">댓글 등록</button>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
<div id="vote-old-title" class="bg2">이전 설문 조사</div>
|
||||
<div id="vote-old-list">
|
||||
<div v-for="poll in polls" :key="poll.id" class="vote-old-item">
|
||||
<a href="#" @click.prevent="selectVote(poll.id)">{{ poll.title }}</a>
|
||||
({{ formatStartDate(poll.startAt) }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="survey-side">
|
||||
<PanelCard title="설문 목록">
|
||||
<SkeletonLines v-if="loading" :lines="4" />
|
||||
<div v-else class="poll-list">
|
||||
<div v-if="polls.length === 0" class="placeholder">등록된 설문이 없습니다.</div>
|
||||
<button
|
||||
v-for="poll in polls"
|
||||
:key="poll.id"
|
||||
class="poll-list-item"
|
||||
:class="{ active: poll.id === currentPoll?.id }"
|
||||
@click="selectPoll(poll.id)"
|
||||
>
|
||||
<div class="poll-title">{{ poll.title }}</div>
|
||||
<div class="poll-meta-row">
|
||||
<span>{{ formatDate(poll.startAt) }}</span>
|
||||
<span>{{ isPollEnded(poll) ? '종료됨' : '진행중' }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div v-if="isVoteAdmin" id="vote-new-panel">
|
||||
<div><a href="#" @click.prevent="showNewVote = !showNewVote">새 설문 조사 열기</a></div>
|
||||
<template v-if="showNewVote">
|
||||
<div class="admin-row">
|
||||
<div>설문 제목</div>
|
||||
<div><input v-model="newVoteTitle" class="form-control" type="text" /></div>
|
||||
</div>
|
||||
<div class="admin-row">
|
||||
<div>설문 대상(엔터로 구분) ({{ newVoteOptions.length }}건)</div>
|
||||
<div>
|
||||
<textarea
|
||||
v-model="newVoteOptionsText"
|
||||
class="form-control"
|
||||
:rows="newVoteOptions.length + 1"
|
||||
></textarea>
|
||||
</div>
|
||||
</PanelCard>
|
||||
</div>
|
||||
<div class="admin-row">
|
||||
<div>동시 응답 수(0=모두)</div>
|
||||
<div>
|
||||
<input
|
||||
v-model.number="newVoteMultipleOptions"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
:max="newVoteOptions.length"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-submit">
|
||||
<button class="btn btn-primary" type="button" @click="submitNewVote">제출</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<PanelCard v-if="adminEnabled" title="관리자 패널">
|
||||
<div class="admin-section">
|
||||
<h3>새 설문 생성</h3>
|
||||
<label>
|
||||
제목
|
||||
<input v-model="newPollTitle" type="text" />
|
||||
</label>
|
||||
<label>
|
||||
본문
|
||||
<textarea v-model="newPollBody" rows="3" />
|
||||
</label>
|
||||
<label>
|
||||
항목 (줄바꿈 구분)
|
||||
<textarea v-model="newPollOptionsText" rows="4" />
|
||||
</label>
|
||||
<label>
|
||||
동시 응답 수 (0=제한 없음)
|
||||
<input v-model.number="newPollMultipleOptions" type="number" min="0" />
|
||||
</label>
|
||||
<label>
|
||||
종료 시각
|
||||
<input v-model="newPollEndAt" type="datetime-local" />
|
||||
</label>
|
||||
<label>
|
||||
공개 정책
|
||||
<select v-model="newPollRevealMode">
|
||||
<option value="after_vote">투표 후 공개</option>
|
||||
<option value="after_end">종료 후 공개</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input v-model="newPollClosePrevious" type="checkbox" />
|
||||
기존 설문 종료
|
||||
</label>
|
||||
<button class="ghost" @click="createPoll">설문 생성</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-section" v-if="voteDetail">
|
||||
<h3>설문 수정</h3>
|
||||
<p class="muted">응답 0건일 때만 수정 가능합니다.</p>
|
||||
<label>
|
||||
제목
|
||||
<input v-model="updateTitle" type="text" />
|
||||
</label>
|
||||
<label>
|
||||
본문
|
||||
<textarea v-model="updateBody" rows="3" />
|
||||
</label>
|
||||
<label>
|
||||
항목 추가 (줄바꿈 구분)
|
||||
<textarea v-model="updateOptionsText" rows="3" />
|
||||
</label>
|
||||
<label>
|
||||
동시 응답 수
|
||||
<input v-model.number="updateMultipleOptions" type="number" min="0" />
|
||||
</label>
|
||||
<label>
|
||||
종료 시각
|
||||
<input v-model="updateEndAt" type="datetime-local" />
|
||||
</label>
|
||||
<label>
|
||||
공개 정책
|
||||
<select v-model="updateRevealMode">
|
||||
<option value="after_vote">투표 후 공개</option>
|
||||
<option value="after_end">종료 후 공개</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="admin-actions">
|
||||
<button class="ghost" @click="updatePoll">수정 적용</button>
|
||||
<button class="ghost" @click="closePoll">설문 종료</button>
|
||||
</div>
|
||||
</div>
|
||||
</PanelCard>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="bottom_bar bg0">
|
||||
<RouterLink class="btn btn-sammo-base2 back_btn" to="/">창 닫기</RouterLink>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.survey-view {
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.pageVote {
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding-bottom: 12px;
|
||||
.bg0 {
|
||||
background-image: url('/image/game/back_walnut.jpg');
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
.bg1 {
|
||||
background-image: url('/image/game/back_green.jpg');
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
.bg2 {
|
||||
background-image: url('/image/game/back_blue.jpg');
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
background: rgba(16, 16, 16, 0.6);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ghost:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff8080;
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
}
|
||||
|
||||
.survey-grid {
|
||||
.back_bar {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 16px;
|
||||
grid-template-columns: 90px 90px 1fr 90px 90px;
|
||||
}
|
||||
|
||||
.survey-main,
|
||||
.survey-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.reward-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.poll-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.poll-meta {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.poll-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.poll-option {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.poll-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.poll-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-summary {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.result-count,
|
||||
.result-percent {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||||
border-radius: 8px;
|
||||
background: rgba(16, 16, 16, 0.5);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(232, 221, 196, 0.8);
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.comment-form input {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
background: rgba(16, 16, 16, 0.6);
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.poll-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.poll-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(201, 164, 90, 0.3);
|
||||
background: rgba(16, 16, 16, 0.5);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.poll-list-item.active {
|
||||
border-color: rgba(255, 214, 140, 0.8);
|
||||
background: rgba(32, 24, 12, 0.8);
|
||||
}
|
||||
|
||||
.poll-meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: rgba(232, 221, 196, 0.7);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgba(232, 221, 196, 0.6);
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.admin-section h3 {
|
||||
.back_bar .title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.admin-section label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 0.85rem;
|
||||
.btn {
|
||||
min-height: 35.5px;
|
||||
padding: 5.25px 10.5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5.25px;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-section input,
|
||||
.admin-section textarea,
|
||||
.admin-section select {
|
||||
padding: 6px 8px;
|
||||
background: rgba(16, 16, 16, 0.6);
|
||||
border: 1px solid rgba(201, 164, 90, 0.4);
|
||||
color: inherit;
|
||||
.btn:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.admin-section .checkbox {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.btn:focus-visible {
|
||||
outline: 2px solid #8ab4f8;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.survey-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-sammo-base2 {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
margin-right: 2px;
|
||||
border-color: #004f28;
|
||||
background: #00582c;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back_bar .btn-sammo-base2 {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: #0d6efd;
|
||||
background: #0d6efd;
|
||||
}
|
||||
|
||||
#vote-title {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#vote-old-title {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#vote-result,
|
||||
#vote-comment {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#vote-result th,
|
||||
#vote-result td,
|
||||
#vote-comment th,
|
||||
#vote-comment td {
|
||||
padding-right: 1ch;
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
#vote-result label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#vote-result .vote-idx {
|
||||
width: 5ch;
|
||||
}
|
||||
|
||||
#vote-result .vote-count {
|
||||
width: 55px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#vote-result .vote-percent {
|
||||
width: 70px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.vote-submit {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#vote-comment .comment-idx {
|
||||
width: 5ch;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
#vote-comment .comment-name {
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#vote-comment .comment-name span,
|
||||
#vote-comment thead th:nth-child(2) span {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#vote-comment tbody tr {
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
|
||||
.comment-submit {
|
||||
width: 50%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
min-height: 35.5px;
|
||||
box-sizing: border-box;
|
||||
padding: 5.25px 10.5px;
|
||||
border: 1px solid #6c757d;
|
||||
border-radius: 5.25px;
|
||||
color: #fff;
|
||||
background: #212529;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0;
|
||||
accent-color: #0d6efd;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.f_tnum {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
#vote-old-list,
|
||||
#vote-new-panel {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.vote-old-item a,
|
||||
#vote-new-panel a {
|
||||
color: #6ea8fe;
|
||||
}
|
||||
|
||||
.admin-row {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 75%;
|
||||
}
|
||||
|
||||
.admin-row > div {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.admin-submit {
|
||||
width: 20%;
|
||||
margin-left: 80%;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.bottom_bar {
|
||||
height: 55.5px;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom_bar .back_btn {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.vote-notice {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #477a47;
|
||||
color: #d8f5d8;
|
||||
}
|
||||
|
||||
.vote-notice.error {
|
||||
border-color: #9b4848;
|
||||
color: #ffd0d0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
.pageVote {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
flex-direction: column;
|
||||
#vote-comment .comment-name {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
#vote-comment .comment-date {
|
||||
width: 98px;
|
||||
padding-right: 0.5ch;
|
||||
padding-left: 0.5ch;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pageVote {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#vote-comment .comment-name {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#vote-comment .comment-date {
|
||||
width: 50px;
|
||||
padding-right: 0.5ch;
|
||||
padding-left: 0.5ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-row {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user