Skip to content

Commit

Permalink
レイアウトを調整、1280まで全画面モードに対応
Browse files Browse the repository at this point in the history
  • Loading branch information
@CoreNion
CoreNion committed Jan 5, 2024
1 parent d49ff5d commit df9af86
Show file tree
Hide file tree
Showing 8 changed files with 40 additions and 34 deletions.
6 changes: 3 additions & 3 deletions app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ onMounted(async () => {
<NuxtPwaManifest />
<NuxtLayout>
<!-- 大画面デバイスの表示 -->
<div v-if="widthState >= 1536" class="min-h-screen flex flex-row text-center gap-2">
<div v-if="widthState >= 1280" class="min-h-screen flex flex-row text-center gap-2">
<div class="basis-[20.0%] flex flex-row justify-between">
<status></status>
</div>
Expand All @@ -141,7 +141,7 @@ onMounted(async () => {
<clock></clock>
</div>

<div class="basis-[20.0%] flex flex-col items-end m-3 gap-4">
<div class="basis-[15.0%] flex flex-col items-end m-3 gap-4">
<report></report>
<div class="grow m-2 flex flex-col justify-end gap-2">
<TimerSetting></TimerSetting>
Expand All @@ -152,7 +152,7 @@ onMounted(async () => {
</div>

<!-- 小画面デバイスの表示　-->
<div v-if="widthState < 1536" class="min-h-screen min-w-full flex flex-col items-center text-center">
<div v-if="widthState <= 1280" class="min-h-screen min-w-full flex flex-col items-center text-center">
<clock class="grow"></clock>
<TimerSetting class="m-2"></TimerSetting>
<div class="flex flex-row gap-5">
Expand Down
10 changes: 5 additions & 5 deletions components/clock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ onMounted(() => {
</script>

<template>
<div class="flex flex-col 2xl:min-h-screen items-center justify-center gap-3">
<div class="flex flex-col xl:min-h-screen items-center justify-center gap-3">
<!-- メイン表示 -->
<ClientOnly>
<h1 class="countdown max-md:text-[21.5vw] text-[15vw] font-bold">
<h1 class="countdown text-[18vw] xl:text-[12.2vw] 2xl:text-[13vw] font-bold">
<span :style="{ '--value': timerState != null ? timerState[0] : dayjs(timeState).hour() }"></span>:
<span :style="{ '--value': timerState != null ? timerState[1] : dayjs(timeState).minute() }"></span>:
<span :style="{ '--value': timerState != null ? timerState[2] : dayjs(timeState).second() }"></span>
Expand All @@ -96,12 +96,12 @@ onMounted(() => {
<ClientOnly>
<h2>
<div v-if="timerState != null" class="flex flex-row items-center">
<span class="max-md:text-[6vw] text-[4vw] mr-3"> {{ dayjs(timeState).format('MM/DD (ddd)') }} </span>
<div class="max-md:text-[12vw] text-[7vw] font-mono">
<span class="max-md:text-[6vw] text-[3.5vw] mr-3"> {{ dayjs(timeState).format('MM/DD (ddd)') }} </span>
<div class="max-md:text-[12vw] text-[6vw] font-mono">
<span> {{ dayjs(timeState).format("HH:mm:ss") }}</span>
</div>
</div>
<span v-if="timerState == null" class="max-md:text-[9vw] text-[5vw]">
<span v-if="timerState == null" class="text-[7vw] xl:text-[4.5vw]">
{{ dayjs(timeState).format('YYYY年MM月DD日(ddd)') }}
</span>
</h2>
Expand Down
33 changes: 19 additions & 14 deletions components/report.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ dayjs.locale("ja");
// 現在時刻
const timeState = time();
// 画面サイズ
const wSize = widthScreenSize();
// カウントダウン名
const countdownName = useState('countdownName', () => 'レポート日数');
Expand All @@ -26,7 +28,7 @@ const countdownRatio = useState('countdownRatio', () => 0);
function refleshReportStatus(djs: dayjs.Dayjs = dayjs()) {
// レポートの残り時間
if ((timeState.value.getMonth() == 11 && timeState.value.getDate() < 16)
|| (timeState.value.getMonth() >= 3 && timeState.value.getMonth() <= 10)) {
|| (timeState.value.getMonth() >= 3 && timeState.value.getMonth() <= 10)) {
// 次のレポートの期限を計算
const nextReportDeadline = calcNextReportDeadline(djs);
Expand All @@ -38,7 +40,7 @@ function refleshReportStatus(djs: dayjs.Dayjs = dayjs()) {
} else {
countdownName.value = '最終登校まで';
const eventDay = dayjs("2024-03-15");
countdownLimit.value = calcLimit(eventDay, djs);
countdownLimitDays.value = calcLimitDays(eventDay, djs);
needCountdownAlert.value = needAlert(eventDay, djs);
Expand All @@ -56,19 +58,22 @@ onMounted(() => {
</script>

<template>
<div class="m-2">
<h2 class="text-[2vw] mb-3">{{ countdownName }}</h2>
<div class="m-2 min-w-full flex flex-col items-end">
<ClientOnly>
<div :class="['radial-progress', 'text-[3vw]', 'font-bold', needCountdownAlert ? 'text-red-600' : 'text-primary']"
:style="{ '--value': countdownRatio, '--size': '12vw', '--thickness': '1.5vw' }">
{{ Math.floor(countdownLimitDays) }}日
</div>
<div v-if="needCountdownAlert" class="mt-3 flex flex-col items-center">
<span class="text-[1.6vw]">残り時間</span>
<div class="countdown text-[2.5vw] font-bold text-red-600">
<span :style="{ '--value': Math.floor(dayjs.duration(countdownLimit).asHours()) }"></span>:
<span :style="{ '--value': dayjs.duration(countdownLimit).minutes() }"></span>:
<span :style="{ '--value': dayjs.duration(countdownLimit).seconds() }"></span>
<div class="flex flex-col items-center">
<h2 class="text-[2vw] max-2xl:text-4xl mb-3 font-medium">{{ countdownName }}</h2>
<div
:class="['radial-progress', 'text-[4vw]', 'max-2xl:text-6xl', 'font-bold', needCountdownAlert ? 'text-red-600' : 'text-primary']"
:style="{ '--value': countdownRatio, '--size': wSize >= 1536 ? '15vw' : '220px', '--thickness': wSize >= 1536 ? '2vw' : '30px' }">
{{ Math.floor(countdownLimitDays) }}日
</div>
<div v-if="needCountdownAlert" class="mt-3 flex flex-col items-center">
<span class="text-[1.6vw]">残り時間</span>
<div class="countdown text-[2.5vw] font-bold text-red-600">
<span :style="{ '--value': Math.floor(dayjs.duration(countdownLimit).asHours()) }"></span>:
<span :style="{ '--value': dayjs.duration(countdownLimit).minutes() }"></span>:
<span :style="{ '--value': dayjs.duration(countdownLimit).seconds() }"></span>
</div>
</div>
</div>
</ClientOnly>
Expand Down
6 changes: 3 additions & 3 deletions components/status.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,20 +201,20 @@ export async function refleshWeather() {
<button class="btn btn-primary btn-sm mt-1" @click="connectSerialDevice()">設定する</button>
</div>

<div v-else class="stat-value text-[4.6vw]">{{ roomTmpState != null ? roomTmpState.toFixed(1) : "-" }}
<div v-else class="stat-value font-semibold text-[4.6vw]">{{ roomTmpState != null ? roomTmpState.toFixed(1) : "-" }}
<Icon name="uil:celsius" size="4vw" />
</div>
</div>
<div class="stat px-0 py-1">
<div class="stat-title text-[3vw]">気圧*</div>
<div class="stat-value leading-none flex flex-col">
<div class="stat-value font-semibold leading-none flex flex-col">
<span class="text-[4.6vw]">{{ pressureState != null ? pressureState.toFixed(1) : "-" }}</span>
<span class="text-[3vw]">hPa</span>
</div>
</div>
<div class="stat py-1">
<div class="stat-title text-[3vw]">外気温*</div>
<div class="stat-value text-[4.6vw]">{{ outTmpState != null ? outTmpState : "-" }}
<div class="stat-value font-semibold text-[4.6vw]">{{ outTmpState != null ? outTmpState : "-" }}
<Icon name="uil:celsius" size="4vw" />
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions components/timer-setting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ function duration2ArrayTime(duration: duration.Duration) {
</script>

<template>
<div class="min-w-full flex max-xl:flex-row flex-col justify-center items-center gap-2 max-sm:flex-wrap">
<div class="2xl:min-w-full flex flex-col gap-1">
<div class="min-w-full flex flex-row flex-wrap justify-center items-center gap-2 ">
<div class="xl:min-w-full flex flex-col gap-1">
<label class="label cursor-pointer">
<span class="label-text">チャイム</span>
<input type="checkbox" class="toggle toggle-secondary" v-model="chimeStatus" />
Expand Down Expand Up @@ -120,16 +120,16 @@ function duration2ArrayTime(duration: duration.Duration) {

<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2">
<button class="btn btn-outline btn-secondary" @click="addTimerLimit([0, 5, 0])">+5分</button>
<button class="btn btn-outline btn-secondary" @click="addTimerLimit([0, 1, 0])">+1分</button>
<button class="btn btn-outline btn-secondary" @click="addTimerLimit([0, 0, 10])">+10秒</button>
<button class="btn btn-outline btn-secondary max-2xl:btn-sm" @click="addTimerLimit([0, 5, 0])">+5分</button>
<button class="btn btn-outline btn-secondary max-2xl:btn-sm" @click="addTimerLimit([0, 1, 0])">+1分</button>
<button class="btn btn-outline btn-secondary max-2xl:btn-sm" @click="addTimerLimit([0, 0, 10])">+10秒</button>
</div>

<div class="flex gap-2 justify-center">
<button class="btn btn-primary" @click="isTimerActiveState ? pauseTimer() : startTimer()"> {{ isTimerActiveState ?
<button class="btn btn-primary max-2xl:btn-sm" @click="isTimerActiveState ? pauseTimer() : startTimer()"> {{ isTimerActiveState ?
"一時停止" :
"スタート" }}</button>
<button class="btn btn-neutral" @click="resetTimer()">clear</button>
<button class="btn btn-neutral max-2xl:btn-sm" @click="resetTimer()">clear</button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion composables/states.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ dayjs.extend(duration);
dayjs.locale("ja");

// 画面の横幅
export const widthScreenSize = () => useState<number>('widthScreenSize', () => 1536);
export const widthScreenSize = () => useState<number>('widthScreenSize', () => 1280);

// 現在時刻
export const time = () => useState<Date>('time', () => dayjs().toDate());
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ body {
}
[data-theme="dash"] body {
font-family: 'BIZ UDPGothic', sans-serif;
font-family: 'Inter', 'BIZ UDPGothic', sans-serif;
}
</style>
1 change: 1 addition & 0 deletions nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default defineNuxtConfig({
googleFonts: {
families: {
"BIZ+UDPGothic": [400, 700],
"Inter": [100, 200, 300, 400, 500, 600, 700, 800, 900],
}
},
pwa: {
Expand Down

0 comments on commit df9af86

Please sign in to comment.