108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<div class="portfolio__page">
|
|
<template v-if="projects.length > 0">
|
|
<div class="portfolio">
|
|
<h1 data-cy="page-title">
|
|
Portfolio
|
|
</h1>
|
|
|
|
<create-project-button
|
|
data-cy="create-project-button"
|
|
class="portfolio__create-button"
|
|
v-if="!isReadOnly"
|
|
/>
|
|
|
|
<project-list
|
|
:projects="projects"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<portfolio-onboarding v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
|
|
import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
|
|
import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
|
|
import ProjectList from '@/components/portfolio/ProjectList';
|
|
|
|
import me from '@/mixins/me';
|
|
|
|
export default {
|
|
|
|
mixins: [me],
|
|
components: {
|
|
ProjectList,
|
|
CreateProjectButton,
|
|
PortfolioOnboarding,
|
|
},
|
|
|
|
apollo: {
|
|
projects: {
|
|
query: PROJECTS_QUERY,
|
|
pollInterval: 5000,
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
projects: [],
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
userId() {
|
|
return this.me.id;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.portfolio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
grid-template-columns: minmax(min-content, 840px);
|
|
grid-template-rows: auto;
|
|
}
|
|
grid-row-gap: 30px;
|
|
grid-auto-rows: auto;
|
|
max-width: 840px;
|
|
width: 100vw;
|
|
/*justify-self: center;*/
|
|
box-sizing: border-box;
|
|
padding: $large-spacing $medium-spacing;
|
|
|
|
&__create-button {
|
|
display: inline-flex;
|
|
width: 150px;
|
|
}
|
|
|
|
&__page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
align-content: start;
|
|
justify-content: center;
|
|
}
|
|
align-items: center;
|
|
|
|
padding-top: $large-spacing;
|
|
}
|
|
|
|
/*IE10*/
|
|
&__add-project {
|
|
margin-bottom: $large-spacing;
|
|
@supports (display: grid) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|