better client for friends
This commit is contained in:
4
build.sh
4
build.sh
@@ -10,7 +10,9 @@ bin2cpp --file=client/login.html --output=server/src/generated
|
||||
bin2cpp --file=client/settings.html --output=server/src/generated
|
||||
bin2cpp --file=client/friends.html --output=server/src/generated
|
||||
bin2cpp --file=client/e404.html --output=server/src/generated
|
||||
bin2cpp --file=client/style.css --output=server/src/generated
|
||||
|
||||
bin2cpp --file=client/style.css --output=server/src/generated
|
||||
bin2cpp --file=client/style_friends.css --output=server/src/generated
|
||||
|
||||
bin2cpp --file=client/script.js --output=server/src/generated
|
||||
bin2cpp --file=client/script_friends.js --output=server/src/generated
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<title>friends</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="/style_friends.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/script.js"></script>
|
||||
<script src="/script_friends.js"></script>
|
||||
|
||||
@@ -107,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// create a websocket
|
||||
socket = new WebSocket("ws://" + document.location.hostname + ":" + document.location.port + "/friends/ws");
|
||||
socket = new WebSocket("wss://" + document.location.hostname + ":" + document.location.port + "/friends/ws");
|
||||
|
||||
socket.onopen = function() {
|
||||
console.log("connected to server!");
|
||||
@@ -286,4 +286,4 @@ function sendMessage() {
|
||||
renderMessage(sentMessage);
|
||||
|
||||
textarea.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,31 +104,3 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Friends-specific CSS */
|
||||
#friends {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#friends-list {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#friends-messenger {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#friends-message-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
113
client/style_friends.css
Normal file
113
client/style_friends.css
Normal file
@@ -0,0 +1,113 @@
|
||||
#friends {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#friends-list {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
border-right: 1px solid lime;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#friends-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lime;
|
||||
}
|
||||
|
||||
#friends-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#friends-list-links {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#friends-list-links p {
|
||||
margin: 0;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
border-left: 2px solid transparent;
|
||||
transition: background-color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
#friends-list-links p:hover {
|
||||
background-color: rgba(0, 255, 0, 0.1);
|
||||
border-left-color: lime;
|
||||
}
|
||||
|
||||
#friends-messenger {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#friends-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#friends-messages p {
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#friends-messages p:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#friends-message-box {
|
||||
position: static;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid lime;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#friends-message-box textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#friends-message-box button {
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#friends {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#friends-list {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-height: 200px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid lime;
|
||||
}
|
||||
|
||||
#friends-message-box {
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,7 @@ sources = [
|
||||
'src/generated/friends.cpp',
|
||||
'src/generated/script_friends.cpp',
|
||||
'src/generated/style.cpp',
|
||||
'src/generated/style_friends.cpp',
|
||||
'src/generated/script.cpp',
|
||||
'src/generated/notify.cpp',
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ using Json = nlohmann::json;
|
||||
#include "generated/friends.h"
|
||||
#include "generated/script_friends.h"
|
||||
#include "generated/style.h"
|
||||
#include "generated/style_friends.h"
|
||||
#include "generated/script.h"
|
||||
#include "generated/notify.h"
|
||||
|
||||
@@ -60,6 +61,7 @@ int main() {
|
||||
const bin2cpp::File& friendsjsfile = bin2cpp::getScript_friendsJsFile();
|
||||
const bin2cpp::File& e404file = bin2cpp::getE404HtmlFile();
|
||||
const bin2cpp::File& stylefile = bin2cpp::getStyleCssFile();
|
||||
const bin2cpp::File& friendscssfile = bin2cpp::getStyle_friendsCssFile();
|
||||
const bin2cpp::File& scriptfile = bin2cpp::getScriptJsFile();
|
||||
const bin2cpp::File& notifyfile = bin2cpp::getNotifyOpusFile();
|
||||
|
||||
@@ -70,6 +72,7 @@ int main() {
|
||||
std::string settings{settingsfile.getBuffer(), settingsfile.getSize()};
|
||||
std::string friends{friendsfile.getBuffer(), friendsfile.getSize()};
|
||||
std::string friendsjs{friendsjsfile.getBuffer(), friendsjsfile.getSize()};
|
||||
std::string friendscss{friendscssfile.getBuffer(), friendscssfile.getSize()};
|
||||
std::string e404{e404file.getBuffer(), e404file.getSize()};
|
||||
std::string style{stylefile.getBuffer(), stylefile.getSize()};
|
||||
std::string script{scriptfile.getBuffer(), scriptfile.getSize()};
|
||||
@@ -87,6 +90,10 @@ int main() {
|
||||
response.set_content(style, "text/css");
|
||||
});
|
||||
|
||||
svr.Get("/style_friends.css", [&friendscss](const httplib::Request& request, httplib::Response& response) {
|
||||
response.set_content(friendscss, "text/css");
|
||||
});
|
||||
|
||||
svr.Get("/script.js", [&script](const httplib::Request& request, httplib::Response& response) {
|
||||
response.set_content(script, "text/javascript");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user