diff --git a/TODO b/TODO index 67a51db5..ab4704f6 100644 --- a/TODO +++ b/TODO @@ -3,9 +3,6 @@ first major release. everything related to posts: - single post view - - post content - - post tags - - number of tag usages - basic information - uploader's picture - remember about support for anonymous uploads diff --git a/public_html/css/core.css b/public_html/css/core.css index 2816b695..9dd4bf67 100644 --- a/public_html/css/core.css +++ b/public_html/css/core.css @@ -24,6 +24,7 @@ h2 { padding: 0; display: inline-block; text-align: left; + max-width: 100%; } a { diff --git a/public_html/css/post.css b/public_html/css/post.css new file mode 100644 index 00000000..2b9599d8 --- /dev/null +++ b/public_html/css/post.css @@ -0,0 +1,72 @@ +.post-type-image img, +.post-type-video video { + max-width: 100%; +} + +.post-type-youtube iframe { + width: 800px; + height: 600px; + border: 0; +} + +#post-view-wrapper #sidebar { + line-height: 1.33em; + font-size: 90%; +} + +#post-view-wrapper #sidebar h1:first-of-type { + margin-top: 0; +} + +@media all and (min-width: 62.5em) { + #post-view-wrapper { + display: flex; + } + + #post-view-wrapper #sidebar { + min-width: 15em; + margin-right: 1em; + flex: 1; + } + + #post-view-wrapper #post-view { + min-width: 40em; + flex: 5; + } +} + +@media all and (max-width: 62.5em) { + #post-view-wrapper { + display: block; + } + #post-view-wrapper #sidebar { + order: 2; + margin-bottom: 1em; + } + #post-view-wrapper #post-view { + order: 1; + } +} + + +#post-view-wrapper #sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +#sidebar .tags .tag-wrapper { + max-width: 100%; + position: relative; + display: inline-block; +} +#sidebar .tags li a { + display: block; + padding-left: 1em; + word-break: break-all; + text-indent: -1em; +} +#sidebar .tags li .usages { + color: silver; + padding-left: 0.5em; +} diff --git a/public_html/index.html b/public_html/index.html index ff6d4ce4..da2cef63 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -30,6 +30,7 @@ + @@ -46,7 +47,6 @@ -
diff --git a/public_html/js/Presenters/PostPresenter.js b/public_html/js/Presenters/PostPresenter.js index 2a2e13c2..1bef93f8 100644 --- a/public_html/js/Presenters/PostPresenter.js +++ b/public_html/js/Presenters/PostPresenter.js @@ -12,7 +12,8 @@ App.Presenters.PostPresenter = function( var $el = jQuery('#content'); var $messages = $el; - var template; + var postTemplate; + var postContentTemplate; var post; var postNameOrId; @@ -22,12 +23,15 @@ App.Presenters.PostPresenter = function( promise.waitAll( util.promiseTemplate('post'), + util.promiseTemplate('post-content'), api.get('/posts/' + postNameOrId)) .then(function( - templatehtml, + postTemplateHtml, + postContentTemplateHtml, response) { $messages = $el.find('.messages'); - template = _.template(templatehtml); + postTemplate = _.template(postTemplateHtml); + postContentTemplate = _.template(postContentTemplateHtml); post = response.json; topNavigationPresenter.changeTitle('@' + post.id); @@ -41,9 +45,10 @@ App.Presenters.PostPresenter = function( } function render() { - $el.html(template({ + $el.html(postTemplate({ post: post, formatRelativeTime: util.formatRelativeTime, + postContentTemplate: postContentTemplate, })); } diff --git a/public_html/templates/post-content.tpl b/public_html/templates/post-content.tpl new file mode 100644 index 00000000..f2f0361d --- /dev/null +++ b/public_html/templates/post-content.tpl @@ -0,0 +1,34 @@ +<% var postContentUrl = '/data/posts/' + post.name %> + +