Dodanie widoku wszystkich kard
This commit is contained in:
pawlaczyk
parent
5bf71b3749
commit
8d7196fed1
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-dialog max-width="600px" v-model="dialog">
|
||||
<!-- to widac na przycisku -->
|
||||
<v-btn flat slot="activator" class="grey lighten-2" >Dodaj Nową Kartę</v-btn>
|
||||
<v-btn flat slot="activator" class="success primary--text" >Dodaj Nową Kartę</v-btn>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<!-- to widac w wyswietlanym oknie -->
|
||||
@ -11,11 +11,6 @@
|
||||
<v-form class="px-3" ref="form">
|
||||
<v-text-field label="title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
|
||||
<v-textarea label="Information" v-model="content" prepend-icon="edit" :rules="inputRules"></v-textarea>
|
||||
|
||||
<v-menu>
|
||||
<v-text-field :rules="inputRules" :value="formattedDate" slot="activator" label="Due data" prepend-icon="date_range"></v-text-field>
|
||||
<v-date-picker v-model="due"></v-date-picker>
|
||||
</v-menu>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn flat class="success mx-0 mt-3" @click="submit" :loading="loading">Add Project</v-btn>
|
||||
|
||||
@ -1,127 +1,117 @@
|
||||
|
||||
<template>
|
||||
<div class="cards">
|
||||
<v-container>
|
||||
<!-- widok gentelmana, ktory wybiera karty -->
|
||||
<div id="gentelmanView" v-show="gentelaman">
|
||||
<v-layout column align-center>
|
||||
<!-- karta pytanie na srodku -->
|
||||
<v-flex class="mt-5">
|
||||
<div class="cardQuestion">
|
||||
<div class="card-main">
|
||||
<v-avatar size ="100">
|
||||
<img src="/moustache-white.png">
|
||||
</v-avatar>
|
||||
<p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard">
|
||||
<h1 class="subheading grey--text">Dashboard </h1>
|
||||
|
||||
<v-container fluid class="my-5">
|
||||
|
||||
<v-layout row class="mb-3">
|
||||
<v-tooltip top>
|
||||
<v-btn small flat color="grey" @click="sortBy('question')" slot="activator">
|
||||
<v-icon left small>live_help</v-icon>
|
||||
<span class="caption text-lowercase">Karty pytania</span>
|
||||
</v-btn>
|
||||
<span>Sortuj według kart pytań</span>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip top>
|
||||
<v-btn small flat color="grey" @click="sortBy('answer')" slot="activator">
|
||||
<v-icon left small>note</v-icon>
|
||||
<span class="caption text-lowercase">Karty Odpowiedzi</span>
|
||||
</v-btn>
|
||||
<span>Sortujwedług kart Odpowiedzi</span>
|
||||
</v-tooltip>
|
||||
</v-layout>
|
||||
|
||||
|
||||
<!-- pa-3 jest już nie potrzebne w <v-card> lepiej to wyglada jak sa koloery na samym brzegu-->
|
||||
<v-card flat v-for="card in cards" :key="card.text">
|
||||
<!-- dynamiczne budowanie stringa bedącego wartością klasy - składnia z $ i ciapki ukosne -->
|
||||
<v-layout row wrap :class="`pa-3 cardType ${card.type}`">
|
||||
|
||||
<v-flex xs12 md6>
|
||||
<div class="caption grey--text">Project title</div>
|
||||
<div>{{card.text}}</div>
|
||||
</v-flex>
|
||||
<v-flex class="mb-3">
|
||||
<Popup @projectAdded="snackbar = true"/>
|
||||
|
||||
<v-flex xs6 sm4 md2>
|
||||
<div class="caption grey--text">Dodana</div>
|
||||
<div>{{card.due}}</div>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs6 sm4 md2>
|
||||
<div class="right">
|
||||
<v-chip small :class="`${card.type} caption my-2`">{{card.type}}</v-chip>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
|
||||
<v-card flat class="text-xs-center ma-3">
|
||||
<v-responsive class="pt-4">
|
||||
<v-card-text class="ml-5 pl-5">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-main">
|
||||
<v-avatar size ="100" color="white mb-1">
|
||||
<img src="/moustache-black.png">
|
||||
</v-avatar>
|
||||
<p class = "pa-1">{{ card.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- karty odpowiedzi -->
|
||||
</v-card-text>
|
||||
</v-responsive>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="grey">
|
||||
<!-- <v-icon small left>thumb_up</v-icon> -->
|
||||
<!-- <v-icon small left>check</v-icon> -->
|
||||
<v-icon small left>thumb_up_alt</v-icon>
|
||||
<span>Najlepsza!</span>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<!-- Dodanie po każdym elemncie cienkiej poziomej linii oddzielajacej komponenty -->
|
||||
<v-divider></v-divider>
|
||||
</v-card>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
<!-- Widok gracz, ktory daje swoje karty -->
|
||||
<div id="user_view" v-show="!gentelaman">
|
||||
<h1>Uzytkownik</h1>
|
||||
</div>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
gentelaman: true,
|
||||
cards: [
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
],
|
||||
questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie1', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie2', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie3', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie4', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie5', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie6', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie7', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie8', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie9', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie10', type:'question'},
|
||||
{due: 'data jakas', text: 'jakis tekst karta pytanie0', type:'question'},
|
||||
|
||||
|
||||
|
||||
|
||||
{due: 'data jakas', text: 'karta odpowiedz jakis tekst', type:'answer'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
sortBy(prop){
|
||||
//sortowanie po typie karty
|
||||
console.log("prop:", prop)
|
||||
this.cards.filter( obj => {
|
||||
return obj.type === prop
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log("Pobranie wszsytkich kard z bazy")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.card {
|
||||
width: 200px; /* Set width of cards */
|
||||
height: 300px;
|
||||
border: 5px solid #212121; /* Set up Border */
|
||||
border-radius: 20px; /* Slightly Curve edges */
|
||||
overflow: hidden; /* Fixes the corners
|
||||
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis */
|
||||
.cardType.question{
|
||||
border-left: 5px solid #212121;
|
||||
}
|
||||
|
||||
.cardQuestion{
|
||||
.v-chip.question{
|
||||
background:#212121;
|
||||
width: 200px; /* Set width of cards */
|
||||
height: 300px;
|
||||
border: 5px solid black; /* Set up Border */
|
||||
border-radius: 20px; /* Slightly Curve edges */
|
||||
overflow: hidden; /* Fixes the corners
|
||||
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis */
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.card-main {
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis to Vertical */
|
||||
justify-content: center; /* Group Children in Center */
|
||||
align-items: center; /* Group Children in Center (+axis) */
|
||||
padding: 15px 0; /* Add padding to the top/bottom */
|
||||
.cardType.answer{
|
||||
border-left: 5px solid #B0BEC5;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 36px;
|
||||
color: #D32F2F;
|
||||
margin-bottom: 5px;
|
||||
.v-chip.answer{
|
||||
background: #CFD8DC;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.main-description {
|
||||
color: #D32F2F;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,3 +1,127 @@
|
||||
|
||||
<template>
|
||||
<h1>Cała planasza gry z kartami</h1>
|
||||
<div class="cards">
|
||||
<v-container>
|
||||
<!-- widok gentelmana, ktory wybiera karty -->
|
||||
<div id="gentelmanView" v-show="gentelaman">
|
||||
<v-layout column align-center>
|
||||
<!-- karta pytanie na srodku -->
|
||||
<v-flex class="mt-5">
|
||||
<div class="cardQuestion">
|
||||
<div class="card-main">
|
||||
<v-avatar size ="100">
|
||||
<img src="/moustache-white.png">
|
||||
</v-avatar>
|
||||
<p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex class="mb-3">
|
||||
<Popup @projectAdded="snackbar = true"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
|
||||
<v-card flat class="text-xs-center ma-3">
|
||||
<v-responsive class="pt-4">
|
||||
<v-card-text class="ml-5 pl-5">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-main">
|
||||
<v-avatar size ="100" color="white mb-1">
|
||||
<img src="/moustache-black.png">
|
||||
</v-avatar>
|
||||
<p class = "pa-1">{{ card.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- karty odpowiedzi -->
|
||||
</v-card-text>
|
||||
</v-responsive>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="grey">
|
||||
<!-- <v-icon small left>thumb_up</v-icon> -->
|
||||
<!-- <v-icon small left>check</v-icon> -->
|
||||
<v-icon small left>thumb_up_alt</v-icon>
|
||||
<span>Najlepsza!</span>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
<!-- Widok gracz, ktory daje swoje karty -->
|
||||
<div id="user_view" v-show="!gentelaman">
|
||||
<h1>Uzytkownik</h1>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
gentelaman: true,
|
||||
cards: [
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
{ text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
|
||||
],
|
||||
questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.card {
|
||||
width: 200px; /* Set width of cards */
|
||||
height: 300px;
|
||||
border: 5px solid #212121; /* Set up Border */
|
||||
border-radius: 20px; /* Slightly Curve edges */
|
||||
overflow: hidden; /* Fixes the corners
|
||||
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis */
|
||||
}
|
||||
|
||||
.cardQuestion{
|
||||
background: #212121;
|
||||
width: 200px; /* Set width of cards */
|
||||
height: 300px;
|
||||
border: 5px solid black; /* Set up Border */
|
||||
border-radius: 20px; /* Slightly Curve edges */
|
||||
overflow: hidden; /* Fixes the corners
|
||||
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis */
|
||||
}
|
||||
|
||||
|
||||
.card-main {
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis to Vertical */
|
||||
justify-content: center; /* Group Children in Center */
|
||||
align-items: center; /* Group Children in Center (+axis) */
|
||||
padding: 15px 0; /* Add padding to the top/bottom */
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 36px;
|
||||
color: #D32F2F;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.main-description {
|
||||
color: #D32F2F;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<v-card flat class="text-xs-center ma-3">
|
||||
<v-responsive class="pt-4">
|
||||
<v-avatar size="100" class="grey lighten-2">
|
||||
<img :src="person.avatar">
|
||||
<img :src="userAvatar">
|
||||
</v-avatar>
|
||||
</v-responsive>
|
||||
<v-card-text>
|
||||
@ -35,9 +35,10 @@
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
userAvatar: '/user-cylinder.png',
|
||||
team: [
|
||||
{ name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.jpg'},
|
||||
{ name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.jpg'},
|
||||
{ name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.png'},
|
||||
{ name: 'Jeż', role: 'Web developer', avatar:'/test.png'},
|
||||
{ name: 'Miro', role: 'Social media maverick', avatar:'/user-cylinder.jpg' },
|
||||
{ name: 'Wilk', role: 'Sales guru', avatar:'/user-cylinder.jpg'},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user