diff --git a/build.sh b/build.sh
index e3f390a..3356791 100644
--- a/build.sh
+++ b/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
diff --git a/client/friends.html b/client/friends.html
index d83196e..569295c 100644
--- a/client/friends.html
+++ b/client/friends.html
@@ -3,6 +3,7 @@
friends
+
diff --git a/client/script_friends.js b/client/script_friends.js
index 5b595ae..a05549a 100644
--- a/client/script_friends.js
+++ b/client/script_friends.js
@@ -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 = "";
-}
\ No newline at end of file
+}
diff --git a/client/style.css b/client/style.css
index fdefda8..39a10f6 100644
--- a/client/style.css
+++ b/client/style.css
@@ -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%;
-}
diff --git a/client/style_friends.css b/client/style_friends.css
new file mode 100644
index 0000000..d5b619b
--- /dev/null
+++ b/client/style_friends.css
@@ -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%;
+ }
+}
diff --git a/server/meson.build b/server/meson.build
index fe3ccf5..51104cc 100644
--- a/server/meson.build
+++ b/server/meson.build
@@ -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',
diff --git a/server/src/main.cpp b/server/src/main.cpp
index 0d04174..1d20aff 100644
--- a/server/src/main.cpp
+++ b/server/src/main.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");
});