diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/img/profile.png | bin | 0 -> 9320 bytes | |||
| -rw-r--r-- | public/assets/javascripts/ui/lib/Parser.js | 27 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/ProjectList.js | 3 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/site/StaffView.js | 49 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 19 | ||||
| -rw-r--r-- | public/assets/stylesheets/staff.css | 103 |
6 files changed, 186 insertions, 15 deletions
diff --git a/public/assets/img/profile.png b/public/assets/img/profile.png Binary files differnew file mode 100644 index 0000000..bde68e0 --- /dev/null +++ b/public/assets/img/profile.png diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 1cf0418..52c96e6 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -21,7 +21,7 @@ var Parser = { } }, tag: function (media) { - return '<img src="' + media.url + '" onerror="imgError(this);">'; + return '<img src="' + media.url + '">'; } }, { type: 'video', @@ -43,7 +43,7 @@ var Parser = { video.load() }, tag: function (media) { - return '<video src="' + media.url + '" onerror="imgError(this);">'; + return '<video src="' + media.url + '">'; } }, { type: 'youtube', @@ -73,7 +73,8 @@ var Parser = { }) }, tag: function (media) { - return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">▶</span>'; + // return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">▶</span>'; + return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" width="' + media.width + '" height="' + media.height + '" src="http://youtube.com/embed/' + media.token + '?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>' } }, { type: 'vimeo', @@ -101,7 +102,8 @@ var Parser = { }) }, tag: function (media) { - return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">▶</span>'; + // return '<img class="video" type="vimeo" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">▶</span>'; + return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&js_api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>' } }, /* @@ -165,5 +167,18 @@ var Parser = { if (! matched) { cb(null) } - } -}
\ No newline at end of file + }, + + tag: function (media){ + if (media.type in Parser.lookup) { + return Parser.lookup[media.type].tag(media) + } + return "" + }, + + thumbnail: function (media) { + return '<img src="' + (media.thumbnail || media.url) + '" class="thumb">'; + }, + +}; +Parser.lookup = _.indexBy(Parser.integrations, 'type'); diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js index d772b20..ee1b89f 100644 --- a/public/assets/javascripts/ui/site/ProjectList.js +++ b/public/assets/javascripts/ui/site/ProjectList.js @@ -1,7 +1,7 @@ var ProjectList = View.extend({ - el: "#projectList", + el: ".projectList", events: { "mouseenter td.border": 'spinOn', @@ -24,4 +24,3 @@ var ProjectList = View.extend({ } }) - diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js new file mode 100644 index 0000000..fdf39d2 --- /dev/null +++ b/public/assets/javascripts/ui/site/StaffView.js @@ -0,0 +1,49 @@ +var StaffView = View.extend({ + el: ".page", + + events: { + "click #toggle-staff": "toggleStaff", + }, + + initialize: function() { + this.$toggleStaff = $("#toggle-staff") + this.$mediaEmbed = $("#media-embed") + if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) { + this.$toggleStaff.html("Is Staff") + } + if (this.$mediaEmbed.length) { + var media = this.$mediaEmbed.data() + this.$mediaEmbed.html( Parser.tag( media ) ) + } + }, + + load: function() { + $(".json").each(function(){ + $(this).JSONView( this.innerText ) + }).show() + + this.projectList = new ProjectList () + }, + + toggleStaff: function(){ + var state = ! this.$toggleStaff.data().isstaff + var verb = state ? "promote this user to staff?" : "remove this user from staff?" + ConfirmModal.confirm("Are you sure you want to " + verb, function(){ + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/bless", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleStaff.data("isstaff", data.state) + this.$toggleStaff.html(data.state ? "Is Staff" : "Make Staff") + $("#is-staff").html(data.state ? "yes" : "no") + }.bind(this) + }) + }.bind(this)) + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 5922ab5..17a7dc0 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -161,23 +161,26 @@ h5 { text-align:center; } -.page .profile { +.page.profile { color:white; } -.page table { +.page table.demo, +.page table.profilepage, +.page table.projectList { width: 100%; border-top: 1px solid; margin: 40px 0 0 0; border-spacing: 0; - clear:nboth; + clear: both; } -.page tr { +.page table.profilepage tr, +.page table.projectList tr { height: 400px; } .page table.showcase { height:70vh; } -.page table td.border { +.page table.projectList td.border { position: relative; border-right: 1px solid; } @@ -191,7 +194,9 @@ iframe.embed { z-index: -1; pointer-events: none; } -.page table td { +.page table.demo td, +.page table.profilepage td, +.page table.projectList td { width: 33.3333%; background-size: cover; background-repeat: no-repeat; @@ -238,7 +243,7 @@ iframe.embed { color:white; } -#projectList .editBtn { +.projectList .editBtn { position: absolute; right: 10px; top: 10px; diff --git a/public/assets/stylesheets/staff.css b/public/assets/stylesheets/staff.css new file mode 100644 index 0000000..aa21f9b --- /dev/null +++ b/public/assets/stylesheets/staff.css @@ -0,0 +1,103 @@ +* { + font-weight: 300; +} +th, b { + font-weight: bold; +} +table { + display: inline-block; + margin-right: 40px; + vertical-align: top; +} +td, th { + text-align: left; + padding: 2px 5px; +} +.page { + text-align: left; +} +.footer { + text-align: center; +} +h1 { + text-align: left; + display: inline-block; +} +nav { + display: inline-block; + text-align: left; +} +nav a { + padding-left: 20px; +} +hr { + border: 1px solid #bbb; + margin: 5px auto 10px; +} +.body { + width: 80%; + margin: 0 auto; +} +.json { + display: none; +} +.jsonview { + border: 1px solid #ddd; + background: rgba(238,238,238,0.5); + padding: 4px; + margin: 0 auto; + max-width: 100%; + overflow-x: auto; + margin-bottom: 20px; + max-height: 60vh; +} +.jsonview * { + font-family: monospace !important; + font-size: 12px; +} +.jsonview .collapser { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.staff { + font-size: 15px; +} +.staff .editLinks a { + color: #00f; +} +#iframe-embed, #iframe-embed tr, #iframe-embed td { + width: 79vw; +} +#iframe-embed td { + padding: 0; +} +h2 { + margin: 20px auto; +} +.avatar { + height: 40px; + width: 40px; + display: inline-block; + background-size: cover; +} +#actions button { + float: none; + width: auto; +} +iframe.embed { + position: static; + width: 100%; + height: 44vw; + border: 1px solid black; +} +.page table.projectList, +.page table.projectList td.border { + border: 0; +} +#pagination { + margin: 10px 0; +} +#pagination a { + color: #00f; +}
\ No newline at end of file |
