various style updates

app/views/forum/_sidebar.blade.php

@@ -1,22 +1,17 @@
-<div class="categories">
-    <h4>Categories</h4>
-    <ul>
-        <li><a href="{{ action('ForumController@getIndex') }}">All Threads</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=installation,configuration">Installation / Configuration</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=authentication,security">Authentication / Security</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=requests,input">Requests / Input / Responses</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=session,cache">Session / Cache</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=database,eloquent">Database / Eloquent</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=packages,ioc">Packages / IoC </a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=views,blade,forms">Views / Blade / Forms</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=mail,queues">Mail / Queues</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=meetups">Local Community Meetups</a></li>
-        <li><a href="{{ action('ForumController@getIndex') }}?tags=laravelio">Laravel.io Site and Community</a></li>
-    </ul>
+<div class="search">
+    {{ Form::text('search', null, ['placeholder' => 'search the laravel.io forum'] )}}
 </div>
 
-<div class="new-post">
-    <h4>Create a Thread</h4>
-    <p>Forum threads are a way to begin a discussion over a specific topic. Is there a topic that you&#39;d like to discuss that you don&#39;t see in the forum?</p>
-    <a class="button full" href="{{ action('ForumController@getCreateThread') }}">Create a Thread</a>
-</div>
+    <ul>
+        <li><a href="{{ action('ForumController@getIndex') }}">All Threads</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=installation,configuration">Installation / Configuration</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=authentication,security">Authentication / Security</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=requests,input">Requests / Input / Responses</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=session,cache">Session / Cache</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=database,eloquent">Database / Eloquent</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=packages,ioc">Packages / IoC </a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=views,blade,forms">Views / Blade / Forms</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=mail,queues">Mail / Queues</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=meetups">Local Community Meetups</a><span>4</span></li>
+        <li><a href="{{ action('ForumController@getIndex') }}?tags=laravelio">Laravel.io Site and Community</a><span>4</span></li>
+    </ul>

app/views/forum/_thread_summary.blade.php

@@ -1,12 +1,11 @@
-<article>
-    <div class="title-tags">
+<div class="thread-summary">
+    {{ $thread->author->thumbnail }}
+    <div class="info">
         <h3><a href="{{ $thread->forumThreadUrl }}">{{ $thread->title }}</a></h3>
-        <div class="tags">Tags:  {{ $thread->tags->getTagList() }}</div>
+        <ul class="meta">
+            <li>{{ $thread->created_ago }}</li>
+            <li>By {{ $thread->author->name }}</li>
+        </ul>
     </div>
-
-    <ul class="meta">
-        <li><i class="icon-time"></i> {{ $thread->updated_ago }}</li>
-        <li><i class="icon-user"></i> <a href="{{ $thread->author->profileUrl }}">{{ $thread->author->name }}</a></li>
-        <li><i class="icon-comments"></i> {{ $thread->child_count_label }}</li>
-    </ul>
-</article>
+    <div class="comment-count">{{ $thread->child_count }}</div>
+</div>

app/views/forum/index.blade.php

@@ -6,24 +6,28 @@
 
 @section('content')
     <section class="forum">
-        <h1>Forum</h1>
+        <div class="header">
+            <h1>Forum</h1>
+                {{-- Display select tags --}}
+                @if(Input::get('tags'))
+                    <div class="tags">
+                        {{ Input::get('tags') }}
+                    </div>
+                @endif
+            <a class="button" href="{{ action('ForumController@getCreateThread') }}">Add new Post</a>
+        </div>
 
-        @if(Input::has('tags'))
-            <div class="tags">Threads tagged with {{ Input::get('tags') }}.</div>
-        @else
-            <div class="tags">All threads</div>
-        @endif
+        <div class="threads">
+            {{-- Loop over the threads and display the thread summary partial --}}
+            @each('forum._thread_summary', $threads, 'thread')
 
