RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ditch bg-cover approach 

Too many problems on mobile with nicer fixed styling.
This commit is contained in:
Christopher C. Wells 2021-03-13 05:41:26 -08:00
parent 97b9fb4fb2
commit 9c68277cc6
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/RecipeController.php
View File

@ -61,15 +61,15 @@ class RecipeController extends Controller
*/ */
public function show(Recipe $recipe): View public function show(Recipe $recipe): View
{ {
// Set background image if media has been added. // Set feature image if media has been added.
$bg_image = NULL; $feature_image = NULL;
if ($recipe->hasMedia() && $recipe->getFirstMedia()->hasGeneratedConversion('header')) { if ($recipe->hasMedia() && $recipe->getFirstMedia()->hasGeneratedConversion('header')) {
$bg_image = $recipe->getFirstMediaUrl('default', 'header'); $feature_image = $recipe->getFirstMediaUrl('default', 'header');
} }
return view('recipes.show') return view('recipes.show')
->with('recipe', $recipe) ->with('recipe', $recipe)
->with('bg_image', $bg_image); ->with('feature_image', $feature_image);
} }
/** /**

13
resources/views/layouts/app.blade.php
View File

@ -34,11 +34,7 @@
</header> </header>
<!-- Page Content --> <!-- Page Content -->
@isset($bg_image) <main>
<main class="bg-contain bg-no-repeat bg-top bg-clip-border md:bg-cover md:bg-fixed" style="background-image: url('{{ $bg_image }}')">
@else
<main>
@endisset
@if(session()->has('message')) @if(session()->has('message'))
<div class="bg-green-200 p-2 mb-2"> <div class="bg-green-200 p-2 mb-2">
{{ session()->get('message') }} {{ session()->get('message') }}
@ -55,8 +51,11 @@
</div> </div>
@endif @endif
<div class="{{ isset($bg_image) ? 'pt-32' : 'pt-6' }} max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="{{ !isset($feature_image) ? 'pt-6 ' : '' }}max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white {{ isset($bg_image) ? 'md:bg-opacity-95' : '' }} overflow-hidden shadow-sm sm:rounded-lg"> @isset($feature_image)
<div class="h-64 bg-cover bg-no-repeat bg-center bg-clip-border lg:h-96" style="background-image: url('{{ $feature_image }}')"></div>
@endisset
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<article class="p-6 border-b border-gray-200"> <article class="p-6 border-b border-gray-200">
{{ $slot }} {{ $slot }}
</article> </article>

4
resources/views/recipes/show.blade.php
View File

@ -1,7 +1,7 @@
<x-app-layout> <x-app-layout>
<x-slot name="title">{{ $recipe->name }}</x-slot> <x-slot name="title">{{ $recipe->name }}</x-slot>
@if(!empty($bg_image)) @if(!empty($feature_image))
<x-slot name="bg_image">{{ $bg_image }}</x-slot> <x-slot name="feature_image">{{ $feature_image }}</x-slot>
@endisset @endisset
<x-slot name="header"> <x-slot name="header">
<h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto"> <h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">