Merge branch 'atomaka/feature/reddify-1' into 'master'

Layout fixes to be closer to reddit

Design setup closer to Reddit.  Sidebar, header, posts, etc.  Hacky for now.  Fix later after spending more time in views.

See merge request !12

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