shihaam/karudhaas
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

NEW UI

Browse Source
This commit is contained in:
Mohamed jinas
2021-05-07 07:22:11 +05:00
parent e2bfb8de57
commit 925bd60c9e
24 changed files with 25620 additions and 5748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/AvailableSources.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="border-b mt-5">
<div class=" mt-5">
<div class="mb-5">
<div>
<h2

2
resources/js/components/RecentStories.vue
View File

@@ -2,7 +2,7 @@
<div class="mb-10">
<div>
<h3
class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
class="text-gray-800 text-3xl text-right mt-5 mb-2 mr-3 MvAamu"
style="font-weight: 100;"
>
ފަހުގެ ޚަބަރުތައް

6
resources/views/components/footer.blade.php
View File

@@ -20,11 +20,7 @@
<div class="py-8 flex">
<p class="text-gray-600">Made with ❤️ in Maldives. By <span><a href="https://github.com/boring-dragon"
class="text-blue-600 hover:underline">@boring_dragon</a>, <a href="https://github.com/Dharisd"
class="text-blue-600 hover:underline">@dharisd</a>, <a href="https://github.com/shihaamabr"
class="text-blue-600 hover:underline">@shihaamabr</a>
</span></p>
<p class="text-gray-600">Made with ❤️ in Maldives.</p>
</div>
</div>

11
resources/views/components/layout.blade.php
View File

@@ -9,8 +9,6 @@
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}" defer></script>
<script src="{{ mix('/js/app.js') }}" defer></script>
@yield('js')
@@ -27,19 +25,12 @@
{{ $slot }}
</main>
<x-footer>
<x-slot name="credits">
<a href="https://github.com/jinas123" class="text-blue-600 hover:underline">@jinas123</a>,
<a href="https://github.com/Dharisd" class="text-blue-600 hover:underline">@dharisd</a>,
<a href="https://github.com/shihaamabr" class="text-blue-600 hover:underline">@shihaamabr</a>
</x-slot>
</x-footer>
<x-footer />
</div>
</div>
@include('sweetalert::alert')
</body>
</html>

276
resources/views/home.blade.php
View File

