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

Dynamic Image and source names and image

Browse Source
This commit is contained in:
Mohamed Jinas
2020-08-10 06:59:24 +05:00
parent cc97472559
commit 2240e65138
1 changed files with 61 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
resources/js/components/TodaysPick.vue
View File

@@ -14,18 +14,33 @@
>
<!-- sub-main posts -->
<div class="md:w-4/7">
<div
v-for="subarticle in subarticles"
:key="subarticle.id"
class="rounded w-full flex flex-col md:flex-row mb-10"
>
<div class="bg-white rounded px-4">
<span
class="text-green-700 text-md font-normal hidden md:block text-right"
v-text="subarticle.source.name"
<div
class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 text-right leading-8 MvAamu"
v-text="subarticle.title"
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
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>
</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
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600"
>
Wonder matter now can estate esteem assure fat
roused. Am performed on existence as discourse is.
Pleasure friendly at marriage blessing or
</p>
class="block md:hidden p-2 pl-0 pt-1 text-sm text-gray-600 MvTyper"
style="direction:rtl;"
v-text="subarticle.body.slice(0, 150)"
></p>
</div>
<img
:src="subarticle.featured_image"
@@ -78,52 +86,53 @@
class="rounded-md object-cover w-full h-3/4"
/>
</a>
<a href="#">
<h1
class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvAamu"
style="direction:rtl;"
v-text="article.title"
>
</h1>
></h1>
</a>
<div class="flex justify-end items-center">
<img :src="article.source.logo"
class="h-10 w-10 rounded-full mr-2 object-cover" />
<div>
<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") }}
&#8210;
</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 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
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") }}
&#8210;
</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>
<!-- end featured section -->