Skip to content

Commit 20891e3

Browse files
JioShunJioShun
authored
Merge pull request #113 from funswift/feature/#21/#73_投稿デザイン修正
add: 投稿デザイン修正_スプリント4
2 parents 3384eb1 + 81bfc80 commit 20891e3

File tree

11 files changed

+748
-385
lines changed

11 files changed

+748
-385
lines changed

‎front/HaCollect/src/assets/SNScolor_Instagram.png

3.3 KB
Loading

‎front/HaCollect/src/assets/SNScolor_Twitter.png

-9.29 KB
Loading

‎front/HaCollect/src/assets/button.png

-88 Bytes
Loading

‎front/HaCollect/src/assets/button_Cancel.png

1.65 KB
Loading

‎front/HaCollect/src/assets/imageButton_after.png

2.35 KB
Loading

‎front/HaCollect/src/assets/imageButton_before.png

2.01 KB
Loading

‎front/HaCollect/src/components/eatPage.vue

Lines changed: 146 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,52 @@
1010
<!-- ツイッターの投稿の表示 -->
1111
<template v-if="item.SNS_type == 'Twitter'">
1212
<div class="card_All">
13-
<img class="card_Head" src="../assets/SNScolor_Twitter.png" />
13+
<div class="card_Info">
14+
<a v-bind:href=item.link target="_blank" class="card_Link"
15+
rel="noopener noreferrer"><img src="../assets/TwitterIcon.png" /></a>
16+
<!-- リンク -->
17+
<p class="card_Date">{{ item.date3 }}</p>
18+
</div>
1419
<!-- 画像情報 -->
1520
<!-- 画像や動画があるかチェック -->
16-
<template v-if="item.media != null">
21+
<template v-if="item.media != null">
1722
<!-- urlの情報(item.media)をurlの変数に格納 url: { url0 {media_type: メディアの種類, media_url:メディアのURL}, url1 {media_type: メディアの種類, media_url:メディアのURL} .....}となっている -->
18-
<template v-for="(url, url_name) in item.media">
23+
<template v-for="(url, url_name) in item.media">
1924
<!-- urlのキー名(url0,url1)のうち一つを表示する。（最初はurl0を表示） -->
2025
<template v-if="url_name == 'url' + page[post_index]">
2126
<!-- 動画かどうかチェック -->
22-
<template v-if="url.media_type == 'video'">
27+
<template v-if="url.media_type == 'video'">
2328
<video class="card_Movie" v-bind:src="url.media_url" controls></video>
2429
</template>
2530
<!-- 画像だったら以下実行 -->
2631
<template v-else>
27-
<img class="card_Image" v-bind:src=url.media_url>
32+
<img class="card_Image" v-bind:src=url.media_url>
2833
</template>
2934
</template>
30-
</template>
35+
</template>
3136

3237
<!-- 画像スライダーのボタン(Twitter) -->
33-
<!-- 表示されている画像が1枚目以降の時、前へボタンを表示 -->
34-
<template v-if="page[post_index] > 0">
35-
<div class="left-btn" @click="prevPage(post_index)"><p>前へ</p></div>
36-
</template>
37-
<!-- 各投稿の最大画像枚数に達するまで、次へボタンを表示 -->
38-
<template v-if="page[post_index] < getObjLength(item.media) - 1">
39-
<div class="right-btn" @click="nextPage(post_index)"><p>次へ</p></div>
40-
</template>
38+
<div class="btn-box">
39+
<!-- 表示されている画像が1枚目以降の時、前へボタンを表示 -->
40+
<template v-if="page[post_index] > 0">
41+
<img class="left-btn" @click="prevPage(post_index)"
42+
src="../assets/imageButton_before.png" />
43+
</template>
44+
<!-- 各投稿の最大画像枚数に達するまで、次へボタンを表示 -->
45+
<template v-if="page[post_index] < getObjLength(item.media) - 1">
46+
<img class="right-btn" @click="nextPage(post_index)"
47+
src="../assets/imageButton_after.png" />
48+
</template>
49+
</div>
4150
</template>
4251

