t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[ADD] add nav

Browse Source
This commit is contained in:
mysper 2021-01-23 07:38:07 +08:00
parent 11f6a723bd
commit 5141a28a50
6 changed files with 92 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/scss/news/agenda.scss
View File

@ -360,6 +360,7 @@ $max-width-small-3: 360px;
//cfp-sub-information <subInformation>
.info {
position: relative;
width: 100%;
font-family: $fontFamily;
float: left;

64
src/assets/scss/news/header.scss
View File

@ -1,5 +1,7 @@
@import '../hyperpoint';
@import '../color';
$fontFamily: Noto Sans TC, monospace;
// desktop mode
#news-header {
@ -353,3 +355,65 @@
}
}
}
.news-nav {
position: fixed;
text-align: end;
top: 25px;
right: 50px;
display: flex;
flex-direction: column;
border-radius: 15px;
padding: 10px;
box-shadow: 3px 3px 15px $mid-blue;
background: white;
z-index: 5;
&-item {
margin: 5px 8px;
color: $mid-blue;
font-family: $fontFamily;
cursor: point;
}
&-button {
color: $mid-blue;
border: none;
background: transparent;
font-size: 20px;
cursor: point;
&:focus {
outline: none;
}
}
}
.nav-control-button {
color: $mid-blue;
position: fixed;
z-index: 5;
top: 25px;
right: 50px;
border-radius: 5px;
border: none;
font-size: 24px;
position: flex;
flex-direction: column;
width: 55px;
background-color: white;
box-shadow: -2px 0 15px $mid-blue;
padding: 0 15px;
cursor: pointer;
p {
text-align: end;
}
}
@media screen and (max-width: 1024px) {
.nav-control-button {
top: 250px;
right: 0;
width: 35px;
font-size: 16px;
text-align: left;
padding: 0 10px;
}
}

1
src/assets/scss/news/schedule.scss
View File

@ -7,6 +7,7 @@
$fontFamily: 'Noto Sans CJK TC', monospace;
#news-schedule {
position: relative;
max-width: 80vw;
margin: 0 auto;

2
src/assets/scss/news/topic.scss
View File

@ -3,7 +3,7 @@
.topic {
padding: 30px 0;
position: relative;
display: grid;
grid-template-columns: 256px min-content 1fr;

10
src/components/news/Agenda.vue
View File

@ -2,7 +2,7 @@
<div class="info">
<div class="info-container">
<!-- 議程種類方塊 -->
<section class="info-section">
<section class="info-section" id="info-section">
<h1>議程種類</h1>
<article class="info-section__content">
<div class="info-kind">
@ -35,7 +35,7 @@
</section>
<!-- 議程種類方塊 -->
<!-- 流程 -->
<section class="info-section">
<section class="info-section" id="process">
<h1>流程</h1>
<article class="info-section__content">
<p>
@ -47,7 +47,7 @@
</section>
<!-- 流程 -->
<!-- 投稿方式 -->
<section class="info-section">
<section class="info-section" id="methods">
<h1>投稿方式</h1>
<article class="info-section__content">
<p>
@ -100,7 +100,7 @@
</section>
<!-- 投稿方式 -->
<!-- 審稿方式 -->
<section class="info-section">
<section class="info-section" id="review">
<h1>審稿方式</h1>
<article class="info-section__content">
<p>
@ -115,7 +115,7 @@
<!-- 審稿方式 -->
<!-- 投稿注意事項 -->
</section>
<section class="info-section">
<section class="info-section" id="precautions">
<h1>投稿注意事項</h1>
<article class="info-section__content">
<p>

20
src/components/news/Header.vue
View File

@ -46,6 +46,24 @@
</div>
</div>
</div>
<nav v-if="navVisible">
<div class="news-nav">
<a class="news-nav-item" href="#schedule">重要時程</a>
<a class="news-nav-item" href="#example">投稿主題範例</a>
<a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
<a class="news-nav-item" href="#info-section">議程種類</a>
<a class="news-nav-item" href="#process">流程</a>
<a class="news-nav-item" href="#methods">投稿方式</a>
<a class="news-nav-item" href="#review">審稿方式</a>
<a class="news-nav-item" href="#precautions">投稿注意事項</a>
<a class="news-nav-item" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
<button class="news-nav-button" @click="(e)=>navVisible=!navVisible">&#9650;</button>
</div>
</nav>
<button v-if="!navVisible" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
<p>&#9650;</p>
<p>&#9660;</p>
</button>
</header>
</template>
@ -66,6 +84,7 @@ interface Countdown {
@Component
export default class CfpHeader extends Vue {
private timerId!: number;
private navVisible = false;
private countdown: Countdown = {
s: 0,
m: 0,
@ -112,6 +131,7 @@ export default class CfpHeader extends Vue {
private unregisterTimer () {
clearInterval(this.timerId);
}
}
</script>