Layout fixes to be closer to reddit

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;
+}

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

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

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

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

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

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', ''