4352
<!-- テキスト情報 -->
4453
<div class="ac-box">
45-
<p>{{ item.date3 }}</p>
4654
<input :id="[post_index]" name="accordion-1" type="checkbox" />
4755
<p class="card_Text">{{ item.text }}</p> <!-- テキスト(最初の文のみプレビュー) -->
48-
<a v-bind:href=item.link target="_blank" class="card_Link" rel="noopener noreferrer"><img
49-
src="../assets/TwitterIcon.png" /></a>
50-
<!-- リンク -->
56+
<a v-bind:href=item.link target="_blank" class="card_LinkText"
57+
rel="noopener noreferrer">投稿元のサイトでこの投稿を見る</a>
58+
<!-- テキストでのリンク -->
5159
<label :for="[post_index]"></label>
5260
</div>
5361
</div>
@@ -56,15 +64,20 @@
5664
<!-- インスタグラムの投稿の表示 -->
5765
<template v-if="item.SNS_type == 'Instagram'">
5866
<div class="card_All">
59-
<img class="card_Head" src="../assets/SNScolor_Instagram.png" />
67+
<div class="card_Info">
68+
<a v-bind:href=item.link target="_blank" class="card_Link"
69+
rel="noopener noreferrer"><img src="../assets/InstagramIcon.png" /></a>
70+
<!-- リンク -->
71+
<p class="card_Date">{{ item.date3 }}</p>
72+
</div>
6073
<!-- 画像情報 -->
6174
<!-- 画像や動画があるかチェック -->
6275
<template v-if="item.media_type != null">
6376
<!-- その投稿が1枚の画像or動画のみだったら CAROUSEL_ALBUM：複数メディアが含まれている状態 -->
6477
<template v-if="item.media_type != 'CAROUSEL_ALBUM'">
6578
<!-- そのメディアが動画だったら -->
6679
<template v-if="item.media_type == 'VIDEO'">
67-
<video class="card_Movie" v-bind:src="item.media_url" controls></video>
80+
<video class="card_Movie" v-bind:src="item.media_url" controls></video>
6881
</template>
6982
<!-- そのメディアが画像だったら -->
7083
<template v-else>
@@ -90,25 +103,28 @@
90103
</template>
91104

92105
<!-- 画像スライダーのボタン(Instagram) -->
93-
<!-- 表示されている画像が1枚目以降の時、前へボタンを表示 -->
94-
<template v-if="page[post_index] > 0">
95-
<div class="left-btn" @click="prevPage(post_index)"><p>前へ</p></div>
96-
</template>
97-
<!-- 各投稿の最大画像枚数に達するまで、次へボタンを表示 -->
98-
<template v-if="page[post_index] < getObjLength(item.media) - 1">
99-
<div class="right-btn" @click="nextPage(post_index)"><p>次へ</p></div>
100-
</template>
101-
</template>
106+
<div class="btn-box">
107+
<!-- 表示されている画像が1枚目以降の時、前へボタンを表示 -->
108+
<template v-if="page[post_index] > 0">
109+
<img class="left-btn" @click="prevPage(post_index)"
110+
src="../assets/imageButton_before.png" />
111+
</template>
112+
<!-- 各投稿の最大画像枚数に達するまで、次へボタンを表示 -->
113+
<template v-if="page[post_index] < getObjLength(item.media) - 1">
114+
<img class="right-btn" @click="nextPage(post_index)"
115+
src="../assets/imageButton_after.png" />
116+
</template>
117+
</div>
118+
</template>
102119
</template>
103120

104121
<!-- テキスト情報 -->
105122
<div class="ac-box">
106-
<p>{{ item.date3 }}</p>
107123
<input :id="[post_index]" name="accordion-1" type="checkbox" />
108124
<p class="card_Text">{{ item.text }}</p> <!-- テキスト(最初の文のみプレビュー) -->
109-
<a v-bind:href=item.link target="_blank" class="card_Link" rel="noopener noreferrer"><img
110-
src="../assets/InstagramIcon.png" /></a>
111-
<!-- リンク -->
125+
<a v-bind:href=item.link target="_blank" class="card_LinkText"
126+
rel="noopener noreferrer">投稿元のサイトでこの投稿を見る</a>
127+
<!-- テキストでのリンク -->
112128
<label :for="[post_index]"></label>
113129
</div>
114130
</div>
@@ -119,19 +135,18 @@
119135
</div>
120136
</div>
121137

122-
<div>
138+
<div class="Hello2">
123139
<!-- 投稿表示限界数(fire_data.length)に達するまでmoreボタンを表示 -->
124140
<template v-if="max < fire_data.length">
125141
<!-- <p>{{max}}</p> -->
126-
<p v-on:click="displayMore">more</p>
142+
<p class="button_More" v-on:click="displayMore">more</p>
127143
</template>
128144
</div>
129145
</template>
130146

131147

132148

133149

