Dynamic Image and source names and image
This commit is contained in:
@@ -14,18 +14,33 @@
|
|||||||
>
|
>
|
||||||
<!-- sub-main posts -->
|
<!-- sub-main posts -->
|
||||||
<div class="md:w-4/7">
|
<div class="md:w-4/7">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="subarticle in subarticles"
|
v-for="subarticle in subarticles"
|
||||||
:key="subarticle.id"
|
:key="subarticle.id"
|
||||||
class="rounded w-full flex flex-col md:flex-row mb-10"
|
class="rounded w-full flex flex-col md:flex-row mb-10"
|
||||||
>
|
>
|
||||||
<div class="bg-white rounded px-4">
|
<div class="bg-white rounded px-4">
|
||||||
<span
|
<div
|
||||||
class="text-green-700 text-md font-normal hidden md:block text-right"
|
class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right leading-8 MvAamu"
|
||||||
v-text="subarticle.source.name"
|
v-text="subarticle.title"
|
||||||
style="direction:rtl;"
|
style="direction:rtl;"
|
||||||
></span>
|
></div>
|
||||||
|
|
||||||
|
<div class="flex justify-end items-center">
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||||
|
v-text="article.source.name"
|
||||||
|
></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img
|
||||||
|
:src="article.source.logo"
|
||||||
|
class="h-10 w-10 rounded-full ml-1 object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="text-gray-600 text-md mt-1 flex justify-end items-center"
|
class="text-gray-600 text-md mt-1 flex justify-end items-center"
|
||||||
@@ -47,18 +62,11 @@
|
|||||||
<span class="ml-1" v-text="article.readtime"></span>
|
<span class="ml-1" v-text="article.readtime"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right"
|
|
||||||
v-text="subarticle.title"
|
|
||||||
style="direction:rtl;"
|
|
||||||
></div>
|
|
||||||
<p
|
<p
|
||||||
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"
|
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
|
||||||
>
|
style="direction:rtl;"
|
||||||
Wonder matter now can estate esteem assure fat
|
v-text="subarticle.body.slice(0, 150)"
|
||||||
roused. Am performed on existence as discourse is.
|
></p>
|
||||||
Pleasure friendly at marriage blessing or
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<img
|
<img
|
||||||
:src="subarticle.featured_image"
|
:src="subarticle.featured_image"
|
||||||
@@ -78,52 +86,53 @@
|
|||||||
class="rounded-md object-cover w-full h-3/4"
|
class="rounded-md object-cover w-full h-3/4"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<h1
|
<h1
|
||||||
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
|
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
|
||||||
style="direction:rtl;"
|
style="direction:rtl;"
|
||||||
v-text="article.title"
|
v-text="article.title"
|
||||||
>
|
></h1>
|
||||||
</h1>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="flex justify-end items-center">
|
<div class="flex justify-end items-center">
|
||||||
|
<div>
|
||||||
<img :src="article.source.logo"
|
<p
|
||||||
class="h-10 w-10 rounded-full mr-2 object-cover" />
|
class="font-semibold text-gray-700 text-sm capitalize MvTyper"
|
||||||
|
v-text="article.source.name"
|
||||||
<div>
|
></p>
|
||||||
<p class="font-semibold text-gray-700 text-sm capitalize MvTyper" v-text="article.source.name"></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3">
|
|
||||||
<p class="text-gray-600 text-right">
|
|
||||||
{{ article.published_date | moment("calendar") }}
|
|
||||||
‒
|
|
||||||
</p>
|
|
||||||
<span class="mr-1 ml-1" v-text="article.readtime"></span>
|
|
||||||
<svg
|
|
||||||
class="h-4 w-4"
|
|
||||||
viewBox="0 0 443.294 443.294"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<img
|
||||||
|
:src="article.source.logo"
|
||||||
|
class="h-10 w-10 rounded-full ml-1 object-cover"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-gray-600 text-md mt-4 flex justify-end items-center mb-3"
|
||||||
|
>
|
||||||
|
<p class="text-gray-600 text-right">
|
||||||
|
{{ article.published_date | moment("calendar") }}
|
||||||
|
‒
|
||||||
|
</p>
|
||||||
|
<span class="mr-1 ml-1" v-text="article.readtime"></span>
|
||||||
|
<svg
|
||||||
|
class="h-4 w-4"
|
||||||
|
viewBox="0 0 443.294 443.294"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M221.647 0C99.433 0 0 99.433 0 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647S343.861 0 221.647 0zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- end featured section -->
|
<!-- end featured section -->
|
||||||
|
|||||||
Reference in New Issue
Block a user