s153131/PracowniaProgramowania
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Dodanie widoku gentelmana w grze

Browse Source
This commit is contained in:
pawlaczyk 2019-01-05 19:10:50 +01:00
parent 0b6618c234
commit 5bf71b3749
8 changed files with 173 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/app/public/cylinder11.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
frontend/app/public/moustache-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
frontend/app/public/moustache-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
frontend/app/public/moustache.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
frontend/app/public/test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
frontend/app/public/user-cylinder.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

126
frontend/app/src/views/Cards.vue
View File

@ -1,3 +1,127 @@
<template>
<h1>Karty z bazy</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>

49
frontend/app/src/views/Users.vue
View File

@ -1,3 +1,50 @@
<template>
<h1>KWszyscy zatrejestrowani użytkownicy</h1>
<div class="team">
<h1 class="subheading grey--text">Wszyscy Dżentelmani</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
<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">
</v-avatar>
</v-responsive>
<v-card-text>
<div class="subheading">{{ person.name }}</div>
<div class="grey--text">{{ person.role }}</div>
<div class="grey--text">Liczba wygranych partii</div>
</v-card-text>
<v-card-actions>
<v-btn flat color="grey">
<v-icon small left>message</v-icon>
<span>Message</span>
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data(){
return{
team: [
{ name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.jpg'},
{ name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.jpg'},
{ 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'},
]
}
}
}
</script>