-        @if($threads->count() > 0)
-            @foreach($threads as $thread)
-                @include('forum._thread_summary')
-            @endforeach
-
-            {{ str_replace('%2C', ',', $threads->links()) }}
-        @else
-            <div class="">
-                There are currently no threads for the selected category.
-            </div>
-        @endif
+            {{-- If no comments are found display a message --}}
+            @if(!$threads->count())
+                <div class="empty-state">
+                    <h3>No threads found that are tagged with {{ Input::get('tags') }}</h3>
+                    <a class="button" href="{{ action('ForumController@getCreateThread') }}">Create a new thread</a>
+                </div>
+            @endif
+        </div>
     </section>
 @stop

app/views/forum/thread.blade.php

@@ -4,23 +4,28 @@
     @include('forum._sidebar')
 @stop
 
-<style>
-    /* Better styles for embedding GitHub Gists */
-    .gist{font-size:13px;line-height:18px;margin-bottom:20px;width:100%}
-    .gist pre{font-family:Menlo,Monaco,'Bitstream Vera Sans Mono','Courier New',monospace !important}
-    .gist-meta{font-family:Helvetica,Arial,sans-serif;font-size:13px !important}
-    .gist-meta a{color:#26a !important;text-decoration:none}
-    .gist-meta a:hover{color:#0e4071 !important}
-</style>
 
 @section('content')
+<div class="forum">
+    <div class="header">
+        <h1>{{ $thread->title }}</h1>
+    </div>
+    <div class="thread">
+        {{ $thread->body }}
+    </div>
+    <div class="comments">
+        @foreach($comments as $comment)
+            @include('forum._comment')
+        @endforeach
+    </div>
+</div>
+
+
     <div class="row forum">
         <div class="small-12 columns comments">
-            @foreach($comments as $comment)
-                @include('forum._comment')
-            @endforeach
 
-            {{ $comments->links() }}
+
+
 
             @if(Auth::check())
                 <div class="row">

app/views/layouts/_top_nav.blade.php

@@ -1,36 +1,22 @@
 <header class="top-navigation">
+<div class="top-navigation-logo">
+    <a href="{{ action('HomeController@getIndex') }}">
+        <img class="logo" src="/images/laravel-io-logo-dark-v3.png">
+    </a>
+</div>
     <nav>
-        <ul class="top-navigation-signin-mobile">
-            @if(Auth::check())
-                {{-- <li><a href="{{ action('DashboardController@getIndex') }}">{{ Auth::user()->name }}'s Dashboard</a></li> --}}
-                <li><a href="{{ action('AuthController@getLogout') }}">Logout</a></li>
-            @else
-                <li><a href="{{ action('AuthController@getLogin') }}">Login with GitHub</a></li>
-            @endif
-        </ul>
-        <div class="top-navigation-logo">
-            <a href="{{ action('HomeController@getIndex') }}">
-                <img class="logo" src="/images/laravel-io-logo-small.png">
-            </a>
-        </div>
-        <ul class="top-navigation-items">
-<!--             <li>
-                <a href="{{ action('ArticlesController@getIndex') }}">Articles</a>
-            </li>
- -->            <li>
+        <ul>
+            <li>
                 <a href="{{ action('ForumController@getIndex') }}">Forum</a>
             </li>
-<!--             <li>
-                <a href="{{ action('ChatController@getIndex') }}">Chat</a>
-            </li>
- -->        </ul>
-        <ul class="top-navigation-signin-desktop">
-            @if(Auth::check())
-                {{-- <li><a href="{{ action('DashboardController@getIndex') }}">{{ Auth::user()->name }}<span class="dashboard-word">'s Dashboard</span></a></li> --}}
-                <li><a href="{{ action('AuthController@getLogout') }}">Logout</a></li>
-            @else
-                <li><a href="{{ action('AuthController@getLogin') }}">Login with GitHub</a></li>
-            @endif
         </ul>
     </nav>
+    <ul class="user-navigation">
+        @if(Auth::check())
+            {{-- <li><a href="{{ action('DashboardController@getIndex') }}">{{ Auth::user()->name }}<span class="dashboard-word">'s Dashboard</span></a></li> --}}
+            <li><a href="{{ action('AuthController@getLogout') }}">Logout</a></li>
+        @else
+            <li><a class="button inverse" href="{{ action('AuthController@getLogin') }}">Login with GitHub</a></li>
+        @endif
+    </ul>
 </header>

app/views/layouts/default.blade.php

@@ -18,8 +18,10 @@
   @include('layouts._top_nav')
   @include('layouts._flash')
 
-  <div class="content">
-     {{ $content }}
+  <div class="holder">
+     <div class="test">
+      {{ $content }}
+      </div>
   </div>
 
   @include('layouts._footer')

public/scss/app.scss

@@ -27,4 +27,5 @@
 @import "modules/_global";
 @import "modules/_forum";
 @import "modules/_buttons";
-@import "modules/_sidebar";
+@import "modules/_sidebar";
+@import "modules/_empty-state";

public/scss/modules/__clean-module-skeleton.scss

@@ -20,7 +20,7 @@
 
 @media only screen and (min-width: 768px) {
 
-    .module {}
+
 }
 
 

public/scss/modules/_empty-state.scss

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   MOBILE FIRST MODULE SKELETON
+   ========================================================================== */
+
+// MOBILE STYLES ////////////////////////////////////////////////////////////
+
+.module {}
+
+
+// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 480px) {
+
+    .module {}
+
+}
+
+
+// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 768px) {
+
+    .empty-state {
+        h3 {
+            margin: 0;
+            padding: 0 0 15px 0;
+        }
+    }
+}
+
+
+// BREAKPOINT 3 (1024) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 1024px) {
+
+    .module {}
+}
+
+
+// BREAKPOINT 4 (1440) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 1440px) {
+
+    .module {}
+}

public/scss/modules/_forum.scss

@@ -26,34 +26,37 @@
 
         .header {
             @include clearfix;
-            padding: 19px 0 18px 15px;
+            padding: 19px 15px 18px 15px;
             border-bottom:1px solid #cdcdcd;
-        }
 
-        h1 {
-            font-size:22px;
-            margin: 0;
-            float: left;
-            font-family: 'Source Sans Pro', sans-serif;
-            font-weight: 800;
-        }
+            h1 {
+                font-size:22px;
+                margin: 0;
+                float: left;
+                font-family: 'Source Sans Pro', sans-serif;
+                font-weight: 800;
+            }
 
-        .tags {
-            float: right;
-            margin: 0;
-            padding: 5px 0 0 0;
+            .tags {
+                display: block;
+                float: left;
+                font-family: 'Source Sans Pro', sans-serif;
+                font-weight: 400;
+                font-size:16px;
+                padding: 4px 0 0 7px;
+                font-style: italic;
+            }
 
-            li {
-                list-style-type: none;
+            .button {
+                float: right;
             }
         }
 
-
-        .topics {
+        .threads {
             @include span-columns(12);
-            padding: 15px 0 15px 15px;
+            padding: 15px 15px 15px 15px;
 
-            .topic {
+            .thread-summary {
                 width:100%;
                 @include clearfix;
                 padding: 12px 20px 12px 10px;
@@ -74,6 +77,14 @@
                     color:$lioGrey;
                     font-family: 'Source Sans Pro', sans-serif;
                     font-weight: 400;
+
+                    a {
+                        color:$lioGrey;
+
+                        &:hover {
+                            color:$lioRed;
+                        }
+                    }
                 }
 
                 ul {
@@ -96,6 +107,7 @@
                 }
 
                 .comment-count {
+                    min-width:25px;
                     float: right;
                     background: #cdcdcd;
                     padding: 5px;
@@ -105,10 +117,14 @@
                 }
             }
 
-            .topic:nth-child(odd) {
+            .thread-summary:nth-child(odd) {
                 background: white;
             }
         }
+
+        .thread {
+            padding: 15px;
+        }
     }
 }
 

public/scss/modules/_header.scss

@@ -27,6 +27,7 @@
     header {
         @include clearfix;
         border-bottom:1px solid #cdcdcd;
+        padding: 0 15px;
     }
 
     .user-navigation {