fix #2987 @1

diff --git a/app/Http/Controllers/NewsController.php b/app/Http/Controllers/NewsController.php
index 1ff882c5b7d5351f300cb9764c5df3884e846eb1..acca9a4f86ab3b50de3ae7fd072fc948525ffd65 100644 (file)
--- 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 5d001166878108e68ffc4c74cf9915eda3b45c67..f3fb0112040da6818fbc96d35e178d864faec0cd 100644 (file)
--- 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 624b9647f5b30c40bf0f83876e8ad8763bd7a3be..c1b8cbf4113ad00a485388b9fbe1ec3e4295dd33 100644 (file)
--- 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 (file)
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 229e144c16333a8c5d44c4d7f76c22876966c961..93a2c0bba8fff6b1df94a5e6eb675e928a201320 100644 (file)
--- 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 ffd3e57efa886fde9306ada34924acd551b8e75e..211800a720d409414dde66c815a877908dfdd5cb 100644 (file)
--- 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 ff7620500275c84948e6544cf50ecec585f52cab..a4f4e7dec648b08157beb597e048a040cce08dc4 100644 (file)
--- 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>