diff --git a/public/css/admin.less b/public/css/admin.less index caaf3a1881..c44abae0ef 100644 --- a/public/css/admin.less +++ b/public/css/admin.less @@ -1,109 +1,146 @@ @import "mixins"; -.entry-row { - border-radius: 10px; - margin-bottom: 10px; - padding: 10px; - cursor: move; - width: 800px; -} -.admin-categories { - form { - margin: 0 0 0px; +.admin { + .entry-row { + border-radius: 10px; + margin-bottom: 10px; + padding: 10px; + cursor: move; + width: 800px; } - input { - height: 20px; - padding: 5px; - margin-left: 10px; - width: 150px; - border: 0; - border-radius: 5px; - margin-top: -8px; - } - input.description { - width: 400px; + .admin-categories { + form { + margin: 0 0 0px; + } } - select { - border: 0; - margin-left: 10px; - padding: 5px; - margin-top: -8px; + .entry-row { + border-radius: 10px; + margin-bottom: 10px; + padding: 10px; + cursor: move; + width: 555px; } - button { - margin-top: -7px; + input.description { + width: 400px; } - .icon{ - width: 30px; - height: 30px; - text-align: center; - line-height: 35px; - display: inline-block; - } -} - -.themes { - margin: 0; - padding: 0; - - li { - padding: 10px 16px; - margin: 0.25em 1em; - list-style-type: none; - .pointer; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - -webkit-transition: background-color 250ms linear; - -moz-transition: background-color 250ms linear; - -ms-transition: background-color 250ms linear; - -o-transition: background-color 250ms linear; - transition: background-color 250ms linear; - - img { - max-width: 150px; - float: left; + .admin-categories { + form { + margin: 0 0 0px; + } + + input { + height: 20px; + padding: 5px; + margin-left: 10px; + width: 150px; + border: 0; + border-radius: 5px; + margin-top: -8px; } - h4, p { - margin-left: 170px; + select { + border: 0; + margin-left: 10px; + padding: 5px; + margin-top: -8px; } - p { - font-size: 0.9em; + button { + margin-top: -7px; } - &:hover { - background-color: rgba(128, 128, 128, 0.2); + .icon{ + width: 30px; + height: 30px; + text-align: center; + line-height: 35px; + display: inline-block; } } -} -.motd textarea { - width: 100%; -} + .themes { + margin: 0; + padding: 0; + + li { + padding: 10px 16px; + margin: 0.25em 1em; + list-style-type: none; + .pointer; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + -webkit-transition: background-color 250ms linear; + -moz-transition: background-color 250ms linear; + -ms-transition: background-color 250ms linear; + -o-transition: background-color 250ms linear; + transition: background-color 250ms linear; + + img { + max-width: 150px; + float: left; + } + + h4, p { + margin-left: 170px; + } + p { + font-size: 0.9em; + } -.icon-container { - .row { + &:hover { + background-color: rgba(128, 128, 128, 0.2); + } + } + } + + .motd textarea { + width: 100%; + } + + .topics { margin: 0; - .span3 { - width: 20px; - height: 20px; - margin: 1px; - cursor: pointer; - line-height: 20px; - text-align: center; + padding: 0; + + > li { + .zebra; + list-style-type: none; + padding: 1em; + margin-bottom: 1em; - &:hover, &.selected { - background: black; - color: white; + ul { + margin: 0.5em 0; + + li { + list-style-type: none; + } } + } + } + + .icon-container { + .row { + margin: 0; + .span3 { + width: 20px; + height: 20px; + margin: 1px; + cursor: pointer; + line-height: 20px; + text-align: center; + &:hover, &.selected { + background: black; + color: white; + } + + } } } } \ No newline at end of file diff --git a/public/css/mixins.less b/public/css/mixins.less index fec0b45add..fbf97b2503 100644 --- a/public/css/mixins.less +++ b/public/css/mixins.less @@ -20,4 +20,14 @@ .clear { clear: both; +} + +.zebra { + &:nth-child(even) { + background: rgba(191,191,191,0.2); + } + + &:nth-child(odd) { + background: rgba(223,223,223,0.2); + } } \ No newline at end of file diff --git a/public/css/noscript.less b/public/css/noscript.less index 3e5508e560..76f15d2325 100644 --- a/public/css/noscript.less +++ b/public/css/noscript.less @@ -5,14 +5,7 @@ noscript { list-style-type: none; padding: 1em; margin-bottom: 1em; - - &:nth-child(even) { - background: rgba(191,191,191,0.2); - } - - &:nth-child(odd) { - background: rgba(223,223,223,0.2); - } + .zebra; } .categories { diff --git a/public/src/forum/admin/topics.js b/public/src/forum/admin/topics.js new file mode 100644 index 0000000000..4294f140a4 --- /dev/null +++ b/public/src/forum/admin/topics.js @@ -0,0 +1,84 @@ +$(document).ready(function() { + var topicsListEl = document.querySelector('.topics'); + + $(topicsListEl).on('click', '[data-action]', function() { + var $this = $(this), + action = this.getAttribute('data-action'), + tid = $this.parents('[data-tid]').attr('data-tid'); + + switch(action) { + case 'pin': + if (!$this.hasClass('active')) socket.emit('api:topic.pin', { tid: tid }); + else socket.emit('api:topic.unpin', { tid: tid }); + break; + case 'lock': + if (!$this.hasClass('active')) socket.emit('api:topic.lock', { tid: tid }); + else socket.emit('api:topic.unlock', { tid: tid }); + break; + case 'delete': + if (!$this.hasClass('active')) socket.emit('api:topic.delete', { tid: tid }); + else socket.emit('api:topic.restore', { tid: tid }); + break; + } + }); + + // Resolve proper button state for all topics + var topicEls = topicsListEl.querySelectorAll('li'), + numTopics = topicEls.length; + for(var x=0;x - +