Topic View
This commit is contained in:
		@@ -13,7 +13,7 @@
 | 
			
		||||
            <div class="w-full lg:w-2/3">
 | 
			
		||||
                <div v-for="story in recentStories" :key="story.id">
 | 
			
		||||
                    <a
 | 
			
		||||
                        href=""
 | 
			
		||||
                        :href="'/article/' + story.id"
 | 
			
		||||
                        class="block w-full lg:flex mb-10 shadow rounded-lg"
 | 
			
		||||
                    >
 | 
			
		||||
                        <div
 | 
			
		||||
 
 | 
			
		||||
@@ -3,8 +3,8 @@
 | 
			
		||||
@section('content')
 | 
			
		||||
<div>
 | 
			
		||||
    <div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
 | 
			
		||||
    <div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
 | 
			
		||||
      style="background-image: url({{$article->featured_image}});"
 | 
			
		||||
    <div class="absolute left-0 bottom-0 w-full h-full z-10"
 | 
			
		||||
      style="background-image: url({{$article->featured_image}}); filter: brightness(50%);"
 | 
			
		||||
      ></div>
 | 
			
		||||
    <div class="p-4 absolute bottom-0 right-0 z-20">
 | 
			
		||||
    <h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;">{{$article->title}}</h2>
 | 
			
		||||
 
 | 
			
		||||
@@ -6,33 +6,7 @@
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
			
		||||
 | 
			
		||||
    <link rel="stylesheet" href="/css/app.css">
 | 
			
		||||
    <style>
 | 
			
		||||
        @font-face {
 | 
			
		||||
            font-family: "mvtyper";
 | 
			
		||||
            src: url("/fonts/mvtyper.ttf");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        @font-face {
 | 
			
		||||
            font-family: "Mvaamu";
 | 
			
		||||
            src: url("/fonts/mv-aammu-fk.ttf");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        @font-face {
 | 
			
		||||
            font-family: "MvWaheed";
 | 
			
		||||
            src: url("/fonts/mv_waheed.otf");
 | 
			
		||||
        }
 | 
			
		||||
        .MvAamu {
 | 
			
		||||
            font-family: "Mvaamu";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .MvTyper {
 | 
			
		||||
            font-family: "mvtyper";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .MvWaheed {
 | 
			
		||||
            font-family: "MvWaheed";
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
    <link rel="stylesheet" href="/css/styles.css">
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
</head>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										59
									
								
								resources/views/topics/show.blade.php
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										59
									
								
								resources/views/topics/show.blade.php
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,59 @@
 | 
			
		||||
@extends('layouts.app')
 | 
			
		||||
 | 
			
		||||
@section('content')
 | 
			
		||||
<div>
 | 
			
		||||
    <section class="mx-auto max-w-6xl py-5">
 | 
			
		||||
        <div class="flex flex-col">
 | 
			
		||||
            <div class="flex flex-col md:flex-row justify-center items-center">
 | 
			
		||||
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
 | 
			
		||||
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
 | 
			
		||||
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center"></div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="flex flex-col md:flex-row justify-center items-center">
 | 
			
		||||
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
 | 
			
		||||
                    <div slot="middle-right" class="max-w-xs">
 | 
			
		||||
                        <div class="flex flex-col justify-center h-48 p-3">
 | 
			
		||||
                            <div class="text-5xl font-bold text-gray-800 mb-2 text-center MvAamu">{{$topic->name}}</div>
 | 
			
		||||
                            <div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
 | 
			
		||||
                                {{$topic->name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
 | 
			
		||||
 | 
			
		||||
                @foreach ($topic->articles as $article)
 | 
			
		||||
                <div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                    <div slot="bottom-left" class="max-w-xs">
 | 
			
		||||
                        <div class="p-5 shadow-md m-2 mt-4">
 | 
			
		||||
 | 
			
		||||
                            <a href="{{route('articles.show', $article->id)}}">
 | 
			
		||||
                                <img class="object-scale-down h-30" src="{{$article->featured_image}}"
 | 
			
		||||
                                    alt="{{$article->meta['title']}}">
 | 
			
		||||
                            </a>
 | 
			
		||||
 | 
			
		||||
                            <div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
 | 
			
		||||
                                {{$article->source->name}}</div>
 | 
			
		||||
 | 
			
		||||
                            <a href="{{route('articles.show', $article->id)}}">
 | 
			
		||||
                                <div class="text-md font-bold leading-7 mb-2 MvTyper text-right hover:underline">
 | 
			
		||||
                                    {{$article->title}}</div>
 | 
			
		||||
                            </a>
 | 
			
		||||
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                </div>
 | 
			
		||||
 | 
			
		||||
                @endforeach
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </section>
 | 
			
		||||
</div>
 | 
			
		||||
@endsection
 | 
			
		||||
		Reference in New Issue
	
	Block a user