diff --git a/cmd/main.go b/cmd/main.go index fa6c90c..ee1874c 100644 --- a/cmd/main.go +++ b/cmd/main.go @@ -1,8 +1,8 @@ package main import ( - "time" "log" + "time" "net/http" "strings" diff --git a/static/css/style.css b/static/css/style.css index daae1df..0fe8f87 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -24,6 +24,10 @@ img { max-width: 100%; } +th { + cursor: pointer; +} + input:focus, textarea:focus, button:focus { @@ -128,21 +132,18 @@ button:focus { .content-item-inner2 { margin-top: 20px; - margin-bottom: 40px; - border-right: 2px solid #222831; - border-left: 2px solid #222831; - border-bottom: 2px solid #222831; - border-radius: 8px 8px 0px 0px; } .content-item-inner3 { - display: flex; align-items: center; border-bottom: 2px solid #ffd018; - border-radius: 8px 8px 0px 0px; background: #222831; } +.content-item-inner3 th { + border-radius: 8px 8px 0px 0px; +} + .content-item-inner3 h2 { font-weight: 700; font-size: 20px; @@ -153,7 +154,6 @@ button:focus { .content-item-inner4 { width: 760px; - display: flex; align-items: center; justify-content: space-between; padding-right: 10px; @@ -162,15 +162,13 @@ button:focus { padding-left: 86px; } -.content-item-inner4 div { - display: flex; +.content-item-inner4 th { flex-direction: column; justify-content: center; } .content-item-inner5 { width: 320px; - display: flex; align-items: center; justify-content: space-between; padding: 0 10px; @@ -178,30 +176,37 @@ button:focus { height: 60px; } -.content-item-inner5 div { - display: flex; +.content-item-inner5 th { flex-direction: column; justify-content: center; } .content-item-inner6 { width: 120px; - display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; height: 60px; + text-align: right; } -.content-item-inner2 ul li { - display: flex; +.content-item-inner2 table tr td { align-items: center; padding-left: 17px; padding-right: 10px; height: 60px; + border-bottom: 2px solid #222831; } -.content-item-inner2 ul li a { +.content-item-inner2 table tr td:nth-child(1) { + border-left: 2px solid #222831; +} + +.content-item-inner2 table tr td:nth-child(3) { + border-right: 2px solid #222831; +} + +.content-item-inner2 table tr td a { font-weight: 400; font-size: 20px; display: inline-block; @@ -209,7 +214,7 @@ button:focus { color: #FFFFFF; } -.content-item-inner2 ul li p { +.content-item-inner2 table tr td p { font-weight: 400; font-size: 20px; display: inline-block; @@ -217,26 +222,26 @@ button:focus { color: #FFFFFF; } -.content-item-inner2 ul li:nth-child(even) { +.content-item-inner2 table tr:nth-child(odd) { background: #222831; } -.content-item-inner2 ul li div:nth-of-type(1) { +.content-item-inner2 table tr td:nth-of-type(1) { width: 760px; } -.content-item-inner2 ul li div:nth-of-type(1) img { +.content-item-inner2 table tr td:nth-of-type(1) img { max-width: 32px; margin-right: 37px; margin-top: -5px; } -.content-item-inner2 ul li div:nth-of-type(2) { +.content-item-inner2 table tr td:nth-of-type(2) { width: 320px; padding-left: 10px; } -.content-item-inner2 ul li div:nth-of-type(3) { +.content-item-inner2 table tr td:nth-of-type(3) { width: 120px; padding-right: 10px; text-align: right; @@ -294,16 +299,16 @@ Small Screen - Tablate .content-item-inner4 { padding-left: 76px; } - - .content-item-inner2 ul li a { + + .content-item-inner2 table tr td a { font-size: 16px; } - - .content-item-inner2 ul li p { + + .content-item-inner2 table tr td p { font-size: 16px; } - - .content-item-inner2 ul li a:nth-of-type(1) img { + + .content-item-inner2 table tr td a:nth-of-type(1) img { margin-right: 27px; } @@ -345,15 +350,15 @@ Small Screen - Mobile } .content-item-inner4 { - width: 760px; + width: 720px; padding-left: 77px; } - .content-item-inner2 ul li div:nth-of-type(1) { - width: 760px; + .content-item-inner2 table tr td:nth-of-type(1) { + width: 720px; } - - .content-item-inner2 ul li div:nth-of-type(1) img { + + .content-item-inner2 table tr td:nth-of-type(1) img { margin-right: 28px; } diff --git a/static/js/sorttable.js b/static/js/sorttable.js new file mode 100644 index 0000000..435bd7f --- /dev/null +++ b/static/js/sorttable.js @@ -0,0 +1,478 @@ +/* + SortTable + version 2 + 7th April 2007 + Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ + + Instructions: + Download this file + Add to your HTML + Add class="sortable" to any table you'd like to make sortable + Click on the headers to sort + + Thanks to many, many people for contributions and suggestions. + Licenced as X11: http://www.kryogenix.org/code/browser/licence.html + This basically means: do what you want with it. +*/ + + +var stIsIE = /*@cc_on!@*/false; + +sorttable = { + init: function() { + // quit if this function has already been called + if (arguments.callee.done) return; + // flag this function so we don't do the same thing twice + arguments.callee.done = true; + // kill the timer + if (_timer) clearInterval(_timer); + + if (!document.createElement || !document.getElementsByTagName) return; + + sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/; + + forEach(document.getElementsByTagName('table'), function(table) { + if (table.className.search(/\bsortable\b/) != -1) { + sorttable.makeSortable(table); + } + }); + + }, + + makeSortable: function(table) { + if (table.getElementsByTagName('thead').length == 0) { + // table doesn't have a tHead. Since it should have, create one and + // put the first table row in it. + the = document.createElement('thead'); + the.appendChild(table.rows[0]); + table.insertBefore(the,table.firstChild); + } + // Safari doesn't support table.tHead, sigh + if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0]; + + if (table.tHead.rows.length != 1) return; // can't cope with two header rows + + // Sorttable v1 put rows with a class of "sortbottom" at the bottom (as + // "total" rows, for example). This is B&R, since what you're supposed + // to do is put them in a tfoot. So, if there are sortbottom rows, + // for backwards compatibility, move them to tfoot (creating it if needed). + sortbottomrows = []; + for (var i=0; i 12) { + // definitely dd/mm + return sorttable.sort_ddmm; + } else if (second > 12) { + return sorttable.sort_mmdd; + } else { + // looks like a date, but we can't tell which, so assume + // that it's dd/mm (English imperialism!) and keep looking + sortfn = sorttable.sort_ddmm; + } + } + } + } + return sortfn; + }, + + getInnerText: function(node) { + // gets the text we want to use for sorting for a cell. + // strips leading and trailing whitespace. + // this is *not* a generic getInnerText function; it's special to sorttable. + // for example, you can override the cell text with a customkey attribute. + // it also gets .value for fields. + + if (!node) return ""; + + hasInputs = (typeof node.getElementsByTagName == 'function') && + node.getElementsByTagName('input').length; + + if (node.getAttribute("sorttable_customkey") != null) { + return node.getAttribute("sorttable_customkey"); + } + else if (typeof node.textContent != 'undefined' && !hasInputs) { + return node.textContent.replace(/^\s+|\s+$/g, ''); + } + else if (typeof node.innerText != 'undefined' && !hasInputs) { + return node.innerText.replace(/^\s+|\s+$/g, ''); + } + else if (typeof node.text != 'undefined' && !hasInputs) { + return node.text.replace(/^\s+|\s+$/g, ''); + } + else { + switch (node.nodeType) { + case 3: + if (node.nodeName.toLowerCase() == 'input') { + return node.value.replace(/^\s+|\s+$/g, ''); + } + case 4: + return node.nodeValue.replace(/^\s+|\s+$/g, ''); + break; + case 1: + case 11: + var innerText = ''; + for (var i = 0; i < node.childNodes.length; i++) { + innerText += sorttable.getInnerText(node.childNodes[i]); + } + return innerText.replace(/^\s+|\s+$/g, ''); + break; + default: + return ''; + } + } + }, + + reverse: function(tbody) { + // reverse the rows in a tbody + newrows = []; + for (var i=0; i=0; i--) { + tbody.appendChild(newrows[i]); + } + delete newrows; + }, + + /* sort functions + each sort function takes two parameters, a and b + you are comparing a[0] and b[0] */ + sort_numeric: function(a,b) { + aa = parseFloat(a[0].replace(/[^0-9.-]/g,'')); + if (isNaN(aa)) aa = 0; + bb = parseFloat(b[0].replace(/[^0-9.-]/g,'')); + if (isNaN(bb)) bb = 0; + return aa-bb; + }, + sort_alpha: function(a,b) { + if (a[0]==b[0]) return 0; + if (a[0] 0 ) { + var q = list[i]; list[i] = list[i+1]; list[i+1] = q; + swap = true; + } + } // for + t--; + + if (!swap) break; + + for(var i = t; i > b; --i) { + if ( comp_func(list[i], list[i-1]) < 0 ) { + var q = list[i]; list[i] = list[i-1]; list[i-1] = q; + swap = true; + } + } // for + b++; + + } // while(swap) + } +} + +/* ****************************************************************** + Supporting functions: bundled here to avoid depending on a library + ****************************************************************** */ + +// Dean Edwards/Matthias Miller/John Resig + +/* for Mozilla/Opera9 */ +if (document.addEventListener) { + document.addEventListener("DOMContentLoaded", sorttable.init, false); +} + +/* for Internet Explorer */ +/*@cc_on @*/ +/*@if (@_win32) + document.write(" diff --git a/templates/region.html b/templates/region.html index 6ed0cdd..b9514b3 100644 --- a/templates/region.html +++ b/templates/region.html @@ -11,86 +11,60 @@ {{range $gamemodeCount := $gamemodesCount -}} {{if eq $gamemode.ID $gamemodeCount.ID -}}
-
-
-

{{$gamemode.Name}}

-
-
-

Map

-
-
-

Players

-
-
- -
- -
+ + + + + + + {{range $server := $servers -}} + {{if eq $gamemode.ID $server.GamemodeID -}} + {{if ne $server.Map "Server didn't reply." -}} + + + + + + {{- end}} + {{- end}} + {{- end}} +

{{$gamemode.Name}}

Map

Players

+ {{range $flag := $flags -}} + {{if eq $server.ServerIP $flag.ServerIP -}} + + {{- end}} + {{- end}} + {{$server.Name}}

{{$server.Map}}

{{$server.Players}}/{{$server.MaxPlayers}}

+
+
-
-
-

{{$gamemode.Name}}

-
-
-

Map

-
-
-

Players

-
-
- {{range $server := $servers -}} - {{if eq $gamemode.ID $server.GamemodeID -}} - {{if ne $server.Map "Server didn't reply." -}} - - {{- end}} - {{- end}} - {{- end}} + + + + + + + {{range $server := $servers -}} + {{if eq $gamemode.ID $server.GamemodeID -}} + {{if ne $server.Map "Server didn't reply." -}} + + + + + + {{- end}} + {{- end}} + {{- end}} +

{{$gamemode.Name}}

Map

Players

+ {{range $flag := $flags -}} + {{if eq $server.ServerIP $flag.ServerIP -}} + + {{- end}} + {{- end}} + {{$server.Name}}

{{$server.Map}}

{{$server.Players}}/{{$server.MaxPlayers}}

{{- end}} {{- end}} {{- end}} {{end}} - diff --git a/web/handler.go b/web/handler.go index 7222e53..76a4c74 100644 --- a/web/handler.go +++ b/web/handler.go @@ -20,6 +20,7 @@ func NewHandler(store steamServer.Store) *Handler { h.Get("/favicon.ico", faviconHandler) h.Get("/style.css", maincssHandler) h.Get("/css/bootstrap.css", bootstrapHandler) + h.Get("/js/sorttable.js", sorttableHandler) h.Get("/images/01.png", arrowHandler) h.Get("/", h.Home()) @@ -49,6 +50,10 @@ func bootstrapHandler(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "static/css/bootstrap.css") } +func sorttableHandler(w http.ResponseWriter, r *http.Request) { + http.ServeFile(w, r, "static/js/sorttable.js") +} + func arrowHandler(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "static/images/01.png") }