Commit a0d1984f by Kim Peace

Fixed coding style

parent 4c50c265
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -14,6 +16,7 @@ ...@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css"> <link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -354,11 +357,12 @@ ...@@ -354,11 +357,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script> <script src="./js/archive.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -45,7 +48,7 @@ ...@@ -45,7 +48,7 @@
<img src="img/capture.png" alt="サンプル画像"> <img src="img/capture.png" alt="サンプル画像">
</div> </div>
<div class="img_wrap"> <div class="img_wrap">
<img src="img/controller.png" alt="サンプル画像"> <img src="img/controller.png" alt="サンプル画像">
</div> </div>
</div> </div>
<div class="archive_detail_desc"> <div class="archive_detail_desc">
...@@ -139,11 +142,12 @@ ...@@ -139,11 +142,12 @@
</div> </div>
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script> <script src="./js/archive.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -14,6 +16,7 @@ ...@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css"> <link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -434,12 +437,12 @@ ...@@ -434,12 +437,12 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- オーバーレイ --> <!-- オーバーレイ -->
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer>
...@@ -471,11 +474,12 @@ ...@@ -471,11 +474,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -420,11 +423,12 @@ ...@@ -420,11 +423,12 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -198,10 +201,11 @@ ...@@ -198,10 +201,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -41,7 +44,9 @@ ...@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div> </div>
...@@ -53,10 +58,11 @@ ...@@ -53,10 +58,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -56,7 +59,9 @@ ...@@ -56,7 +59,9 @@
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category">
<div class="category_name"><span>お気に入り</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -163,7 +168,9 @@ ...@@ -163,7 +168,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ1</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ1</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -221,7 +228,9 @@ ...@@ -221,7 +228,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ2</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -283,7 +292,9 @@ ...@@ -283,7 +292,9 @@
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
<div class="category"><div class="category_name"><span>グループ1</span></div></div> <div class="category">
<div class="category_name"><span>グループ1</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -340,7 +351,9 @@ ...@@ -340,7 +351,9 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div> <div class="category">
<div class="category_name"><span>グループグループグループグループグループグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -411,11 +424,12 @@ ...@@ -411,11 +424,12 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -41,7 +44,9 @@ ...@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div> </div>
...@@ -205,10 +210,11 @@ ...@@ -205,10 +210,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/chat_room_footer.css"> <link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -39,7 +42,8 @@ ...@@ -39,7 +42,8 @@
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right"> <div class="nav-item text-right">
<a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a> <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png" alt="メニュー"></a> <a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png"
alt="メニュー"></a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
</div><!-- .row --> </div><!-- .row -->
...@@ -167,10 +171,10 @@ ...@@ -167,10 +171,10 @@
<div class="sys_msg text-center"> <div class="sys_msg text-center">
チャット開始<br> チャット開始<br>
参加ユーザ<br> 参加ユーザ<br>
OOさん<br> OOさん<br>
OOさん<br> OOさん<br>
OOさん OOさん
</div> </div>
<!-- 相手の吹き出し --> <!-- 相手の吹き出し -->
...@@ -180,7 +184,9 @@ ...@@ -180,7 +184,9 @@
</figure> </figure>
<div class="room_left-text"> <div class="room_left-text">
<div class="name">名前名前名前名前</div> <div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> <div class="text">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div> </div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div> <div class="read d-flex align-items-end"><span>既読</span></div>
...@@ -190,7 +196,9 @@ ...@@ -190,7 +196,9 @@
<!-- 自分の吹き出し --> <!-- 自分の吹き出し -->
<div class="room_right"> <div class="room_right">
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> <div class="text">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div> <div class="read d-flex align-items-end"><span>既読</span></div>
</div> </div>
...@@ -414,11 +422,12 @@ ...@@ -414,11 +422,12 @@
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_chat_profile.html" --> <!--#include virtual="modal_chat_profile.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -142,12 +145,13 @@ ...@@ -142,12 +145,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -39,4 +39,4 @@ ...@@ -39,4 +39,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<!-- ユーザーリスト -->
<!-- ユーザーリスト --> <div class="user_list">
<div class="user_list"> <ul class="p-0">
<ul class="p-0"> <li class="d-flex align-items-center">
<li class="d-flex align-items-center"> <div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="user_item_l_chk">
<div class="user_item_l_chk"> <div class="checkbox">
<div class="checkbox"> <label>
<label> <input type="checkbox" name="checkbox[]" class="checkbox-input">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <span class="checkbox-parts"></span>
<span class="checkbox-parts"></span> </label>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> <div class="user_item_l">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="thubnail">
<div class="user_item_l_chk"> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> <div class="user_item_m">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="d-flex flex-column">
<div class="user_item_l_chk"> <div class="user_item_t">
<div class="checkbox"> <span class="chat_item_ttl">名前 太郎</span>
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div> </div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> </div>
<div class="user_item d-flex flex-row align-items-center w-100"> </li>
<div class="user_item_l_chk"> <li class="d-flex align-items-center">
<div class="checkbox"> <div class="user_item d-flex flex-row align-items-center w-100">
<label> <div class="user_item_l_chk">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <div class="checkbox">
<span class="checkbox-parts"></span> <label>
</label> <input type="checkbox" name="checkbox[]" class="checkbox-input">
</div> <span class="checkbox-parts"></span>
</div> </label>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> <div class="user_item_l">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="thubnail">
<div class="user_item_l_chk"> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> <div class="user_item_m">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="d-flex flex-column">
<div class="user_item_l_chk"> <div class="user_item_t">
<div class="checkbox"> <span class="chat_item_ttl">名前 太郎</span>
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div> </div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> </div>
<div class="user_item d-flex flex-row align-items-center w-100"> </li>
<div class="user_item_l_chk"> <li class="d-flex align-items-center">
<div class="checkbox"> <div class="user_item d-flex flex-row align-items-center w-100">
<label> <div class="user_item_l_chk">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <div class="checkbox">
<span class="checkbox-parts"></span> <label>
</label> <input type="checkbox" name="checkbox[]" class="checkbox-input">
</div> <span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
<div class="user_item_l"> </div>
<div class="thubnail"> </div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> </div>
</div> </li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
<div class="user_item_m"> </div>
<div class="d-flex flex-column"> </div>
<div class="user_item_t"> </div>
<span class="chat_item_ttl">名前 太郎</span> </li>
</div> <li class="d-flex align-items-center">
</div> <div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
</div> </div>
</li> </div>
<li class="d-flex align-items-center"> </div>
<div class="user_item d-flex flex-row align-items-center w-100"> </li>
<div class="user_item_l_chk"> <li class="d-flex align-items-center">
<div class="checkbox"> <div class="user_item d-flex flex-row align-items-center w-100">
<label> <div class="user_item_l_chk">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <div class="checkbox">
<span class="checkbox-parts"></span> <label>
</label> <input type="checkbox" name="checkbox[]" class="checkbox-input">
</div> <span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
<div class="user_item_l"> </div>
<div class="thubnail"> </div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> </div>
</div> </li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
<div class="user_item_m"> </div>
<div class="d-flex flex-column"> </div>
<div class="user_item_t"> </div>
<span class="chat_item_ttl">名前 太郎</span> </li>
</div> <li class="d-flex align-items-center">
</div> <div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div> </div>
</div> </div>
</li> </div>
</ul> </div>
</div> </li>
</ul>
</div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -142,12 +145,13 @@ ...@@ -142,12 +145,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -39,4 +39,4 @@ ...@@ -39,4 +39,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -136,12 +139,13 @@ ...@@ -136,12 +139,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -39,4 +39,4 @@ ...@@ -39,4 +39,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -87,12 +90,13 @@ ...@@ -87,12 +90,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -39,4 +39,4 @@ ...@@ -39,4 +39,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -132,12 +135,13 @@ ...@@ -132,12 +135,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -39,4 +39,4 @@ ...@@ -39,4 +39,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="user_list_wrap"> <div class="user_list_wrap">
<div class="user_list d-flex flex-wrap"> <div class="user_list d-flex flex-wrap">
<div class="user_item host"> <div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal1"> <a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span> <span class="name">名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span> <span class="name">名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item host"> <div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span> <span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a> </a>
</div> </div>
<div class="user_item"> <div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2"> <a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前</span> <span class="name">名前名前名前</span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -15,6 +17,7 @@ ...@@ -15,6 +17,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -58,7 +61,9 @@ ...@@ -58,7 +61,9 @@
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category">
<div class="category_name"><span>お気に入り</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -131,7 +136,9 @@ ...@@ -131,7 +136,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ 本社 > 経理部</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ 本社 > 経理部</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -181,7 +188,9 @@ ...@@ -181,7 +188,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループマイグループマイグループマイグループマイグループマイグループ2</span></div> </div> <div class="category">
<div class="category_name"><span>マイグループマイグループマイグループマイグループマイグループマイグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -420,11 +429,12 @@ ...@@ -420,11 +429,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script> <script src="./js/contact.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
} }
.archive_list ul li { .archive_list ul li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
.archive_list ul li a { .archive_list ul li a {
...@@ -26,10 +26,18 @@ ...@@ -26,10 +26,18 @@
.archive_list ul li a:hover { .archive_list ul li a:hover {
background: aliceblue; background: aliceblue;
} }
.bg_blue{ background: #0070CA; } .bg_blue {
.bg_green{ background: #4DCA00; } background: #0070ca;
.bg_orange{ background: #CA6D00; } }
.archive_list ul li:first-child { border-top: 1px solid #E2E8F0; } .bg_green {
background: #4dca00;
}
.bg_orange {
background: #ca6d00;
}
.archive_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.archive_desc { .archive_desc {
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
...@@ -37,30 +45,47 @@ ...@@ -37,30 +45,47 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.archive_date span { color: #323743; font-size: 14px; } .archive_date span {
.archive_name span { color: #323743; font-size: 16px; font-weight: 500;} color: #323743;
.archive_name{ font-size: 14px;
}
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
}
.archive_name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/**************************** archive detail *************************/ /**************************** archive detail *************************/
.archive_detail .ttl{ .archive_detail .ttl {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.archive_detail .item{ margin-bottom: 20px; } .archive_detail .item {
.archive_detail .archive_detail_desc img{ margin-bottom: 20px;
}
.archive_detail .archive_detail_desc img {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
} }
.archive_detail .archive_detail_desc .archive_detail_user_list ul{ padding-left: 0; overflow-x: scroll;} .archive_detail .archive_detail_desc .archive_detail_user_list ul {
.archive_detail .archive_detail_desc .archive_detail_user_list ul li{ list-style: none; margin: 0 5px; } padding-left: 0;
.archive_detail_desc { margin: 0 10px; } overflow-x: scroll;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul li {
list-style: none;
margin: 0 5px;
}
.archive_detail_desc {
margin: 0 10px;
}
.archive_detail .archive_detail_desc .archive_detail_user_list span, .archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span{ .archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -68,11 +93,11 @@ ...@@ -68,11 +93,11 @@
width: 90px; width: 90px;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
.archive_name{ .archive_name {
font-size: 14px; font-size: 14px;
} }
.archive_detail .ttl{ .archive_detail .ttl {
font-size: 16px; font-size: 16px;
} }
.archive_detail_desc span { .archive_detail_desc span {
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
margin: 0 auto; margin: 0 auto;
} }
.tab_item { .tab_item {
width: calc(100%/2); width: calc(100% / 2);
height: 50px; height: 50px;
border-bottom: 5px solid #0070CA; border-bottom: 5px solid #0070ca;
background-color: #E0E0E0; background-color: #e0e0e0;
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
...@@ -33,12 +33,12 @@ input[name="tab_item"] { ...@@ -33,12 +33,12 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
} }
#tab1:checked ~ #tab1_content, #tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{ #tab2:checked ~ #tab2_content {
display: block; display: block;
} }
.tabs input:checked + .tab_item { .tabs input:checked + .tab_item {
background-color: #0070CA; background-color: #0070ca;
color: #fff; color: #fff;
} }
...@@ -52,13 +52,14 @@ input[name="tab_item"] { ...@@ -52,13 +52,14 @@ input[name="tab_item"] {
} }
.chat_list ul li { .chat_list ul li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
.chat_list ul li:first-child { .chat_list ul li:first-child {
border-top: 1px solid #E2E8F0; border-top: 1px solid #e2e8f0;
} }
.chat_list .chat_item_t,.chat_list .chat_item_desc { .chat_list .chat_item_t,
.chat_list .chat_item_desc {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -90,7 +91,7 @@ input[name="tab_item"] { ...@@ -90,7 +91,7 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
margin: 0 auto; margin: 0 auto;
} }
.chat_item_l .thubnail img{ .chat_item_l .thubnail img {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
...@@ -101,81 +102,94 @@ input[name="tab_item"] { ...@@ -101,81 +102,94 @@ input[name="tab_item"] {
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(1) { .chat_item_l .thubnail3 .img_wrap:nth-child(1) {
width: 25px; width: 25px;
height: 50px; height: 50px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(1) img { .chat_item_l .thubnail3 .img_wrap:nth-child(1) img {
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute; position: absolute;
left: -12px; left: -12px;
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(2) { .chat_item_l .thubnail3 .img_wrap:nth-child(2) {
width: 25px; width: 25px;
height: 25px; height: 25px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img { .chat_item_l .thubnail3 .img_wrap:nth-child(2) img,
width: 25px; .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
height: 25px; width: 25px;
height: 25px;
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(3) { .chat_item_l .thubnail3 .img_wrap:nth-child(3) {
width: 25px; width: 25px;
height: 25px; height: 25px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.chat_item_l .thubnail2 .img_wrap:nth-child(1) { .chat_item_l .thubnail2 .img_wrap:nth-child(1) {
width: 25px; width: 25px;
height: 50px; height: 50px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.chat_item_l .thubnail2 .img_wrap:nth-child(2) { .chat_item_l .thubnail2 .img_wrap:nth-child(2) {
width: 25px; width: 25px;
height: 50px; height: 50px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.chat_item_l .thubnail2 .img_wrap img { .chat_item_l .thubnail2 .img_wrap img {
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute; position: absolute;
left: -12px; left: -12px;
} }
.chat_item{ height: 90px;} .chat_item {
.chat_list li{ list-style: none; } height: 90px;
.chat_list a{ color: #323743; } }
.chat_list li {
list-style: none;
}
.chat_list a {
color: #323743;
}
/* タイトル(グループ名、個人名) */ /* タイトル(グループ名、個人名) */
.chat_item_ttl,.chat_item_num{ font-weight: bold; } .chat_item_ttl,
.chat_item_num {
font-weight: bold;
}
/* 投稿時間 */ /* 投稿時間 */
.chat_item_time{ font-weight: 600; text-align: center; } .chat_item_time {
font-weight: 600;
text-align: center;
}
/* 未読件数 */ /* 未読件数 */
.chat_item_unread{ .chat_item_unread {
max-width: 60px; max-width: 60px;
text-align: center; text-align: center;
background-color: #FF4747; background-color: #ff4747;
color: #fff; color: #fff;
padding: 2px 10px; padding: 2px 10px;
margin: 5px auto; margin: 5px auto;
border-radius: 30px; border-radius: 30px;
} }
/* 既読 */ /* 既読 */
.already_read{ .already_read {
background-color: #F1F2F2; background-color: #f1f2f2;
} }
/**************************** make room *************************/ /**************************** make room *************************/
.chat_list .category{ .chat_list .category {
text-align: left; text-align: left;
font-size: 1.4rem; font-size: 1.4rem;
height: 30px; height: 30px;
...@@ -183,14 +197,14 @@ input[name="tab_item"] { ...@@ -183,14 +197,14 @@ input[name="tab_item"] {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
line-height: 30px; line-height: 30px;
background: #C4C4C4; background: #c4c4c4;
padding-left: 10px; padding-left: 10px;
} }
.category_name { .category_name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 90%; width: 90%;
} }
.chat_list .category.open::after { .chat_list .category.open::after {
content: "\f106"; content: "\f106";
...@@ -209,17 +223,16 @@ input[name="tab_item"] { ...@@ -209,17 +223,16 @@ input[name="tab_item"] {
font: 26px FontAwesome; font: 26px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
color: #F5D256; color: #f5d256;
} }
.star.disable:before { .star.disable:before {
content: "\f005"; content: "\f005";
font: 26px FontAwesome; font: 26px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 400; font-weight: 400;
color: #C4C4C4; color: #c4c4c4;
} }
/* メンバー選択チェックボックス */ /* メンバー選択チェックボックス */
.chat_item_l_chk { .chat_item_l_chk {
height: 100%; height: 100%;
...@@ -233,16 +246,16 @@ input[name="tab_item"] { ...@@ -233,16 +246,16 @@ input[name="tab_item"] {
vertical-align: middle; vertical-align: middle;
} }
.checkbox-input{ .checkbox-input {
display: none; display: none;
} }
.checkbox-parts{ .checkbox-parts {
position:relative; position: relative;
} }
.checkbox-parts::before{ .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070CA; border: 2px solid #0070ca;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -253,7 +266,7 @@ input[name="tab_item"] { ...@@ -253,7 +266,7 @@ input[name="tab_item"] {
left: 0; left: 0;
margin: auto; margin: auto;
} }
.checkbox-input:checked + .checkbox-parts::after{ .checkbox-input:checked + .checkbox-parts::after {
display: block; display: block;
position: absolute; position: absolute;
content: "\f107"; content: "\f107";
...@@ -266,7 +279,7 @@ input[name="tab_item"] { ...@@ -266,7 +279,7 @@ input[name="tab_item"] {
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070CA; background: #0070ca;
border-radius: 50%; border-radius: 50%;
} }
...@@ -274,65 +287,83 @@ input[name="tab_item"] { ...@@ -274,65 +287,83 @@ input[name="tab_item"] {
.make_room_btn button, .make_room_btn button,
.make_room_confirm_btn button, .make_room_confirm_btn button,
.add_user_confirm_btn button, .add_user_confirm_btn button,
.add_user_btn button{ .add_user_btn button {
height: 60px; height: 60px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #0070CA; background: #0070ca;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
max-width: 1280px; max-width: 1280px;
} }
.select_member{ font-size: 14px; } .select_member {
font-size: 14px;
}
#chat_make_room_confirm .room_name, #chat_make_room_confirm .room_name,
#chat_change_room_name .room_name { width: 90%; margin: 0 auto; } #chat_change_room_name .room_name {
width: 90%;
margin: 0 auto;
}
#chat_make_room_confirm .room_name h2, #chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 { margin-top: 20px; font-size: 18px; } #chat_change_room_name .room_name h2 {
margin-top: 20px;
font-size: 18px;
}
#chat_make_room_confirm .chat_list h2, #chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 { font-size: 18px; } #chat_add_user_confirm .chat_list h2 {
font-size: 18px;
}
#chat_make_room_confirm .chat_list, #chat_make_room_confirm .chat_list,
#chat_add_user_confirm .chat_list { padding: 20px 0; width: 90%; margin: 0 auto; } #chat_add_user_confirm .chat_list {
padding: 20px 0;
width: 90%;
margin: 0 auto;
}
/* ルーム名入力フォーム */ /* ルーム名入力フォーム */
.input_name_room { .input_name_room {
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
border: none; border: none;
border-bottom: 1px solid #BDBDBD; border-bottom: 1px solid #bdbdbd;
height: 40px; height: 40px;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* ルーム名変更ボタン */ /* ルーム名変更ボタン */
.change_room_name_btn{ text-align: center; } .change_room_name_btn {
.change_room_name_btn button{ text-align: center;
}
.change_room_name_btn button {
text-align: center; text-align: center;
height: 48px; height: 48px;
width: 172px; width: 172px;
background: #0070CA; background: #0070ca;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
} }
/**************************** chat room *************************/ /**************************** chat room *************************/
#chat_room { margin-top: 150px; } #chat_room {
margin-top: 150px;
}
.chat_room_src_form input { .chat_room_src_form input {
padding-left: 10px; padding-left: 10px;
border: 1px solid #BDBDBD; border: 1px solid #bdbdbd;
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin: 10px 0; margin: 10px 0;
padding-left: 35px; padding-left: 35px;
width: 100%; width: 100%;
} }
.chat_room_src_form{ .chat_room_src_form {
position: relative; position: relative;
margin: 0 5px; margin: 0 5px;
} }
.chat_room_src_form .src_icon{ .chat_room_src_form .src_icon {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
...@@ -343,11 +374,11 @@ input[name="tab_item"] { ...@@ -343,11 +374,11 @@ input[name="tab_item"] {
} }
.chat_room_src_form .cancel { .chat_room_src_form .cancel {
width: 120px; width: 120px;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
color: #8F8F8F; color: #8f8f8f;
text-align: center; text-align: center;
} }
/* ユーザーリスト */ /* ユーザーリスト */
...@@ -359,7 +390,10 @@ input[name="tab_item"] { ...@@ -359,7 +390,10 @@ input[name="tab_item"] {
overflow-x: scroll; overflow-x: scroll;
z-index: 2; z-index: 2;
} }
.user_list .user_item{ margin: 10px; text-align: center;} .user_list .user_item {
margin: 10px;
text-align: center;
}
.user_list .user_item span { .user_list .user_item span {
width: 60px; width: 60px;
white-space: nowrap; white-space: nowrap;
...@@ -367,13 +401,15 @@ input[name="tab_item"] { ...@@ -367,13 +401,15 @@ input[name="tab_item"] {
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 12px; font-size: 12px;
} }
.user_list .user_item a { color: #323743; } .user_list .user_item a {
color: #323743;
}
/* ユーザーリストフィルター */ /* ユーザーリストフィルター */
#filter .user_item .img_wrap{ #filter .user_item .img_wrap {
position: relative; position: relative;
} }
#filter .user_item .img_wrap.filter:after{ #filter .user_item .img_wrap.filter:after {
position: absolute; position: absolute;
content: "\f107"; content: "\f107";
font: 50px FontAwesome; font: 50px FontAwesome;
...@@ -393,8 +429,8 @@ input[name="tab_item"] { ...@@ -393,8 +429,8 @@ input[name="tab_item"] {
} }
.room_container { .room_container {
padding:0; padding: 0;
background: #F3F3F3; background: #f3f3f3;
overflow: hidden; overflow: hidden;
margin: 20px auto; margin: 20px auto;
margin-bottom: 140px; margin-bottom: 140px;
...@@ -441,7 +477,7 @@ input[name="tab_item"] { ...@@ -441,7 +477,7 @@ input[name="tab_item"] {
font-size: 12px; font-size: 12px;
} }
.unread span { .unread span {
background: #C4C4C4; background: #c4c4c4;
color: #fff; color: #fff;
border-radius: 15px; border-radius: 15px;
padding: 0 5px; padding: 0 5px;
...@@ -460,19 +496,19 @@ input[name="tab_item"] { ...@@ -460,19 +496,19 @@ input[name="tab_item"] {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.room_left figure img{ .room_left figure img {
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.room_left .img_wrap{ .room_left .img_wrap {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
line-height: 140px; line-height: 140px;
overflow: hidden; overflow: hidden;
} }
.room_right .img_wrap{ .room_right .img_wrap {
display: block; display: block;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
...@@ -480,9 +516,9 @@ input[name="tab_item"] { ...@@ -480,9 +516,9 @@ input[name="tab_item"] {
margin-left: 80px; margin-left: 80px;
overflow: hidden; overflow: hidden;
} }
.img_wrap img{ .img_wrap img {
width: 100%; width: 100%;
vertical-align:middle; vertical-align: middle;
} }
.room_left-text { .room_left-text {
...@@ -504,13 +540,14 @@ input[name="tab_item"] { ...@@ -504,13 +540,14 @@ input[name="tab_item"] {
background-color: #ffffff; background-color: #ffffff;
font-size: 18px; font-size: 18px;
} }
.room_left-text.latest .text,.room_left-text.latest .img_wrap{ .room_left-text.latest .text,
.room_left-text.latest .img_wrap {
box-shadow: 5px 5px 5px rgb(0 0 0 / 40%); box-shadow: 5px 5px 5px rgb(0 0 0 / 40%);
} }
/* 吹き出し */ /* 吹き出し */
.room_left-text .text::after { .room_left-text .text::after {
content: ''; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
...@@ -562,7 +599,7 @@ input[name="tab_item"] { ...@@ -562,7 +599,7 @@ input[name="tab_item"] {
.room_right .text { .room_right .text {
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
background-color: #0070CA; background-color: #0070ca;
color: #fff; color: #fff;
margin: 0; margin: 0;
margin-left: 80px; margin-left: 80px;
...@@ -570,14 +607,14 @@ input[name="tab_item"] { ...@@ -570,14 +607,14 @@ input[name="tab_item"] {
} }
/* 吹き出し */ /* 吹き出し */
.room_right .text::after { .room_right .text::after {
content: ''; content: "";
position: absolute; position: absolute;
right: -10px; right: -10px;
top: 5px; top: 5px;
border-left: 10px solid #0070CA; border-left: 10px solid #0070ca;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-top: 10px solid #0070CA; border-top: 10px solid #0070ca;
border-bottom: 10px solid transparent;v border-bottom: 10px solid transparent;
} }
/* 日付 */ /* 日付 */
.room_right .date { .room_right .date {
...@@ -592,7 +629,7 @@ input[name="tab_item"] { ...@@ -592,7 +629,7 @@ input[name="tab_item"] {
/* システムメッセージ */ /* システムメッセージ */
.sys_msg { .sys_msg {
background: rgb(198,198,198,.5); background: rgb(198, 198, 198, 0.5);
color: #909090; color: #909090;
padding: 2px 10px; padding: 2px 10px;
width: 200px; width: 200px;
...@@ -608,14 +645,16 @@ input[name="tab_item"] { ...@@ -608,14 +645,16 @@ input[name="tab_item"] {
max-width: 320px; max-width: 320px;
margin: 0 auto; margin: 0 auto;
} }
.collabo_date span{ font-size: 12px; } .collabo_date span {
font-size: 12px;
}
.collabo_area .collabo_desc { .collabo_area .collabo_desc {
background: rgb(0,112,202,.6); background: rgb(0, 112, 202, 0.6);
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
} }
.collabo_area.disable .collabo_desc { .collabo_area.disable .collabo_desc {
background: rgb(91,102,111,.6); background: rgb(91, 102, 111, 0.6);
} }
.collabo_desc .collabo_user_list img { .collabo_desc .collabo_user_list img {
width: 30px; width: 30px;
...@@ -625,23 +664,28 @@ input[name="tab_item"] { ...@@ -625,23 +664,28 @@ input[name="tab_item"] {
border: 2px solid #fff; border: 2px solid #fff;
} }
.collabo_user_list .num { .collabo_user_list .num {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 15px; border-radius: 15px;
background: #B8B8B8; background: #b8b8b8;
text-align: center; text-align: center;
color: #fff; color: #fff;
margin: 5px; margin: 5px;
} }
.collabo_user_list .num span { line-height: 30px; } .collabo_user_list .num span {
.collabo_room_name { color: #fff; max-width: 300px;} line-height: 30px;
}
.collabo_room_name {
color: #fff;
max-width: 300px;
}
.collabo_room_name span:first-child { .collabo_room_name span:first-child {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.collabo_room_name span:nth-child(2) { .collabo_room_name span:nth-child(2) {
white-space: nowrap; white-space: nowrap;
} }
.collabo_time { .collabo_time {
color: #fff; color: #fff;
...@@ -654,7 +698,7 @@ input[name="tab_item"] { ...@@ -654,7 +698,7 @@ input[name="tab_item"] {
.collabo_area .collabo_btn button { .collabo_area .collabo_btn button {
width: 100%; width: 100%;
line-height: 45px; line-height: 45px;
background: #0070CA; background: #0070ca;
border: none; border: none;
color: #fff; color: #fff;
border-radius: 25px; border-radius: 25px;
...@@ -662,7 +706,7 @@ input[name="tab_item"] { ...@@ -662,7 +706,7 @@ input[name="tab_item"] {
outline: none; outline: none;
} }
.collabo_area.disable .collabo_btn button { .collabo_area.disable .collabo_btn button {
background: #5B666F; background: #5b666f;
} }
/**************************** modal *************************/ /**************************** modal *************************/
...@@ -679,7 +723,7 @@ input[name="tab_item"] { ...@@ -679,7 +723,7 @@ input[name="tab_item"] {
margin-right: 10px; margin-right: 10px;
} }
.menu_modal .modal-body ul li { .menu_modal .modal-body ul li {
border-bottom: 1px solid #C6C6C6; border-bottom: 1px solid #c6c6c6;
height: 40px; height: 40px;
} }
.menu_modal .modal-body ul li a { .menu_modal .modal-body ul li a {
...@@ -691,22 +735,23 @@ input[name="tab_item"] { ...@@ -691,22 +735,23 @@ input[name="tab_item"] {
background: aliceblue; background: aliceblue;
} }
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px){
/* chat item */ /* chat item */
.tab_item{ .tab_item {
font-size: 16px; font-size: 16px;
} }
.chat_item_ttl{ .chat_item_ttl {
font-size: 16px; font-size: 16px;
} }
.chat_item_ttl, .chat_item_num{ .chat_item_ttl,
.chat_item_num {
font-size: 16px; font-size: 16px;
} }
.chat_item_m { .chat_item_m {
font-size: 14px; font-size: 14px;
} }
.chat_item_time,.chat_item_unread{ .chat_item_time,
.chat_item_unread {
font-size: 14px; font-size: 14px;
} }
.chat_item { .chat_item {
...@@ -716,7 +761,7 @@ input[name="tab_item"] { ...@@ -716,7 +761,7 @@ input[name="tab_item"] {
.make_room_btn button, .make_room_btn button,
.make_room_confirm_btn button, .make_room_confirm_btn button,
.add_user_confirm_btn button, .add_user_confirm_btn button,
.add_user_btn button{ .add_user_btn button {
font-size: 16px; font-size: 16px;
} }
/* check radio */ /* check radio */
...@@ -734,9 +779,13 @@ input[name="tab_item"] { ...@@ -734,9 +779,13 @@ input[name="tab_item"] {
width: 30px; width: 30px;
} }
#chat_make_room_confirm .room_name h2, #chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 { font-size: 16px; } #chat_change_room_name .room_name h2 {
font-size: 16px;
}
#chat_make_room_confirm .chat_list h2, #chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 { font-size: 16px; } #chat_add_user_confirm .chat_list h2 {
font-size: 16px;
}
/* ルーム名入力フォーム */ /* ルーム名入力フォーム */
.input_name_room { .input_name_room {
font-size: 14px; font-size: 14px;
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** footer *************************/ /**************************** footer *************************/
footer{ footer {
max-width: 1280px; max-width: 1280px;
background: #F9F9F9; background: #F9F9F9;
margin-top: 20px; margin-top: 20px;
...@@ -10,14 +10,14 @@ footer{ ...@@ -10,14 +10,14 @@ footer{
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.footer_content_t{ .footer_content_t {
height: 70px; height: 70px;
padding: 0 10px; padding: 0 10px;
} }
.footer_content_b{ .footer_content_b {
height: 70px; height: 70px;
} }
footer .footer-wrap{ footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
/* max-width: 500px; */ /* max-width: 500px; */
height: 100%; height: 100%;
...@@ -25,7 +25,7 @@ footer .footer-wrap{ ...@@ -25,7 +25,7 @@ footer .footer-wrap{
footer .footer_content_t .footer_item { footer .footer_content_t .footer_item {
margin: auto 10px; margin: auto 10px;
} }
footer .footer_item{ footer .footer_item {
text-align: center; text-align: center;
margin: auto 0; margin: auto 0;
} }
...@@ -35,15 +35,15 @@ footer .footer_content_b .footer_item p{ ...@@ -35,15 +35,15 @@ footer .footer_content_b .footer_item p{
font-weight: bold; font-weight: bold;
margin:0; margin:0;
} }
footer .footer_item img{ footer .footer_item img {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
footer .footer_content_b .footer_item .active{ footer .footer_content_b .footer_item .active {
color: #0070CA; color: #0070CA;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a{ footer .footer_item a {
display: inline-block; display: inline-block;
} }
...@@ -56,12 +56,12 @@ footer .footer_content_t input { ...@@ -56,12 +56,12 @@ footer .footer_content_t input {
border-radius: 5px; border-radius: 5px;
height: 45px; height: 45px;
} }
footer .footer_content_t input:focus{ footer .footer_content_t input:focus {
border-color: #71a2ff; border-color: #71a2ff;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%); box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
footer .footer_content_b .footer_item p { footer .footer_content_b .footer_item p {
font-size: 12px; font-size: 12px;
} }
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** header *************************/ /**************************** header *************************/
#collabo_header{ #collabo_header {
max-width: 1280px; max-width: 1280px;
height: 60px; height: 60px;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
background: #1D1D1D; background: #1d1d1d;
z-index: 10; z-index: 10;
} }
.collabo_nav_l{ .collabo_nav_l {
color: #fff; color: #fff;
} }
.collabo_nav_r .img_wrap{ .collabo_nav_r .img_wrap {
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
.collabo_nav_r .img_wrap img{ .collabo_nav_r .img_wrap img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/**************************** main *************************/ /**************************** main *************************/
#collabo_main { height: calc( 100vh - 180px ); position: relative; margin-bottom: 120px;} #collabo_main {
height: calc(100vh - 180px);
position: relative;
margin-bottom: 120px;
}
#collabo_main .user_list_wrap, #collabo_main .user_list_wrap,
#collabo_main .document_wrap, #collabo_main .document_wrap,
#overlay_user_list .user_list_wrap { height: 100%; background: #525252;} #overlay_user_list .user_list_wrap {
#collabo_main .user_list,#overlay_user_list .user_list { background: #525252; padding-bottom: 120px;} height: 100%;
#collabo_main .user_list .img_wrap,#overlay_user_list .user_list .img_wrap{ background: #525252;
}
#collabo_main .user_list,
#overlay_user_list .user_list {
background: #525252;
padding-bottom: 120px;
}
#collabo_main .user_list .img_wrap,
#overlay_user_list .user_list .img_wrap {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: 5px auto; margin: 5px auto;
height: 100%; height: 100%;
} }
.user_item .name { .user_item .name {
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0; left: 0;
right: 0; right: 0;
color: #fff; color: #fff;
width: 100px; width: 100px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 auto; margin: 0 auto;
} }
#collabo_main .user_list .img_wrap img, #collabo_main .user_list .img_wrap img,
#overlay_user_list .user_list .img_wrap img{ #overlay_user_list .user_list .img_wrap img {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
} }
.noscroll{ overflow: hidden; position: fixed;} .noscroll {
.none{ display: none;} overflow: hidden;
position: fixed;
}
.none {
display: none;
}
#collabo_main .user_item.host:before,#overlay_user_list .user_item.host:before{ #collabo_main .user_item.host:before,
#overlay_user_list .user_item.host:before {
content: ""; content: "";
top: 0; top: 0;
right: 0; right: 0;
...@@ -68,23 +86,23 @@ ...@@ -68,23 +86,23 @@
height: 64px; height: 64px;
} }
.user_item { .user_item {
width: calc( 50% - 5px ); width: calc(50% - 5px);
position: relative; position: relative;
text-align: center; text-align: center;
border: 1px solid white; border: 1px solid white;
border-radius: 5px; border-radius: 5px;
margin: 5px auto; margin: 5px auto;
height: calc( 100vh / 3 ); height: calc(100vh / 3);
line-height: calc( 100vh / 3 ); line-height: calc(100vh / 3);
overflow: hidden; overflow: hidden;
} }
.user_item a { .user_item a {
display: block; display: block;
height: 100%; height: 100%;
} }
/**************************** overlay *************************/ /**************************** overlay *************************/
.btn{ .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
width: 60px; width: 60px;
...@@ -92,21 +110,23 @@ ...@@ -92,21 +110,23 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.btn.menu_btn{ .btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png"); background-image: url("../icon/icon_collabo_menu.png");
} }
.btn.user_btn{ .btn.user_btn {
background-image: url("../icon/icon_member_white.png"); background-image: url("../icon/icon_member_white.png");
} }
.btn.add_user_btn{ .btn.add_user_btn {
background-image: url("../icon/icon_add_member_white.png"); background-image: url("../icon/icon_add_member_white.png");
} }
.btn.menu_btn.hide,.btn.add_user_btn.hide,.btn.user_btn.hide{ .btn.menu_btn.hide,
transition: .3s; .btn.add_user_btn.hide,
.btn.user_btn.hide {
transition: 0.3s;
background-image: url("../icon/icon_close.png"); background-image: url("../icon/icon_close.png");
} }
.overlay { .overlay {
transition: .7s; transition: 0.7s;
position: absolute; position: absolute;
top: 60px; top: 60px;
width: 100%; width: 100%;
...@@ -114,7 +134,9 @@ ...@@ -114,7 +134,9 @@
background: #525252; background: #525252;
height: 100vh; height: 100vh;
} }
.fixed{ position: fixed; } .fixed {
position: fixed;
}
.overlay.slidein { .overlay.slidein {
top: 60px; top: 60px;
right: 0; right: 0;
...@@ -135,7 +157,7 @@ ...@@ -135,7 +157,7 @@
#overlay_menu .menu_wrap .menu { #overlay_menu .menu_wrap .menu {
width: 220px; width: 220px;
} }
#overlay_menu .menu_wrap .menu .item a{ #overlay_menu .menu_wrap .menu .item a {
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
...@@ -143,12 +165,12 @@ ...@@ -143,12 +165,12 @@
width: 80px; width: 80px;
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
background: #0070CA; background: #0070ca;
border-radius: 8px; border-radius: 8px;
margin: 5px; margin: 5px;
} }
#overlay_menu .overlay_menu_wrap { #overlay_menu .overlay_menu_wrap {
height: calc( 100vh - 180px ); height: calc(100vh - 180px);
} }
/* ユーザー追加 */ /* ユーザー追加 */
...@@ -163,11 +185,11 @@ ...@@ -163,11 +185,11 @@
} }
#add_user_list .user_list li { #add_user_list .user_list li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
#add_user_list .user_list li:first-child { #add_user_list .user_list li:first-child {
border-top: 1px solid #E2E8F0; border-top: 1px solid #e2e8f0;
} }
#add_user_list .chat_item_ttl { #add_user_list .chat_item_ttl {
font-weight: bold; font-weight: bold;
...@@ -196,7 +218,7 @@ ...@@ -196,7 +218,7 @@
#add_user_list .checkbox-parts::before { #add_user_list .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070CA; border: 2px solid #0070ca;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -220,7 +242,7 @@ ...@@ -220,7 +242,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070CA; background: #0070ca;
border-radius: 50%; border-radius: 50%;
} }
#add_user_list .user_item_l { #add_user_list .user_item_l {
...@@ -243,7 +265,7 @@ ...@@ -243,7 +265,7 @@
} }
/**************************** zoomin zoomout *************************/ /**************************** zoomin zoomout *************************/
.s_ac .img_wrap{ .s_ac .img_wrap {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
...@@ -251,7 +273,7 @@ ...@@ -251,7 +273,7 @@
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
} }
.s_ac .img_wrap img{ .s_ac .img_wrap img {
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
...@@ -259,7 +281,7 @@ ...@@ -259,7 +281,7 @@
position: fixed; position: fixed;
top: 60px; top: 60px;
z-index: 2; z-index: 2;
height: calc( 100% - 180px ); height: calc(100% - 180px);
} }
.s_ac_c { .s_ac_c {
margin: auto 0; margin: auto 0;
...@@ -292,26 +314,26 @@ ...@@ -292,26 +314,26 @@
} }
/**************************** footer *************************/ /**************************** footer *************************/
#collabo_footer{ #collabo_footer {
max-width: 1280px; max-width: 1280px;
background: #1D1D1D; background: #1d1d1d;
height: 120px; height: 120px;
margin-top: 20px; margin-top: 20px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
border:none; border: none;
z-index: 10; z-index: 10;
} }
#collabo_footer .footer-wrap{ #collabo_footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
max-width: 300px; max-width: 300px;
} }
#collabo_footer .footer_item a{ #collabo_footer .footer_item a {
display: inline-block; display: inline-block;
} }
#collabo_footer .img_wrap{ #collabo_footer .img_wrap {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
...@@ -320,7 +342,7 @@ ...@@ -320,7 +342,7 @@
/**************************** footer-menu *************************/ /**************************** footer-menu *************************/
#collabo_footer_menu { #collabo_footer_menu {
transition: .7s; transition: 0.7s;
max-width: 1280px; max-width: 1280px;
height: 70px; height: 70px;
position: fixed; position: fixed;
...@@ -330,12 +352,12 @@ ...@@ -330,12 +352,12 @@
bottom: 120px; bottom: 120px;
z-index: 3; z-index: 3;
} }
#collabo_footer_menu.hide{ #collabo_footer_menu.hide {
transition: .7s; transition: 0.7s;
} }
#collabo_footer_menu .footer_menu_btn{ #collabo_footer_menu .footer_menu_btn {
background-color: white; background-color: white;
border: 1px solid #7A7A7A; border: 1px solid #7a7a7a;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
width: 80px; width: 80px;
height: 40px; height: 40px;
...@@ -345,12 +367,12 @@ ...@@ -345,12 +367,12 @@
position: absolute; position: absolute;
bottom: 70px; bottom: 70px;
} }
#collabo_footer_menu .footer_menu_btn.hide{ #collabo_footer_menu .footer_menu_btn.hide {
background-image: url(../icon/icon_arrow_up.png); background-image: url(../icon/icon_arrow_up.png);
} }
#collabo_footer_menu .footer_menu-wrap { #collabo_footer_menu .footer_menu-wrap {
background: #1D1D1D; background: #1d1d1d;
height: 40px; height: 40px;
} }
#collabo_footer_menu .footer_menu_item .img_wrap { #collabo_footer_menu .footer_menu_item .img_wrap {
...@@ -371,11 +393,11 @@ ...@@ -371,11 +393,11 @@
color: #fff; color: #fff;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
#add_user_list .user_item_ttl{ #add_user_list .user_item_ttl {
font-size: 16px; font-size: 16px;
} }
#add_user_list .user_item_ttl{ #add_user_list .user_item_ttl {
font-size: 16px; font-size: 16px;
} }
#add_user_list .user_item_m { #add_user_list .user_item_m {
......
@charset "UTF-8"; @charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body{ body {
max-width: 1280px; max-width: 1280px;
font-family: 'Noto Sans JP', sans-serif; font-family: "Noto Sans JP", sans-serif;
margin: 0 auto; margin: 0 auto;
color: #323743; color: #323743;
margin-bottom: 60px; margin-bottom: 60px;
overflow-x: hidden; overflow-x: hidden;
} }
a:hover{ text-decoration: none; } a:hover {
.none{ display: none!important;} text-decoration: none;
}
.none {
display: none !important;
}
/**************************** nav *************************/ /**************************** nav *************************/
nav{ nav {
max-width: 1280px; max-width: 1280px;
height: 60px; height: 60px;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
border-bottom: 1px solid #CDCDCD; border-bottom: 1px solid #cdcdcd;
background: #fff; background: #fff;
z-index: 2; z-index: 2;
} }
main{ margin-top: 60px; } main {
.nav-item{ padding: 0 10px; } margin-top: 60px;
.nav-ttl{ }
.nav-item {
padding: 0 10px;
}
.nav-ttl {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
...@@ -33,34 +41,36 @@ main{ margin-top: 60px; } ...@@ -33,34 +41,36 @@ main{ margin-top: 60px; }
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.nav_prev a{ .nav_prev a {
color: #323743; color: #323743;
display: inline-block; display: inline-block;
} }
.nav_prev a:before{ .nav_prev a:before {
content: "\f053"; content: "\f053";
font: 16px FontAwesome; font: 16px FontAwesome;
color: #323743; color: #323743;
margin-right: 5px; margin-right: 5px;
} }
.fas.fa-chevron-left{ margin-right: 10px;} .fas.fa-chevron-left {
margin-right: 10px;
}
/**************************** search form *************************/ /**************************** search form *************************/
.search_form input { .search_form input {
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
border: 1px solid #BDBDBD; border: 1px solid #bdbdbd;
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin: 10px 0; margin: 10px 0;
padding-left: 35px; padding-left: 35px;
} }
.search_form{ .search_form {
position: relative; position: relative;
margin: 0 5px; margin: 0 5px;
} }
.search_form .src_icon{ .search_form .src_icon {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
...@@ -69,14 +79,15 @@ main{ margin-top: 60px; } ...@@ -69,14 +79,15 @@ main{ margin-top: 60px; }
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.chat_room_src_form.none{ .chat_room_src_form.none {
display: none!important; display: none !important;
} }
.search_form input.focus{ .search_form input.focus {
width: calc( 100% - 100px ); width: calc(100% - 100px);
} }
.search_form input:focus,.chat_room_src_form input:focus{ .search_form input:focus,
.chat_room_src_form input:focus {
border-color: #71a2ff; border-color: #71a2ff;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%); box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
...@@ -85,31 +96,51 @@ main{ margin-top: 60px; } ...@@ -85,31 +96,51 @@ main{ margin-top: 60px; }
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
color: #8F8F8F; color: #8f8f8f;
text-align: center; text-align: center;
} }
/**************************** color *************************/ /**************************** color *************************/
.bg_gray{ background: #f3f3f3; } .bg_gray {
.bg_blue{ background: #0070CA; } background: #f3f3f3;
.bg_navy{ background: #1D3557; } }
.bg_red{ background: #ff4747; } .bg_blue {
.bg_green{ background: #89E54D; } background: #0070ca;
.bg_white{ background: #fff;} }
.border_gray{ border:1px solid #dadce0; } .bg_navy {
.text_blue{ color: #0070CA; } background: #1d3557;
.text_white{ color: #fff; } }
.bg_red {
background: #ff4747;
}
.bg_green {
background: #89e54d;
}
.bg_white {
background: #fff;
}
.border_gray {
border: 1px solid #dadce0;
}
.text_blue {
color: #0070ca;
}
.text_white {
color: #fff;
}
/**************************** modal *************************/ /**************************** modal *************************/
/* プロフィールモーダル */ /* プロフィールモーダル */
.profile_modal .modal-footer button{ .profile_modal .modal-footer button {
color: #fff; color: #fff;
border-radius: 10px; border-radius: 10px;
min-width: 100px; min-width: 100px;
font-size: 14px; font-size: 14px;
} }
.profile_modal .modal-footer button img{ width: 30px; height: 30px; } .profile_modal .modal-footer button img {
width: 30px;
height: 30px;
}
.profile_modal .modal-body p { .profile_modal .modal-body p {
max-height: 200px; max-height: 200px;
overflow-y: scroll; overflow-y: scroll;
...@@ -119,26 +150,37 @@ main{ margin-top: 60px; } ...@@ -119,26 +150,37 @@ main{ margin-top: 60px; }
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
} }
.profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; } .profile_modal .modal-header,
.profile_modal .modal-footer button { width: 33%; padding: 5px;} .profile_modal .modal-body {
.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px;} padding-bottom: 0;
.profile_modal .modal-header .prifile_desc{ width: 100%;} }
.profile_modal .modal-footer button {
width: 33%;
padding: 5px;
}
.profile_modal.w_50 .modal-footer button {
width: 50%;
padding: 5px;
}
.profile_modal .modal-header .prifile_desc {
width: 100%;
}
.profile_modal .modal-header .prifile_name { .profile_modal .modal-header .prifile_name {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.profile_modal .modal-header .prifile_name span { .profile_modal .modal-header .prifile_name span {
line-height: 60px; line-height: 60px;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
/* navi */ /* navi */
.nav-ttl{ .nav-ttl {
font-size: 16px; font-size: 16px;
} }
.nav_prev a span{ .nav_prev a span {
font-size: 16px; font-size: 16px;
} }
/* search form */ /* search form */
......
@charset "UTF-8"; @charset "UTF-8";
.breadcrumb{ .breadcrumb {
margin-bottom: 0; margin-bottom: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
} }
.breadcrumb_item:not(:last-child):after { .breadcrumb_item:not(:last-child):after {
content: '>'; content: ">";
margin: 0 5px; margin: 0 5px;
} }
.breadcrumb_item { .breadcrumb_item {
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** footer *************************/ /**************************** footer *************************/
footer{ footer {
max-width: 1280px; max-width: 1280px;
background: #F9F9F9; background: #f9f9f9;
height: 70px; height: 70px;
margin-top: 20px; margin-top: 20px;
border-top: 1px solid #CCCCCC; border-top: 1px solid #cccccc;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
footer .footer-wrap{ footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
} }
footer .footer_item{ footer .footer_item {
text-align: center; text-align: center;
margin: auto 0; margin: auto 0;
} }
...@@ -23,7 +23,7 @@ footer .footer_item .unread_num { ...@@ -23,7 +23,7 @@ footer .footer_item .unread_num {
position: absolute; position: absolute;
top: -5px; top: -5px;
right: -3px; right: -3px;
background: #FF4747; background: #ff4747;
color: #fff; color: #fff;
padding: 0 7px; padding: 0 7px;
min-width: 20px; min-width: 20px;
...@@ -33,23 +33,23 @@ footer .footer_item .unread_num { ...@@ -33,23 +33,23 @@ footer .footer_item .unread_num {
border-radius: 15px; border-radius: 15px;
} }
footer .footer_item p{ footer .footer_item p {
font-size: 16px; font-size: 16px;
color: #707070; color: #707070;
font-weight: bold; font-weight: bold;
margin:0; margin: 0;
} }
footer .footer_item .active{ footer .footer_item .active {
color: #0070CA; color: #0070ca;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a{ footer .footer_item a {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
footer .footer_item p{ footer .footer_item p {
font-size: 12px; font-size: 12px;
} }
} }
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
height: 100%; height: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
background: rgb(255,255,255,0.5); background: rgb(255, 255, 255, 0.5);
z-index: 2; z-index: 2;
} }
#loader { #loader {
...@@ -24,6 +24,6 @@ ...@@ -24,6 +24,6 @@
color: #fff; color: #fff;
z-index: 999; z-index: 999;
} }
.fa.fa-circle-o-notch{ .fa.fa-circle-o-notch {
color: #707070; color: #707070;
} }
...@@ -24,4 +24,4 @@ ...@@ -24,4 +24,4 @@
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
\ No newline at end of file
$(function() { $(function () {
// アーカイブ検索 // アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){ $('#archive .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_archive_list.html', url: "search_message_archive_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
$(function() { $(function () {
// ルーム開設メンバー数カウント // ルーム開設メンバー数カウント
$('input:checkbox').change(function() { $("input:checkbox")
if($(this).prop('checked')){ .change(function () {
$(this).attr('checked', true); if ($(this).prop("checked")) {
}else{ $(this).attr("checked", true);
$(this).removeAttr('checked'); } else {
} $(this).removeAttr("checked");
}).trigger('change'); }
})
.trigger("change");
// チェックした人数カウント // チェックした人数カウント
$('input:checkbox').change(function() { $("input:checkbox")
var cnt = $('.checkbox input:checkbox:checked').length; .change(function () {
$('.select_member_num').text(cnt); var cnt = $(".checkbox input:checkbox:checked").length;
}).trigger('change'); $(".select_member_num").text(cnt);
})
.trigger("change");
// ルーム人数選択確認イベント // ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){ $(".make_room_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ルーム人数選択イベント // ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){ $(".make_room_confirm_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ユーザー追加確認イベント // ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){ $(".add_user_confirm_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ユーザー追加イベント // ユーザー追加イベント
$('.add_user_btn button').click(function(){ $(".add_user_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ルーム名変更イベント // ルーム名変更イベント
$('.change_room_name_btn button').click(function(){ $(".change_room_name_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// 検索アイコン押下イベント // 検索アイコン押下イベント
$('.nav_item_wrap .search_menu').click(function(){ $(".nav_item_wrap .search_menu").click(function () {
$('.nav_item_wrap').addClass('none'); $(".nav_item_wrap").addClass("none");
$('.chat_room_src_form').removeClass('none'); $(".chat_room_src_form").removeClass("none");
$('.room_container').addClass('none'); $(".room_container").addClass("none");
$('.overlay_src_msg').removeClass('none'); $(".overlay_src_msg").removeClass("none");
// フィルタ表示 // フィルタ表示
$('#filter').removeClass('none'); $("#filter").removeClass("none");
$('#user_list').addClass('none'); $("#user_list").addClass("none");
}); });
$('.chat_room_src_form .cancel').click(function(){ $(".chat_room_src_form .cancel").click(function () {
$('.nav_item_wrap').removeClass('none'); $(".nav_item_wrap").removeClass("none");
$('.chat_room_src_form').addClass('none'); $(".chat_room_src_form").addClass("none");
$('.chat_room_src_form input').val(''); $(".chat_room_src_form input").val("");
$('.room_container').removeClass('none'); $(".room_container").removeClass("none");
$('.overlay_src_msg').empty(); $(".overlay_src_msg").empty();
// ユーザーリスト表示 // ユーザーリスト表示
$('#filter').addClass('none'); $("#filter").addClass("none");
$('#user_list').removeClass('none'); $("#user_list").removeClass("none");
}); });
// フィルタ選択イベント // フィルタ選択イベント
$('#filter .img_wrap').click(function(){ $("#filter .img_wrap").click(function () {
// チェックアイコン追加 // チェックアイコン追加
$(this).toggleClass("filter"); $(this).toggleClass("filter");
}); });
// チャットメンバー検索 // チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){ $('#chat .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
// ルームメンバー検索 // ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('#chat_room .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
// ユーザー招待メンバー検索 // ユーザー招待メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){ $('#chat_add_user .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
// チャットルーム // チャットルーム
// メッセージ検索イベント // メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){ $('.chat_room_src_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message.html', url: "search_message.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
$(function() { $(function () {
// メニューオーバーレイ表示 // メニューオーバーレイ表示
$(".menu_btn").click(function() { $(".menu_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_menu.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'}); $(this).toggleClass("hide");
$('#collabo_main').toggleClass('noscroll'); $("#overlay_menu.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示 // 他のボタンを非表示
$('.user_btn').toggleClass('none'); $(".user_btn").toggleClass("none");
$('.add_user_btn').toggleClass('none'); $(".add_user_btn").toggleClass("none");
}); });
// ユーザーリストオーバーレイ表示 // ユーザーリストオーバーレイ表示
$(".user_btn").click(function() { $(".user_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_user_list.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'}); $(this).toggleClass("hide");
$('#collabo_main').toggleClass('noscroll'); $("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示 // 他のボタンを非表示
$('.add_user_btn').toggleClass('none'); $(".add_user_btn").toggleClass("none");
$('.menu_btn').toggleClass('none'); $(".menu_btn").toggleClass("none");
if($('#overlay_user_list.overlay').hasClass('noscroll')){
$('#overlay_user_list.overlay').removeClass('noscroll'); if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
}else{ $("#overlay_user_list.overlay").removeClass("noscroll");
$('#overlay_user_list.overlay').addClass('noscroll'); } else {
$("#overlay_user_list.overlay").addClass("noscroll");
} }
}); });
// フッターメニュー アコーディオン // フッターメニュー アコーディオン
$('.footer_menu_btn').click(function() { $(".footer_menu_btn").click(function () {
var h_active = $('#collabo_footer').height(); var h_active = $("#collabo_footer").height();
var h_hide = h_active - $('#collabo_footer_menu').height(); var h_hide = h_active - $("#collabo_footer_menu").height();
// 非アクティブ時 // 非アクティブ時
if($(this).hasClass('hide')){ if ($(this).hasClass("hide")) {
$(this).removeClass('hide'); $(this).removeClass("hide");
$('#collabo_footer_menu').css({'bottom': h_active }); $("#collabo_footer_menu").css({ bottom: h_active });
// アクティブ時 // アクティブ時
}else{ } else {
$(this).addClass('hide'); $(this).addClass("hide");
$('#collabo_footer_menu').css({'bottom': h_hide }); $("#collabo_footer_menu").css({ bottom: h_hide });
} }
}); });
// モーダルonモーダル(前のモーダルを非表示に) // モーダルonモーダル(前のモーダルを非表示に)
// ホスト変更ボタン押下イベント // ホスト変更ボタン押下イベント
$('.ch_host_btn').click(function() { $(".ch_host_btn").click(function () {
var target = $(this).val(); var target = $(this).val();
changeModal(target, 'changeHostModal'); changeModal(target, "changeHostModal");
}); });
/* モーダルの切り替え */ /* モーダルの切り替え */
function changeModal(beforeModal, afterModal) { function changeModal(beforeModal, afterModal) {
$(beforeModal).modal( 'hide' ); $(beforeModal).modal("hide");
$(afterModal).modal('show'); $(afterModal).modal("show");
} }
// 閉じるイベント // 閉じるイベント
$('.close_btn').click(function() { $(".close_btn").click(function () {
$('#overlay_add_user_list').addClass('none'); $("#overlay_add_user_list").addClass("none");
}); });
// ユーザー追加イベント // ユーザー追加イベント
$('.inv_btn').click(function() { $(".inv_btn").click(function () {
$('#overlay_add_user_list').addClass('none'); $("#overlay_add_user_list").addClass("none");
}); });
// ユーザー招待メンバー検索 // ユーザー招待メンバー検索
$('.add_user_btn').click(function(){ $(".add_user_btn").click(function () {
$('#overlay_add_user_list').removeClass('none'); $("#overlay_add_user_list").removeClass("none");
$.ajax({ $.ajax({
url: 'collaboration_overlay_add_user_list.html', url: "collaboration_overlay_add_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('#add_user_list').html(data); $("#add_user_list").html(data);
}) });
}); });
}); });
$(function() { $(function () {
var h = $(window).height(); //画面の高さを取得 var h = $(window).height(); //画面の高さを取得
// アコーディオン // アコーディオン
$('.category').click(function() { $(".category").click(function () {
$(this).toggleClass("open"); $(this).toggleClass("open");
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
// ローディング表示 // ローディング表示
$('footer a').click(function(event){ $("footer a").click(function (event) {
const a = $(this); const a = $(this);
event.preventDefault(); event.preventDefault();
$('#loader-bg ,#loader').height(h).css('display','block');//ローディング画像を表示 $("#loader-bg ,#loader").height(h).css("display", "block"); //ローディング画像を表示
setTimeout(function(){ setTimeout(function () {
window.location.href = a[0].href; window.location.href = a[0].href;
}, 1000); }, 1000);
}); });
// お気に入りボタン押下イベント // お気に入りボタン押下イベント
$('.star').click(function(){ $(".star").click(function () {
if($(this).hasClass('active')){ if ($(this).hasClass("active")) {
$(this).removeClass('active'); $(this).removeClass("active");
$(this).addClass('disable'); $(this).addClass("disable");
}else{ } else {
$(this).removeClass('disable'); $(this).removeClass("disable");
$(this).addClass('active'); $(this).addClass("active");
} }
}); });
// 共通検索フォーム キャンセルボタン表示 // 共通検索フォーム キャンセルボタン表示
$('.search_form input[type="search"]').click(function(){ $('.search_form input[type="search"]').click(function () {
$(this).addClass('focus'); $(this).addClass("focus");
// キャンセルボタン表示 // キャンセルボタン表示
$('.cancel').removeClass('none'); $(".cancel").removeClass("none");
$('.search_form form').addClass('d-flex flex-row h-100 align-items-center'); $(".search_form form").addClass("d-flex flex-row h-100 align-items-center");
$('.content').addClass('none'); $(".content").addClass("none");
}); });
// 共通検索フォーム キャンセルボタン押下イベント // 共通検索フォーム キャンセルボタン押下イベント
$('.search_form .cancel').click(function(){ $(".search_form .cancel").click(function () {
$(this).addClass('none'); $(this).addClass("none");
$('.search_form input').removeClass('focus'); $(".search_form input").removeClass("focus");
$('.search_form input').val(''); $(".search_form input").val("");
$('.search_form form').removeClass(); $(".search_form form").removeClass();
$('.content').removeClass('none'); $(".content").removeClass("none");
$('.overlay_src_msg').empty(); $(".overlay_src_msg").empty();
}); });
}); });
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
* Constant定義ファイル * Constant定義ファイル
*/ */
const readyState = { const readyState = {
UNINITIALIZED : 0 , UNINITIALIZED: 0,
LOADING : 1 , LOADING: 1,
LOADED : 2 , LOADED: 2,
INTERACTIVE : 3 , INTERACTIVE: 3,
COMPLETED : 4 COMPLETED: 4,
} };
const messageType = { const messageType = {
TEXT : 0 , TEXT: 0,
IMAGE : 1 , IMAGE: 1,
VIDEO : 2 , VIDEO: 2,
SYSTEM : 3 , SYSTEM: 3,
COMMUNICATION : 4 COMMUNICATION: 4,
} };
$(function() { $(function () {
// メンバー検索 // メンバー検索
$('#contact .search_form input[type="search"]').keyup(function(){ $('#contact .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
<!doctype html> <!doctype html>
<html lang="us"> <html lang="us">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Example Page</title> <title>jQuery UI Example Page</title>
<link href="jquery-ui.css" rel="stylesheet"> <link href="jquery-ui.css" rel="stylesheet">
<style> <style>
body{ body {
font-family: "Trebuchet MS", sans-serif; font-family: "Trebuchet MS", sans-serif;
margin: 50px; margin: 50px;
} }
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<div class="ui-widget"> .demoHeaders {
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p> margin-top: 2em;
</div> }
<h1>YOUR COMPONENTS:</h1> #dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
<!-- Button --> select {
<h2 class="demoHeaders">Button</h2> width: 200px;
<button id="button">A button element</button> }
<button id="button-icon">An icon-only button</button> </style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<!-- Checkboxradio --> <div class="ui-widget">
<h2 class="demoHeaders">Checkboxradio</h2> <p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using
<form style="margin-top: 1em;"> them with a compatible jQuery version.</p>
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div> </div>
</form>
<h1>YOUR COMPONENTS:</h1>
<!-- Button -->
<h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button>
<button id="button-icon">An icon-only button</button>
<!-- Checkboxradio -->
<h2 class="demoHeaders">Checkboxradio</h2>
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
<!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2>
<fieldset>
<legend>Rental Car</legend>
<div id="controlgroup">
<select id="car-type">
<option>Compact car</option>
<option>Midsize car</option>
<option>Full size car</option>
<option>SUV</option>
<option>Luxury</option>
<option>Truck</option>
<option>Van</option>
</select>
<label for="transmission-standard">Standard</label>
<input type="radio" name="transmission" id="transmission-standard">
<label for="transmission-automatic">Automatic</label>
<input type="radio" name="transmission" id="transmission-automatic">
<label for="insurance">Insurance</label>
<input type="checkbox" name="insurance" id="insurance">
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button>
</div>
</fieldset>
<h2 class="demoHeaders">Dialog</h2>
<p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button>
</p>
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;"
class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam
ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id,
sem. Morbi in orci. </p>
<p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam
feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo
vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
</p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam
ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id,
sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie
scelerisque quam. </p>
<p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus,
commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur
consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.
Aliquam ante. </p>
<p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem.
Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque
quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero
risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus
consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-widget-overlay ui-front"></div>
<div style="position: absolute; width: 320px; left: 50px; top: 30px; padding: 1.2em"
class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</div>
<!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2>
<fieldset>
<legend>Rental Car</legend>
<div id="controlgroup">
<select id="car-type">
<option>Compact car</option>
<option>Midsize car</option>
<option>Full size car</option>
<option>SUV</option>
<option>Luxury</option>
<option>Truck</option>
<option>Van</option>
</select>
<label for="transmission-standard">Standard</label>
<input type="radio" name="transmission" id="transmission-standard">
<label for="transmission-automatic">Automatic</label>
<input type="radio" name="transmission" id="transmission-automatic">
<label for="insurance">Insurance</label>
<input type="checkbox" name="insurance" id="insurance">
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button>
</div> </div>
</fieldset>
<h2 class="demoHeaders">Dialog</h2>
<p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button>
</p>
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog --> <!-- ui-dialog -->
<div class="ui-widget-overlay ui-front"></div> <div id="dialog" title="Dialog Title">
<div style="position: absolute; width: 320px; left: 50px; top: 30px; padding: 1.2em" class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
</div> </div>
</div> <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<!-- ui-dialog --> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span
<div id="dialog" title="Dialog Title"> class="ui-icon ui-icon-caret-1-n"></span></li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-ne"><span
</div> class="ui-icon ui-icon-caret-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-e"><span
class="ui-icon ui-icon-caret-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-se"><span
<h2 class="demoHeaders">Framework Icons (content color preview)</h2> class="ui-icon ui-icon-caret-1-se"></span></li>
<ul id="icons" class="ui-widget ui-helper-clearfix"> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span></li> class="ui-icon ui-icon-caret-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-ne"><span class="ui-icon ui-icon-caret-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-e"><span class="ui-icon ui-icon-caret-1-e"></span></li> class="ui-icon ui-icon-caret-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-se"><span class="ui-icon ui-icon-caret-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-s"><span class="ui-icon ui-icon-caret-1-s"></span></li> class="ui-icon ui-icon-caret-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-sw"><span class="ui-icon ui-icon-caret-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-w"><span class="ui-icon ui-icon-caret-1-w"></span></li> class="ui-icon ui-icon-caret-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-nw"><span class="ui-icon ui-icon-caret-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-n-s"><span class="ui-icon ui-icon-caret-2-n-s"></span></li> class="ui-icon ui-icon-caret-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-e-w"><span class="ui-icon ui-icon-caret-2-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li> class="ui-icon ui-icon-caret-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li> class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li> class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li> class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li> class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li> class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li> class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li> class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li> class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li> class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li> class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li> class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li> class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li> class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li> class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li> class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li> class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li> class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li> class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li> class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li> class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li> class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li> class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li> class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li> class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li> class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li> class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li> class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li> class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li> class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li> class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li> class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li> class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li> class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li> class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li> class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li> class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li> class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li> class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li> class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li> class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li> class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li> class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li> class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li> class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li> class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li> class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li> class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li> class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li> class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li> class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li> class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li> class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li> class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li> class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li> class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li> class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li> class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li> class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li> class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li> class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li> class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li> class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li> class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li> class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li> class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li> class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li> class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li> class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li> class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li> class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li> class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li> class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span>
</ul> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span
class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span
class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<!-- Highlight / Error --> <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<h2 class="demoHeaders">Highlight / Error</h2> <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span>
<div class="ui-widget"> </li>
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span
<strong>Hey!</strong> Sample ui-state-highlight style.</p> class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span
class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span
class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span
class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span
class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span
class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span
class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span
class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span
class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span
class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span
class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span
class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span
class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span
class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span
class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span
class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span
class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span
class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span
class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span
class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span
class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span
class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span
class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span
class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span
class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span
class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span
class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span
class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span
class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span
class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span
class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span
class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span
class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span
class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span
class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span
class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span
class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span
class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span
class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span
class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span
class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span
class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span
class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span
class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span
class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span
class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.
</p>
</div>
</div> </div>
</div> <br>
<br> <div class="ui-widget">
<div class="ui-widget"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> <strong>Alert:</strong> Sample ui-state-error style.
<strong>Alert:</strong> Sample ui-state-error style.</p> </p>
</div>
</div> </div>
</div>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#button" ).button();
$( "#button-icon" ).button({
icon: "ui-icon-gear",
showLabel: false
});
<script src="external/jquery/jquery.js"></script>
$( "#radioset" ).buttonset(); <script src="jquery-ui.js"></script>
<script>
$("#button").button();
$("#button-icon").button({
$( "#controlgroup" ).controlgroup(); icon: "ui-icon-gear",
showLabel: false
});
$("#radioset").buttonset();
$("#controlgroup").controlgroup();
$("#dialog").dialog({
$( "#dialog" ).dialog({ autoOpen: false,
autoOpen: false, width: 400,
width: 400, buttons: [
buttons: [ {
{ text: "Ok",
text: "Ok", click: function () {
click: function() { $(this).dialog("close");
$( this ).dialog( "close" ); }
} },
}, {
{ text: "Cancel",
text: "Cancel", click: function () {
click: function() { $(this).dialog("close");
$( this ).dialog( "close" ); }
}
]
});
// Link to open the dialog
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open");
event.preventDefault();
});
// Hover states on the static widgets
$("#dialog-link, #icons li").hover(
function () {
$(this).addClass("ui-state-hover");
},
function () {
$(this).removeClass("ui-state-hover");
} }
} );
] </script>
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
</script>
</body> </body>
</html>
</html>
\ No newline at end of file
//! moment.js locale configuration //! moment.js locale configuration
;(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' typeof exports === "object" &&
&& typeof require === 'function' ? factory(require('../moment')) : typeof module !== "undefined" &&
typeof define === 'function' && define.amd ? define(['../moment'], factory) : typeof require === "function"
factory(global.moment) ? factory(require("../moment"))
}(this, (function (moment) { 'use strict'; : typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ja = moment.defineLocale("ja", {
var ja = moment.defineLocale('ja', { months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), "_"
monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), ),
weekdays : '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'), monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
weekdaysShort : '日_月_火_水_木_金_土'.split('_'), "_"
weekdaysMin : '日_月_火_水_木_金_土'.split('_'), ),
longDateFormat : { weekdays: "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
LT : 'HH:mm', weekdaysShort: "日_月_火_水_木_金_土".split("_"),
LTS : 'HH:mm:ss', weekdaysMin: "日_月_火_水_木_金_土".split("_"),
L : 'YYYY/MM/DD', longDateFormat: {
LL : 'YYYY年M月D日', LT: "HH:mm",
LLL : 'YYYY年M月D日 HH:mm', LTS: "HH:mm:ss",
LLLL : 'YYYY年M月D日 dddd HH:mm', L: "YYYY/MM/DD",
l : 'YYYY/MM/DD', LL: "YYYY年M月D日",
ll : 'YYYY年M月D日', LLL: "YYYY年M月D日 HH:mm",
lll : 'YYYY年M月D日 HH:mm', LLLL: "YYYY年M月D日 dddd HH:mm",
llll : 'YYYY年M月D日(ddd) HH:mm' l: "YYYY/MM/DD",
}, ll: "YYYY年M月D日",
meridiemParse: /午前|午後/i, lll: "YYYY年M月D日 HH:mm",
isPM : function (input) { llll: "YYYY年M月D日(ddd) HH:mm",
return input === '午後'; },
}, meridiemParse: /午前|午後/i,
meridiem : function (hour, minute, isLower) { isPM: function (input) {
if (hour < 12) { return input === "午後";
return '午前'; },
} else { meridiem: function (hour, minute, isLower) {
return '午後'; if (hour < 12) {
} return "午前";
}, } else {
calendar : { return "午後";
sameDay : '[今日] LT', }
nextDay : '[明日] LT', },
nextWeek : function (now) { calendar: {
if (now.week() < this.week()) { sameDay: "[今日] LT",
return '[来週]dddd LT'; nextDay: "[明日] LT",
} else { nextWeek: function (now) {
return 'dddd LT'; if (now.week() < this.week()) {
} return "[来週]dddd LT";
}, } else {
lastDay : '[昨日] LT', return "dddd LT";
lastWeek : function (now) {
if (this.week() < now.week()) {
return '[先週]dddd LT';
} else {
return 'dddd LT';
}
},
sameElse : 'L'
},
dayOfMonthOrdinalParse : /\d{1,2}日/,
ordinal : function (number, period) {
switch (period) {
case 'd':
case 'D':
case 'DDD':
return number + '日';
default:
return number;
}
},
relativeTime : {
future : '%s後',
past : '%s前',
s : '数秒',
ss : '%d秒',
m : '1分',
mm : '%d分',
h : '1時間',
hh : '%d時間',
d : '1日',
dd : '%d日',
M : '1ヶ月',
MM : '%dヶ月',
y : '1年',
yy : '%d年'
} }
}); },
lastDay: "[昨日] LT",
return ja; lastWeek: function (now) {
if (this.week() < now.week()) {
return "[先週]dddd LT";
} else {
return "dddd LT";
}
},
sameElse: "L",
},
dayOfMonthOrdinalParse: /\d{1,2}日/,
ordinal: function (number, period) {
switch (period) {
case "d":
case "D":
case "DDD":
return number + "日";
default:
return number;
}
},
relativeTime: {
future: "%s後",
past: "%s前",
s: "数秒",
ss: "%d秒",
m: "1分",
mm: "%d分",
h: "1時間",
hh: "%d時間",
d: "1日",
dd: "%d日",
M: "1ヶ月",
MM: "%dヶ月",
y: "1年",
yy: "%d年",
},
});
}))); return ja;
});
//! moment.js locale configuration //! moment.js locale configuration
;(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' typeof exports === "object" &&
&& typeof require === 'function' ? factory(require('../moment')) : typeof module !== "undefined" &&
typeof define === 'function' && define.amd ? define(['../moment'], factory) : typeof require === "function"
factory(global.moment) ? factory(require("../moment"))
}(this, (function (moment) { 'use strict'; : typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ko = moment.defineLocale("ko", {
months: "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
monthsShort: "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split(
"_"
),
weekdays: "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
weekdaysShort: "일_월_화_수_목_금_토".split("_"),
weekdaysMin: "일_월_화_수_목_금_토".split("_"),
longDateFormat: {
LT: "A h:mm",
LTS: "A h:mm:ss",
L: "YYYY.MM.DD.",
LL: "YYYY년 MMMM D일",
LLL: "YYYY년 MMMM D일 A h:mm",
LLLL: "YYYY년 MMMM D일 dddd A h:mm",
l: "YYYY.MM.DD.",
ll: "YYYY년 MMMM D일",
lll: "YYYY년 MMMM D일 A h:mm",
llll: "YYYY년 MMMM D일 dddd A h:mm",
},
calendar: {
sameDay: "오늘 LT",
nextDay: "내일 LT",
nextWeek: "dddd LT",
lastDay: "어제 LT",
lastWeek: "지난주 dddd LT",
sameElse: "L",
},
relativeTime: {
future: "%s 후",
past: "%s 전",
s: "몇 초",
ss: "%d초",
m: "1분",
mm: "%d분",
h: "한 시간",
hh: "%d시간",
d: "하루",
dd: "%d일",
M: "한 달",
MM: "%d달",
y: "일 년",
yy: "%d년",
},
dayOfMonthOrdinalParse: /\d{1,2}(일|월|주)/,
ordinal: function (number, period) {
switch (period) {
case "d":
case "D":
case "DDD":
return number + "일";
case "M":
return number + "월";
case "w":
case "W":
return number + "주";
default:
return number;
}
},
meridiemParse: /오전|오후/,
isPM: function (token) {
return token === "오후";
},
meridiem: function (hour, minute, isUpper) {
return hour < 12 ? "오전" : "오후";
},
});
var ko = moment.defineLocale('ko', { return ko;
months : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'), });
monthsShort : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
weekdays : '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
weekdaysShort : '일_월_화_수_목_금_토'.split('_'),
weekdaysMin : '일_월_화_수_목_금_토'.split('_'),
longDateFormat : {
LT : 'A h:mm',
LTS : 'A h:mm:ss',
L : 'YYYY.MM.DD.',
LL : 'YYYY년 MMMM D일',
LLL : 'YYYY년 MMMM D일 A h:mm',
LLLL : 'YYYY년 MMMM D일 dddd A h:mm',
l : 'YYYY.MM.DD.',
ll : 'YYYY년 MMMM D일',
lll : 'YYYY년 MMMM D일 A h:mm',
llll : 'YYYY년 MMMM D일 dddd A h:mm'
},
calendar : {
sameDay : '오늘 LT',
nextDay : '내일 LT',
nextWeek : 'dddd LT',
lastDay : '어제 LT',
lastWeek : '지난주 dddd LT',
sameElse : 'L'
},
relativeTime : {
future : '%s 후',
past : '%s 전',
s : '몇 초',
ss : '%d초',
m : '1분',
mm : '%d분',
h : '한 시간',
hh : '%d시간',
d : '하루',
dd : '%d일',
M : '한 달',
MM : '%d달',
y : '일 년',
yy : '%d년'
},
dayOfMonthOrdinalParse : /\d{1,2}(일|월|주)/,
ordinal : function (number, period) {
switch (period) {
case 'd':
case 'D':
case 'DDD':
return number + '일';
case 'M':
return number + '월';
case 'w':
case 'W':
return number + '주';
default:
return number;
}
},
meridiemParse : /오전|오후/,
isPM : function (token) {
return token === '오후';
},
meridiem : function (hour, minute, isUpper) {
return hour < 12 ? '오전' : '오후';
}
});
return ko;
})));
$(window).load(function () {
$(window).load(function () { //読み込み完了したら実行する //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す $("#loader-bg").delay(900).fadeOut(800); //ローディングを隠す
$('#loader').delay(600).fadeOut(300); $("#loader").delay(600).fadeOut(300);
}); });
$(function(){ $(function () {
setTimeout('stopload()',3000); //いつまでもローディング状態にならないように10秒で強制表示させる setTimeout("stopload()", 3000); //いつまでもローディング状態にならないように10秒で強制表示させる
}); });
function stopload(){ //強制表示の関数 function stopload() {
$('#loader-bg').delay(900).fadeOut(800); //強制表示の関数
$('#loader').delay(600).fadeOut(300); $("#loader-bg").delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
} }
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
<div id="loader"> <div id="loader">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade menu_modal" id="menuModalCenter" tabindex="-1" role="dialog" aria-labelledby="menuModalCenterTitle" aria-hidden="true"> <div class="modal fade menu_modal" id="menuModalCenter" tabindex="-1" role="dialog"
aria-labelledby="menuModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -9,10 +10,11 @@ ...@@ -9,10 +10,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul> <ul>
<li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li> <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
</li>
<li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li> <li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1" aria-hidden="true"> <div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -11,7 +12,9 @@ ...@@ -11,7 +12,9 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p> <p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy"> <button type="button" class="border-0 bg_navy">
...@@ -41,4 +44,4 @@ ...@@ -41,4 +44,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade capture_modal" id="captyaModal" tabindex="-1" role="dialog" aria-labelledby="captyaModal" aria-hidden="true"> <div class="modal fade capture_modal" id="captyaModal" tabindex="-1" role="dialog" aria-labelledby="captyaModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<p>filename.jpg</p> <p>filename.jpg</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
...@@ -29,4 +31,4 @@ ...@@ -29,4 +31,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade change_host_modal" id="changeHostModal" tabindex="-1" role="dialog" aria-labelledby="changeHostModal" aria-hidden="true"> <div class="modal fade change_host_modal" id="changeHostModal" tabindex="-1" role="dialog"
aria-labelledby="changeHostModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -8,7 +9,8 @@ ...@@ -8,7 +9,8 @@
<p>ホスト権限を引き渡します</p> <p>ホスト権限を引き渡します</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
...@@ -21,4 +23,4 @@ ...@@ -21,4 +23,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade change_host_modal" id="hostRequestModal" tabindex="-1" role="dialog" aria-labelledby="hostRequestModal" aria-hidden="true"> <div class="modal fade change_host_modal" id="hostRequestModal" tabindex="-1" role="dialog"
aria-labelledby="hostRequestModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -8,7 +9,8 @@ ...@@ -8,7 +9,8 @@
<p>ホスト権限のリクエストを行います</p> <p>ホスト権限のリクエストを行います</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
...@@ -21,4 +23,4 @@ ...@@ -21,4 +23,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade profile_modal w_50" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1" aria-hidden="true"> <div class="modal fade profile_modal w_50" id="profileModal1" tabindex="-1" role="dialog"
aria-labelledby="profileModal1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -11,7 +12,9 @@ ...@@ -11,7 +12,9 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p> <p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy text_white"> <button type="button" class="border-0 bg_navy text_white">
...@@ -22,7 +25,8 @@ ...@@ -22,7 +25,8 @@
<span>お気に入り解除</span> <span>お気に入り解除</span>
</div> </div>
</button> </button>
<button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal" data-target="#changeHostModal" value="#profileModal1"> <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal"
data-target="#changeHostModal" value="#profileModal1">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更"> <img src="icon/icon_change_host.png" alt="ホスト変更">
...@@ -33,4 +37,4 @@ ...@@ -33,4 +37,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<div class="modal fade profile_modal w_50" id="profileModal2" tabindex="-1" role="dialog" aria-labelledby="profileModal2" aria-hidden="true"> <div class="modal fade profile_modal w_50" id="profileModal2" tabindex="-1" role="dialog"
aria-labelledby="profileModal2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -22,7 +23,8 @@ ...@@ -22,7 +23,8 @@
<span>お気に入り解除</span> <span>お気に入り解除</span>
</div> </div>
</button> </button>
<button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal" data-target="#hostRequestModal" value="#profileModal2"> <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal"
data-target="#hostRequestModal" value="#profileModal2">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更"> <img src="icon/icon_change_host.png" alt="ホスト変更">
...@@ -33,4 +35,4 @@ ...@@ -33,4 +35,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -73,4 +73,4 @@ ...@@ -73,4 +73,4 @@
</div> </div>
</div> </div>
</a> </a>
</li> </li>
\ No newline at end of file
<li class="d-flex align-items-center">
<li class="d-flex align-items-center"> <a href="#" class="w-100">
<a href="#" class="w-100"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item_l">
<div class="chat_item_l"> <div class="thubnail">
<div class="thubnail"> <div class="img_wrap"><img src="img/thumbnail.png" /></div>
<div class="img_wrap"><img src="img/thumbnail.png"/></div> </div>
</div> </div>
</div> <div class="chat_item_m px-0">
<div class="chat_item_m px-0"> <div class="d-flex flex-column">
<div class="d-flex flex-column"> <div class="chat_item_t">
<div class="chat_item_t"> <span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div> </div>
<div class="chat_item_r"> <div class="chat_item_desc">
<div class="d-flex flex-column"> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
<span class="chat_item_time">3:25AM</span>
</div>
</div> </div>
</div> </div>
</a> </div>
</li> <div class="chat_item_r">
<li class="d-flex align-items-center"> <div class="d-flex flex-column">
<a href="#" class="w-100"> <span class="chat_item_time">3:25AM</span>
<div class="chat_item d-flex flex-row align-items-center"> </div>
<div class="chat_item_l"> </div>
<div class="thubnail"> </div>
<div class="img_wrap"><img src="img/thumbnail.png"/></div> </a>
</div> </li>
</div> <li class="d-flex align-items-center">
<div class="chat_item_m px-0"> <a href="#" class="w-100">
<div class="d-flex flex-column"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_t"> <div class="chat_item_l">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span> <div class="thubnail">
</div> <div class="img_wrap"><img src="img/thumbnail.png" /></div>
<div class="chat_item_desc"> </div>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 </div>
</div> <div class="chat_item_m px-0">
</div> <div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div> </div>
<div class="chat_item_r"> <div class="chat_item_desc">
<div class="d-flex flex-column"> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
<span class="chat_item_time">3:25AM</span>
</div>
</div> </div>
</div> </div>
</a> </div>
</li> <div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
...@@ -16,4 +16,4 @@ ...@@ -16,4 +16,4 @@
</div> </div>
</a> </a>
</div> </div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment