mirror of
https://github.com/craigerl/aprsd.git
synced 2025-07-30 20:32:27 -04:00
Webchat: tweaks to UI for expanding chat
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:
parent
f770c5ffd5
commit
b393060edb
@ -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 {
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@ -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+' ';
|
item_html += callsign+' ';
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -64,51 +64,56 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class='container text-center'>
|
<div class="wc-container">
|
||||||
<div class="row">
|
<div class="wc-row header">
|
||||||
<div class="column">
|
<div class="container-sm">
|
||||||
<h1>APRSD WebChat {{ version }}</h1>
|
<div class="row">
|
||||||
</div>
|
<div class="column">
|
||||||
</div>
|
<h1>APRSD WebChat {{ version }}</h1>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="column">
|
</div>
|
||||||
<span style='color: green'>{{ callsign }}</span>
|
<div class="row">
|
||||||
connected to
|
<div class="column">
|
||||||
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
<span style='color: green'>{{ callsign }}</span>
|
||||||
<span id='uptime'>NONE</span>
|
connected to
|
||||||
</div>
|
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
||||||
</div>
|
<span id='uptime'>NONE</span>
|
||||||
<div class="row">
|
</div>
|
||||||
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
</div>
|
||||||
<div class="col-sm-3">
|
<div class="row">
|
||||||
<label for="to_call" class="visually-hidden">Callsign</label>
|
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
||||||
<input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
|
<div class="col-sm-3">
|
||||||
|
<label for="to_call" class="visually-hidden">Callsign</label>
|
||||||
|
<input type="search" class="form-control mb-2 mr-sm-2" name="to_call" id="to_call" placeholder="To Callsign" size="11" maxlength="9">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-3">
|
||||||
|
<label for="message" class="visually-hidden">Message</label>
|
||||||
|
<input type="text" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send" />
|
||||||
|
<button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
|
||||||
|
<!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-3">
|
</div>
|
||||||
<label for="message" class="visually-hidden">Message</label>
|
<div class="container-sm" style="max-width: 800px">
|
||||||
<input type="text" class="form-control mb-2 mr-sm-2" name="message" id="message" size="40" maxlength="40" placeholder="Message">
|
<ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
|
||||||
<input type="submit" name="submit" class="btn btn-primary mb-2" id="send_msg" value="Send" />
|
|
||||||
<button type="button" class="btn btn-primary mb-2" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
|
|
||||||
<!-- <button type="button" class="btn btn-primary mb-2" id="wipe_local" value="wipe local storage">Wipe LocalStorage</button> -->
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wc-row content" id="wc-content">
|
||||||
<div class="row">
|
<div class="container" style="max-width: 800px;">
|
||||||
<div class="container-sm" style="max-width: 800px;">
|
<div class="tab-content" id="msgsTabContent" style="height: 100%">
|
||||||
<ul class="nav nav-tabs" id="msgsTabList" role="tablist">
|
|
||||||
</ul>
|
|
||||||
<div class="tab-content" id="msgsTabContent">
|
|
||||||
</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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user