mirror of https://github.com/craigerl/aprsd.git
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 {
|
||||
padding-top: 0px;
|
||||
padding: 5px 30px;
|
||||
border: 1px solid #ccc;
|
||||
height: 450px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: none;
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +39,7 @@ input[type=search]::-webkit-search-cancel-button {
|
|||
width: 280px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin: 0 0 4px;
|
||||
margin: 0 0 0px;
|
||||
color: #3498db;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -66,8 +63,9 @@ input[type=search]::-webkit-search-cancel-button {
|
|||
.bubble-message {
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
padding: 0px 5px 5px 0px;
|
||||
padding: 0px 0px 0px 0px;
|
||||
color: #2b2b2b;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bubble-arrow {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
body {
|
||||
background: #eeeeee;
|
||||
margin: 1em;
|
||||
/*margin: 1em;*/
|
||||
text-align: center;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
height: 10vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#title {
|
||||
|
|
@ -45,3 +40,27 @@ footer {
|
|||
width: 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 += '<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 += '<span onclick="delete_tab(\''+callsign+'\');">×</span>';
|
||||
item_html += '</button></li>'
|
||||
|
|
@ -397,4 +397,6 @@ function ack_msg(msg) {
|
|||
function callsign_select(callsign) {
|
||||
var tocall = $("#to_call");
|
||||
tocall.val(callsign);
|
||||
var d = $('#wc-content');
|
||||
d.animate({ scrollTop: d.prop('scrollHeight') }, 500);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,51 +64,56 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class='container text-center'>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>APRSD WebChat {{ version }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<span style='color: green'>{{ callsign }}</span>
|
||||
connected to
|
||||
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
||||
<span id='uptime'>NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
||||
<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 class="wc-container">
|
||||
<div class="wc-row header">
|
||||
<div class="container-sm">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1>APRSD WebChat {{ version }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<span style='color: green'>{{ callsign }}</span>
|
||||
connected to
|
||||
<span style='color: blue' id='aprs_connection'>{{ aprs_connection|safe }}</span>
|
||||
<span id='uptime'>NONE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<form class="row gx-1 gy-1 justify-content-center align-items-center" id="sendform" name="sendmsg" action="">
|
||||
<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 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 class="container-sm" style="max-width: 800px">
|
||||
<ul class="nav nav-tabs" id="msgsTabList" role="tablist"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="container-sm" style="max-width: 800px;">
|
||||
<ul class="nav nav-tabs" id="msgsTabList" role="tablist">
|
||||
</ul>
|
||||
<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 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://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
|
||||
<div class="wc-row footer">
|
||||
<div class="container-sm" 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://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue