From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 1 Aug 2019 15:44:39 +0000 (+0200)
Subject: WIP #2751 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c817fc9b98ca90f201538c56ea88385b6451c21c;p=pmi.git

WIP #2751 @4
---

diff --git a/app/Templates/Home.php b/app/Templates/Home.php
index 73600d7..ade9ed5 100644
--- a/app/Templates/Home.php
+++ b/app/Templates/Home.php
@@ -2,7 +2,6 @@
 
 namespace App\Templates;
 
-use App\Models\ProductType;
 use App\Models\News;
 
 class Home extends Base
diff --git a/app/Templates/News.php b/app/Templates/News.php
index 3a7a88a..83c2530 100644
--- a/app/Templates/News.php
+++ b/app/Templates/News.php
@@ -38,4 +38,52 @@ class News extends Base
         Debugbar::stopMeasure('nav_news');
     }
 
+    // Set extra data for News blade view
+    public function setData(&$data)
+    {
+        $data['news'] = $this->_getNews();
+        $data['events'] = $this->_getEvents();
+    }
+
+    protected function _getNews()
+    {
+
+        $newsItems = [];
+
+        $news = NewsModel::where([
+            ['type', '=', 'news'],
+            ['status', '=', 1],
+        ])
+            ->orderBy('date', 'desc')
+            ->get();
+
+        foreach ($news as $newsItem) {
+            $newsItems[$newsItem->id] = $newsItem;
+        }
+
+        return $newsItems;
+
+    }
+
+    protected function _getEvents()
+    {
+
+        $eventItems = [];
+
+        $events = NewsModel::where([
+            ['type', '=', 'event'],
+            ['status', '=', 1],
+        ])
+            ->orderBy('date', 'desc')
+            ->take(2)
+            ->get();
+
+        foreach ($events as $eventItem) {
+            $eventItems[$eventItem->id] = $eventItem;
+        }
+
+        return $eventItems;
+
+    }
+
 }
diff --git a/resources/styles/components/news.styl b/resources/styles/components/news.styl
index c7b341f..5bb6a53 100644
--- a/resources/styles/components/news.styl
+++ b/resources/styles/components/news.styl
@@ -4,13 +4,15 @@
     display: grid
     constrain(grid-gap, 2.5vw)
     grid-template: "image body sidebar" auto / 1fr 2fr 1fr
+    grid-template-rows: max-content
+    grid-template-columns: auto
 
     +below(1200px)
-      grid-template: "image sidebar" "body sidebar"
+      grid-template-areas: "image sidebar" "body sidebar"
       grid-column-gap: 5vw
 
     +below(700px)
-      grid-template: "image" "body" "sidebar"
+      grid-template-areas: "image" "body" "sidebar"
       grid-row-gap: 5vw
 
   &-image
diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php
index 90e10a0..58f34d5 100644
--- a/resources/views/pages/home.blade.php
+++ b/resources/views/pages/home.blade.php
@@ -128,7 +128,7 @@
                             $newsURL = $nav->getHrefByID("news/{$newsItem->id}");
                         @endphp
 
-                        <div>
+                        <article>
                             <a href="{{ $newsURL }}">
                                 {{--Todo: handle missing images + get correct image size--}}
                                 <img class="mb-4" src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'thumb') }}" alt="{{ $newsItem->title }}">
@@ -136,8 +136,8 @@
                             <h4 class="font-display">{{ $newsItem->title }}</h4>
                             <p>{{ $newsItem['chapo'] }}</p>
 
-                            <p><a href="{{ $newsURL }}">Lire la suite</a></p>
-                        </div>
+                            <p><a href="{{ $newsURL }}">{{ __('Lire la suite') }}</a></p>
+                        </article>
                     @endforeach
                 </grid>
             </content>
diff --git a/resources/views/pages/news.blade.php b/resources/views/pages/news.blade.php
new file mode 100644
index 0000000..9f78ea1
--- /dev/null
+++ b/resources/views/pages/news.blade.php
@@ -0,0 +1,50 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <full-width padding="pb-3v">
+        <content>
+
+            {{-- Todo: use grid for main (generic?) sidebar layout and utilise minmax for content? --}}
+            <div class="news-index-layout flex">
+
+                <div class="news-items">
+                    @foreach ($news as $newsItem)
+                        @php
+                            $newsURL = $nav->getHrefByID("news/{$newsItem->id}");
+                        @endphp
+
+                        {{-- Todo: use smaller grid for each article: 1fr image, 2fr content with a minmax on image to auto wrap --}}
+                        <article class="flex">
+
+                            <a href="{{ $newsURL }}" class="news-item-image">
+                                {{--Todo: handle missing images + get correct image size--}}
+                                <img class="mb-1v mr-1v" src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'thumb') }}" alt="{{ $newsItem->title }}">
+                            </a>
+
+                            <div class="news-item-text">
+                                <h4 class="font-display">{{ $newsItem->title }}</h4>
+                                <p>{{ $newsItem['chapo'] }}</p>
+
+                                <p><a href="{{ $newsURL }}">{{ __('En savoir plus') }}</a></p>
+                            </div>
+
+                        </article>
+                    @endforeach
+                </div>
+
+                <div class="news-sidebar">
+                    <div class="bg-grey-100 p-1v mb-1v">
+                        Events
+                    </div>
+
+                    <div class="bg-grey-100 p-1v">
+                        Newsletter subscribe
+                    </div>
+                </div>
+
+            </div>
+
+        </content>
+    </full-width>
+@endsection
diff --git a/tailwind.config.js b/tailwind.config.js
index 3650b54..e44e517 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,8 +7,8 @@ module.exports = {
             // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'.
             // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller
             // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2)
-            'xl': {'max': '1450px'}, // => @media (max-width: 1450px) { ... }
-            'lg': {'max': '1280px'}, // => @media (max-width: 1280px) { ... }
+            //'xl': {'max': '1450px'}, // => @media (max-width: 1450px) { ... }
+            //'lg': {'max': '1280px'}, // => @media (max-width: 1280px) { ... }
             'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
             'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... }
             'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... }