Use the w3-badge class for circular badges instead of rounding them manually in the...

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index e5d1ddc627e46ae33ff9c2f9111cc36019d36b9d..56b949565af979ca9eb60ef82a7b59d659a938e3 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -166,14 +166,6 @@ blockquote pre {
        padding-right: 1.75vw;
        padding-top: 0.75vw;
        padding-bottom: 0.75vw;
-       border-radius: 50%;
-       background-color: grey;
-       color: black;
-}
-
-.ctdl-roomlist-roomicon-hasnewmsgs {
-       background-color: blue;
-       color: white;
 }
 
 .ctdl-roomlist-roomname {

diff --git a/webcit-ng/static/js/roomlist.js b/webcit-ng/static/js/roomlist.js
index 7cb3053fdaba4bf00583f79127c3db08c0c72cee..736f07ec4f92f81424abeb765a16f28fbc80e27f 100644 (file)
--- a/webcit-ng/static/js/roomlist.js
+++ b/webcit-ng/static/js/roomlist.js
@@ -57,8 +57,8 @@ function display_room_list_renderer(floor_list, room_list) {
                        output[room_list[i].floor] +=
                                "<div class=\"w3-button ctdl-roomlist-room\" onClick=\"javascript:gotoroom('"
                                + escapeJS(escapeHTML(room_list[i].name)) + "');\">"
-                               + "<i class=\"ctdl-roomlist-roomicon w3-left "
-                               + (room_list[i].hasnewmsgs ? " ctdl-roomlist-roomicon-hasnewmsgs" : "")
+                               + "<i class=\"w3-badge ctdl-roomlist-roomicon w3-left "
+                               + (room_list[i].hasnewmsgs ? "w3-blue" : "w3-gray")
                                + " fas fa-comments fa-fw\"></i><span class=\"ctdl-roomlist-roomname"
                                + (room_list[i].hasnewmsgs ? " ctdl-roomlist-roomname-hasnewmsgs" : "")
                                + " w3-left\">"