@@ -17,12 +17,278 @@
<meta property="og:image" content="/images/ogi.jpg">
</x-slot>
<todays-pick></todays-pick>
<div id="explore">
<!-- todays pick -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<h2 class="text-gray-800 text-3xl text-right md:pr-12 MvAamu" style="font-weight: 100;">
މިއަދުގެ ޚުލާޞާ
</h2>
<div class="flex flex-wrap mt-8 sm:mt-16 flex-row-reverse">
<div class="md:w-2/3 w-full pb-6 md:pb-0 md:pr-12">
<a
href="{{ route('articles.show', [$todays_pick[0]['source']->slug, $todays_pick[0]['guid']]) }}">
<div class="h-96 w-full">
<img src="{{ $todays_pick[0]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $todays_pick[0]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $todays_pick[0]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $todays_pick[0]['source']->name }}</p>
</a>
</div>
<img src="{{ $todays_pick[0]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[0]['published_date']->diffForHumans() }}</p>
</a>
</div>
<div class="md:w-1/3 w-full md:pr-12">
<a
href="{{ route('articles.show', [$todays_pick[1]['source']->slug, $todays_pick[1]['guid']]) }}">
<div class="h-96 w-full">
<img src="{{ $todays_pick[1]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $todays_pick[1]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $todays_pick[1]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $todays_pick[1]['source']->name }}</p>
</a>
</div>
<img src="{{ $todays_pick[1]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[1]['published_date']->diffForHumans() }}</p>
</a>
</div>
</div>
</div>
<discover-topics></discover-topics>
<!-- todays pick -->
<available-sources></available-sources>
<!-- Posts start -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
@foreach ($todays_pick->splice(1, 4) as $article)
<a href="{{ route('articles.show', [$article['source']->slug, $article['guid']]) }}">
<div class="flex flex-col items-end">
<div class="w-64 h-64 pr-5">
<img src="{{ $article['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<recent-stories></recent-stories>
<div class="pt-3 pb-3 ml-2 pr-5">
</x-layout>
<p class="text-xl text-gray-800 leading-8 MvTyper text-right">{{ $article['title'] }}
</p>
<p class="text-sm text-gray-500 text-right mt-3 MvTyper">
{{ $article['source']->name }}
</p>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $todays_pick[1]['published_date']->diffForHumans() }}</p>
</div>
</div>
</a>
@endforeach
</div>
</div>
<!-- Posts end -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<recent-stories></recent-stories>
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- covid -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">ކޮވިޑް 19 އާއި ގުޅޭ</h2>
<div class="border-b-2 border-red-500 w-48"></div>
</div>
<div class="flex flex-wrap mt-8 sm:mt-16">
<div class="md:w-1/3 w-full md:pr-12">
<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-8">
@foreach ($covid19_articles->splice(1) as $article)
<a href="{{ route('articles.show', [$article->source->slug, $article->guid]) }}">
<div>
<div class="h-44 w-full">
<img src="{{ $article->featured_image }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<h2 class="mt-3 text-gray-900 MvTyper text-right" dir="rtl">{{ $article->title }}
</h2>
<p class="text-gray-600 text-sm mt-3 text-right">
{{ $article->published_date->diffForHumans() }}</p>
</div>
</a>
@endforeach
</div>
</div>
<div class="md:w-2/3 w-full pb-6 md:pb-0">
<a href="./blog.html">
<div class="h-96 w-full">
<img src="{{ $covid19_articles[0]['featured_image'] }}" alt=""
class="h-full w-full object-cover overflow-hidden rounded shadow" />
</div>
<p class="mt-6 mb-2 text-sm text-red-500 text-right">ކޮވިޑް 19</p>
<h2
class="text-2xl md:text-1xl lg:text-1xl leading-11 text-gray-800 pb-4 pt-4 MvTyper font-semibold text-right">
{{ $covid19_articles[0]['title'] }}</h2>
<div class="flex justify-end items-center mt-3">
<div>
<a href="{{ route('sources.show', $covid19_articles[0]['source']->slug) }}"
class="hover:underline">
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper">
{{ $covid19_articles[0]['source']->name }}</p>
</a>
</div>
<img src="{{ $covid19_articles[0]['source']->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover">
</div>
<p class="text-gray-600 text-sm mt-4 text-right">
{{ $covid19_articles[0]['published_date']->diffForHumans() }}</p>
</a>
</div>
</div>
</div>
<!-- covid -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- viyafari -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end mb-10">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">
ވިޔަފާރި
</h2>
<div class="border-b-2 border-green-500 w-16"></div>
</div>
<div class="container mx-auto">
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
@foreach ($business_articles as $article)
<div class="w-1/2 md:w-1/4 px-4 py-4 flex-grow">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}">
<div class="w-full h-auto overflow-hidden relative rounded">
<img src="{{ $article->featured_image }}" />
</div>
</a>
<div class="w-full h-auto text-right overflow-hidden mt-3">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}"
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
style="direction:rtl;">{{ $article->title }}</a>
<div class="flex items-center justify-end mt-3 mb-3">
<a href="/source/{{ $article->source->slug }}">
<div class="flex justify-end items-center">
<div>
<p class="font-semibold text-gray-600 text-sm capitalize MvTyper">
{{ $article->source->name }}</p>
</div>
<img src="{{ $article->source->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover" />
</div>
</a>
</div>
<p class="ml-1 text-gray-600 text-right MvTyper" style="direction:rtl; font-size:13px;">
{{ $article->published_date->locale('dv')->isoFormat('Do MMMM YYYY') }}
</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
<!-- viyafaari -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<!-- kulhivaru -->
<div class="mx-auto container py-6 sm:py-12 px-4 xl:px-0">
<div class="flex flex-col items-end mb-10">
<h2 class="text-gray-800 text-3xl text-right MvAamu" style="font-weight: 100;">
ކުޅިވަރު
</h2>
<div class="border-b-2 border-blue-500 w-16"></div>
</div>
<div class="container mx-auto">
<div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
@foreach ($sports_articles as $article)
<div class="w-1/2 md:w-1/4 px-4 py-4 flex-grow">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}">
<div class="w-full h-auto overflow-hidden relative rounded">
<img src="{{ $article->featured_image }}" />
</div>
</a>
<div class="w-full h-auto text-right overflow-hidden mt-3">
<a href="/article/{{ $article->source->slug }}/{{ $article->guid }}"
class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
style="direction:rtl;">{{ $article->title }}</a>
<div class="flex items-center justify-end mt-3 mb-3">
<a href="/source/{{ $article->source->slug }}">
<div class="flex justify-end items-center">
<div>
<p class="font-semibold text-gray-600 text-sm capitalize MvTyper">
{{ $article->source->name }}</p>
</div>
<img src="{{ $article->source->logo }}"
class="h-10 w-10 rounded-full ml-1 object-cover" />
</div>
</a>
</div>
<p class="ml-1 text-gray-600 text-right MvTyper" style="direction:rtl; font-size:13px;">
{{ $article->published_date->locale('dv')->isoFormat('Do MMMM YYYY') }}
</p>
</div>
</div>
@endforeach
</div>
</div>
</div>
<!-- kulhivaru -->
<div class="container px-4 xl:px-0 mx-auto">
<hr class="border-t border-gry-300" />
</div>
<available-sources class="mt-5"></available-sources>
</div>
</x-layout>

