From b4e04c45ae4823b03189e373e647a77165588098 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 29 Aug 2019 17:31:02 +0200
Subject: [PATCH] fix #2987 @1

---
 app/Http/Controllers/NewsController.php      |  2 +-
 app/Models/Application.php                   |  2 +-
 app/Models/News.php                          | 15 +++++++++++----
 resources/styles/components/application.styl | 20 ++++++++++++++++++++
 resources/styles/components/news.styl        |  8 ++++++++
 resources/views/pages/application.blade.php  |  6 +++---
 resources/views/pages/news.blade.php         |  6 +++---
 7 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 resources/styles/components/application.styl

diff --git a/app/Http/Controllers/NewsController.php b/app/Http/Controllers/NewsController.php
index 1ff882c..acca9a4 100644
--- a/app/Http/Controllers/NewsController.php
+++ b/app/Http/Controllers/NewsController.php
@@ -18,7 +18,7 @@ class NewsController extends CubistFrontController
         }
 
         $this->data['title'] = $newsItem->title;
-        $this->data['image'] = $newsItem->getFirstMediaUrl($newsItem->image, 'thumb');
+        $this->data['image'] = $newsItem->getFirstMediaUrl($newsItem->image, 'details');
         $this->data['news'] = $newsItem;
         $this->data['page'] = $newsItem->getPageData();
 
diff --git a/app/Models/Application.php b/app/Models/Application.php
index 5d00116..f3fb011 100644
--- a/app/Models/Application.php
+++ b/app/Models/Application.php
@@ -22,7 +22,7 @@ class Application extends CubistMagicPageModel
         parent::registerMediaConversions($media);
 
         $this->addMediaConversion('thumb')
-            ->crop('crop-center', 348, 232);
+            ->width(600);
     }
 
     public function setFields()
diff --git a/app/Models/News.php b/app/Models/News.php
index 624b964..c1b8cbf 100644
--- a/app/Models/News.php
+++ b/app/Models/News.php
@@ -2,22 +2,29 @@
 
 namespace App\Models;
 
+use Spatie\Image\Manipulations;
+use Spatie\MediaLibrary\Conversion\Conversion;
 use Spatie\MediaLibrary\Models\Media;
 
 class News extends \Cubist\Backpack\app\Magic\Models\News
 {
-    public function registerMediaConversions(Media $media = null) {
+    public function registerMediaConversions(Media $media = null)
+    {
 
         parent::registerMediaConversions($media);
 
-        $this->addMediaConversion('thumb')
-             ->crop('crop-center', 348, 232);
+        $this->addMediaConversion('details')
+            ->width(600);
+
+        $this->addMediaConversion('index_thumb')
+            ->crop(Manipulations::CROP_CENTER, 600, 400);
     }
 
     // Display compact date range in localised human readable format
     // Ref: https://codereview.stackexchange.com/a/78303
     // Alternative: https://github.com/flack/ranger
-    public function formatDateRange($start, $end) {
+    public function formatDateRange($start, $end)
+    {
 
         if ($start->format('Y-m-d') === $end->format('Y-m-d')) {
             # Same day
diff --git a/resources/styles/components/application.styl b/resources/styles/components/application.styl
new file mode 100644
index 0000000..54fa800
--- /dev/null
+++ b/resources/styles/components/application.styl
@@ -0,0 +1,20 @@
+.application-post
+  &-layout
+    display: grid
+    constrain(grid-gap, 2.5vw)
+    grid-template: "image body" auto / 1fr 3fr
+    grid-template-rows: max-content
+    grid-template-columns: auto
+
+    +below(700px)
+      grid-template-areas: "image" "body"
+      grid-row-gap: 5vw
+
+  &-image
+    max-width: 349px
+    grid-area: image
+    +below(700px)
+      max-width: 100%
+
+  &-body
+    grid-area: body
diff --git a/resources/styles/components/news.styl b/resources/styles/components/news.styl
index 229e144..93a2c0b 100644
--- a/resources/styles/components/news.styl
+++ b/resources/styles/components/news.styl
@@ -16,6 +16,7 @@
     grid-area: articles
 
   // Internal grid for each article
+
   &-article
     display: grid
     constrain(grid-gap, 2.5vw)
@@ -37,6 +38,10 @@
 
   &-sidebar
     grid-area: sidebar
+    max-width: 348px
+    .event img
+      width 100%;
+
 
 
 //=== Individual News Post
@@ -58,7 +63,10 @@
       grid-row-gap: 5vw
 
   &-image
+    max-width: 349px
     grid-area: image
+    +below(700px)
+      max-width: 100%
 
   &-body
     grid-area: body
diff --git a/resources/views/pages/application.blade.php b/resources/views/pages/application.blade.php
index ffd3e57..211800a 100644
--- a/resources/views/pages/application.blade.php
+++ b/resources/views/pages/application.blade.php
@@ -6,11 +6,11 @@
         <content>
             <text-block :title="$page->title" title-tag="h1"/>
 
-            <div class="news-post-layout">
+            <div class="application-post-layout">
                 {{-- Todo: use larger image + srcset here --}}
-                <img src="{{ $page->getImageURL('image','thumb') }}" alt="{{ $page->title }}" class="news-post-image">
+                <img src="{{ $page->getImageURL('image','thumb') }}" alt="{{ $page->title }}" class="application-post-image">
 
-                <div class="news-post-body">
+                <div class="application-post-body">
                     @markdown($page->content)
                 </div>
             </div>
diff --git a/resources/views/pages/news.blade.php b/resources/views/pages/news.blade.php
index ff76205..a4f4e7d 100644
--- a/resources/views/pages/news.blade.php
+++ b/resources/views/pages/news.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-
+    @intro(['padding' => 'pb-4v'])
     <full-width padding="pb-3v">
         <content>
 
@@ -18,7 +18,7 @@
 
                             <a href="{{ $newsURL }}" class="news-index-article-image">
                                 {{--Todo: handle missing images + get correct image size--}}
-                                <img src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'thumb') }}" alt="{{ $newsItem->title }}">
+                                <img src="{{ $newsItem->getFirstMediaUrl($newsItem->image, 'index_thumb') }}" alt="{{ $newsItem->title }}">
                             </a>
 
                             <div class="news-index-article-text">
@@ -45,7 +45,7 @@
 
                             <div class="event @if(!$loop->last) mb-8 @endif">
                                 <a href="{{ $eventURL }}">
-                                    <img src="{{ $event->getFirstMediaUrl($event->image, 'thumb') }}" alt="{{ $event->title }}" style="max-width:252px" class="mb-3">
+                                    <img src="{{ $event->getFirstMediaUrl($event->image, 'details') }}" alt="{{ $event->title }}" style="max-width:252px" class="mb-3">
                                 </a>
                                 <h4 class="font-medium mb-1">{{ $event->title }}</h4>
                                 <p>{{ $event->formatDateRange($event->event_start, $event->event_end) }}, {{ $event->event_place }}</p>
-- 
2.39.5