Rework homepage UI

Summary:
* New welcome section, featuring "how to" video and steps
* Featured and popular documents list
  * Document card display

Resolves T231
Resolves T232

Test Plan: * Check the new homepage against mockups

Reviewers: doshitan

Reviewed By: doshitan

Subscribers: atogle

Maniphest Tasks: T232, T231

Differential Revision: https://phabricator.opengovfoundation.org/D126

Author: sethetter

app/Http/Controllers/HomeController.php

@@ -15,30 +15,13 @@ class HomeController extends Controller
      */
     public function index(Request $request)
     {
-        $categories = $request->input('categories');
+        $featuredDocuments = Document::getFeatured();
+        $popularDocuments = Document::getActiveOrRecent(3);
 
-        $selectedCategories = [];
-
-        $documentQuery = Document::getEager()->where('publish_state', Document::PUBLISH_STATE_PUBLISHED);
-
-        if ($categories) {
-            $selectedCategories = Category::whereIn('id', $categories)->get();
-            $documentQuery->whereHas('categories', function($q) use ($categories) {
-                $q->whereIn('id', $categories);
-            });
-        }
-
-        $documents = $documentQuery->paginate(5);
-        $featuredDocuments = Document::getFeaturedOrRecent();
-        $mostActiveDocuments = Document::getActive(6);
-        $mostRecentDocuments = Document::mostRecentPublicWithOpenDiscussion()->get();
-
-        return view('home', compact(
+        return view('home', compact([
             'selectedCategories',
-            'documents',
             'featuredDocuments',
-            'mostActiveDocuments',
-            'mostRecentDocuments'
-        ));
+            'popularDocuments',
+        ]));
     }
 }

app/Models/Doc.php

@@ -5,10 +5,12 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Str;
 use App\Models\Category;
 use App\Models\DocContent as DocumentContent;
 use App\Services\SearchQueryCompiler;
 use App\Traits\RootAnnotatableHelpers;
+use GrahamCampbell\Markdown\Facades\Markdown;
 use Event;
 use Exception;
 use URL;
@@ -104,6 +106,7 @@ public function introtext()
 
     public function setIntroText($value)
     {
+        $htmlCacheKey = static::introtextHtmlCacheKey($this);
         $introtext = DocMeta
             ::where('meta_key', '=', 'intro-text')
             ->where('doc_id', $this->id)
@@ -118,9 +121,15 @@ public function setIntroText($value)
             $introtext->meta_value = $value;
         }
 
+        Cache::forget($htmlCacheKey);
         $introtext->save();
     }
 
+    public function shortIntroText()
+    {
+        return Str::words(strip_tags($this->introtext_html), 15, ' ...');
+    }
+
     public function dates()
     {
         return $this->hasMany('App\Models\Date');
@@ -309,6 +318,7 @@ public function enableSponsors()
     public function enableIntrotext()
     {
         $this->appends[] = 'introtext';
+        $this->appends[] = 'introtext_html';
     }
 
     public function getIntrotextAttribute()
@@ -320,6 +330,29 @@ public function getIntrotextAttribute()
         }
     }
 
+    public function getIntrotextHtmlAttribute()
+    {
+        if ($this->introtext()->count()) {
+            $cacheKey = static::introtextHtmlCacheKey($this);
+
+            if (Cache::has($cacheKey)) {
+                return Cache::get($cacheKey);
+            }
+
+            $introtextHtml = Markdown::convertToHtml($this->introtext()->first()->meta_value);
+            Cache::forever($cacheKey, $introtextHtml);
+
+            return $introtextHtml;
+        }
+
+        return null;
+    }
+
+    protected static function introtextHtmlCacheKey(Doc $document)
+    {
+        return 'doc-'.$document->id.'-introtext-html';
+    }
+
     public function getSponsorIdsAttribute()
     {
         $ids = [];
@@ -451,6 +484,27 @@ public static function getEager()
             ->with('dates');
     }
 