69
resources/views/partials/header.blade.php
View File

@@ -1,32 +1,45 @@
<div class="text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<div class="flex items-center justify-between flex-row px-6">
<div class="p-4 flex flex-row items-center justify-between">
<a href="/"
class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
<img class="w-24" src="/images/logo.png" />
</a>
</div>
<nav class="flex-grow pb-4 flex justify-end flex-row py-4 mr-3">
<a class="border px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline MvAamu"
href="/mylist">
<div class="flex justify-center">
<p class="mr-2"> ރައްކާކުރެވިފައިވާ</p>
<svg class="h-5 w-5 text-gray-800" fill="currentcolor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<g data-name="Froppy disk">
<path
d="M61.707 10.293l-8-8A1 1 0 0053 2H7a5.006 5.006 0 00-5 5v50a5.006 5.006 0 005 5h50a5.006 5.006 0 005-5V11a1 1 0 00-.293-.707zM48 4v16a1 1 0 01-1 1H17a1 1 0 01-1-1V4zM10 60V35a3 3 0 013-3h38a3 3 0 013 3v25zm50-3a3 3 0 01-3 3h-1V35a5.006 5.006 0 00-5-5H13a5.006 5.006 0 00-5 5v25H7a3 3 0 01-3-3V7a3 3 0 013-3h7v16a3 3 0 003 3h30a3 3 0 003-3V4h2.586L60 11.414z" />
<path
d="M39 19h6a1 1 0 001-1V7a1 1 0 00-1-1h-6a1 1 0 00-1 1v11a1 1 0 001 1zm1-11h4v9h-4zM47 45H17a1 1 0 000 2h30a1 1 0 000-2zM47 39H17a1 1 0 000 2h30a1 1 0 000-2zM47 51H17a1 1 0 000 2h30a1 1 0 000-2z" />
</g>
</svg>
<!-- Nav starts here -->
<div class="py-4 md:py-10">
<header class="mx-auto container px-4 xl:px-0">
<div class="flex items-center justify-end">
<a href="/">
<img class="w-40" src="/images/karudhaas.png" alt="logo"/>
</a>
<div>
<div id="menu" class="md:block lg:block hidden">
<div onclick="toggleMenu(false)" class="block md:hidden lg:hidden text-gray-500 hover:text-gray-700 focus:text-gray-700 fixed focus:outline-none z-30 top-0 pt-4">
<svg aria-haspopup="true" aria-label="Main Menu" xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</div>
<ul class="flex md:flex text-3xl md:text-base bg-white lg:text-base lg:flex flex-col md:flex-row lg:flex-row justify-center items-center fixed md:relative lg:relative top-0 bottom-0 left-0 right-0 z-20">
<li class="md:hidden md:mr-8 lg:mr-10 flex items-center">
<a class="hover:text-gray-800 text-gray-600 font-semibold pt-10 md:pt-0" href="./about.html">About</a>
</li>
<li class="md:hidden md:mr-8 lg:mr-10 flex items-center">
<a class="hover:text-gray-800 text-gray-600 font-semibold pt-10 md:pt-0" href="./blog.html">Blog</a>
</li>
</ul>
</div>
</div>
</div>
</header>
</div>
<!--
<div class="mt-12 container mx-auto xl:px-0">
</a>
<ul class="hidden text-lg sm:flex items-center flex-row-reverse">
<li onclick="toggleContent(this,1)" class="-mb-px border-b-2 border-gray-800 pb-5 text-gray-800 mr-20 MvTyper font-bold">ބަނޑޭރި</li>
<li onclick="toggleContent(this,2)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ވިޔަފާރި</li>
<li onclick="toggleContent(this,3)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ކުޅިވަރު</li>
<li onclick="toggleContent(this,4)" class="-mb-px cursor-pointer pb-5 text-gray-600 mr-20 MvTyper font-bold">ދުނިޔެ</li>
</ul>
<hr class="hidden sm:block border-t-2 border-gray-300" />
</nav>
</div>
</div>
</div>
-->
<!-- Nav ends here -->