Skip to content

Commit a7a88fe

Browse files
kaizumakikaizumaki
committed
動画検索のUIを修正
1 parent 4e69045 commit a7a88fe

File tree

1 file changed

+108
-62
lines changed

1 file changed

+108
-62
lines changed

‎src/components/EditLessonScreenInner3.vue‎

Lines changed: 108 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,61 +7,70 @@
77
placeholder="https://"
88
/>
99

10-
<editor-input-field-pickable
11-
v-model="videoSearchWord"
12-
:title="$t('components.editing_screen.labels.video_keyword')"
13-
:placeholders="$t('components.editing_screen.placeholder.video_keyword')"
14-
/>
15-
16-
<button class="Button" @click="handleVideoSearchWord">
17-
{{ $t('components.editing_screen.search_videos.search') }}
18-
</button>
19-
20-
<div v-if="videoSearchResult.length > 0" class="SearchResult">
21-
<h3>
22-
{{
23-
$t('components.editing_screen.search_videos.search_result', {
24-
source: 'NHK For School',
25-
})
26-
}}
27-
</h3>
28-
<ul>
29-
<li v-for="(v, i) in displayLists" :key="i" class="SearchResultItem">
30-
<component
31-
:is="v.videoUrl ? 'a' : 'span'"
32-
:href="v.videoUrl"
33-
:target="v.videoUrl ? '_blank' : null"
34-
class="SearchResultLink"
35-
>
36-
{{ v.videoTitle }}&emsp;{{ v.videoSubTitle }}
37-
</component>
38-
<p class="SearchResultDescription">{{ v.videoDescription }}</p>
39-
<span>{{ v.videoPlayTime }}</span>
40-
<br v-if="v.videoThumbnailUrl" />
41-
<img
42-
v-if="v.videoThumbnailUrl"
43-
:src="v.videoThumbnailUrl"
44-
:alt="v.videoTitle"
45-
width="240"
46-
/>
47-
<br v-if="v.videoUrl" />
48-
<button
49-
v-if="v.videoUrl"
50-
class="Button"
51-
@click="registerVideoUrl(v.videoUrl)"
52-
>
53-
{{
54-
$t('components.editing_screen.search_videos.add_to_video_urls')
55-
}}
56-
</button>
57-
</li>
58-
</ul>
59-
<v-pagination
60-
v-model="page"
61-
:length="length"
62-
:total-visible="5"
63-
@input="pageChange"
10+
<div class="VideoSearch">
11+
<editor-input-field-pickable
12+
v-model="videoSearchWord"
13+
:title="$t('components.editing_screen.labels.video_keyword')"
14+
:placeholder="$t('components.editing_screen.placeholder.video_keyword')"
15+
icon-name="mdi-magnify"
16+
:button-text="$t('components.editing_screen.search_videos.search')"
17+
@clickButton="handleVideoSearchWord"
6418
/>
19+
20+
<div v-if="videoSearchResult.length > 0" class="SearchResult">
21+
<h3 class="SearchResultTitle">
22+
{{
23+
$t('components.editing_screen.search_videos.search_result', {
24+
source: 'NHK For School',
25+
})
26+
}}
27+
</h3>
28+
<ul class="SearchResultList">
29+
<li v-for="(v, i) in displayLists" :key="i" class="SearchResultItem">
30+
<div class="SearchResultLinkOuter">
31+
<component
32+
:is="v.videoUrl ? 'a' : 'span'"
33+
:href="v.videoUrl"
34+
:target="v.videoUrl ? '_blank' : null"
35+
>
36+
{{ v.videoTitle }}&emsp;{{ v.videoSubTitle }}
37+
</component>
38+
<div>
39+
<span class="SearchResultPlayTime">{{ v.videoPlayTime }}</span>
40+
</div>
41+
</div>
42+
<p>{{ v.videoDescription }}</p>
43+
<div class="SearchResultImgOuter">
44+
<img
45+
v-if="v.videoThumbnailUrl"
46+
:src="v.videoThumbnailUrl"
47+
:alt="v.videoTitle"
48+
width="240"
49+
/>
50+
<v-btn
51+
v-if="v.videoUrl"
52+
class="SearchResultButton"
53+
color="#338dce"
54+
@click="registerVideoUrl(v.videoUrl)"
55+
>
56+
<v-icon color="white"> mdi-link </v-icon>
57+
{{
58+
$t(
59+
'components.editing_screen.search_videos.add_to_video_urls'
60+
)
61+
}}
62+
</v-btn>
63+
</div>
64+
</li>
65+
</ul>
66+
<v-pagination
67+
v-model="page"
68+
:length="length"
69+
:total-visible="5"
70+
color="#0071c2"
71+
@input="pageChange"
72+
/>
73+
</div>
6574
</div>
6675
</div>
6776
</template>
@@ -126,6 +135,15 @@ export default class EditLessonScreenInner3 extends Vue {
126135
this.input(this.tempFormData)
127136
}
128137
138+
@Watch('value', { deep: true })
139+
onChangeValueFormData() {
140+
if (this.value.videoUrl === '') {
141+
this.videoSearchWord = ''
142+
this.videoSearchResult = []
143+
}
144+
this.tempFormData = this.value
145+
}
146+
129147
private handleVideoSearchWord() {
130148
if (this.videoSearchWord) {
131149
this.page = 1
@@ -213,21 +231,49 @@ export default class EditLessonScreenInner3 extends Vue {
213231
</script>
214232

215233
<style lang="scss" scoped>
216-
.Button {
217-
color: $color-white;
218-
margin-bottom: 20px;
234+
.VideoSearch {
235+
background-color: $color-base-color-02;
236+
border-radius: 8px;
237+
padding: 16px;
238+
margin-bottom: 16px;
219239
}
220240
.SearchResult {
241+
border-top: 1px solid $color-white;
242+
}
243+
.SearchResultTitle {
221244
color: $color-white;
222-
margin-bottom: 20px;
245+
text-align: center;
246+
margin: 16px 0;
247+
}
248+
.SearchResultList {
249+
padding: 0;
223250
}
224251
.SearchResultItem {
252+
background-color: $color-white;
253+
padding: 18px;
225254
margin-bottom: 12px;
226255
}
227-
.SearchResultLink {
228-
color: $color-white;
256+
.SearchResultLinkOuter {
257+
display: flex;
258+
justify-content: space-between;
259+
margin-bottom: 12px;
229260
}
230-
.SearchResultDescription {
231-
margin: 0;
261+
.SearchResultPlayTime {
262+
display: inline-block;
263+
font-size: 12px;
264+
border: 2px solid $color-gray;
265+
border-radius: 3em;
266+
padding: 2px 10px;
267+
}
268+
.SearchResultImgOuter {
269+
position: relative;
270+
margin-bottom: 16px;
271+
}
272+
.SearchResultButton {
273+
position: absolute;
274+
right: -6px;
275+
bottom: -12px;
276+
color: $color-white;
277+
border-radius: 8px;
232278
}
233279
</style>

0 commit comments

Comments
 (0)