sajjad.talkhabi
/
champya
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
master
sajjad_talkhabi 3 years ago
parent f8af5d2bba
commit 1e437a7f85
8 changed files with 342 additions and 12 deletions
Show Stats Download Patch File Download Diff File

154
src/components/AddProgram/Main.vue
Unescape View File

@ -0,0 +1,154 @@
<template>
<div class="h-100">
<main-back height="100%">
<div class="py-12 px-10">
<div>
<SectionTitle
backText="my programs"
link="programs"
icon="WMi-left-open"
title="add new program"
subTitle="what we perpared for people"
/>
</div>
<v-row class="mt-4">
<v-col cols="3">
<div class="h-100">
<div class="add__workout dark w-100 h-100">
<div class="add__workout__picture d-flex align-center">
<i class="WMi-picture add__workout__picture--icon"></i>
<div class="add__workout__picture--text">
select a cover image
</div>
</div>
</div>
</div>
</v-col>
<v-col cols="9">
<v-row>
<v-col cols="4"
><v-text-field
placeholder="product name"
label="product name"
class="no-error-msg pt-0 mt-0"
dark
></v-text-field>
</v-col>
<v-col cols="8"
><v-text-field
placeholder="a short quote"
label="a short quote"
class="no-error-msg pt-0 mt-0"
dark
></v-text-field
></v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-textarea
rows="5"
label="description"
placeholder="description"
dark
></v-textarea>
</v-col>
</v-row>
</v-col>
</v-row>
<v-divider dark></v-divider>
<v-row>
<v-col cols="12">
<v-row>
<v-col cols="12">
<v-autocomplete
class="pt-0 multiple"
:items="items"
item-value="id"
item-text="name"
attach
:append-icon="null"
chips
label="product tags - useful for better search"
placeholder="product tags - useful for better search"
multiple
dark
>
<template #selection="{ item }">
<v-chip label small color="white" text-color="black">{{
item.name
}}</v-chip>
</template>
</v-autocomplete>
</v-col>
</v-row>
</v-col>
</v-row>
<div class="mt-2">
<v-divider dark class="mb-2"></v-divider>
<div class="d-flex justify-space-between">
<RectangleButton
text="I’VE CHANGED MY MIND"
icon="WMi-cancel"
class="px-0"
height="19"
/>
<RectangleButton
text="add the product"
class="custom-btn add-btn"
height="25"
/>
</div>
</div>
</div>
</main-back>
</div>
</template>
<script>
import SectionTitle from "../Global/Section/SectionTitle.vue";
export default {
components: {
SectionTitle,
},
data: () => ({
items: [
{
id: 1,
name: "fkskad",
},
{
id: 2,
name: "dasf",
},
],
}),
};
</script>
<style scoped>
.add__workout,
.upload {
border: 1px dotted var(--color-gray) !important;
position: relative;
}
.add-btn {
padding-right: 100px !important;
padding-left: 100px !important;
}
.add__workout__picture {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.add__workout__picture--text {
width: max-content;
line-height: 18px;
text-transform: uppercase;
}
.add__workout__picture--icon {
font-size: 40px;
margin-right: 20px;
}
.upload {
height: 148px;
}
</style>

27
src/components/AddProgram/Sections.vue
Unescape View File

@ -0,0 +1,27 @@
<template>
<div class="h-100">
<main-back height="100%">
<div class="mt-16">
<ul class="pl-0 ml-0">
<MenuItem text="Home" />
<MenuItem text="my profile" />
<MenuItem :active="true" text="my programs" />
<MenuItem text="my trainee" />
<MenuItem text="my bookmarks" />
<MenuItem text="products" />
<MenuItem text="admins" />
<MenuItem text="traniners" />
<MenuItem text="workouts" />
</ul>
</div>
</main-back>
</div>
</template>
<script>
import MenuItem from "../Global/Section/MenuItem.vue";
export default {
components: {
MenuItem,
},
};
</script>

5
src/components/Bookmarks/Main.vue
Unescape View File

@ -16,9 +16,8 @@
<v-row class="mt-4"> <v-row class="mt-4">
<v-col cols="12"> <v-col cols="12">
<v-tabs color="white" v-model="tab" centered slider-color="white"> <v-tabs color="white" v-model="tab" centered slider-color="white">
<v-tab class="bookmarks__tab" v-for="i in 2" :key="i"> <v-tab class="bookmarks__tab">programs</v-tab>
Item {{ i }} <v-tab class="bookmarks__tab">workouts</v-tab>
</v-tab>
</v-tabs> </v-tabs>
<v-tabs-items v-model="tab"> <v-tabs-items v-model="tab">
<v-tab-item> <v-tab-item>

12
src/components/Products/Main.vue
Unescape View File

@ -13,7 +13,10 @@
/> />
</div> </div>
<div> <div>
<router-link :to="{ name: 'addProduct' }"> <router-link
:to="{ name: 'addProduct' }"
class="text-decoration-none"
>
<RectangleButton <RectangleButton
icon="WMi-plus" icon="WMi-plus"
class="custom-btn" class="custom-btn"
@ -24,7 +27,12 @@
</div> </div>
</div> </div>
<v-row class="mt-4"> <v-row class="mt-4">
<v-col cols="12" sm="4" v-for="(product, i) in products" :key="i" class="mb-3" <v-col
cols="12"
sm="4"
v-for="(product, i) in products"
:key="i"
class="mb-3"
><ProductItem :product="product" ><ProductItem :product="product"
/></v-col> /></v-col>
</v-row> </v-row>

25
src/components/Programs/Main.vue
Unescape View File

@ -20,14 +20,20 @@
size="x-large" size="x-large"
:text-mode="true" :text-mode="true"
text="2" text="2"
@click.native="$_openModal('filters')"
/> />
<RectangleButton <router-link
icon="WMi-plus" :to="{ name: 'addProgram' }"
size="xx-large" class="text-decoration-none"
class="custom-btn custom-icon" >
height="54" <RectangleButton
:text-mode="true" icon="WMi-plus"
/> size="xx-large"
class="custom-btn custom-icon"
height="54"
:text-mode="true"
/>
</router-link>
</div> </div>
</div> </div>
<v-row class="mt-4"> <v-row class="mt-4">
@ -42,6 +48,9 @@
</v-row> </v-row>
</div> </div>
</main-back> </main-back>
<div class="text-center">
<FiltersModal />
</div>
</div> </div>
</template> </template>
<script> <script>
@ -49,6 +58,7 @@ import FirstImage from "../../assets/4070873.jpg";
import SecondImage from "../../assets/a-bodybuilder-exhibits-his-muscular-physique-1024-768-0.jpg"; import SecondImage from "../../assets/a-bodybuilder-exhibits-his-muscular-physique-1024-768-0.jpg";
import ThirdImage from "../../assets/5595849.jpg"; import ThirdImage from "../../assets/5595849.jpg";
import FourthImage from "../../assets/28-284379_photo-wallpaper-man-workout-gym-working-gym-workout.jpg"; import FourthImage from "../../assets/28-284379_photo-wallpaper-man-workout-gym-working-gym-workout.jpg";
import FiltersModal from "./Modals/FiltersModal.vue";
import SectionTitle from "../Global/Section/SectionTitle.vue"; import SectionTitle from "../Global/Section/SectionTitle.vue";
import ProgramItem from "./Item.vue"; import ProgramItem from "./Item.vue";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
@ -56,6 +66,7 @@ export default {
components: { components: {
SectionTitle, SectionTitle,
ProgramItem, ProgramItem,
FiltersModal,
}, },
computed: { computed: {
...mapGetters("programs", ["getPrograms"]), ...mapGetters("programs", ["getPrograms"]),

93
src/components/Programs/Modals/FiltersModal.vue
Unescape View File

@ -0,0 +1,93 @@
<template>
<basic-modal width="458" transition="slide-x-transition">
<template #header>
<div class="close__modal">
<v-icon class="WMi-cancel-1" large @click="$_closeModal()"></v-icon>
</div>
</template>
<template #default>
<div>
<SectionTitle
title="filters"
subTitle="let us help in your search"
:is-modal="true"
/>
</div>
<div class="mt-4 mb-10">
<div class="my-6">
<div>
<v-text-field
class="no-error-msg"
placeholder="course name"
label="course name"
></v-text-field>
</div>
</div>
<div class="my-6">
<div>
<v-text-field
class="no-error-msg pt-0"
placeholder="mentor name"
label="mentor name"
></v-text-field>
</div>
</div>
<div class="my-6">
<div>
<v-autocomplete
class="no-error-msg pt-0"
placeholder="status"
label="status"
></v-autocomplete>
</div>
</div>
<div class="my-6">
<div>
<DateInput class="no-error-msg" label="date, after" />
</div>
</div>
<div class="my-6">
<div>
<DateInput class="no-error-msg" label="date, before" />
</div>
</div>
</div>
</template>
<template #footer>
<v-spacer></v-spacer>
<div class="d-flex justify-space-between align-items-center w-100">
<RectangleButton
class="btn__modal--cancel pl-0"
text="cancel"
icon="WMi-cancel-1"
text-mode="text"
size="large"
:is-modal="true"
height="29"
@click.native="$_closeModal()"
/>
<RectangleButton
height="29"
class="btn__modal--execute custom-btn wa__f__m__eb"
text="execute"
icon="WMi-filter"
/>
</div>
</template>
</basic-modal>
</template>
<script>
import SectionTitle from "../../Global/Section/SectionTitle.vue";
export default {
name: "modal_filters",
components: { SectionTitle },
};
</script>
<style scoped>
.close__modal {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
</style>

5
src/router/path.js
Unescape View File

@ -44,6 +44,11 @@ export default [
view: 'Workouts', view: 'Workouts',
name: 'workouts' name: 'workouts'
}, },
{
path: '/add-program',
view: 'AddProgram',
name: 'addProgram'
},
{ {
path: '/add-workout', path: '/add-workout',
view: 'AddWorkout', view: 'AddWorkout',

33
src/views/AddProgram.vue
Unescape View File

@ -0,0 +1,33 @@
<template>
<v-container fluid>
<header class="pt-3">
<v-row>
<v-col cols="12">
<site-header></site-header>
</v-col>
</v-row>
</header>
<main class="pb-10 mt-5">
<div>
<v-row>
<v-col cols="2">
<AddProgramSections />
</v-col>
<v-col cols="10">
<AddProgram />
</v-col>
</v-row>
</div>
</main>
</v-container>
</template>
<script>
import AddProgram from "../components/AddProgram/Main";
import AddProgramSections from "../components/AddProgram/Sections";
export default {
components: {
AddProgram,
AddProgramSections,
},
};
</script>
Write Preview
Loading…
Cancel
Save