commit 2948a5bcd54f7c4da2158962de71582d670764b1
parent 7d8089dcdba3e70d6342099b7d54c8b4c396e569
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date: Sat, 15 Mar 2025 13:55:22 +0900
Merge pull request #6 from Sunny-JP/sub-2
update title-bar style
Diffstat:
6 files changed, 149 insertions(+), 86 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,27 +1,49 @@
<script setup lang="ts">
- let MenuButton: Boolean = true;
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const MenuButton = ref(false);
+
+const closeMenu = (event: Event) => {
+ const target = event.target as HTMLElement;
+ if (!target.closest(".menu") && !target.closest(".hamburger_btn")) {
+ MenuButton.value = false;
+ }
+};
+
+onMounted(() => {
+ window.addEventListener("click", closeMenu);
+});
+
+onBeforeUnmount(() => {
+ window.removeEventListener("click", closeMenu);
+});
</script>
<template>
<header>
<nav>
- <h2>GS Player</h2>
- <div class="hamburger_btn" v-on:click="MenuButton=!MenuButton">
- <span class="line line_01" v-bind:class="{'btn_line01':MenuButton}"></span>
- <span class="line line_02" v-bind:class="{'btn_line02':MenuButton}"></span>
- <span class="line line_03" v-bind:class="{'btn_line03':MenuButton}"></span>
+ <div class="title_bar">
+ <p>GS Player</p>
+ </div>
+ <div class="hamburger_btn" @click.stop="MenuButton = !MenuButton">
+ <span class="line line_01" :class="{ 'btn_line01': MenuButton }"></span>
+ <span class="line line_02" :class="{ 'btn_line02': MenuButton }"></span>
+ <span class="line line_03" :class="{ 'btn_line03': MenuButton }"></span>
+ </div>
+ <div class="menu" :class="{ open: MenuButton }">
+ <ul>
+ <!-- 将来的には多言語対応する．中，韓ではそれぞれNoto sans C，Kを用いる -->
+ <li><router-link to="/" @click="MenuButton = false">Top</router-link></li>
+ <li><router-link to="/" @click="MenuButton = false">My List</router-link></li>
+ <hr>
+ <li><router-link to="/about" @click="MenuButton = false">About</router-link></li>
+ <li><router-link to="/terms" @click="MenuButton = false">利用規約</router-link></li>
+ <li><router-link to="/policy" @click="MenuButton = false">プライバシーポリシー</router-link></li>
+ <li><router-link to="/enquiries" @click="MenuButton = false">お問い合わせ</router-link></li>
+ <li><router-link to="/info" @click="MenuButton = false">運営者情報</router-link></li>
+ </ul>
</div>
- <transition name="menu">
- <div class="menu" v-show="MenuButton">
- <ul>
- <li><router-link to="/">Album List</router-link></li>
- <li><router-link to="/about">about</router-link></li>
- <li><router-link to="/terms">利用規約</router-link></li>
- <li><router-link to="/enquiries">お問い合わせ</router-link></li>
- </ul>
- </div>
- </transition>
</nav>
</header>
- <router-view/>
-</template>-
\ No newline at end of file
+ <router-view />
+</template>
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -1,3 +1,3 @@
<template>
- <h1>About</h1>
+ <h1>About</h1>
</template>
\ No newline at end of file
diff --git a/src/components/Info.vue b/src/components/Info.vue
@@ -0,0 +1,3 @@
+<template>
+ <h1>運営者情報</h1>
+</template>+
\ No newline at end of file
diff --git a/src/components/Policy.vue b/src/components/Policy.vue
@@ -0,0 +1,3 @@
+<template>
+ <h1>プライバシーポリシー</h1>
+</template>+
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
@@ -1,21 +1,25 @@
-import {createRouter, createWebHistory} from 'vue-router';
-import TopView from "./components/AlbumList.vue";
+import { createRouter, createWebHistory } from 'vue-router';
+import Top from "./components/AlbumList.vue";
import About from "./components/About.vue";
-import Terms from './components/Terms.vue';
import Enquiries from './components/Enquiries.vue';
+import Info from './components/Info.vue';
import Player from './components/Player.vue';
+import Policy from './components/Policy.vue';
+import Terms from './components/Terms.vue';
const routes = [
- {path: '/', name: 'top', component: TopView},
- {path: '/about', name: 'about', component: About},
- {path: '/terms', name: 'terms', component: Terms},
- {path: '/enquiries', name: 'enquiries', component: Enquiries},
- {path: '/player', name: 'player', component: Player},
+ { path: '/', name: 'top', component: Top },
+ { path: '/about', name: 'about', component: About },
+ { path: '/enquiries', name: 'enquiries', component: Enquiries },
+ { path: '/info', name: 'info', component: Info },
+ { path: '/player', name: 'player', component: Player },
+ { path: '/policy', name: 'policy', component: Policy },
+ { path: '/terms', name: 'terms', component: Terms },
]
const router = createRouter({
- history: createWebHistory(), // HTML5 History モード
- routes,
+ history: createWebHistory(), // HTML5 History モード
+ routes,
})
export default router;
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
@@ -1,12 +1,13 @@
@import './reset-style.css';
-@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Poppins&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0px;
padding: 0px;
color: #ffffff;
- font-family: "Poppins", "Kosugi", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
+ font-family: "Poppins", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-size: 14px;
+ font-weight: 400;
background: #000000;
-webkit-text-size-adjust: none;
}
@@ -15,36 +16,33 @@ body {
display: flex;
flex-direction: column;
align-items: center;
- padding-bottom: 60px;
+ padding: 15px;
}
-iframe {
- margin: 10px;
- width: 80%;
- height: 60%;
- max-width: 500px;
- aspect-ratio: 1/1;
-}
-
-.title {
- font-size: 30px;
+/* title bar */
+.title_bar {
+ padding: 15px;
+ width: calc(100vw - 30px);
+ height: 25px;
+ background-color: #1f1f1f;
+ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
}
-.artist {
- font-size: 16px;
+.title_bar p {
+ margin-top: 1px;
+ margin-left: 5px;
+ font-size: 20px;
+ line-height: 1;
}
-.nowtime,
-.endtime {
- font-size: 13px;
-}
-/*ボタン*/
+/* hamburger button */
.hamburger_btn {
- position: fixed; /*常に最上部に表示したいので固定*/
+ position: fixed;
top: 0;
right: 0;
- width: 70px;
- height: 72px;
+ width: 80px;
+ height: 55px;
cursor: pointer;
z-index: 50;
}
@@ -52,49 +50,56 @@ iframe {
.hamburger_btn .line {
position: absolute;
top: 0;
- left: 20px;
- width: 32px;
+ right: 25px;
+ width: 28px;
height: 2px;
- background: #333333;
+ background: #999999;
text-align: center;
+ transition: 0.4s ease;
}
.hamburger_btn .line_01 {
top: 16px;
- transition: 0.4s ease;
}
+
.hamburger_btn .line_02 {
top: 26px;
- transition: 0.4s ease;
}
+
.hamburger_btn .line_03 {
top: 36px;
- transition: 0.4s ease;
}
-
+/* hamburger button transform -> x */
.btn_line01 {
- transform: translateY(10px) rotate(-45deg);
- transition: 0.4s ease;
+ transform: translateY(10px) rotate(-45deg)
}
+
.btn_line02 {
- transition: 0.4s ease;
opacity: 0;
}
+
.btn_line03 {
transform: translateY(-10px) rotate(45deg);
- transition: 0.4s ease;
}
-/*サイドバー*/
-.menu-enter-active, .menu-leave-active {
- transition: opacity 0.4s;
-}
-.menu-enter, .menu-leave-to {
- opacity: 0;
+/* side menu */
+.menu {
+ background-color: #1f1f1f;
+ z-index: 30;
+ padding: 50px 5px 5px 5px;
+ position: fixed;
+ width: 10rem;
+ height: 100vh;
+ top: 0;
+ right: 0;
+ font-weight: 500;
+ transform: translateX(100%);
+ transition: transform 0.4s ease;
}
-.menu-leave, .menu-enter-to{
- opacity: 1;
+
+.menu.open {
+ transform: translateX(0);
}
.menu li {
@@ -102,23 +107,48 @@ iframe {
line-height: 1;
padding: 1rem;
}
-.menu {
- background-color: rgba(197, 197, 197, 0.671);
- z-index: 30;
- padding: 2rem 1rem;
- position: fixed;
- width: 20rem;
- height: 80rem;
- top: 0;
- right: 0;
-}
+
.menu a {
- color: rgb(66, 66, 66);
+ color: #999999;
text-decoration: none;
- font-size: 1.2rem;
- padding: 0 2rem;
+ font-size: 1rem;
+ transition: 0.4s ease;
+}
+
+.menu a:hover {
+ color: #dddddd;
}
-.menu ul{
+
+.menu ul {
margin: 1rem;
padding: 0;
+}
+
+.menu hr {
+ border-color: #999999;
+ border-width: 1.5px;
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+/* player */
+iframe {
+ margin: 10px;
+ width: 80%;
+ height: 60%;
+ max-width: 500px;
+ aspect-ratio: 1/1;
+}
+
+.title {
+ font-size: 30px;
+}
+
+.artist {
+ font-size: 16px;
+}
+
+.nowtime,
+.endtime {
+ font-size: 13px;
}
\ No newline at end of file
