Skip to content

Blog page #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Blog page #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e7f6e8
update blogs page
Meraj Apr 28, 2022
3c37ec4
Merge branch 'dev' into blog
Meraj Apr 29, 2022
0379c31
fix image position
Meraj May 2, 2022
17b66ca
Merge remote-tracking branch 'origin/blog' into blog
Meraj May 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion assets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,4 +125,9 @@ strong {
justify-content: flex-start !important;
}


.rounded-0\.5{
border-radius: 0.5em!important;
}
.rounded-1\.5{
border-radius: 1.5em!important;
}
26 changes: 19 additions & 7 deletions components/blog/Card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<v-card
class="blog-card py-4 py-sm-6 d-flex flex-column"
class="blog-card py-4 py-sm-6 d-flex flex-column v-card theme--dark"
elevation="0"
>
<v-card-title
Expand All @@ -13,9 +13,14 @@
>
{{ description }}
</v-card-text>

<v-flex class="more-data d-flex px-4 px-sm-6 align-end justify-space-between pt-12 mt-auto">
<v-card-text class="caption ma-0 pa-0 pb-1" >
<div class="space-2 px-3 px-sm-5 tags">
<v-chip v-for="(tag,index) in tags" :key="index"
outlined>
{{ tag }}
</v-chip>
</div>
<v-flex class="more-data d-flex px-4 px-sm-6 align-end justify-space-between pt-8 mt-auto">
<v-card-text class="caption ma-0 pa-0 pb-1">
{{ date }}
</v-card-text>
<v-btn
Expand All @@ -41,6 +46,7 @@ export default {
description: String,
href: String,
date: String,
tags: []
},
name: "Card"
}
Expand All @@ -49,14 +55,20 @@ export default {
<style scoped lang="scss">
.blog-card {
height: 100%;
background-color: var(--v-bg-base);
background-color: var(--v-bg-base) !important;
.space-2 > span {
margin: 0.2rem;
}

.v-card__title {
border-right: 5px solid var(--v-primary-base);
}
.read-more{

.read-more {
border-bottom: 1px solid var(--v-bg_secondary-base);
}
.more-data{

.more-data {
flex-grow: 1;
}
}
Expand Down
105 changes: 105 additions & 0 deletions components/blog/CardWithThumbnail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<v-card
class="blog-card py-4 py-sm-6 d-flex flex-column rounded-0.5"
elevation="0"
>
<v-row class="w-full">

<v-col class="col-12 col-md-8">
<v-card-title
class="py-0 my-2 pr-4 pr-sm-6"
>
{{ title }}
</v-card-title>
<v-card-text
class="pt-12 pr-4 pr-sm-6"
>
{{ description }}
</v-card-text>
<div class="space-2 px-3 px-sm-5 tags">
<v-chip v-for="(tag,index) in tags" :key="index"
outlined>
{{ tag }}
</v-chip>
</div>
<v-flex class="more-data d-flex pr-4 pr-sm-6 align-end justify-space-between pt-12 mt-auto">
<v-card-text class="caption ma-0 pa-0 pb-1" >
{{ date }}
</v-card-text>
<v-btn
class="read-more"
:to="href"
plain
text
small
>
مطالعه
<v-icon>
mdi-chevron-left
</v-icon>
</v-btn>
</v-flex>
</v-col>
<v-col class="col-12 col-md-4 p-relative img-col">
<div class="p-absolute img px-4 px-sm-6 my-4 mx-3">
<img src="https://via.placeholder.com/500" :alt="title" class=" rounded-0.5"/>
</div>
</v-col>
</v-row>

</v-card>
</template>

<script>
export default {
props: {
title: String,
description: String,
href: String,
date: String,
tags: []

},
name: "Card"
}
</script>

<style scoped lang="scss">
.w-full{
width: 100%;
}
.p-relative{
position: relative;
}
.blog-card {
height: 100%;
background-color: var(--v-bg-base);
.space-2 > span {
margin: 0.2rem;
}
.img{
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.v-card__title {
border-right: 5px solid var(--v-primary-base);
}
.v-card__text{
color: rgba(255, 255, 255, 0.7);
}
.read-more{
border-bottom: 1px solid var(--v-bg_secondary-base);
}
.more-data{
flex-grow: 1;
}
img{
height: 100%;
width: 100%;
object-fit: cover;
}
}

</style>
13 changes: 7 additions & 6 deletions components/utilities/Box.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
<template>
<div class="box">
<slot></slot>
</div>
<div :class="'box '+classes">
<slot></slot>
</div>
</template>

<script>
export default {
name: "Box"
name: "Box",
props: ['classes']
}
</script>

<style scoped>
.box{
background-color: rgba(24, 38, 54,0.6);
.box {
background-color: rgba(24, 38, 54, 0.6);
border-radius: 1.5em;
}
</style>
80 changes: 65 additions & 15 deletions pages/blog/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,92 @@
<template>
<v-app>
<v-container class="blog">
<div class="text--start font-weight-bold display-2 primary--text">اخبار</div>
<v-row class="my-5">
<v-col sm="12" md="6" lg="4" xl="3" v-for="(post, index) in posts" :key="index">
<app-post :post="post"></app-post>
</v-col>
</v-row>
<div class="text-center my-14 font-weight-bold display-2 primary--text">اخبار</div>
<box classes="elevation-12 mb-16">
<div class="pa-4 pa-sm-8 pa-md-14 "
>
<div class="mb-6 ">
<CardWithThumbnail
title="افتتاحیه"
description="یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد "
date="فروردین"
href="https://google.com"/>
</div>

<v-row >
<v-col sm="12" md="6" lg="4" xl="3">
<Card
title="افتتاحیه"
description="یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد "
date="فروردین"
href="https://google.com"
:tags="['انجمن','تست']"
/>

</v-col>
<v-col sm="12" md="6" lg="4" xl="3">
<Card
class=""
title="افتتاحیه"
description="یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد "
date="فروردین"
href="https://google.com"
/>

</v-col>
<v-col sm="12" md="6" lg="4" xl="3">
<Card
class=""
title="افتتاحیه"
description="یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد یه سری اخبار مربوط به رویداد "
date="فروردین"
href="https://google.com"
/>

</v-col>
</v-row>
</div>
</box>

<!-- <EmailCallToAction /> -->
<CallToAction />
<!-- <CallToAction />-->
</v-container>
</v-app>
</template>

<script>
import { getPosts } from '~/api/blog';
import Post from '~/components/blog/Post';
// import { getPosts } from '~/api/blog';
// import Post from '~/components/blog/Post';
// import EmailCallToAction from '~/components/EmailCallToAction.vue';
import CallToAction from '~/components/CallToAction.vue';
// import CallToAction from '~/components/CallToAction.vue';
import Card from "~/components/blog/Card";
import Box from "~/components/utilities/Box";
import CardWithThumbnail from "~/components/blog/CardWithThumbnail";

export default {
components: {
'app-post': Post,
CallToAction,
Box,
Card,
CardWithThumbnail
// 'app-post': Post,
// CallToAction,
},
data() {
return {
posts: [],
};
},
async asyncData({ $axios }) {
let posts = await getPosts($axios);
return { posts };
async asyncData({$axios}) {
// let posts = await getPosts($axios);
// return { posts };
},
};
</script>

<style scoped>
.w-full{
width: 100%;
}
.blog {
margin-top: 100px;
}
Expand Down