-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtalk.html
243 lines (237 loc) · 9.77 KB
/
talk.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!--
変更点
・headerにも.is-inviewをつけました(トーク画面でヘッダーが消えるように)
・たこたこボタンで動作できるようにユーザーリストのリンクと戻るボタン(.p-talk-chat-prev)をbuttonにしときました
・cssを結構かえました
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>トーク</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header class="l-header">
<div class="l-header-logo">
<a href="/">
<img src="static/logo.png" alt="takos">
</a>
</div>
<ul class="l-header__ul">
<li class="l-header__ul-item">
<a href="/">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" aria-labelledby="homeAltIconTitle" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#ffffff"> <title id="homeAltIconTitle">Home</title> <path d="M3 10.182V22h18V10.182L12 2z"/> <rect width="6" height="8" x="9" y="14"/> </svg>
</a>
</li>
<li class="l-header__ul-item is-active">
<a href="/">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" aria-labelledby="chatIconTitle" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#ffffff"> <title id="chatIconTitle">Chat</title> <path d="M8.82388455,18.5880577 L4,21 L4.65322944,16.4273939 C3.00629211,15.0013 2,13.0946628 2,11 C2,6.581722 6.4771525,3 12,3 C17.5228475,3 22,6.581722 22,11 C22,15.418278 17.5228475,19 12,19 C10.8897425,19 9.82174472,18.8552518 8.82388455,18.5880577 Z"/> </svg>
</a>
</li>
<li class="l-header__ul-item">
<a href="/">
<svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="personAddIconTitle" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#ffffff"> <title id="personAddIconTitle">Add user</title> <path d="M1 18C1 15.75 4 15.75 5.5 14.25C6.25 13.5 4 13.5 4 9.75C4 7.25025 4.99975 6 7 6C9.00025 6 10 7.25025 10 9.75C10 13.5 7.75 13.5 8.5 14.25C10 15.75 13 15.75 13 18"/> <path d="M22 11H14"/> <path d="M18 7V15"/> </svg>
</a>
</li>
<li class="l-header__ul-item">
<a href="/">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#ffffff"> <title id="settingsIconTitle">Settings</title> <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"/> <circle cx="12" cy="12" r="1"/> </svg>
</a>
</li>
</ul>
</header>
<div class="wrapper">
<main class="p-talk">
<div class="p-talk-list">
<h1 class="p-talk-list-title">トーク</h1>
<div class="p-talk-list-search">
<form name="talk-search">
<label><input type="text" placeholder="トークルーム・メッセージを検索"></label>
</form>
</div>
<div class="p-talk-list-rooms">
<ul class="p-talk-list-rooms__ul">
<li class="c-talk-rooms">
<button>
<span class="c-talk-rooms-icon">
<img src="static/logo.png" alt="">
</span>
<span class="c-talk-rooms-box">
<span class="c-talk-rooms-name">
<span>たこ1</span>
</span>
<span class="c-talk-rooms-msg">
<span>汚くても動いたらいいもの</span>
</span>
</span>
</button>
</li>
<li class="c-talk-rooms is-active">
<button>
<span class="c-talk-rooms-icon">
<img src="static/logo.png" alt="">
</span>
<span class="c-talk-rooms-box">
<span class="c-talk-rooms-name">
<span>たこ2</span>
</span>
<span class="c-talk-rooms-msg">
<span>オブジェクトだぁ！</span>
</span>
</span>
</button>
</li>
<!-- ↓もとのやつ
<li class="c-talk-rooms is-active">
<a href="">
<div class="c-talk-rooms-icon">
<img src="static/logo.png" alt="">
</div>
<div class="c-talk-rooms-box">
<div class="c-talk-rooms-name">
<p>たこ2</p>
</div>
<div class="c-talk-rooms-msg">
<p>オブジェクトだぁ！</p>
</div>
</div>
</a>
</li>
-->
</ul>
</div>
</div>
<div class="p-talk-chat">
<div class="p-talk-chat-container">
<div class="p-talk-chat-title">
<button class="p-talk-chat-prev">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="chevronLeftIconTitle" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"> <title id="chevronLeftIconTitle">Chevron Left</title> <polyline points="14 18 8 12 14 6 14 6"/> </svg>
</button>
<p>たこ2</p>
</div>
<div class="p-talk-chat-main">
<ul class="p-talk-chat-main__ul">
<!-- ここらへんはクラス追加して自由に使ってください -->
<!-- 先頭のメッセージ: primary -->
<!-- 2つめ以降のメッセージ: subsequent -->
<!-- 自分自身のメッセージ: self -->
<!-- 自分以外のメッセージ: other -->
<li class="c-talk-date">
<div class="c-talk-chat-date-box">
<p>今日</p>
</div>
</li>
<li class="c-talk-chat other primary">
<div class="c-talk-chat-box">
<div class="c-talk-chat-icon">
<img src="static/logo.png" alt="">
</div>
<div class="c-talk-chat-right">
<div class="c-talk-chat-name">
<p>たこ</p>
</div>
<div class="c-talk-chat-msg">
<p>メッセージ<br>改行</p>
</div>
</div>
</div>
</li>
<li class="c-talk-chat other subsequent">
<div class="c-talk-chat-box">
<div class="c-talk-chat-right">
<div class="c-talk-chat-msg">
<p>メッセージあああああああああああああああああああああああああああ</p>
</div>
</div>
<div class="c-talk-chat-date">
<p>午後 8:00</p>
</div>
</div>
</li>
<li class="c-talk-chat self primary">
<div class="c-talk-chat-box">
<div class="c-talk-chat-right">
<div class="c-talk-chat-msg">
<p>メッセージ<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行</p>
</div>
</div>
</div>
</li>
<li class="c-talk-chat self subsequent">
<div class="c-talk-chat-box">
<div class="c-talk-chat-date">
<p>既読</p>
<p>午後 8:01</p>
</div>
<div class="c-talk-chat-right">
<div class="c-talk-chat-msg">
<p>メッセージあああああああああああああああああああああああああああ</p>
</div>
</div>
</div>
</li>
<li class="c-talk-chat other primary">
<div class="c-talk-chat-box">
<div class="c-talk-chat-icon">
<img src="static/logo.png" alt="">
</div>
<div class="c-talk-chat-right">
<div class="c-talk-chat-name">
<p>たこ</p>
</div>
<div class="c-talk-chat-msg">
<p>オブジェクトだぁ！</p>
</div>
</div>
<div class="c-talk-chat-date">
<p>午後 8:03</p>
</div>
</div>
</li>
</ul>
</div>
<div class="p-talk-chat-send">
<form class="p-talk-chat-send__form">
<div class="p-talk-chat-send__msg">
<div class="p-talk-chat-send__dummy" aria-hidden="true"></div>
<label>
<textarea class="p-talk-chat-send__textarea" placeholder="メッセージを入力"></textarea>
</label>
</div>
<div class="p-talk-chat-send__file">
<img src="static/clip.svg" alt="file">
</div>
</form>
</div>
</div>
</div>
</main>
</div>
</body>
<script>
document.querySelectorAll('.p-talk-chat-send__form').forEach(function (el) {
const dummy = el.querySelector(".p-talk-chat-send__dummy");
el.querySelector(".p-talk-chat-send__textarea").addEventListener('input', e => {
dummy.textContent = e.target.value + '\u200b';
});
});
document.querySelectorAll(".c-talk-rooms button").forEach(function (el) {
el.addEventListener("click", e => {
e.preventDefault();
if (window.innerWidth < 769) {
document.querySelector(".p-talk").classList.add("is-inview");
document.querySelector(".l-header").classList.add("is-inview");
}
});
});
document.querySelectorAll(".p-talk-chat-prev").forEach(function (el) {
el.addEventListener("click", e => {
e.preventDefault()
document.querySelector(".p-talk").classList.remove("is-inview");
document.querySelector(".l-header").classList.remove("is-inview");
});
});
</script>
</html>