Skip to content

Commit fe70555

Browse files
keillerakeillera
authored
Merge pull request #1104 from AlisProject/upd_optimize
Add registration footer.
2 parents ddf5b92 + 50f6dfc commit fe70555

File tree

5 files changed

+305
-39
lines changed

5 files changed

+305
-39
lines changed

‎app/assets/images/pc/common/logo_white.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎app/components/organisms/ArticleRegistration.vue‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,6 @@
1919
import { mapActions } from 'vuex'
2020
2121
export default {
22-
props: {
23-
tags: {
24-
type: Array,
25-
required: false,
26-
default: []
27-
},
28-
topic: {
29-
type: String,
30-
required: false
31-
}
32-
},
33-
mounted() {
34-
// google optimize
35-
window.dataLayer.push({
36-
event: 'optimize.activate',
37-
tags: this.tags,
38-
topic: this.topic
39-
})
40-
},
4122
methods: {
4223
showSignUpModal() {
4324
this.setSignUpModal({ showSignUpModal: true })

‎app/components/organisms/ArticleRegistrationFooter.vue‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<template>
2+
<div class="area-article-registration-footer" :class="{ 'is-show': isShow }">
3+
<div class="registration-footer">
4+
<img class="area-logo" src="~assets/images/pc/common/logo_white.svg" alt="logo">
5+
<div class="area-message">
6+
<div class="title">
7+
アカウント登録をおすすめします
8+
</div>
9+
<div class="detail">
10+
いいね、記事投稿でトークンを獲得できます
11+
</div>
12+
</div>
13+
<div class="area-button">
14+
<app-button class="registration-footer-close" @click="closeRegistrationFooter">
15+
今はしない
16+
</app-button>
17+
<app-button class="registration-footer-sign-up" @click="showSignUpModal">
18+
アカウント作成(無料)
19+
</app-button>
20+
</div>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
import { mapActions } from 'vuex'
27+
import AppButton from '../atoms/AppButton'
28+
29+
export default {
30+
components: {
31+
AppButton
32+
},
33+
data() {
34+
return {
35+
isShow: false
36+
}
37+
},
38+
props: {
39+
tags: {
40+
type: Array,
41+
required: false,
42+
default: []
43+
},
44+
topic: {
45+
type: String,
46+
required: false
47+
}
48+
},
49+
mounted() {
50+
this.isShow = this.isShowRegistrationFooter()
51+
// google optimize
52+
window.dataLayer.push({
53+
event: 'optimize.activate',
54+
tags: this.tags,
55+
topic: this.topic
56+
})
57+
},
58+
methods: {
59+
closeRegistrationFooter() {
60+
// 一度閉じた場合は 24h 表示しない
61+
this.isShow = false
62+
const now = new Date()
63+
const item = {
64+
expire: now.getTime() + 86400000
65+
}
66+
localStorage.setItem('alis.to.article.closeRegistrationFooter', JSON.stringify(item))
67+
},
68+
isShowRegistrationFooter() {
69+
// SSR で実行された場合
70+
if (typeof localStorage === 'undefined') {
71+
return false
72+
}
73+
// localStorage に値が設定されていない場合
74+
const item = localStorage.getItem('alis.to.article.closeRegistrationFooter')
75+
if (!item) {
76+
return true
77+
}
78+
// 設定された時刻内かを確認
79+
const now = new Date()
80+
if (now.getTime() < JSON.parse(item).expire) {
81+
return false
82+
} else {
83+
localStorage.removeItem('alis.to.article.closeRegistrationFooter')
84+
return true
85+
}
86+
},
87+
showSignUpModal() {
88+
this.setSignUpModal({ showSignUpModal: true })
89+
},
90+
...mapActions('user', ['setSignUpModal'])
91+
}
92+
}
93+
</script>
94+
95+
<style lang="scss" scoped>
96+
.area-article-registration-footer {
97+
background-color: #0086cc;
98+
grid-area: article-registration-footer;
99+
max-width: 100%;
100+
width: 100%;
101+
position: fixed;
102+
bottom: 0;
103+
transition: 0.5s;
104+
transform: translateY(100%);
105+
z-index: 3;
106+
display: none;
107+
&.is-show {
108+
display: block;
109+
}
110+
.registration-footer {
111+
display: grid;
112+
grid-template-rows: auto;
113+
grid-template-columns: 350px 290px;
114+
/* prettier-ignore */
115+
grid-template-areas:
116+
'message button';
117+
width: 640px;
118+
margin: 12px auto 12px auto;
119+
align-items: center;
120+
justify-content: center;
121+
.area-logo {
122+
display: none;
123+
width: 40px;
124+
}
125+
.area-message {
126+
grid-area: message;
127+
color: #ffffff;
128+
.title {
129+
font-size: 18px;
130+
font-weight: bold;
131+
}
132+
.detail {
133+
margin-top: 5px;
134+
font-size: 14px;
135+
}
136+
}
137+
.area-button {
138+
grid-area: button;
139+
margin-left: auto;
140+
.registration-footer-close {
141+
display: inline-block;
142+
font-size: 14px;
143+
width: 105px;
144+
outline: solid 1px;
145+
height: 34px;
146+
&:hover,
147+
&:focus {
148+
background: #0086cc;
149+
}
150+
}
151+
.registration-footer-sign-up {
152+
display: inline-block;
153+
box-shadow: none;
154+
font-size: 14px;
155+
font-weight: bold;
156+
height: 34px;
157+
line-height: 34px;
158+
width: 160px;
159+
background-color: #ffffff;
160+
color: #000000;
161+
margin-left: 10px;
162+
&:hover,
163+
&:focus {
164+
background: #ffffff;
165+
}
166+
}
167+
}
168+
}
169+
}
170+
171+
@media screen and (max-width: 640px) {
172+
.area-article-registration-footer {
173+
.registration-footer {
174+
grid-template-rows: auto;
175+
grid-template-columns: 100%;
176+
/* prettier-ignore */
177+
grid-template-areas:
178+
'logo '
179+
'message'
180+
'button ';
181+
margin: 15px 20px;
182+
align-items: left;
183+
justify-content: left;
184+
.area-logo {
185+
display: block;
186+
width: 50px;
187+
}
188+
.area-message {
189+
grid-area: message;
190+
color: #ffffff;
191+
margin-top: 15px;
192+
.title {
193+
font-size: 16px;
194+
font-weight: bold;
195+
}
196+
.detail {
197+
margin-top: 5px;
198+
font-size: 14px;
199+
}
200+
}
201+
.area-button {
202+
margin-left: 0;
203+
margin-top: 15px;
204+
height: 40px;
205+
.registration-footer-close {
206+
position: absolute;
207+
left: 20px;
208+
}
209+
.registration-footer-sign-up {
210+
position: absolute;
211+
right: 20px;
212+
}
213+
}
214+
}
215+
}
216+
}
217+
</style>

‎app/components/pages/ArticleDetailV1.vue‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,7 @@
2828
:is-liked-article="isLikedArticle"
2929
/>
3030
<article-sub-infos :published-at="publishedAt" :token-amount="article.alisToken" />
31-
<article-registration
32-
v-if="isShowRegistration && !loggedIn"
33-
:tags="article.tags"
34-
:topic="article.topic"
35-
/>
31+
<article-registration v-if="isShowRegistration && !loggedIn" />
3632
<author-info
3733
:user="article.userInfo"
3834
class="area-authr-info"
@@ -49,7 +45,14 @@
4945
v-if="topicRecommendedArticles.articles.length > 0"
5046
:articles="topicRecommendedArticles.articles"
5147
/>
52-
<app-footer />
48+
<app-footer ref="appFooter" />
49+
<article-registration-footer
50+
v-if="isShowRegistration && !loggedIn"
51+
ref="registrationFooter"
52+
:tags="article.tags"
53+
:topic="article.topic"
54+
class="area-register-footer is-scroll"
55+
/>
5356
</div>
5457
</template>
5558

@@ -65,6 +68,7 @@ import AuthorHeaderInfo from '../atoms/AuthorHeaderInfo'
6568
import UserArticlePopularCardList from '../organisms/UserArticlePopularCardList'
6669
import ArticleTags from '../molecules/ArticleTags'
6770
import ArticleRegistration from '../organisms/ArticleRegistration'
71+
import ArticleRegistrationFooter from '../organisms/ArticleRegistrationFooter'
6872
import ArticleCommentForm from '../molecules/ArticleCommentForm'
6973
import ArticleComments from '../organisms/ArticleComments'
7074
import ArticleTopicRecommendedCardList from '../organisms/ArticleTopicRecommendedCardList'
@@ -83,6 +87,7 @@ export default {
8387
UserArticlePopularCardList,
8488
ArticleTags,
8589
ArticleRegistration,
90+
ArticleRegistrationFooter,
8691
ArticleCommentForm,
8792
ArticleComments,
8893
ArticleTopicRecommendedCardList,
@@ -110,7 +115,8 @@ export default {
110115
return {
111116
isShowRegistration: false,
112117
lastScrollY: 0,
113-
scrollCount: 0
118+
scrollCount: 0,
119+
detailHeaderEl: null
114120
}
115121
},
116122
mounted() {
@@ -123,6 +129,9 @@ export default {
123129
window.addEventListener('scroll', this.handleScroll)
124130
// ちらつきを抑えるため mouted 後に表示
125131
this.isShowRegistration = true
132+
133+
// scroll イベント発行時に利用するエレメントを定義
134+
this.detailHeaderEl = this.$refs.detailHeader.$el
126135
},
127136
beforeDestroy() {
128137
this.resetArticleCommentsLastEvaluatedKey()
@@ -142,14 +151,26 @@ export default {
142151
},
143152
methods: {
144153
handleScroll(event) {
145-
const headerElement = this.$refs.detailHeader.$el
154+
// appHeader
146155
if (window.scrollY >= this.lastScrollY && window.scrollY > 100 && this.scrollCount >= 10) {
147-
headerElement.classList.add('is-scroll')
156+
this.detailHeaderEl.classList.add('is-scroll')
148157
} else {
149-
headerElement.classList.remove('is-scroll')
158+
this.detailHeaderEl.classList.remove('is-scroll')
150159
}
151160
if (this.scrollCount < 10) this.scrollCount++
152161
this.lastScrollY = window.scrollY
162+
163+
// registrationFooter
164+
if (!this.loggedIn) {
165+
const registrationFooterEl = this.$refs.registrationFooter.$el
166+
const registrationFooterRect = registrationFooterEl.getBoundingClientRect()
167+
const appFooterRect = this.$refs.appFooter.$el.getBoundingClientRect()
168+
if (registrationFooterRect.top < appFooterRect.top - 80) {
169+
registrationFooterEl.classList.add('is-scroll')
170+
} else {
171+
registrationFooterEl.classList.remove('is-scroll')
172+
}
173+
}
153174
},
154175
...mapActions('article', ['resetArticleCommentsLastEvaluatedKey', 'postPv'])
155176
},
@@ -270,6 +291,12 @@ header.area-app-header {
270291
grid-area: content;
271292
}
272293
294+
.area-register-footer {
295+
&.is-scroll {
296+
transform: none;
297+
}
298+
}
299+
273300
.sp-footer {
274301
display: none;
275302
}

0 commit comments

Comments
 (0)