134-
135150
<script>
136151
export default {
137152
name: "eatPage",
@@ -198,59 +213,99 @@ export default {
198213
position: relative;
199214
overflow: hidden;
200215
float: left;
201-
width: 375px;
202-
margin-bottom: 2px;
216+
width: 100%;
203217
height: auto;
204218
background: #ffffff;
205-
border-bottom: 1px solid #aaaaaa;
206-
/* border-radius: 10px; */
219+
border-bottom: 2px solid #aaaaaa;
207220
text-align: center;
208221
z-index: 0;
209222
}
210223
211-
.card_Head {
224+
/* .card_Head {
212225
width: 375px;
213226
height: 30px;
214227
margin-bottom: -4px;
215-
/* border-bottom: 2px solid #000000; */
228+
border-bottom: 2px solid #000000;
229+
} */
230+
231+
.card_Info {
232+
display: flex;
233+
}
234+
235+
.card_Link {
236+
display: block;
237+
width: 40px;
238+
height: 40px;
239+
margin: 20px;
240+
}
241+
242+
.card_Link img {
243+
width: 40px;
244+
height: 40px;
245+
}
246+
247+
.card_Date {
248+
margin: auto;
249+
font-size: 20px;
216250
}
217251
218252
.card_Image {
219-
width: 375px;
253+
max-width: 100%;
220254
height: auto;
221255
/* border-bottom: 1px solid #000; */
222256
/* margin-top: 20px; */
223257
}
224258
225259
.card_Movie {
226-
width: 375px;
260+
max-width: 100%;
227261
height: auto;
228262
/* border: 1px solid #000; */
229263
/* margin-top: 20px; */
230264
}
231265
266+
.btn-box {
267+
display: flex;
268+
}
269+
270+
.left-btn {
271+
width: 75px;
272+
height: 52px;
273+
display: block;
274+
text-decoration-line: none;
275+
margin-left: auto;
276+
margin-right: auto;
277+
}
278+
279+
.right-btn {
280+
width: 75px;
281+
height: 52px;
282+
display: block;
283+
text-decoration-line: none;
284+
margin-left: auto;
285+
margin-right: auto;
286+
}
287+
232288
.ac-box {
233289
width: auto;
234-
margin: 20px auto;
290+
margin: 10px auto;
235291
}
236292
237293
.ac-box input {
238294
display: none;
239295
}
240296
241297
.card_Text {
242-
width: 350px;
243-
/* 省略せずに表示するサイズを指定 */
298+
width: 80%; /* 省略せずに表示するサイズを指定 */
244299
height: auto;
245300
display: -webkit-box;
246301
overflow: hidden;
247-
-webkit-line-clamp: 1;
248-
/* 省略せずに表示する行数を指定 */
302+
-webkit-line-clamp: 1; /* 省略せずに表示する行数を指定 */
249303
-webkit-box-orient: vertical;
250304
margin: auto;
251-
/* border: 1px solid #000000; */
252-
/* background-color: #ffeeee; */
253-
/* border-radius: 10px; */
305+
}
306+
307+
.card_LinkText {
308+
display: none;
254309
}
255310
256311
.ac-box label {
@@ -274,42 +329,58 @@ export default {
274329
}
275330
276331
.ac-box input:checked~label {
277-
transform: rotateZ(180deg);
278-
margin-top: 25px;
279-
}
280-
281-
.card_Link {
282-
height: 0px;
283-
padding: 0px;
284-
float: right;
285-
overflow: hidden;
286-
opacity: 0;
287-
transition: 0.5s;
288-
}
289-
290-
.card_Link img {
291-
width: 50px;
292-
height: 50px;
332+
background-image: url("../assets/button_Cancel.png");
293333
}
294334
295335
.ac-box input:checked~.card_Text {
296336
display: block;
297337
/* displayをblockに変更することで表示制限を解除 */
298338
text-align: left;
339+
margin-bottom: 10px;
299340
}
300341
301-
.ac-box input:checked~.card_Link {
342+
.ac-box input:checked~.card_LinkText {
302343
display: block;
344+
}
345+
346+
.Hello2 {
347+
display: inline-block;
348+
max-width: 100%;
349+
}
350+
351+
.button_More {
352+
background: #aaaaaa;
353+
border: 1px solid #aaaaaa;
354+
border-radius: 5px;
355+
font-style: normal;
303356
width: 50px;
304-
height: 50px;
305-
margin-right: 25px;
306-
opacity: 1;
357+
height: 25px;
358+
margin: 0 3px;
359+
display: block;
360+
font-size: 16px;
361+
color: #fff;
362+
text-decoration-line: none;
363+
padding: 5px 15px;
364+
margin-left: auto;
365+
margin-right: auto;
307366
}
308367
309368
@media(min-width: 750px) {
310-
.card_All{
311-
border-left: 1px solid #aaaaaa;
312-
border-right: 1px solid #aaaaaa;
369+
.card_All {
370+
width: 373px;
371+
border: 1px solid #aaaaaa;
372+
}
373+
374+
.card_Date {
375+
font-size: 16px;
376+
}
377+
378+
.card_Image {
379+
width: 373px;
380+
}
381+
382+
.card_Movie {
383+
width: 373px;
313384
}
314385
}
315386
</style>

0 commit comments

Comments
 (0)