better client for friends

2026-07-24 10:18:30 +10:00
parent 6598162680
commit 0d3c76086b
7 changed files with 127 additions and 31 deletions
--- a/client/style_friends.css
+++ 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%;
+    }
+}