Source View more articles and date fix
This commit is contained in:
@@ -30,7 +30,7 @@ class SourcesAPIController extends Controller
|
||||
{
|
||||
return response()->json([
|
||||
'source' => new SourceResource($source),
|
||||
'articles' => ArticleResource::collection($source->articles()->latest("published_date")->paginate(8))
|
||||
'articles' => $source->articles()->with('source')->latest('published_date')->paginate(8)
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,8 +16,7 @@ class SourcesController extends Controller
|
||||
public function show(Source $source)
|
||||
{
|
||||
return view('sources.show', [
|
||||
'source' => $source,
|
||||
'articles' => $source->articles()->with('source')->latest('published_date')->paginate(20)
|
||||
'source' => $source
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
50
package-lock.json
generated
50
package-lock.json
generated
@@ -1068,6 +1068,17 @@
|
||||
"purgecss": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"@lottiefiles/lottie-player": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-0.3.0.tgz",
|
||||
"integrity": "sha512-XxRTIEiD3LUUOmsymhLmtyMpGpjRMQhuOqjF3K8PDIE0UEi/yWS67N4klx5UccTACc/pI2TSB5oKl31Z9qVSeA==",
|
||||
"requires": {
|
||||
"@types/pako": "^1.0.1",
|
||||
"lit-element": "^2.3.1",
|
||||
"lottie-web": "^5.6.6",
|
||||
"pako": "^1.0.11"
|
||||
}
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
@@ -1117,6 +1128,11 @@
|
||||
"integrity": "sha512-kVrqXhbclHNHGu9ztnAwSncIgJv/FaxmzXJvGXNdcCpV1b8u1/Mi6z6m0vwy0LzKeXFTPLH0NzwmoJ3fNCIq0g==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/pako": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.1.tgz",
|
||||
"integrity": "sha512-GdZbRSJ3Cv5fiwT6I0SQ3ckeN2PWNqxd26W9Z2fCK1tGrrasGy4puvNFtnddqH9UJFMQYXxEuuB7B8UK+LLwSg=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
|
||||
@@ -5445,6 +5461,19 @@
|
||||
"leven": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"lit-element": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
|
||||
"integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
|
||||
"requires": {
|
||||
"lit-html": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"lit-html": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.3.0.tgz",
|
||||
"integrity": "sha512-0Q1bwmaFH9O14vycPHw8C/IeHMk/uSDldVLIefu/kfbTBGIc44KGH6A8p1bDfxUfHdc8q6Ct7kQklWoHgr4t1Q=="
|
||||
},
|
||||
"loader-runner": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
|
||||
@@ -5520,6 +5549,19 @@
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"lottie-player-vue": {
|
||||
"version": "0.0.14",
|
||||
"resolved": "https://registry.npmjs.org/lottie-player-vue/-/lottie-player-vue-0.0.14.tgz",
|
||||
"integrity": "sha512-0Gznqnxdsz+mNGkI9xYuX03E/z3k9oYDClKAMLx/8BVbmKLGRof9LVxhNz+eirT4hqACUnWfsUaaJzfAOrhApA==",
|
||||
"requires": {
|
||||
"@lottiefiles/lottie-player": "^0.3.0-rc2"
|
||||
}
|
||||
},
|
||||
"lottie-web": {
|
||||
"version": "5.7.2",
|
||||
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.2.tgz",
|
||||
"integrity": "sha512-lLQ/r/WlYxXe+J8zki/0blBNtNRJJBKm0AdBcD8KJXxpY4Epf70+9XwBM/Z4OHRP+89V1Tuma1wq5oR+hy08qg=="
|
||||
},
|
||||
"lower-case": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
|
||||
@@ -6346,8 +6388,7 @@
|
||||
"pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
|
||||
},
|
||||
"parallel-transform": {
|
||||
"version": "1.2.0",
|
||||
@@ -9411,11 +9452,6 @@
|
||||
"vue-style-loader": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"vue-localstorage": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-localstorage/-/vue-localstorage-0.6.2.tgz",
|
||||
"integrity": "sha512-29YQVVkIdoS6BZBCJAyu9d0OR0eKSm5gk5OjsLssV1+NM4zJnf9cxhN1AVeXkUHJLqOonECweuaR8PZ2x307dw=="
|
||||
},
|
||||
"vue-moment": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
"laravel-mix-tailwind": "^0.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"lottie-player-vue": "0.0.14",
|
||||
"tailwindcss": "^1.6.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-moment": "^4.1.0"
|
||||
"vue": "^2.6.11"
|
||||
}
|
||||
}
|
||||
|
||||
2
public/css/app.css
vendored
2
public/css/app.css
vendored
File diff suppressed because one or more lines are too long
2
public/js/app.js
vendored
2
public/js/app.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/vendor.js
vendored
2
public/js/vendor.js
vendored
File diff suppressed because one or more lines are too long
@@ -14,3 +14,7 @@
|
||||
*/
|
||||
|
||||
//! moment.js
|
||||
|
||||
//! moment.js language configuration
|
||||
|
||||
//! moment.js locale configuration
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"/js/app.js": "/js/app.js?id=713804f0b0e614772183",
|
||||
"/css/app.css": "/css/app.css?id=5dced5120f246bf09705",
|
||||
"/js/app.js": "/js/app.js?id=e47cdeeda3dbde02b161",
|
||||
"/css/app.css": "/css/app.css?id=1a87fdd2f7566b3e8bee",
|
||||
"/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
|
||||
"/js/vendor.js": "/js/vendor.js?id=596002803ce0d197ef4c"
|
||||
"/js/vendor.js": "/js/vendor.js?id=968f85387c9bab0e92d2"
|
||||
}
|
||||
|
||||
5
resources/js/app.js
vendored
5
resources/js/app.js
vendored
@@ -6,8 +6,8 @@ import TodaysPick from "./components/TodaysPick";
|
||||
import DiscoverTopics from "./components/DiscoverTopics";
|
||||
import RecentStories from "./components/RecentStories";
|
||||
import AvailableSources from './components/AvailableSources';
|
||||
import SourceView from './components/SourceView';
|
||||
|
||||
Vue.use(require('vue-moment'));
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
@@ -15,6 +15,7 @@ const app = new Vue({
|
||||
TodaysPick,
|
||||
DiscoverTopics,
|
||||
RecentStories,
|
||||
AvailableSources
|
||||
AvailableSources,
|
||||
SourceView
|
||||
}
|
||||
});
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="flex justify-end items-center">
|
||||
<div>
|
||||
<p
|
||||
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||
class="font-semibold text-gray-600 text-sm capitalize MvTyper"
|
||||
v-text="story.source.name"
|
||||
></p>
|
||||
</div>
|
||||
@@ -47,9 +47,12 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<span class="text-gray-600 text-xs ml-1">
|
||||
{{ story.published_date | moment("calendar") }}
|
||||
</span>
|
||||
<p
|
||||
class="ml-1 text-gray-600 text-right MvTyper"
|
||||
style="direction:rtl; font-size:13px;"
|
||||
>
|
||||
{{ story.published_date | dhivehiDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,6 +61,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "recent-stories",
|
||||
|
||||
@@ -67,6 +72,14 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/recent")
|
||||
|
||||
151
resources/js/components/SourceView.vue
Normal file
151
resources/js/components/SourceView.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<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 slot="middle-right" class="max-w-xs">
|
||||
<div class="flex flex-col justify-center h-48 p-3">
|
||||
<div
|
||||
class="flex flex-col items-center shadow hover:shadow-lg rounded-lg p-3"
|
||||
>
|
||||
<img :src="source.logo" class="h-16 w-16" />
|
||||
<div
|
||||
class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2"
|
||||
>
|
||||
{{ source.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-sm my-3 MvTyper text-center leading-6"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{ source.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"
|
||||
>
|
||||
<div
|
||||
v-for="article in articles"
|
||||
:key="article.id"
|
||||
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="#">
|
||||
<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>
|
||||
<p
|
||||
class="font-semibold text-gray-400 text-xs MvTyper"
|
||||
style="direction: rtl;"
|
||||
>
|
||||
{{ article.published_date | dhivehiDate }}
|
||||
</p>
|
||||
|
||||
<a href="#">
|
||||
<div
|
||||
class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline"
|
||||
>
|
||||
{{ article.title }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
:disabled="loading != 0"
|
||||
v-if="moreArticles"
|
||||
@click="fetchNewArticles()"
|
||||
class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
|
||||
>
|
||||
{{ loading ? "Loading...." : "Show more" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
export default {
|
||||
props: {
|
||||
source: Object
|
||||
},
|
||||
name: "source-view",
|
||||
|
||||
data() {
|
||||
return {
|
||||
articles: [],
|
||||
current_page: 0,
|
||||
totalCount: {
|
||||
count: 0
|
||||
},
|
||||
loading: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios.get(`/api/source/${this.source.slug}`).then(response => {
|
||||
this.current_page = response.data.articles.current_page;
|
||||
this.totalCount.count = response.data.articles.total;
|
||||
this.articles = response.data.articles.data;
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
moreArticles() {
|
||||
//Calculating if there is any more articles
|
||||
return this.articles.length < this.totalCount.count;
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchNewArticles() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get(
|
||||
`/api/source/${this.source.slug}?page=${this.current_page +
|
||||
1}`
|
||||
)
|
||||
.then(response => {
|
||||
this.current_page = response.data.articles.current_page;
|
||||
// spread the array item into individual arguments
|
||||
this.articles.push(...response.data.articles.data);
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -43,14 +43,12 @@
|
||||
<div
|
||||
class="text-gray-600 text-md mt-1 flex justify-end items-center"
|
||||
>
|
||||
|
||||
|
||||
<p
|
||||
class="text-gray-600 text-sm text-right mb-2"
|
||||
class="text-gray-600 text-sm text-right mb-2 MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{
|
||||
subarticle.published_date
|
||||
| moment("calendar")
|
||||
subarticle.published_date | dhivehiDate
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
@@ -74,18 +72,14 @@
|
||||
class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
|
||||
v-if="article"
|
||||
>
|
||||
<a
|
||||
:href="'/article/' + article.id"
|
||||
>
|
||||
<a :href="'/article/' + article.id">
|
||||
<img
|
||||
:src="article.featured_image"
|
||||
class="rounded-md object-cover w-full h-3/4"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a
|
||||
:href="'/article/' + article.id"
|
||||
>
|
||||
<a :href="'/article/' + article.id">
|
||||
<h1
|
||||
class="text-gray-800 text-xl xl:text-md lg:text-md font-bold mt-2 mb-2 leading-9 hover:underline text-right MvTyper"
|
||||
style="direction:rtl;"
|
||||
@@ -110,8 +104,11 @@
|
||||
<div
|
||||
class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
|
||||
>
|
||||
<p class="ml-1 text-gray-600 text-right">
|
||||
{{ article.published_date | moment("calendar") }}
|
||||
<p
|
||||
class="ml-1 text-gray-600 text-right MvTyper"
|
||||
style="direction:rtl;"
|
||||
>
|
||||
{{ article.published_date | dhivehiDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,6 +118,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as moment from "moment";
|
||||
|
||||
export default {
|
||||
name: "todays-pick",
|
||||
data() {
|
||||
@@ -130,6 +129,14 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
filters: {
|
||||
dhivehiDate: function(date) {
|
||||
if (!date) return "";
|
||||
moment.locale("dv");
|
||||
return moment(date).format("Do MMMM YYYY h:mm");
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
axios
|
||||
.get("api/today")
|
||||
|
||||
@@ -1,61 +1,5 @@
|
||||
@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 slot="middle-right" class="max-w-xs">
|
||||
<div class="flex flex-col justify-center h-48 p-3">
|
||||
<div class="flex flex-col items-center shadow hover:shadow-lg rounded-lg p-3">
|
||||
<img src="{{$source->logo}}" class="h-16 w-16">
|
||||
<div class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2">{{$source->name}}</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
|
||||
{{$source->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 ($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>
|
||||
<p class="font-semibold text-gray-400 text-xs MvTyper" style="direction: rtl;">{{$article->published_date->locale('dv')->isoFormat('Do MMMM YYYY h:mm')}}</p>
|
||||
|
||||
<a href="{{route('articles.show', $article->id)}}">
|
||||
<div class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline">
|
||||
{{$article->title}}</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<source-view :source="{{$source}}" ></source-view>
|
||||
@endsection
|
||||
2
storage/debugbar/.gitignore
vendored
Normal file
2
storage/debugbar/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
*
|
||||
!.gitignore
|
||||
Reference in New Issue
Block a user