From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 25 Oct 2021 16:38:14 +0000 (+0200)
Subject: WIP #4820 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=83144a35d61547453da6009312dbdb654ab33371;p=odl.git

WIP #4820 @1.5
---

diff --git a/resources/views/media-library.blade.php b/resources/views/media-library.blade.php
new file mode 100644
index 0000000..1c7f2a3
--- /dev/null
+++ b/resources/views/media-library.blade.php
@@ -0,0 +1,103 @@
+@extends('layouts.app')
+
+@section('content')
+
+    @php
+        // TEMPORARY DATA MOCKUP
+        $media = [
+            [
+                'title' => "Qu’est ce que la gouvernance ?",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 1,
+                    'title' => 'Gouvernance',
+                    'color' => '#FA4E66',
+                ],
+            ],
+            [
+                'title' => 'Les outils de communication',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 2,
+                    'title' => 'Communication',
+                    'color' => '#FBB100',
+                ],
+            ],
+            [
+                'title' => "Une organisation à plusieurs niveaux",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 3,
+                    'title' => 'Organisation',
+                    'color' => '#7A2AA1',
+                ],
+            ],
+            [
+                'title' => 'Système d’information',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 4,
+                    'title' => 'Système d’information',
+                    'color' => '#2AB3C9',
+                ],
+            ],
+            [
+                'title' => "Qu’est ce que la gouvernance ?",
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/46/conversions/VIDEO2-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 1,
+                    'title' => 'Gouvernance',
+                    'color' => '#FA4E66',
+                ],
+            ],
+            [
+                'title' => 'Les outils de communication',
+                'type' => 'video',
+                'image' => 'https://odl.paris.cubedesigners.com/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'file' => '#',
+                'theme' => [
+                    'id' => 2,
+                    'title' => 'Communication',
+                    'color' => '#FBB100',
+                ],
+            ],
+        ];
+    @endphp
+
+    <h1 class="uppercase">Médiathèque</h1>
+
+    {{-- FILTERS --}}
+    <div class="mt-10">
+        <a href="#" class="inline-block bg-black hover:bg-blue text-white font-secondary font-medium leading-none py-4 px-6 rounded-full">Filtrer</a>
+    </div>
+
+    {{-- MEDIA LIBRARY GRID --}}
+    <div class="mt-10 grid grid-cols-4 gap-x-5 gap-y-16">
+        @foreach ($media as $item)
+            <div class="media-item" data-type="{{ $item['type'] }}" data-theme="{{ $item['theme']['id'] }}">
+                <div class="media-item-image relative bg-cover bg-no-repeat rounded-md pb-[56.25%]" style="background-image:url({{ $item['image'] }})">
+                    {{-- TODO: play button --}}
+                    {{-- TODO: media length --}}
+                </div>
+                <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $item['theme']['color'] }}">
+                    {{ $item['theme']['title'] }}
+                </div>
+                <div class="mt-1.5 font-semibold leading-snug">
+                    {{ $item['title'] }}
+                </div>
+            </div>
+        @endforeach
+
+    </div>
+
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 82ec5e5..00e3dff 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,6 +9,7 @@ Route::group([
 ], function () { // custom admin routes
     Route::view('/', 'home');
     Route::view('/ressources', 'resources');
+    Route::view('/mediatheque', 'media-library');
     Route::any('tools/{tool}/{args?}', 'ToolsController@index')->where(['args' => '.*']);
 });