From 234b93d711203c4e63d651c0291b544529268c2e Mon Sep 17 00:00:00 2001 From: Kenryu Shibata Date: Sun, 24 Nov 2024 01:21:41 +0900 Subject: [PATCH] added contact page, fixed image size in kosen-x, improved Dropdown component --- components/DropDown.vue | 45 +++++++++++++++++++++++++++----------- components/Slide.vue | 1 + components/TheFooter.vue | 6 +++++ components/TheHeader.vue | 29 ++++++++++++++++++++---- pages/contact.vue | 41 ++++++++++++++++++++++++++++++++++ pages/index.vue | 15 ++++++++----- pages/projects/kosen-x.vue | 2 +- 7 files changed, 115 insertions(+), 24 deletions(-) create mode 100644 pages/contact.vue diff --git a/components/DropDown.vue b/components/DropDown.vue index a7675f5..d96c609 100644 --- a/components/DropDown.vue +++ b/components/DropDown.vue @@ -59,8 +59,8 @@ const handleFocusOutEvent = () => { > {{ property.label }} - -
+
+
  • {
- +
@@ -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; +} diff --git a/components/Slide.vue b/components/Slide.vue index 152e91d..20fc6e2 100644 --- a/components/Slide.vue +++ b/components/Slide.vue @@ -328,6 +328,7 @@ ul { scale: 90%; &:hover { cursor: pointer; + scale: 1.01; } & svg { position: absolute; diff --git a/components/TheFooter.vue b/components/TheFooter.vue index 19d0670..7a8072d 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -52,6 +52,12 @@ const showThePast = (event: Event) => {
  • News
    • +
  • + + Contact + {{ SiteInfo.clubNameAbbreviation }} + +
  • diff --git a/components/TheHeader.vue b/components/TheHeader.vue index 0dd762d..e48e18a 100644 --- a/components/TheHeader.vue +++ b/components/TheHeader.vue @@ -20,6 +20,15 @@ const mediaDropDownEntries: Array = [ { text: "Gallery", link: "/about/gallery" }, ]; +const informationDropDownEntries: Array = [ + { text: `About ${SiteInfo.clubNameAbbreviation}`, link: "/about/sera" }, + { + text: "中学生・新入生向け", + link: "/about/for-middle-schoolers-and-new-comers", + }, + { text: "Contact", link: "/contact" }, +]; + const hamburgerMenuEntries: Array = [ { text: "Home", link: "/" }, { text: "News", link: "/news" }, @@ -35,6 +44,7 @@ const hamburgerMenuEntries: Array = [ text: "中学生・新入生向け", link: "/about/for-middle-schoolers-and-new-comers", }, + { text: "Contact SERA", link: "/contact" }, ]; @@ -47,7 +57,7 @@ const hamburgerMenuEntries: Array = [ :mode="DropDownMode.onClick" :alignment="DropDownAlignment.Left" :entries="exploreDropDownEntries" - class="left-dropdown" + class="explore-dropdown" />
    + * { + 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; } } diff --git a/pages/contact.vue b/pages/contact.vue new file mode 100644 index 0000000..adb9c3c --- /dev/null +++ b/pages/contact.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/pages/index.vue b/pages/index.vue index 0c816d8..6eeaa6c 100644 --- 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 = [ { 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; diff --git a/pages/projects/kosen-x.vue b/pages/projects/kosen-x.vue index 10d82ad..f6a4cb4 100644 --- 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); }