archiwum/old-gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lay card foundation

Browse Source
This commit is contained in:
Jakub Mańczak
2021-07-31 17:42:04 +02:00
parent f500bbc84e
commit 4c408197b4
2 changed files with 55 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Card.vue
View File

@@ -1,7 +1,20 @@
<template> <template>
<!-- <g-image alt="" :src="require(`../assets/spis/${photo}`)" /> --> <!-- <g-image alt="" :src="require(`../assets/spis/${photo}`)" /> -->
<div class="card"> <div class="card">
<h3>{{ name }}</h3> <div class="cardInnerFlex">
<div class="cardInnerPhoto">
<!-- <img alt="" :src="require(`~/assets/cards/${photo}`)" /> -->
</div>
<div class="cardInnerInfo">
<div class="cardInnerInfoTitle">
<h3>{{ name }}</h3>
<p>{{ nickname }}</p>
</div>
<p style="text-align: justify">
{{ description }}
</p>
</div>
</div>
</div> </div>
</template> </template>
@@ -10,10 +23,9 @@ export default {
name: 'Card', name: 'Card',
props: { props: {
name: String, name: String,
nickname: String,
photo: String, photo: String,
desc: String, description: String,
link: String,
discord: String,
}, },
}; };
</script> </script>
@@ -23,10 +35,35 @@ export default {
display: inline-block; display: inline-block;
border: 1px solid var(--gray); border: 1px solid var(--gray);
border-radius: 4px; border-radius: 4px;
padding: 1rem; // padding: 1rem;
margin: 1rem 0.2rem; margin: 1rem 0.2rem;
width: 45%; width: 49%;
transition-duration: var(--trandur); transition-duration: var(--trandur);
.cardInnerFlex {
display: flex;
flex-direction: row;
.cardInnerPhoto {
width: 8rem;
height: 8rem;
background-color: black;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.cardInnerInfo {
padding: 1rem;
.cardInnerInfoTitle {
display: flex;
flex-direction: row;
align-items: baseline;
h3 {
margin-right: 1rem;
}
p {
color: var(--graytext);
}
}
}
}
&:hover, &:hover,
&:focus { &:focus {
border: 1px solid transparent; border: 1px solid transparent;

18
src/pages/Index.vue
View File

@@ -38,16 +38,22 @@
</p> </p>
</section> </section>
<section> <section>
<h2>Spis Moderacji</h2> <h2>Spis Moderacji + Bot</h2>
<p> <p>
Ludzie stojący za Gractwem - in progress! Ludzie stojący za Gractwem - in progress!
</p> </p>
<div class="cards"> <div class="cards">
<Card id="jamesen" name="Jakub Mańczak" photo="~/assets/cards/.png" /> <Card id="jamesen" name="Jakub Mańczak" nickname="j4mesen" photo="-" />
<Card id="kuolek" name="Olek Kulka" /> <Card id="kuolek" name="Olek Kulka" nickname="KuOlek" photo="-" />
<Card id="mollin" name="Jakub Mollin" /> <Card id="adam" name="Adam Cała" nickname="Be Elephant" photo="-" />
<Card id="adam" name="Adam Cała" /> <Card id="mollin" name="Jakub Mollin" nickname="Mollin" photo="-" />
<Card id="franek" name="Franek Cała" /> <Card
id="franek"
name="Franek Cała"
nickname="Bavil Gravlax"
photo="-"
/>
<Card name="... ?" />
</div> </div>
</section> </section>
<section> <section>