Publicservers

css/main.css

@@ -273,3 +273,144 @@
 .bd-minimal .channel-members-wrap {
 	min-width: 0px;
 }
+
+
+#bd-ps-container {
+  position:fixed;
+	width:50%;
+	height:75%;
+	background:rgb(46,49,54);
+	display:block;
+	z-index:9001;
+	margin-left:25%;
+	margin-top:5%;
+	border:1px solid #000;
+	box-shadow:0 0 20px 0 #000;
+	max-height:800px;
+	min-width:750px;
+}
+
+#bd-ps-header {
+  background:rgb(54,57,62);
+	height:60px;
+	border-bottom:1px solid #000;
+	box-shadow:0 1px 0 0 rgb(78,78,78);
+}
+
+#bd-ps-header h2 {
+  margin:0;
+	line-height:60px;
+	margin-left:10px;
+	color:#ADADAD;
+	display:inline-block;
+	float:left;
+}
+
+#bd-ps-header span {
+	float:right;
+	display:inline;
+	line-height:50px;
+	margin-right:15px;
+	font-size:29px;
+	font-weight:bold;
+	color:#ADADAD;
+}
+
+#bd-ps-body {
+    position: absolute;
+    padding: 0;
+    margin-top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 61px;
+  overflow:auto;
+}
+
+
+.bd-ps-server {
+  width:100%;
+  height:200px;
+}
+
+.bd-ps-server-header {
+  height:50px;
+  width:100%;
+  margin-top:1px;
+  background:#202020;
+  color:#AEAEAE;
+  line-height:50px;
+  font-size:20px;
+}
+
+.bd-ps-server-header span {
+  margin-left:10px;
+}
+
+.bd-ps-server-body {
+  padding:5px;
+}
+
+.bd-ps-server-icon {
+  width:90px;
+  height:90px;
+  background:#202020;
+  display:inline-block;
+}
+
+.bd-ps-server-info {
+  position:absolute;
+  height:190px;
+  display:inline-block;
+  left:100px;
+  right:5px;
+  color:#AEAEAE;
+  overflow:auto;
+}
+
+#bd-ps-body table {
+  width:100%;
+  margin:0;
+  padding:0;
+  border-color:red;
+  border-collapse:collapse;
+  text-align:left;
+}
+
+#bd-ps-body table th {
+  background-color:#202020;
+  color:#EDEDED;
+  height:50px;
+  padding-left:5px;
+}
+
+#bd-ps-body table tr {
+  margin:0;
+  padding:0;
+  height:50px;
+}
+
+#bd-ps-body table tr{
+  background-color:#33363B;
+  border-bottom:1px solid #000;
+  box-shadow:0 1px 0 #404040 inset;
+}
+
+#bd-ps-body table tr td {
+  padding-left:5px;
+  color:#EDEDED;
+}
+
+#bd-ps-body table tr td {
+  min-width:150px;
+}
+
+#bd-ps-body .description {
+  overflow:auto;
+  max-height:60px;
+  word-wrap:break-word;
+}
+
+#bd-ps-body table tr:nth-child(odd) {
+  background-color:#2E3136;
+}

devjs/publicservers.js

@@ -5,18 +5,7 @@
  * https://github.com/Jiiks/BetterDiscordApp
  */
 
-function PublicServers() {
+var publicServers = {};
-
-}
-
-PublicServers.prototype.init = function() {
-
-}/* BetterDiscordApp PublicSevers JavaSctript
- * Version: 1.0
- * Author: Jiiks | http://jiiks.net
- * Date: 27/08/2015 - 14:16
- * https://github.com/Jiiks/BetterDiscordApp
- */
 
 function PublicServers() {
 
@@ -24,4 +13,105 @@ function PublicServers() {
 
 PublicServers.prototype.init = function() {
 
+    var container = $("<div/>", {
+        id: "bd-ps-container"
+    });
+
+    var header = $("<div/>", {
+        id: "bd-ps-header"
+    });
+
+    $("<h2/>", {
+        text: "Public Servers"
+    }).appendTo(header);
+
+    $("<span/>", {
+        id: "bd-ps-close",
+        text: "X"
+    }).appendTo(header);
+
+    header.appendTo(container);
+
+    var psbody = $("<div/>", {
+        id: "bd-ps-body"
+    });
+
+    psbody.appendTo(container);
+
+    var table = $("<table/>", {
+        border:"0"
+    });
+
+    var thead = $("<thead/>");
+
+    thead.appendTo(table);
+
+    var headers = $("<tr/>", {
+
+    }).append($("<th/>", {
+        text: "Name"
+    })).append($("<th/>", {
+        text: "Code"
+    })).append($("<th/>", {
+        text: "Language"
+    })).append($("<th/>", {
+        text: "Description"
+    }));
+
+    headers.appendTo(thead);
+
+    var tbody = $("<tbody/>", {
+        id: "bd-ps-tbody"
+    });
+
+    tbody.appendTo(table);
+
+    table.appendTo(psbody);
+
+    $("body").append(container);
+
+
+    var servers = publicServers.servers;
+
+    for(var server in servers) {
+        var name = server;
+        server = servers[server];
+        var code = server.code;
+        var icon = server.icon;
+        var title = server.title;
+        var language = server.language;
+        var description = server.description;
+
+        this.addServer(name, code, title, language, description);
+    }
+
+}
+
+PublicServers.prototype.addServer = function(name, code, title, language, description) {
+
+    var tableBody = $("#bd-ps-tbody");
+
+
+    var desc = $("<td/>").append($("<div/>", {
+        class: "bd-ps-description",
+        text: description
+    }));
+
+    var tr = $("<tr/>");
+
+    tr.append($("<td/>", {
+        text: title
+    }));
+
+    tr.append($("<td/>", {
+        text: code
+    }));
+
+    tr.append($("<td/>", {
+        text: language
+    }));
+
+    tr.append(desc);
+
+    tableBody.append(tr);
 }