hemna/aprsd
1
0
Fork 0
mirror of https://github.com/craigerl/aprsd.git synced 2025-08-03 14:02:26 -04:00
Code Issues Projects Releases Wiki Activity

Webchat: tweaks to UI for expanding chat

Browse Source 
This patch changes the layout containers a bit.  Moved the tabs to the
header section and made the tab contents fill the rest of the height of
the browser and it is the only portion that scrolls.
This commit is contained in:
Hemna 2023-09-15 11:34:38 -04:00
parent f770c5ffd5
commit b393060edb
4 changed files with 78 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
aprsd/web/chat/static/css/chat.css
View File

@ -3,11 +3,8 @@ input[type=search]::-webkit-search-cancel-button {
} }
.speech-wrapper { .speech-wrapper {
padding-top: 0px;
padding: 5px 30px; padding: 5px 30px;
border: 1px solid #ccc;
height: 450px;
overflow-y: scroll;
overflow-x: none;
background-color: #CCCCCC; background-color: #CCCCCC;
} }
@ -42,7 +39,7 @@ input[type=search]::-webkit-search-cancel-button {
width: 280px; width: 280px;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
margin: 0 0 4px; margin: 0 0 0px;
color: #3498db; color: #3498db;
display: flex; display: flex;
align-items: center; align-items: center;
@ -66,8 +63,9 @@ input[type=search]::-webkit-search-cancel-button {
.bubble-message { .bubble-message {
font-size: 16px; font-size: 16px;
margin: 0px; margin: 0px;
padding: 0px 5px 5px 0px; padding: 0px 0px 0px 0px;
color: #2b2b2b; color: #2b2b2b;
text-align: left;
} }
.bubble-arrow { .bubble-arrow {

33
aprsd/web/chat/static/css/index.css
View File

@ -1,14 +1,9 @@
body { body {
background: #eeeeee; background: #eeeeee;
margin: 1em; /*margin: 1em;*/
text-align: center; text-align: center;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} height: 100%;
footer {
padding: 2em;
text-align: center;
height: 10vh;
} }
#title { #title {
@ -45,3 +40,27 @@ footer {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.wc-container {
display: flex;
flex-flow: column;
height: 100%;
}
.wc-container .wc-row {
/*border: 1px dotted #0313fc;*/
padding: 2px;
}
.wc-container .wc-row.header {
flex: 0 1 auto;
}
.wc-container .wc-row.content {
flex: 1 1 auto;
overflow-y: auto;
}
.wc-container .wc-row.footer {
flex: 0 1 0px;
}
.material-symbols-rounded.md-10 {
font-size: 18px !important;
}

4
aprsd/web/chat/static/js/send-message.js
View File

@ -178,7 +178,7 @@ function create_callsign_tab(callsign, active=false) {
} }
item_html = '<li class="nav-item" role="presentation" callsign="'+callsign+'" id="'+tab_id_li+'">'; item_html = '<li class="nav-item" role="presentation" callsign="'+callsign+'" id="'+tab_id_li+'">';
item_html += '<button onClick="$(\'#to_call\').val(\''+callsign+'\');" callsign="'+callsign+'" class="nav-link '+active_str+'" id="'+tab_id+'" data-bs-toggle="tab" data-bs-target="#'+tab_content+'" type="button" role="tab" aria-controls="'+callsign+'" aria-selected="true">'; item_html += '<button onClick="callsign_select(\''+callsign+'\');" callsign="'+callsign+'" class="nav-link '+active_str+'" id="'+tab_id+'" data-bs-toggle="tab" data-bs-target="#'+tab_content+'" type="button" role="tab" aria-controls="'+callsign+'" aria-selected="true">';
item_html += callsign+'&nbsp;&nbsp;'; item_html += callsign+'&nbsp;&nbsp;';
item_html += '<span onclick="delete_tab(\''+callsign+'\');">×</span>'; item_html += '<span onclick="delete_tab(\''+callsign+'\');">×</span>';
item_html += '</button></li>' item_html += '</button></li>'
@ -397,4 +397,6 @@ function ack_msg(msg) {
function callsign_select(callsign) { function callsign_select(callsign) {
var tocall = $("#to_call"); var tocall = $("#to_call");
tocall.val(callsign); tocall.val(callsign);
var d = $('#wc-content');
d.animate({ scrollTop: d.prop('scrollHeight') }, 500);
} }

25
aprsd/web/chat/templates/index.html
View File

@ -64,7 +64,9 @@
</head> </head>
<body> <body>
<div class='container text-center'> <div class="wc-container">
<div class="wc-row header">
<div class="container-sm">
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h1>APRSD WebChat {{ version }}</h1> <h1>APRSD WebChat {{ version }}</h1>
@ -95,20 +97,23 @@
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="row"> <div class="container-sm" style="max-width: 800px">
<div class="container-sm" style="max-width: 800px;"> <ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
<ul class="nav nav-tabs" id="msgsTabList" role="tablist"> </div>
</ul> </div>
<div class="tab-content" id="msgsTabContent"> <div class="wc-row content" id="wc-content">
<div class="container" style="max-width: 800px;">
<div class="tab-content" id="msgsTabContent" style="height: 100%">
</div> </div>
</div> </div>
</div> </div>
</div> <div class="wc-row footer">
<div class="container-sm" style="padding-top: 40px">
<div class="ui text container" style="padding-top: 40px">
<a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a> <a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
<a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a> <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>