diff --git a/static/css/style.css b/static/css/style.css index 4c6979bd..dc151237 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -13,22 +13,45 @@ span { margin-right: 5px; } +section { + display: flex; + flex-direction: column; + align-items: flex-start; +} + input, textarea { - display: block; + display: flex; + display: flex; font-family: arial, helvetica, sans-serif; font-size: 10pt; border-radius: 3px; max-width:100%; } +.form-post-wrapper { + align-items: center; +} + +.form-post { + display: flex; + flex-direction: column; + max-width: 100%; +} + .post-check { - vertical-align: sub; + position: relative; + top: 3px; display: inline-block; } .post-file { - vertical-align: top; - display: inline-block; + display: inline-flex; + flex-direction: column; + margin: 5px; +} + +.post-file-info { + margin: 2px; } input textares { @@ -36,24 +59,29 @@ input textares { } .container { - margin: 5px; - margin-top: 57px; + padding: 35px 10px; } .board-title { - color: #AF0A0F; - font-size: 20pt; - font-weight: bold; - font-family: tahoma; + color: #af0a0f; + font: bolder 28px Tahoma; letter-spacing: -2px; + text-align: center; + margin-bottom: 0; +} + +.board-description { + text-align:center; + margin-top: 0; } .post-container { - margin-top: 5px; - margin-left: 15px; - padding: 5px; + margin-top: 2px; + padding: 3px; background: #D6DAF0; - display: inline-block; + display: flex; + flex-direction: column; + align-items: flex-start; border-color: #B7C5D9; border-width: 0 1px 1px 0; border-style: none solid solid none; @@ -89,10 +117,8 @@ input textares { } .navbar { - border-bottom: 1px solid black; + border-bottom: 1px solid gray; margin: 0; - line-height: 50px; - height: 50px; position: fixed; width: 100%; background: #eef2ff; @@ -112,8 +138,7 @@ input textares { } .footer { - line-height: 50px; - border-top: 1px solid black; + border-top: 1px solid gray; text-align: center; flex-shrink: 0; margin-top: auto; diff --git a/views/includes/postform.pug b/views/includes/postform.pug index 3a2d23e5..425d84dd 100644 --- a/views/includes/postform.pug +++ b/views/includes/postform.pug @@ -1,18 +1,19 @@ -p make a post: -form.form-post(action='/api/board/'+board._id, enctype='multipart/form-data', method='POST') - - input(type='hidden' name='_csrf' value=csrf) - - input(type='hidden' name='thread' value=thread != null ? thread._id : null) - - input#title(type='text', name='subject', placeholder='subject' autocomplete='off') - - input#name(type='text', name='name', placeholder='name' autocomplete='off') - - input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off') - - textarea#messagey(name='message', rows='8', cols='50', placeholder='message' autocomplete='off') - - input#file(type='file', name='file' multiple) - - input(type='submit', value='submit') +section.form-post-wrapper + form.form-post(action='/api/board/'+board._id, enctype='multipart/form-data', method='POST') + + input(type='hidden' name='_csrf' value=csrf) + + input(type='hidden' name='thread' value=thread != null ? thread._id : null) + + input#title(type='text', name='subject', placeholder='subject' autocomplete='off' maxlength='50') + + input#name(type='text', name='name', placeholder='name' autocomplete='off' maxlength='50') + + input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off' maxlength='50') + + textarea#message(name='message', rows='8', cols='50', placeholder='message' autocomplete='off' maxlength='2000') + + input#file(type='file', name='file' multiple) + + input(type='submit', value='submit') + diff --git a/views/mixins/post.pug b/views/mixins/post.pug index 4cffd33a..8d296fa5 100644 --- a/views/mixins/post.pug +++ b/views/mixins/post.pug @@ -1,27 +1,28 @@ mixin post(board, post) - .post-wrapper - div(class='post-container '+(post.thread ? '' : 'op')) - .post-info - input.post-check(type='checkbox', name='checked[]' value=post._id) + article(class='post-container '+(post.thread ? '' : 'op')) + header.post-info + input.post-check(type='checkbox', name='checked[]' value=post._id) + if post.subject span.post-subject #{post.subject} - span.post-name #{post.name} - span #{post.date.toLocaleString()} - span No. - if post.thread == null - a(href=`/${board._id}/thread/${post._id}`) ##{post._id} - else - a(href=`/${board._id}/thread/${post.thread}#${post._id}`) ##{post._id} - if post.files.length > 0 - .post-files - each file in post.files - .post-file - .post-file-info - span: a(href='/img/thumb-'+file.filename download=file.originalFilename) #{file.originalFilename} - span ( Size: #{file.sizeString} - span Dimensions: #{file.geometryString} ) - .post-file - a(href='/img/'+file.filename) - object(data='/img/thumb-'+file.filename type=file.mimetype) + span.post-name #{post.name} + time #{post.date.toLocaleString()} + span No. + if post.thread == null + a(href=`/${board._id}/thread/${post._id}`) ##{post._id} + else + a(href=`/${board._id}/thread/${post.thread}#${post._id}`) ##{post._id} + if post.files.length > 0 + .post-files + each file in post.files + .post-file + .post-file-info + span: a(href='/img/thumb-'+file.filename download=file.originalFilename) #{file.originalFilename} + br + span (#{file.sizeString} #{file.geometryString}) + .post-file-src + a(href='/img/'+file.filename) + object(data='/img/thumb-'+file.filename type=file.mimetype) + if post.message .post-message p(style='white-space: pre-wrap;') #{post.message} diff --git a/views/pages/board.pug b/views/pages/board.pug index 3cc350b9..18fd08f1 100644 --- a/views/pages/board.pug +++ b/views/pages/board.pug @@ -5,16 +5,20 @@ block head title /#{board._id}/ - Recent Posts block content - span #{board.name} - #{board.description} - hr(size=1) + h1.board-title /#{board._id}/ - #{board.name} + h4.board-description #{board.description} include ../includes/postform.pug hr(size=1) form(action='/api/board/'+board._id+'/delete' method='POST' enctype='application/x-www-form-urlencoded') input(type='hidden' name='_csrf' value=csrf) + if threads.length === 0 + p No posts. + hr(size=1) for thread in threads - +post(board, thread) - for post in thread.replies - +post(board, post) + section.thread(id=thread._id) + +post(board, thread) + for post in thread.replies + +post(board, post) hr(size=1) input#password(type='password', name='password', placeholder='password (for deletion)' autocomplete='off') input(type='submit', value='delete')