diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png new file mode 100644 index 0000000..31a38b4 Binary files /dev/null and b/app/assets/images/logo.png differ diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss index b0bbad6..e6cdabb 100644 --- a/app/assets/stylesheets/custom.scss +++ b/app/assets/stylesheets/custom.scss @@ -5,3 +5,97 @@ $navbar-default-link-hover-color: #369; @import "bootstrap-sprockets"; @import "bootstrap"; + +.sidebar { + display: block; + + .input-group { + margin-bottom: 5px; + } + + .title { + margin-top: 10px; + margin-bottom: 0px; + text-transform: uppercase; + color: grey; + font-size: 1em; + } + + .box { + padding: 5px; + border: solid 1px grey; + font-size: .8em; + + + ul { + list-style: none; + list-style-type: none; + margin: 0; + padding: 0; + } + + li { + list-style: none; + list-style-type: none; + margin: 0; + } + } +} + +.navbar { + .logo { + margin-top: 3px; + margin-right: 10px; + } +} + +.posts { + .post { + p { + margin-bottom: 1px; + } + + .title { + font-size: 1.2em; + } + + .details { + font-size: .8em; + } + + .links { + font-size: .8em; + } + + .content { + border: 1px solid #369; + background-color: #fafafa; + border-radius: 7px; // need to work all browsers + padding: 5px; + } + } + + ul { + list-style: none; + list-style-type: none; + padding: 0; + margin: 0; + } + + li { + list-style: none; + list-style-type: none; + } + + li:first-child { + padding-left: 0px; + } +} + +.navbar-custom { + margin-bottom: 7px; +} + +.main { + margin: 0 5px 0 5px; +} diff --git a/app/views/application/_navbar.html.slim b/app/views/application/_navbar.html.slim index acb378c..754f55f 100644 --- a/app/views/application/_navbar.html.slim +++ b/app/views/application/_navbar.html.slim @@ -1,4 +1,4 @@ -.navbar.navbar-default.navbar-static-top +.navbar.navbar-default.navbar-static-top.navbar-custom .container-fluid .navbar-header button.navbar-toggle.collapsed type='button' data-toggle='collapse' data-target='.navbar-collapse' @@ -6,10 +6,12 @@ span.icon-bar span.icon-bar span.icon-bar + .pull-left= link_to image_tag('logo.png', height: 44, class: 'logo'), root_path = link_to 'Creddit', root_path, class: 'navbar-brand' .collapse.navbar-collapse ul.nav.navbar-nav - li= link_to 'Subcreddits', subcreddits_path + - if @subcreddit && @subcreddit.name + li= link_to @subcreddit.name, @subcreddit ul.nav.navbar-nav.navbar-right - if logged_in? li= link_to 'Sign Out', signout_path diff --git a/app/views/application/_sidebar.html.slim b/app/views/application/_sidebar.html.slim new file mode 100644 index 0000000..9226d89 --- /dev/null +++ b/app/views/application/_sidebar.html.slim @@ -0,0 +1,21 @@ +.sidebar + .input-group + input.form-control type="text" placeholder="search" + span.input-group-btn + button.btn.btn-default type="button" + span.glyphicon.glyphicon-search aria-hidden="true" + + - if @subcreddit && @subcreddit.id + = link_to 'Submit a new link', new_subcreddit_post_path(@subcreddit), class: 'button btn btn-primary btn-block' + = link_to 'Submit a new text post', new_subcreddit_post_path(@subcreddit), class: 'button btn btn-primary btn-block' + = link_to 'Create your own subcreddit', new_subcreddit_path, class: 'button btn btn-primary btn-block' + + - if @subcreddit && @subcreddit.id + .title Moderation Tools + .box + ul + li= link_to 'subcreddit settings', edit_subcreddit_path(@subcreddit) + .title Moderators + .box + ul + li= @subcreddit.owner.username diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 2d96faa..cb2cfdd 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -5,11 +5,12 @@ html = stylesheet_link_tag 'application', media: 'all' = javascript_include_tag 'application' = csrf_meta_tags - body == render 'navbar' .container == render 'flash_messages' - - .container-fluid - = yield + .main.container-fluid + .col-md-3.pull-right + == render 'sidebar' + .col-md-9 + = yield diff --git a/app/views/posts/_form.html.slim b/app/views/posts/_form.html.slim index 69ae3c3..1a81182 100644 --- a/app/views/posts/_form.html.slim +++ b/app/views/posts/_form.html.slim @@ -1,7 +1,8 @@ -= simple_form_for [subcreddit, post] do |f| - .form-inputs - = f.input :title - = f.input :link - = f.input :content - .form-actions - = f.button :submit +.col-md-9 + = simple_form_for [subcreddit, post] do |f| + .form-inputs + = f.input :title, class: 'inline-block' + = f.input :link + = f.input :content + .form-actions + = f.button :submit diff --git a/app/views/posts/show.html.slim b/app/views/posts/show.html.slim index d57a53a..5eba19a 100644 --- a/app/views/posts/show.html.slim +++ b/app/views/posts/show.html.slim @@ -1,2 +1,18 @@ -h1= @post.title -= @post.content +.posts + .post.show + p.title= link_to @post.title, [@subcreddit, @post] + p.details= "submitted #{distance_of_time_in_words @post.created_at, Time.now} ago by #{@post.user.username}" + ul.links.list-inline + li= link_to 'XXX comments', '' + li= link_to 'source', '' + li= link_to 'share', '' + li= link_to 'save', '' + li= link_to 'hide', '' + li= link_to 'give gold', '' + li= link_to 'spam', '' + li= link_to 'remove', '' + li= link_to 'approve', '' + li= link_to 'report', '' + li= link_to 'nsfw', '' + li= link_to 'hide all child comments', '' + p.content= @post.content diff --git a/app/views/subcreddits/show.html.slim b/app/views/subcreddits/show.html.slim index e401b25..dfe22a8 100644 --- a/app/views/subcreddits/show.html.slim +++ b/app/views/subcreddits/show.html.slim @@ -1,8 +1,13 @@ -h1= @subcreddit.name - if @subcreddit.closed? = "Board has been closed" - else - = link_to 'New Post', new_subcreddit_post_path(@subcreddit) - ul - - @subcreddit.posts.each do |post| - li= link_to post.title, [@subcreddit, post] + .posts + ul + - @subcreddit.posts.order('created_at DESC').each_with_index do |post, rank| + li + .post + p.title= link_to post.title, [@subcreddit, post] + p.details= "submitted #{distance_of_time_in_words post.created_at, Time.now} ago by #{post.user.username}" + ul.links.list-inline + li= link_to 'XXX comments', '' + li= link_to 'share', ''