Skip to content
Snippets Groups Projects
Commit 6625ca9c authored by fibasile's avatar fibasile
Browse files

Changing looks

parent a243b898
No related branches found
No related tags found
No related merge requests found
Showing
with 295 additions and 215 deletions
<template>
<div class="row q-px-xl">
<div class="col-md-3 col-sm-12">
<q-img src="statics/600x600fabr.png" style="max-width: 300px;"/>
<q-img src="statics/600x600fabr.png" style="max-width: 300px; margin: 0 auto;" />
</div>
<div class="col-md-9 col-sm-12">
......@@ -18,12 +18,12 @@
<div class="row no-wrap">
<div class="col-auto">
<q-btn class="q-mr-md">
<q-icon left size="1em" name="fas fa-tv"/>Video Archive
<q-icon left size="1em" name="fas fa-tv" />Video Archive
</q-btn>
</div>
<div class="col-auto">
<q-btn class="text-white bg-grey-7">
<q-icon left size="1em" name="fas fa-globe"/>Go to website
<q-icon left size="1em" name="fas fa-globe" />Go to website
</q-btn>
</div>
</div>
......
<template>
<q-card class="card q-ma-sm">
<q-card class="card q-ma-md">
<q-item v-if="showControls">
<q-item-section>Title</q-item-section>
<q-item-section side>
......
<template>
<section id="collections-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Collections</div>
<div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Collections</div>
<div class="row q-gutter-none">
<div class="col-12 col-sm-6 col-md-3" v-for="idx in 8" :key="idx">
<CollectionThumb/>
<div class="col-12 col-sm-6 col-md-4" v-for="idx in 6" :key="idx">
<CollectionThumb />
</div>
</div>
<div class="row">
......
<template>
<section id="featured-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Featured designs</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-3" v-for="idx in 8" :key="idx">
<ProjectThumb/>
<div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Featured designs</div>
<div v-if="items && items.length > 0">
<div class="row">
<div class="col-12 col-sm-6 col-md-4" v-for="project, idx in items" :key="idx">
<ProjectThumb :project="project" />
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<q-btn class="text-grey-5" flat>Browse all featured designs</q-btn>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<q-btn class="text-grey-5" flat>Browse all featured designs</q-btn>
<div v-else>
<div class="row">
<div class="col-12 text-h6 text-grey q-ml-md">Loading...</div>
</div>
</div>
</section>
......@@ -18,6 +26,7 @@
import ProjectThumb from "../components/ProjectThumb";
export default {
// name: 'ComponentName',
props: ["items"],
components: {
ProjectThumb
},
......@@ -27,5 +36,3 @@ export default {
};
</script>
<style>
</style>
......@@ -13,29 +13,39 @@
</div>
<div class="text-body2">
<div class="text-h6">open-source circular fashion</div>
<br>a project by
<br>
<a href="https://textile-academy.org">Fabricademy: a new textile and technology academy</a>
<br>&copy; 2017-2019 All rights reserved
<div class="text-body1">a project by:
<a href="https://textile-academy.org">Fabricademy</a><br>
A new textile and technology academy
<br>&copy; 2017-2019 All rights reserved
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 text-subtitle2 text-left">
<ul>
<li>
<a href="https://textile-academy.org">Fabricademy</a>
<a
href="https://textile-academy.org"
class="text-grey-7"
>Fabricademy</a>
</li>
<li>
<a href="https://textile-academy.org">Fabricademy</a>
<a
href="https://textile-academy.org"
class="text-grey-7"
>Fabricademy</a>
</li>
<li>
<a href="https://textile-academy.org">Fabricademy</a>
<a
href="https://textile-academy.org"
class="text-grey-7"
>Fabricademy</a>
</li>
<li>
<a href="https://textile-academy.org">Fabricademy</a>
</li>
<li>
<a href="https://textile-academy.org">Fabricademy</a>
<a
href="https://textile-academy.org"
class="text-grey-7"
>Fabricademy</a>
</li>
</ul>
</div>
......
......@@ -3,13 +3,20 @@
<!-- <div class="text-uppercase text-grey text-subtitle2 text-left">Featured designs</div> -->
<q-infinite-scroll @load="onLoad">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 col-xl-2" v-for="idx,item in items" :key="idx">
<ProjectThumb/>
<div
class="col-12 col-sm-6 col-md-4 col-xl-3"
v-for="idx,item in items"
:key="idx"
>
<ProjectThumb />
</div>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="grey-4" size="40px"/>
<q-spinner-dots
color="grey-4"
size="40px"
/>
</div>
</template>
</q-infinite-scroll>
......@@ -24,18 +31,18 @@ export default {
ProjectThumb
},
methods: {
onLoad(index, done) {
onLoad (index, done) {
setTimeout(() => {
if (this.items) {
this.items.push({}, {}, {}, {}, {}, {}, {}, {});
this.items.push({}, {}, {}, {}, {}, {});
done();
}
}, 2000);
}
},
data() {
data () {
return {
items: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
items: [{}, {}, {}, {}, {}, {}]
};
}
};
......
<template>
<q-card class="card q-ma-sm">
<q-item v-if="!hideUser">
<q-item-section avatar>
<q-avatar>
<q-img basic src="https://cdn.quasar.dev/img/avatar2.jpg"/>
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>Title</q-item-label>
<q-item-label caption>Subhead</q-item-label>
</q-item-section>
<q-item-section side v-if="featured">
<q-icon name="fas fa-star" color="grey-4" size="15px"/>
</q-item-section>
</q-item>
<q-item v-if="showControls">
<q-item-section>Title</q-item-section>
<q-item-section side>
<q-btn flat dense>
<q-icon name="fas fa-ellipsis-v" size="14px"/>
<q-menu anchor="bottom left" self="top right">
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>Edit</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>Share</q-item-section>
</q-item>
<q-separator/>
<q-item clickable v-close-popup>
<q-item-section>Delete</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-item-section>
</q-item>
<q-img src="http://placehold.it/512x512" basic ratio="1"/>
<q-item>
<q-item-section></q-item-section>
<q-item-section side>
<div class="row q-gutter-sm">
<div class="col">
<q-icon name="fas fa-download" class="q-mr-xs"/>100
<q-card class="card q-ma-md">
<div v-if="project">
<q-item v-if="!hideUser">
<q-item-section avatar>
<q-avatar>
<q-img basic :src="project.userAvatar" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label :lines="1">{{project.name}}</q-item-label>
<q-item-label :lines="1" caption>{{project.username}}</q-item-label>
</q-item-section>
<q-item-section side v-if="featured">
<q-icon name="fas fa-star" color="grey-4" size="15px" />
</q-item-section>
</q-item>
<q-item v-if="showControls">
<q-item-section>{{project.name}}</q-item-section>
<q-item-section side>
<q-btn flat dense>
<q-icon name="fas fa-ellipsis-v" size="14px" />
<q-menu anchor="bottom left" self="top right">
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>Edit</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>Share</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup>
<q-item-section>Delete</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-item-section>
</q-item>
<q-img :src="project.thumbnail" basic ratio="1" />
<q-item>
<q-item-section></q-item-section>
<q-item-section side>
<div class="row q-gutter-sm">
<div class="col">
<q-icon name="fas fa-download" class="q-mr-xs" />100
</div>
<div class="col">
<q-icon name="fas fa-heart" class="q-mr-xs" />100
</div>
</div>
<div class="col">
<q-icon name="fas fa-heart" class="q-mr-xs"/>100
</div>
</div>
</q-item-section>
</q-item>
</q-item-section>
</q-item>
</div>
<div v-else>Loading...</div>
</q-card>
</template>
<script>
export default {
// name: 'ComponentName',
props: ["hideUser", "showControls"],
props: ["hideUser", "showControls", "project"],
data() {
return { featured: true };
}
......
<template>
<section id="featured-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Recently updated</div>
<div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">Recently updated</div>
<div class="row q-gutter-none">
<div class="col-12 col-sm-6 col-md-3" v-for="idx in 8" :key="idx">
<ProjectThumb/>
<div class="col-12 col-sm-6 col-md-4" v-for="project,idx in latestProjects" :key="idx">
<ProjectThumb :project="project" />
</div>
</div>
<div class="row">
......@@ -16,11 +17,15 @@
<script>
import ProjectThumb from "../components/ProjectThumb";
import { mapGetters } from "vuex";
export default {
// name: 'ComponentName',
components: {
ProjectThumb
},
computed: {
...mapGetters({ latestProjects: "projects/latestProjects" })
},
data() {
return {};
}
......
<template>
<q-toolbar
class="bg-white text-grey-5 no-border"
flat
>
<q-btn
flat
dense
round
@click="toogleDrawer"
aria-label="Menu"
v-if="hasDrawer"
>
<q-toolbar class="bg-white text-grey-6 no-border" flat>
<q-btn flat dense round @click="toogleDrawer" aria-label="Menu" v-if="hasDrawer">
<q-icon name="menu" />
</q-btn>
<q-toolbar-title class="text-subtitle2">
<q-btn
flat
dense
to="/"
class="text-lowercase"
>open-source circular fashion</q-btn>
<q-toolbar-title>
<div class="flex items-center">
<router-link to="/">
<q-img src="/statics/600x600fabr.png" class="logo-img" />
</router-link>
<div class="text-logo">
<span class="text-open">Open&nbsp;-&nbsp;source</span>
<br />circular fashion
</div>
</div>
</q-toolbar-title>
<q-space />
<q-btn
flat
label="Browse"
icon-right="arrow_drop_down"
class="q-ml-md gt-sm"
>
<q-btn flat label="Browse" icon-right="arrow_drop_down" class="q-ml-md gt-sm">
<q-menu>
<q-list style="min-width: 80px">
<q-item
clickable
v-close-popup
>
<q-item clickable v-close-popup>
<q-item-section>Category</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
>
<q-item clickable v-close-popup>
<q-item-section>Another Category</q-item-section>
</q-item>
<q-separator />
</q-list>
</q-menu>
</q-btn>
<q-btn
flat
to="/collections"
class="gt-sm"
>Collections</q-btn>
<q-btn
flat
to="/account/projects/new"
class="gt-sm"
>Upload</q-btn>
<q-btn flat to="/collections" class="gt-sm">Collections</q-btn>
<q-btn flat to="/account/projects/new" class="gt-sm">Upload a project</q-btn>
<q-btn
to="/login"
flat
v-if="!user"
>Sign in</q-btn>
<UserPopupMenu
@logout="handleLogout"
:user="user"
/>
<q-btn to="/login" flat v-if="!user">Sign in</q-btn>
<UserPopupMenu @logout="handleLogout" :user="user" />
<!-- <div>Quasar v{{ $q.version }}</div> -->
</q-toolbar>
</template>
......@@ -80,19 +46,32 @@ export default {
UserPopupMenu
},
props: ["hasDrawer", "user"],
data () {
data() {
return {};
},
methods: {
toogleDrawer () {
toogleDrawer() {
this.$emit("toggle");
},
handleLogout () {
handleLogout() {
this.$emit("logout");
}
}
};
</script>
<style>
<style lang="scss">
.logo-img.q-img {
width: 48px;
}
.text-open {
font-size: 0.94frem;
}
.text-logo {
// font-family: "Helvetica";
font-size: 0.7rem;
line-height: 0.8rem;
font-weight: 400;
text-transform: uppercase;
}
</style>
<template>
<q-card class="bg-grey-5 text-white q-py-md">
<q-card class="bg-grey-1 q-py-md text-grey-7 q-ma-md">
<q-card-section>
<div class="text-h4">Upload your design, it's easy!</div>
</q-card-section>
......@@ -12,24 +12,13 @@
<q-card-section>
<div class="row no-wrap">
<div class="col-auto">
<q-btn
outline
class="bg-white text-grey-5 q-mr-md"
>
<q-icon
left
size="1em"
name="fas fa-tv"
/>Watch Tutorial
<q-btn class="bg-grey-1 q-mr-md">
<q-icon left size="1em" name="fas fa-tv" />Watch Tutorial
</q-btn>
</div>
<div class="col-auto">
<q-btn class="text-white bg-grey-7">
<q-icon
left
size="1em"
name="fas fa-magic"
/>Start wizard
<q-btn class="bg-grey-1">
<q-icon left size="1em" name="fas fa-magic" />Start wizard
</q-btn>
</div>
</div>
......@@ -40,7 +29,7 @@
<script>
export default {
// name: 'ComponentName',
data () {
data() {
return {};
}
};
......
<template>
<section id="bookmarks-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Your bookmarks</div>
<div class="row q-gutter-none">
<div class="col-12 col-sm-6 col-md-4" v-for="idx in 5" :key="idx">
<ProjectThumb :showControls="true" />
</div>
</div>
</section>
</template>
<script>
import ProjectThumb from "../components/ProjectThumb";
export default {
// name: 'ComponentName',
components: {
ProjectThumb
},
data() {
return {};
}
};
</script>
<style>
</style>
......@@ -2,8 +2,8 @@
<section id="collections-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Your collections</div>
<div class="row q-gutter-none">
<div class="col-12 col-sm-6 col-md-3" v-for="idx in 5" :key="idx">
<CollectionThumb :showControls="true"/>
<div class="col-12 col-sm-6 col-md-4" v-for="idx in 5" :key="idx">
<CollectionThumb :showControls="true" />
</div>
</div>
</section>
......
......@@ -2,8 +2,8 @@
<section id="user-gallery" class="q-my-lg">
<div class="text-uppercase text-grey text-subtitle2 text-left q-ml-sm">Your projects</div>
<div class="row q-gutter-none">
<div class="col-12 col-sm-4 col-md-3" v-for="idx in 8" :key="idx">
<ProjectThumb :hideUser="true" :showControls="true"/>
<div class="col-12 col-sm-6 col-md-4" v-for="idx in 8" :key="idx">
<ProjectThumb :hideUser="true" :showControls="true" />
</div>
</div>
</section>
......
<template>
<q-list class="q-pr-xl q-mt-lg">
<q-item to="/account">
<q-item to="/account/edit">
<q-item-section avatar>
<q-avatar>
<q-img basic :src="user.photoURL"/>
<q-avatar size="128px">
<q-img basic :src="user.photoURL" />
</q-avatar>
</q-item-section>
</q-item>
<q-item to="/account/edit">
<q-item-section>
<q-item-label>{{user.name}}</q-item-label>
<q-item-label caption>{{user.email}}</q-item-label>
</q-item-section>
<q-item-section side>
<q-btn round dense flat to="/account/edit">
<q-icon name="fas fa-edit" size="18px" class="q-pa-sm"/>
<q-icon name="fas fa-edit" size="18px" class="q-pa-sm text-grey-4" />
</q-btn>
</q-item-section>
</q-item>
<q-item>
<q-item to="/account/edit">
<q-item-section>
<q-item-label caption>{{user.bio || "No bio yet"}}</q-item-label>
<q-item-label caption>{{user.bio || "No bio yet. Click to add one."}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-separator class="q-my-md"/>
<q-separator class="q-my-md" />
</q-item>
<!-- <q-item clickable to="/account">
<q-item-section avatar>
......
// app global css
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
\ No newline at end of file
<template>
<q-layout view="hHh Lpr fff">
<q-header>
<TopToolbar @toggle="toggleDrawer" :user="user" @logout="handleLogout"/>
<TopToolbar @toggle="toggleDrawer" :user="user" @logout="handleLogout" />
</q-header>
<q-page-container>
<router-view/>
<router-view />
</q-page-container>
<Footer/>
<Footer />
</q-layout>
</template>
......@@ -16,7 +16,7 @@
import { openURL } from "quasar";
import Footer from "../components/Footer.vue";
import TopToolbar from "../components/TopToolbar.vue";
import { mapGetters } from "vuex";
import { mapGetters, mapActions } from "vuex";
export default {
name: "MyLayout",
components: {
......@@ -33,7 +33,12 @@ export default {
},
methods: {
openURL,
handleLogout() {},
handleLogout() {
this.logout().then(() => {
this.$router.replace("/");
});
},
...mapActions({ logout: "auth/signOut" }),
toggleDrawer() {
this.leftDrawerOpen = !this.leftDrawerOpen;
}
......
......@@ -2,10 +2,10 @@
<q-page padding>
<!-- content -->
<div class="row">
<div class="col-sm-12 col-md-3">
<UserSidebar :user="user"/>
<div class="col-xs-12 col-sm-3">
<UserSidebar :user="user" @logout="handleLogout" />
</div>
<div class="col-sm-12 col-md-9 col-lg-8 col-xl-7">
<div class="col-xs-12 col-sm-9 col-lg-8 col-xl-7">
<router-view></router-view>
</div>
</div>
......@@ -22,7 +22,8 @@ export default {
},
computed: {
...mapGetters({ user: "auth/user" })
}
},
methods: {}
};
</script>
......
<template>
<q-page>
<Hero/>
<Hero />
<div class="row q-pa-sm">
<div class="col-lg-8 offset-lg-2 col-md-12 col-sm-12">
<section id="featured">
<FeaturedGallery/>
<FeaturedGallery :items="featuredProjects" />
</section>
<section id="banner">
<UploadBanner/>
<UploadBanner />
</section>
<section id="recent">
<RecentGallery/>
<RecentGallery :items="latestProjects" />
</section>
<section id="collections">
<CollectionsGallery/>
<CollectionsGallery />
</section>
<section id="banner2">
<BannerFabricademy/>
<BannerFabricademy />
</section>
</div>
</div>
......@@ -28,8 +28,8 @@
section {
margin-top: 64px;
margin-bottom: 128px;
margin-left: 32px;
margin-right: 32px;
/* margin-left: 32px;
margin-right: 32px; */
}
</style>
......@@ -40,6 +40,9 @@ import FeaturedGallery from "../components/FeaturedGallery";
import RecentGallery from "../components/RecentGallery";
import UploadBanner from "../components/UploadBanner";
import BannerFabricademy from "../components/BannerFabricademy";
import { mapGetters, mapActions } from "vuex";
export default {
name: "PageIndex",
components: {
......@@ -49,6 +52,34 @@ export default {
UploadBanner,
CollectionsGallery,
BannerFabricademy
},
mounted() {
this.loadFeaturedProjects()
.then(() => {
console.log("featured projects loaded");
})
.catch(error => {
console.log("featured projects error ", error);
});
this.loadLatestProjects()
.then(() => {
console.log("latest projects loaded");
})
.catch(error => {
console.log("featured projects error ", error);
});
},
methods: {
...mapActions({
loadFeaturedProjects: "projects/loadFeaturedProjects",
loadLatestProjects: "projects/loadLatestProjects"
})
},
computed: {
...mapGetters({
latestProjects: "projects/latestProjects",
featuredProjects: "projects/featuredProjects"
})
}
};
</script>
<template>
<q-page padding>
<!-- content -->
</q-page>
<div>
<div class="row user-dashboard-toolbar">
<div class="col"></div>
<div class="col-auto"></div>
</div>
<UserBookmarksGallery />
</div>
</template>
<script>
import UserBookmarksGallery from "../components/UserBookmarksGallery";
export default {
// name: 'PageName',
}
components: {
UserBookmarksGallery
}
};
</script>
<style>
.user-dashboard-toolbar {
margin-right: 40px;
}
</style>
......@@ -2,29 +2,24 @@
<q-page padding>
<!-- content -->
<q-card class="q-pa-md">
<div class="text-h6 text-grey-6">Public profile</div>
<div class="row">
<div class="col-8">
<div class="col-xs-12 col-sm-3">
<div class="text-h6 text-grey-6">Public profile</div>
</div>
<div class="col-xs-12 col-sm-8">
<ProfileForm />
</div>
<div class="col-4 q-pl-xl">
<div class="text-subtitle1">
Profile picture
<q-btn flat>
<q-icon
size="14px"
color="grey-5"
name="fas fa-edit"
></q-icon>
</q-btn>
</div>
<q-avatar
size="128px"
square
>
<q-img src="https://avatars3.githubusercontent.com/u/32947?s=400&u=67aa00fa91a1030f8a3bf41b1a29308b6fa1f4c6&v=4" />
</q-avatar>
<br>
</div>
</q-card>
<q-card class="q-pa-md q-mt-md">
<div class="row">
<div class="col-xs-12 col-sm-3">
<div class="text-h6 text-grey-6">Profile picture</div>
</div>
<div class="col-xs-12 col-sm-8">
<p class="q-mt-md text-caption text-grey">You can upload an avatar here:</p>
<q-uploader url="http://localhost:4444/upload" style="max-width: 300px" />
</div>
</div>
</q-card>
......@@ -32,11 +27,15 @@
</template>
<script>
import { mapGetters } from "vuex";
import ProfileForm from "src/components/ProfileForm";
export default {
// name: 'PageName',
components: {
ProfileForm
},
computed: {
...mapGetters({ user: "auth/user" })
}
};
</script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment