wirc-frontend.git

[mod] style
Parent a11d59a
Christian Fraß

Christian Fraß commited on 2021-11-19 19:45:33
Zeige 3 geänderte Dateien mit 80 Einfügungen und 11 Löschungen.

source/index.html
Zeige Datei @ 3ccd8ba
... ... 
@@ -35,8 +35,8 @@
35 35 
 				</div>
36 36 
 			</div>
37 37 
 			<div id="middle">
38 
-				<ul class="pane" id="events"></ul>
39 38 
 				<ul class="pane" id="users"></ul>
39 
+				<ul class="pane" id="events"></ul>
40 40 
 			</div>
41 41 
 			<form action="?">
42 42 
 				<input type="text" id="message" placeholder="…"/>
source/logic.ts
Zeige Datei @ 3ccd8ba
... ... 
@@ -94,23 +94,52 @@ function update_events(events): void
94 94 
 				dom_event.textContent = ("-- unhandled event: " + JSON.stringify(event));
95 95 
 				break;
96 96 
 			}
97 
+			case "private_message":
98 
+			{
99 
+				{
100 
+					let dom_time: HTMLSpanElement = document.createElement("span");
101 
+					dom_time.classList.add("event_time");
102 
+					dom_time.textContent = timestring;
103 
+					dom_event.appendChild(dom_time);
104 
+				}
105 
+				{
106 
+					let dom_type: HTMLSpanElement = document.createElement("span");
107 
+					dom_type.classList.add("event_type");
108 
+					dom_type.textContent = 'private';
109 
+					dom_event.appendChild(dom_type);
110 
+				}
111 
+				{
112 
+					let dom_sender: HTMLSpanElement = document.createElement("span");
113 
+					dom_sender.classList.add("event_sender");
114 
+					dom_sender.style.color = get_usercolor(event["data"]["from"] ?? "");
115 
+					dom_sender.textContent = event["data"]["from"];
116 
+					dom_event.appendChild(dom_sender);
117 
+				}
118 
+				{
119 
+					let dom_message: HTMLSpanElement = document.createElement("span");
120 
+					dom_message.classList.add("event_message");
121 
+					dom_message.textContent = event["data"]["message"];
122 
+					dom_event.appendChild(dom_message);
123 
+				}
124 
+				break;
125 
+			}
97 126 
 			case "channel_message":
98 127 
 			{
99 128 
 				{
100 
-					let dom_time: HTMLDivElement = document.createElement("div");
129 
+					let dom_time: HTMLSpanElement = document.createElement("span");
101 130 
 					dom_time.classList.add("event_time");
102 131 
 					dom_time.textContent = timestring;
103 132 
 					dom_event.appendChild(dom_time);
104 133 
 				}
105 134 
 				{
106 
-					let dom_sender: HTMLDivElement = document.createElement("div");
135 
+					let dom_sender: HTMLSpanElement = document.createElement("span");
107 136 
 					dom_sender.classList.add("event_sender");
108 137 
 					dom_sender.style.color = get_usercolor(event["data"]["from"] ?? "");
109 138 
 					dom_sender.textContent = event["data"]["from"];
110 139 
 					dom_event.appendChild(dom_sender);
111 140 
 				}
112 141 
 				{
113 
-					let dom_message: HTMLDivElement = document.createElement("div");
142 
+					let dom_message: HTMLSpanElement = document.createElement("span");
114 143 
 					dom_message.classList.add("event_message");
115 144 
 					dom_message.textContent = event["data"]["message"];
116 145 
 					dom_event.appendChild(dom_message);
... ... 
@@ -120,8 +149,15 @@ function update_events(events): void
120 149 
 		}
121 150 
 		dom_events.appendChild(dom_event);
122 151 
 	}
152 
+	if (events.length > 0)
153 
+	{
123 154 
 		dom_events.scrollTo(0, dom_events["scrollTopMax"]);
124 155 
 	}
156 
+	else
157 
+	{
158 
+		// do nothing
159 
+	}
160 
+}
125 161
126 162
127 163 
 function update_users(users: Array<{name: string; role: string;}>): void
source/style.less
Zeige Datei @ 3ccd8ba
... ... 
@@ -48,7 +48,7 @@ label
48 48
49 49 
 .event_time
50 50 
 {
51 
-	margin: 0 2px;
51 
+	margin: 0 4px;
52 52
53 53 
 	color: hsl(@hue, 0%, 75%);
54 54
... ... 
@@ -63,11 +63,28 @@ label
63 63 
 	}
64 64 
 }
65 65
66 
+.event_type
67 
+{
68 
+	margin: 0 4px;
69 
+
70 
+	color: hsl(@hue, 0%, 100%);
71 
+
72 
+	&:before
73 
+	{
74 
+		content: "{";
75 
+	}
76 
+
77 
+	&:after
78 
+	{
79 
+		content: "}";
80 
+	}
81 
+}
82 
+
66 83 
 .event_sender
67 84 
 {
68 
-	margin: 0 2px;
85 
+	margin: 0 4px;
69 86
70 
-	font-weight: bold;
87 
+	// font-weight: bold;
71 88
72 89 
 	&:before
73 90 
 	{
... ... 
@@ -84,7 +101,7 @@ label
84 101 
 {
85 102 
 	background-color: hsl(@hue, 0%, 12.5%);
86 103
87 
-	height: 75vh;
104 
+	height: 93.75%;
88 105 
 	overflow-y: auto;
89 106
90 107 
 	list-style-type: none;
... ... 
@@ -147,10 +164,26 @@ body
147 164 
 #middle
148 165 
 {
149 166 
 	display: flex;
150 
-	flex-direction: row;
167 
+	flex-direction: row-reverse;
168 
+	flex-wrap: wrap;
151 169
152 
-	& #events {flex: 4;}
153 
-	& #users {flex: 1;}
170 
+	& #events
171 
+	{
172 
+		flex-grow: 4;
173 
+		flex-shrink: 4;
174 
+
175 
+		min-width: 480px;
176 
+		height: 75vh;
177 
+	}
178 
+
179 
+	& #users
180 
+	{
181 
+		flex-grow: 1;
182 
+		flex-shrink: 1;
183 
+
184 
+		min-width: 240px;
185 
+		height: 75vh;
186 
+	}
154 187 
 }
155 188
156 189 
 #message
157 190