Skip to content

C
chat_webview
Commit 445a7c33 by 藤川諒
Options

プロフィールモーダルUI変更

parent 976f40c4
Showing with 49 additions and 57 deletions
public_new/css/chat.css
...@@ -259,24 +259,6 @@ input[name="tab_item"] { ...@@ -259,24 +259,6 @@ input[name="tab_item"] {
font: 25px FontAwesome; font: 25px FontAwesome;
} }
/* お気に入り */
.star.active:before {
content: "\f005";
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
padding: 20px;
}
.star.disable:before {
content: "\f005";
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #707070;
padding: 20px;
}
/* メンバー選択チェックボックス */ /* メンバー選択チェックボックス */
.chat_item_l_chk { .chat_item_l_chk {
height: 100%; height: 100%;
...@@ -785,24 +767,14 @@ input[name="tab_item"] { ...@@ -785,24 +767,14 @@ input[name="tab_item"] {
/**************************** modal *************************/ /**************************** modal *************************/
/* メニューモーダル */ /* メニューモーダル */
.modal-backdrop{
background-color: #F9F9F9;
}
.modal-backdrop.show{
opacity: 0.95;
}
.menu_modal .modal-dialog{ .menu_modal .modal-dialog{
max-width: 100%!important; max-width: 100%!important;
} }
.profile_modal .modal-content{
border:none!important;
background-color:transparent!important;
}
.menu_modal .modal-content{ .menu_modal .modal-content{
border:none!important; border:none!important;
background-color:transparent!important; background-color:transparent!important;
} }
.modal-content-wrap { .menu_modal .modal-content-wrap {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
pointer-events: auto; pointer-events: auto;
...@@ -811,7 +783,6 @@ input[name="tab_item"] { ...@@ -811,7 +783,6 @@ input[name="tab_item"] {
padding: 0.8rem 0.8rem!important; padding: 0.8rem 0.8rem!important;
margin: 0!important; margin: 0!important;
} }
.profile_modal button.close,
.menu_modal button.close{ .menu_modal button.close{
position: fixed; position: fixed;
top: 30px; top: 30px;
...@@ -822,7 +793,6 @@ input[name="tab_item"] { ...@@ -822,7 +793,6 @@ input[name="tab_item"] {
opacity: 0; opacity: 0;
animation: fadein .5s ease forwards; animation: fadein .5s ease forwards;
} }
.profile_modal .close,
.menu_modal .close{ .menu_modal .close{
color: #707070; color: #707070;
opacity: 1!important; opacity: 1!important;
...@@ -871,10 +841,6 @@ input[name="tab_item"] { ...@@ -871,10 +841,6 @@ input[name="tab_item"] {
opacity: 0; opacity: 0;
animation: fadein 1.5s ease forwards; animation: fadein 1.5s ease forwards;
} }
.profile_modal .modal-content.item01{
opacity: 0;
animation: fadein .5s ease forwards;
}
@keyframes fadein{ @keyframes fadein{
0%{ 0%{
opacity: 0; opacity: 0;
......
public_new/css/common.css
...@@ -138,6 +138,13 @@ main { ...@@ -138,6 +138,13 @@ main {
} }
/**************************** modal *************************/ /**************************** modal *************************/
/* 共通設定 */
.modal-backdrop{
background-color: #F9F9F9;
}
.modal-backdrop.show{
opacity: 0.95;
}
/* プロフィールモーダル */ /* プロフィールモーダル */
.profile_modal .modal-footer button { .profile_modal .modal-footer button {
color: #707070; color: #707070;
...@@ -203,6 +210,25 @@ main { ...@@ -203,6 +210,25 @@ main {
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
} }
/* お気に入り */
.star.active:before {
content: "\f005";
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
padding: 20px;
}
.star.disable:before {
content: "\f005";
font: 30px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #707070;
padding: 20px;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
/* navi */ /* navi */
.nav-ttl { .nav-ttl {
......
public_new/modal_chat_profile.html
<div class="modal profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1" <div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
aria-hidden="true"> 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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
<div class="profile_desc d-flex flex-row"> <div class="profile_desc d-flex flex-row">
<img src="img/noImage.svg" alt="プロフィール画像"> <img src="img/noImage.svg" alt="プロフィール画像">
<div class="prifile_name"><span>名前　名前</span></div> <div class="prifile_name"><span>名前　名前</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
......
public_new/modal_collabo_profile.html
<div class="modal profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog" <div class="modal fade profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog"
aria-labelledby="userNameCardInCollaboration" aria-hidden="true"> aria-labelledby="userNameCardInCollaboration" 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-wrap d-flex align-items-center"> <div class="modal-content-wrap d-flex align-items-center m-auto">
<div class="modal-content item01"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
<div class="profile_desc_ d-flex flex-row"> <div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /> <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div> <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{#groupPathList}} {{#groupPathList}}
......
public_new/template/template_my_name_card.html
<div class="modal profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true"> <div class="modal fade profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" 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-wrap d-flex align-items-center"> <div class="modal-content-wrap d-flex align-items-center m-auto">
<div class="modal-content item01"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
<div class="profile_desc d-flex flex-row"> <div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"> <img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div> <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{#groupPathList}} {{#groupPathList}}
......
public_new/template/template_user_name_card.html
<div class="modal profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard" <div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
aria-hidden="true"> 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-wrap d-flex align-items-center"> <div class="modal-content-wrap d-flex align-items-center m-auto">
<div class="modal-content item01"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
<div class="profile_desc_ d-flex flex-row"> <div class="profile_desc_ d-flex flex-row">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /> <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
<div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div> <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="font-size:40px;">&times;</span>
</button>
</div> </div>
<div class="modal-body" id="userNameCard-scroll"> <div class="modal-body" id="userNameCard-scroll">
{{#groupPathList}} {{#groupPathList}}
......
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