+    /**
+     * Get a number of active documents, filling in with recent documents if
+     * number requested is not fufilled.
+     */
+    public static function getActiveOrRecent($num = 10, $offset = 0)
+    {
+        $documents = collect(static::getActive($num, $offset));
+
+        if ($documents->count() < $num) {
+            $recentDocuments = static
+                ::where('publish_state', static::PUBLISH_STATE_PUBLISHED)
+                ->where('is_template', '!=', '1')
+                ->orderBy('created_at', 'desc')
+                ->take($num - $documents->count())
+                ;
+            $documents = $documents->union($recentDocuments->get());
+        }
+
+        return $documents;
+    }
+
     /*
      * Active documents are much harder to query.  We do this with its own
      * custom query.
@@ -556,43 +610,6 @@ public static function getFeatured($onlyPublished = true)
         return null;
     }
 
-
-    public static function getFeaturedOrRecent()
-    {
-        $docs = static::getFeatured();
-
-        // If we don't have a document, just find anything recent.
-        if (empty($docs)) {
-            $docs =
-                static::with('categories')
-                ->with('sponsors')
-                ->with('statuses')
-                ->with('dates')
-                ->where('publish_state', '=', static::PUBLISH_STATE_PUBLISHED)
-                ->where('is_template', '!=', '1')
-                ->orderBy('created_at', 'desc')
-                ->limit(1)
-                ->get()
-                ;
-        }
-
-        $return_docs = [];
-        foreach ($docs as $key => $doc) {
-            $doc->enableCounts();
-            $doc->enableSponsors();
-            $return_doc = $doc->toArray();
-
-            $return_doc['introtext'] = $doc->introtext()->first()['meta_value'];
-            $return_doc['updated_at'] = date('c', strtotime($return_doc['updated_at']));
-            $return_doc['created_at'] = date('c', strtotime($return_doc['created_at']));
-            $return_doc['featuredImageUrl'] = $doc->getFeaturedImageUrl();
-
-            $return_docs[] = $return_doc;
-        }
-
-        return $return_docs;
-    }
-
     public static function allOwnedBy($userId)
     {
         $rawDocs = \DB::select(

database/seeds/DocumentsTableSeeder.php

@@ -11,12 +11,14 @@ class DocumentsTableSeeder extends Seeder
 {
     public function run()
     {
+        $faker = Faker\Factory::create();
         $sponsor = Sponsor::find(1);
 
         $documents = factory(Document::class, (int)config('madison.seeder.num_docs'))->create([
             'publish_state' => Document::PUBLISH_STATE_PUBLISHED,
-        ])->each(function ($document) use ($sponsor) {
+        ])->each(function ($document) use ($sponsor, $faker) {
             $document->sponsors()->attach($sponsor);
+            $document->setIntroText(join(' ', $faker->sentences));
             $document->content()->save(factory(DocContent::class)->make());
         });
 

resources/assets/sass/global.scss

@@ -29,6 +29,10 @@
   display: inline;
 }
 
+footer.nav {
+  padding-bottom: 30px;
+}
+
 // Overlay shadows
 %simple-shadow {
   box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);

resources/assets/sass/home.scss

@@ -1,7 +1,6 @@
-.home-feature {
-  @extend .col-md-12;
-}
+.doc-card.thumbnail {
+  padding: 0;
 
-.document-thumbnail {
-  max-width: 100%;
+  .caption { padding: 13px; }
+  img { border-radius: 4px 4px 0 0; }
 }

resources/lang/en/messages.php

@@ -61,8 +61,23 @@
     // Home Page Stuff
     'home' => [
         'home' => 'Home',
-        'welcome' => 'Add your voice...',
-        'intro' => 'Find legislation and regulations being developed and get informed. Then get involved and collaboratively craft the documents with the sponsors. To get started, choose from the recent documents below, or search the whole repository.',
+        'welcome' => 'Add your voice',
+        'intro' => 'Legislation and regulations that impact your life are written every day. With Madison, you can work directly <em>with</em> the sponsors of these documents.',
+        'learn_more' => 'Learn more',
+        'how_it_works' => [
+            'title' => 'How it Works',
+            'step1' => 'Elected officials share policy documents on Madison for public collaboration.',
+            'step2' => 'The people can read the documents, vote on the documents, and leave feedback on the documents, and their comments are sent <strong>directly to the officials</strong>.',
+            'step3' => 'Officials respond to these comments and even make changes to the documents based on the feedback.',
+        ],
+        'sponsor_cta' => [
+            'title' => 'Have a document to share?',
+            'text' => 'You can easily request to become a document sponsor and add the public\'s voice and credibility to your proposal.',
+            'action_text' => 'Learn about how to become a sponsor.',
+        ],
+        'featured_title' => 'Featured',
+        'popular_title' => 'Popular',
+        'all_documents' => 'View all documents',
     ],
 
     'search' => [
@@ -78,6 +93,7 @@
 
     // Document Stuff
     'document' => [
+        'read' => 'Read this document',
         'title' => 'Title',
         'title_invalid' => 'Can\'t create document with that name, please try another.',
         'slug' => 'Custom URL (slug)',

resources/views/home.blade.php

@@ -4,24 +4,25 @@
 
 @section('content')
 
-<div class="row">
-    <div class="col-md-6">
-        <section class="home-feature">
-            @each('home/partials/featured-document', $featuredDocuments, 'document')
-        </section>
+    @include('home.partials.welcome')
 
-        @include('home/partials/active-documents', [
-            'mostActiveDocuments' => $mostActiveDocuments,
-            'mostRecentDocuments' => $mostRecentDocuments,
-        ])
-    </div>
+    @if (collect($featuredDocuments)->count() > 0)
+        <h2>@lang('messages.home.featured_title')</h2>
+        <div class="row featured">
+            @each('home.partials.document-card', $featuredDocuments, 'document')
+        </div>
+    @endif
 
-    <div class="col-md-6">
-        @include('home/partials/welcome')
-        @include('home/partials/search-list', [
-            'documents' => $documents
-        ])
+    <h2>@lang('messages.home.popular_title')</h2>
+    <div class="row popular">
+        @each('home.partials.document-card', $popularDocuments, 'document')
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <a href="{{ route('documents.index') }}" class="btn btn-lg btn-primary pull-right">
+                @lang('messages.home.all_documents') &raquo;
+            </a>
+        </div>
     </div>
-</div>
 
 @endsection

resources/views/home/partials/active-documents.blade.php

@@ -0,0 +1,32 @@
+<div class="col-md-4">
+    <div class="thumbnail doc-card">
+        <a href="{{ route('documents.show', $document) }}">
+            <img src="{{ $document->getFeaturedImageUrl() }}" class="img-responsive">
+        </a>
+        <div class="caption">
+            <div class="intro">
+                <h4>
+                    <a href="{{ route('documents.show', $document) }}">
+                        {{ $document->title }}
+                    </a>
+                    <br>
+                    <small class="text-muted">
+                        {{ $document->sponsors->implode('display_name', ', ') }}
+                    </small>
+                </h4>
+                <p>{{ $document->shortIntroText() }}</p>
+            </div>
+
+            <hr>
+
+            <div class="row">
+                <div class="col-md-6">
+                    <small class="text-muted">{{ $document->created_at->toDateString() }}</small>
+                </div>
+                <div class="col-md-6 text-right">
+                    <small class="text-muted">{{ $document->all_comments_count }} {{ trans('messages.document.comments') }}</small>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>