base layout ok
This commit is contained in:
@@ -9,10 +9,11 @@
|
||||
<body>
|
||||
|
||||
<br><br><button onclick="layout(this.innerText)">close</button>
|
||||
<br><br><button onclick="layout(this.innerText)">home</button>
|
||||
<br><br><button onclick="layout(this.innerText)">room</button>
|
||||
<br><br><button onclick="layout(this.innerText)">new</button>
|
||||
<br><br><button onclick="layout(this.innerText)">settings</button>
|
||||
<br><br><button onclick="layout(this.innerText)">room_settings</button>
|
||||
<br><br><button onclick="layout(this.innerText)">room_set</button>
|
||||
<br><br><button onclick="layout(this.innerText)">protected</button>
|
||||
<br><br><button onclick="layout(this.innerText)">create</button>
|
||||
<br><br><button onclick="layout(this.innerText)">user</button>
|
||||
@@ -20,14 +21,14 @@
|
||||
|
||||
<div class="close" id="chat_box">
|
||||
|
||||
<button class="chat_item" id="chat_chat" onclick="layout('open')" >chat</button>
|
||||
<button class="chat_item" id="chat_close" onclick="layout('close')" >new</button>
|
||||
<button class="chat_item" id="chat_chat" onclick="layout('home')" >chat</button>
|
||||
<button class="chat_item" id="chat_close" onclick="layout('close')" ></button>
|
||||
<button class="chat_item" id="chat_new" onclick="layout('new')" >new</button>
|
||||
<button class="chat_item" id="chat_settings" onclick="layout('settings')" >settings</button>
|
||||
<button class="chat_item" id="chat_room_name" onclick="layout('room_settings')" >placeholder</button>
|
||||
<button class="chat_item" id="chat_room_name" onclick="layout('room_set')" >placeholder</button>
|
||||
<button class="chat_item" id="chat_send" onclick="send_msg()" >send</button>
|
||||
<p class="chat_item" id="chat_create" >create</p>
|
||||
<p class="chat_item" id="chat_user_name" >placeholder</p>
|
||||
<p class="chat_item" id="chat_user" >placeholder</p>
|
||||
<div class="chat_item" id="chat_msg_thread" ><!-- messages go there --></div>
|
||||
<div class="chat_item" id="chat_write" contenteditable ><!-- write message here --></div>
|
||||
<button class="chat_item chat_back" id="chat_back_home" onclick="layout('home')" ></button>
|
||||
@@ -68,7 +69,7 @@
|
||||
<!-- content -->
|
||||
panel settings
|
||||
</div>
|
||||
<div class="chat_item chat_panel" id="chat_panel_room_settings">
|
||||
<div class="chat_item chat_panel" id="chat_panel_room_set">
|
||||
<!-- content -->
|
||||
panel room settings
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,15 @@
|
||||
|
||||
@import 'chat_buttons.css';
|
||||
@import 'layout_close.css';
|
||||
@import 'layout_home.css';
|
||||
@import 'layout_room.css';
|
||||
@import 'layout_new.css';
|
||||
@import 'layout_settings.css';
|
||||
@import 'layout_room_set.css';
|
||||
@import 'layout_protected.css';
|
||||
@import 'layout_create.css';
|
||||
@import 'layout_user.css';
|
||||
@import 'layout_mute.css';
|
||||
|
||||
|
||||
/* vanish elements wihtout display:none;
|
||||
@@ -44,33 +53,35 @@ input.vanish {
|
||||
#chat_box .chat_item {
|
||||
display: none;
|
||||
/*
|
||||
border: 1px solid black;
|
||||
*/
|
||||
border: 1px solid black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat_item#chat_chat { grid-area: chat;}
|
||||
.chat_item#chat_close { grid-area: close;}
|
||||
.chat_item#chat_new { grid-area: new;}
|
||||
.chat_item#chat_settings { grid-area: settings;}
|
||||
.chat_item#chat_room_name { grid-area: room_name;}
|
||||
.chat_item#chat_send { grid-area: send;}
|
||||
.chat_item#chat_create { grid-area: create;}
|
||||
.chat_item#chat_user_name { grid-area: user_name;}
|
||||
.chat_item#chat_msg_thread { grid-area: msg_thread;}
|
||||
.chat_item#chat_write { grid-area: write;}
|
||||
.chat_item#chat_back_home { grid-area: back_home;}
|
||||
.chat_item#chat_back_room { grid-area: back_room;}
|
||||
.chat_item#chat_back_new { grid-area: back_new;}
|
||||
.chat_item#chat_back_user { grid-area: back_user;}
|
||||
.chat_item#chat_panel_home { grid-area: panel_home;}
|
||||
.chat_item#chat_panel_room { grid-area: panel_room;}
|
||||
.chat_item#chat_panel_new { grid-area: panel_new;}
|
||||
.chat_item#chat_panel_settings { grid-area: panel_settings;}
|
||||
.chat_item#chat_panel_room_settings { grid-area: panel_room_settings;}
|
||||
.chat_item#chat_panel_protected { grid-area: panel_protected;}
|
||||
.chat_item#chat_panel_create { grid-area: panel_create;}
|
||||
.chat_item#chat_panel_user { grid-area: panel_user;}
|
||||
.chat_item#chat_panel_mute { grid-area: panel_mute;}
|
||||
.chat_item#chat_chat { grid-area: chat;}
|
||||
.chat_item#chat_close { grid-area: close;}
|
||||
.chat_item#chat_new { grid-area: new;}
|
||||
.chat_item#chat_settings { grid-area: settings;}
|
||||
.chat_item#chat_room_name { grid-area: room_name;}
|
||||
.chat_item#chat_send { grid-area: send;}
|
||||
.chat_item#chat_create { grid-area: create;}
|
||||
.chat_item#chat_user { grid-area: user;}
|
||||
.chat_item#chat_msg_thread { grid-area: msg_thread;}
|
||||
.chat_item#chat_write { grid-area: write;}
|
||||
.chat_item#chat_back_home { grid-area: back_home;}
|
||||
.chat_item#chat_back_room { grid-area: back_room;}
|
||||
.chat_item#chat_back_new { grid-area: back_new;}
|
||||
.chat_item#chat_back_user { grid-area: back_user;}
|
||||
.chat_item#chat_panel_home { grid-area: panel_home;}
|
||||
.chat_item#chat_panel_room { grid-area: panel_room;}
|
||||
.chat_item#chat_panel_new { grid-area: panel_new;}
|
||||
.chat_item#chat_panel_settings { grid-area: panel_settings;}
|
||||
.chat_item#chat_panel_room_set { grid-area: panel_room_set;}
|
||||
.chat_item#chat_panel_protected { grid-area: panel_protected;}
|
||||
.chat_item#chat_panel_create { grid-area: panel_create;}
|
||||
.chat_item#chat_panel_user { grid-area: panel_user;}
|
||||
.chat_item#chat_panel_mute { grid-area: panel_mute;}
|
||||
|
||||
#chat_box {
|
||||
position: fixed;
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
|
||||
/*
|
||||
* BUTTONS
|
||||
*/
|
||||
|
||||
#chat_box button {
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
||||
@@ -1,17 +1,4 @@
|
||||
|
||||
/*
|
||||
grid:
|
||||
' controls close ' auto
|
||||
' main_window main_window ' 1fr
|
||||
' msg_write msg_send ' auto
|
||||
/ 1fr auto;
|
||||
|
||||
#chat_box.close {
|
||||
grid:
|
||||
' close ' auto
|
||||
/ auto;
|
||||
}
|
||||
*/
|
||||
#chat_box.close {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
@@ -19,7 +6,7 @@
|
||||
height: auto;
|
||||
grid:
|
||||
' chat ' auto
|
||||
/ auto;
|
||||
/ auto ;
|
||||
}
|
||||
#chat_box.close .chat_item#chat_chat {
|
||||
display: flex;
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_create.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_create.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.create {
|
||||
grid:
|
||||
' back_new create close ' auto
|
||||
' panel_create panel_create panel_create ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.create .chat_item#chat_back_new,
|
||||
#chat_box.create .chat_item#chat_create,
|
||||
#chat_box.create .chat_item#chat_close,
|
||||
#chat_box.create .chat_item#chat_panel_create {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_home.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_home.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.home {
|
||||
grid:
|
||||
' settings new close ' auto
|
||||
' panel_home panel_home panel_home ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.home .chat_item#chat_settings,
|
||||
#chat_box.home .chat_item#chat_new,
|
||||
#chat_box.home .chat_item#chat_close,
|
||||
#chat_box.home .chat_item#chat_panel_home {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_mute.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_mute.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.mute {
|
||||
grid:
|
||||
' back_user user close ' auto
|
||||
' panel_mute panel_mute panel_mute ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.mute .chat_item#chat_back_user,
|
||||
#chat_box.mute .chat_item#chat_user,
|
||||
#chat_box.mute .chat_item#chat_close,
|
||||
#chat_box.mute .chat_item#chat_panel_mute {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_new.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_new.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.new {
|
||||
grid:
|
||||
' back_home new close ' auto
|
||||
' panel_new panel_new panel_new ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.new .chat_item#chat_back_home,
|
||||
#chat_box.new .chat_item#chat_new,
|
||||
#chat_box.new .chat_item#chat_close,
|
||||
#chat_box.new .chat_item#chat_panel_new {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_protected.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_protected.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.protected {
|
||||
grid:
|
||||
' back_new room_name close ' auto
|
||||
' panel_protected panel_protected panel_protected ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.protected .chat_item#chat_back_new,
|
||||
#chat_box.protected .chat_item#chat_room_name,
|
||||
#chat_box.protected .chat_item#chat_close,
|
||||
#chat_box.protected .chat_item#chat_panel_protected {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
17
tests_hugo/chat_node/chat_client/style/layout_room.css
Normal file
17
tests_hugo/chat_node/chat_client/style/layout_room.css
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
#chat_box.room {
|
||||
grid:
|
||||
' back_home room_name close ' auto
|
||||
' msg_thread msg_thread msg_thread ' 1fr
|
||||
' write write send ' auto
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.room .chat_item#chat_back_home,
|
||||
#chat_box.room .chat_item#chat_room_name,
|
||||
#chat_box.room .chat_item#chat_close,
|
||||
#chat_box.room .chat_item#chat_msg_thread,
|
||||
#chat_box.room .chat_item#chat_send,
|
||||
#chat_box.room .chat_item#chat_write {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_room_set.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_room_set.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.room_set {
|
||||
grid:
|
||||
' back_room room_name close ' auto
|
||||
' panel_room_set panel_room_set panel_room_set ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.room_set .chat_item#chat_back_room,
|
||||
#chat_box.room_set .chat_item#chat_room_name,
|
||||
#chat_box.room_set .chat_item#chat_close,
|
||||
#chat_box.room_set .chat_item#chat_panel_room_set {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_settings.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_settings.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.settings {
|
||||
grid:
|
||||
' back_home settings close ' auto
|
||||
' panel_settings panel_settings panel_settings ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.settings .chat_item#chat_back_home,
|
||||
#chat_box.settings .chat_item#chat_settings,
|
||||
#chat_box.settings .chat_item#chat_close,
|
||||
#chat_box.settings .chat_item#chat_panel_settings {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
14
tests_hugo/chat_node/chat_client/style/layout_user.css
Normal file
14
tests_hugo/chat_node/chat_client/style/layout_user.css
Normal file
@@ -0,0 +1,14 @@
|
||||
|
||||
#chat_box.user {
|
||||
grid:
|
||||
' back_room user close ' auto
|
||||
' panel_user panel_user panel_user ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.user .chat_item#chat_back_room,
|
||||
#chat_box.user .chat_item#chat_user,
|
||||
#chat_box.user .chat_item#chat_close,
|
||||
#chat_box.user .chat_item#chat_panel_user {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user