added contact page, fixed image size in kosen-x, improved Dropdown component

2024-11-24 01:21:41 +09:00
parent cf29f5b482
commit 234b93d711
7 changed files with 115 additions and 24 deletions
--- a/components/DropDown.vue
+++ b/components/DropDown.vue
@@ -59,8 +59,8 @@ const handleFocusOutEvent = () => {
        >
            {{ property.label }}
        </button>
-        <Transition name="dropdown-fade">
-            <div class="dropdown-item-list" v-if="isOpen">
+        <div class="dropdown-item-list-wrapper">
+            <div class="dropdown-item-list" :class="{ 'show-list': isOpen }">
                <ul>
                    <li
                        v-for="entry in property.entries"
@@ -70,7 +70,7 @@ const handleFocusOutEvent = () => {
                    </li>
                </ul>
            </div>
-        </Transition>
+        </div>
    </div>
 </template>

@@ -86,25 +86,27 @@ const handleFocusOutEvent = () => {
 }

 .dropdown-menu {
-    display: inline-block;
-    width: fit-content;
-    position: relative;
+    display: inline-flex;
+    flex-direction: column;
 }

 .dropdown-label {
    background: none;
-    width: fit-content;
+    width: 100%;
    padding: 1rem 2rem;
-    border: transparent solid 3px;
+    border-top: currentColor solid 3px;
+    border-inline: transparent solid 3px;
+    border-bottom: transparent solid 3px;
    font-size: 1em;
    font-weight: bold;
    color: var(--neptune1);
+    transition: 0.2s linear;
 }

 .dropdown-label:hover {
    cursor: pointer;
    color: var(--andromeda);
-    border-top: currentColor solid 3px;
+    border: currentColor solid 3px;
    transition: 0.2s linear;
 }

@@ -123,24 +125,35 @@ const handleFocusOutEvent = () => {
    }
 }

+.dropdown-item-list-wrapper {
+    height: 0;
+}
+
 .dropdown-item-list {
    display: block;
    background: var(--neptune1);
    color: var(--starlight);
    font-weight: bold;
-    position: absolute;
-    top: auto;
+    position: relative;
    z-index: 100;
-    min-width: 100%;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.2s ease;
    width: fit-content;
+    min-width: 9rem;
    text-wrap: nowrap;
+    line-height: 2.125rem;
    & ul {
        list-style: none;
        padding: 0 0.25rem;
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        padding-inline: 0.5rem;
    }
    & ul li {
        margin: 0.5rem 0;
-        transition: 0.2s linear;
    }
    & ul li:first-child {
        margin-top: 0;
@@ -160,4 +173,10 @@ const handleFocusOutEvent = () => {
        text-decoration-thickness: 2px;
    }
 }
+
+.show-list {
+    visibility: visible;
+    opacity: 1;
+    transition: all 0.2s ease;
+}
 </style>
--- a/components/Slide.vue
+++ b/components/Slide.vue
@@ -328,6 +328,7 @@ ul {
    scale: 90%;
    &:hover {
        cursor: pointer;
+        scale: 1.01;
    }
    & svg {
        position: absolute;
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -52,6 +52,12 @@ const showThePast = (event: Event) => {
                                <li>
                                    <NuxtLink to="/news"> News </NuxtLink>
                                </li>
+                                <li>
+                                    <NuxtLink to="/contact">
+                                        Contact
+                                        {{ SiteInfo.clubNameAbbreviation }}
+                                    </NuxtLink>
+                                </li>
                            </ul>
                        </li>
                        <li>
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -20,6 +20,15 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
    { text: "Gallery", link: "/about/gallery" },
 ];

+const informationDropDownEntries: Array<DropDownEntry> = [
+    { text: `About ${SiteInfo.clubNameAbbreviation}`, link: "/about/sera" },
+    {
+        text: "中学生・新入生向け",
+        link: "/about/for-middle-schoolers-and-new-comers",
+    },
+    { text: "Contact", link: "/contact" },
+];
+
 const hamburgerMenuEntries: Array<DropDownEntry> = [
    { text: "Home", link: "/" },
    { text: "News", link: "/news" },
@@ -35,6 +44,7 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
        text: "中学生・新入生向け",
        link: "/about/for-middle-schoolers-and-new-comers",
    },
+    { text: "Contact SERA", link: "/contact" },
 ];
 </script>

@@ -47,7 +57,7 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Left"
                    :entries="exploreDropDownEntries"
-                    class="left-dropdown"
+                    class="explore-dropdown"
                />
            </div>
            <div id="logo-link">
@@ -56,12 +66,19 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
                </NuxtLink>
            </div>
            <div id="header-right">
+                <DropDown
+                    label="Info"
+                    :mode="DropDownMode.onClick"
+                    :alignment="DropDownAlignment.Right"
+                    :entries="informationDropDownEntries"
+                    class="info-dropdown"
+                />
                <DropDown
                    label="Media"
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Right"
                    :entries="mediaDropDownEntries"
-                    class="right-dropdown"
+                    class="media-dropdown"
                />
                <HamburgerMenu
                    :entries="hamburgerMenuEntries"
@@ -97,6 +114,9 @@ header {
 #header-left,
 #header-right {
    display: flex;
+    & > * {
+        margin-inline: 0.25rem;
+    }
 }

 #header-left {
@@ -140,8 +160,9 @@ header {
        padding-inline: 1rem;
        width: calc(100% - 2rem);
    }
-    .left-dropdown,
-    .right-dropdown {
+    .explore-dropdown,
+    .info-dropdown,
+    .media-dropdown {
        display: none;
    }
 }
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import SiteInfo from "~/assets/siteinfo.json";
+const WebsiteMetaData = generateSeoMeta(
+    "Contact SERA",
+    `${SiteInfo.clubNameAbbreviation}へのお問い合わせ`,
+    "/sera-logo-text.svg"
+);
+
+useSeoMeta(WebsiteMetaData);
+</script>
+
+<template>
+    <PageTop text="Contact" image-path="/images/page-top.jpg" />
+    <PankuzuList
+        :currentPageName="`Contact ${SiteInfo.clubNameAbbreviation}`"
+    />
+    <main>
+        <section>
+            <h1>{{ SiteInfo.clubNameAbbreviation }}へのお問い合わせ</h1>
+        </section>
+
+        <section>
+            <iframe
+                src="https://docs.google.com/forms/d/e/1FAIpQLSd2a8WMfu4v5potmKbwIPJ7fKfL2xpVhaTN6ys2J1A-dRU3sw/viewform?embedded=true"
+                width="100%"
+                height="950"
+                frameborder="0"
+                marginheight="0"
+                marginwidth="0"
+                >読み込んでいます…</iframe
+            >
+        </section>
+    </main>
+</template>
+
+<style scoped>
+main {
+    width: clamp(300px, 70%, 36rem);
+    margin: auto;
+}
+</style>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,7 @@
 import { marked } from "marked";
 import { EntryType, type NewsEntry } from "~/utils/types/news";
 import type { SlideEntry } from "~/utils/types/slide";
+import SiteInfo from "~/assets/siteinfo.json";

 const { data } = await useFetch("/api/getNewsList");

@@ -31,7 +32,7 @@ const welcomeSlide: Array<SlideEntry> = [
    {
        imagePath: "/images/welcome.jpg",
        title: "ようこそ！",
-        content: "岐阜高専宇宙工学研究会【SERA】のホームページです。",
+        content: `岐阜高専宇宙工学研究会【${SiteInfo.clubNameAbbreviation}】のホームページです。`,
        link: undefined,
    },
 ];
@@ -213,19 +214,20 @@ main:last-child {
 #quick-links {
    --quick-link-margin: 1rem;
    display: grid;
-    width: calc(100vw - 40 * var(--quick-link-margin));
-    height: calc(100vw / 3 * 1 / 3);
+    width: calc(100vw - 2 * var(--quick-link-margin));
+    height: calc(100vw / 9);
+    min-height: 10rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
-    margin: var(--quick-link-margin) calc(20 * var(--quick-link-margin));
+    margin: var(--quick-link-margin);
    align-items: center;
 }

 .quick-link-entry {
    position: relative;
    width: 100%;
-    height: auto;
-    aspect-ratio: 3/1;
+    height: 100%;
+    min-height: 10rem;
    background-position: center;
    background-size: cover;
    background-color: #414141cb;
@@ -334,6 +336,7 @@ main:last-child {
    max-width: 100%;
    overflow-x: hidden;
    grid-area: twitter;
+    margin-top: 1rem;
    & > .twitter-timeline {
        display: unset !important;
        width: unset !important;
--- a/pages/projects/kosen-x.vue
+++ b/pages/projects/kosen-x.vue
@@ -83,6 +83,6 @@ section:last-of-type {
 }

 img {
-    width: 60rem;
+    width: clamp(300px, 40vw, 60rem);
 }
 </style>