Layout card items (#5)
Reviewed-on: #5 Co-authored-by: kogeletey <kg@re128.org> Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
parent
fa8b158954
commit
8420434edb
8 changed files with 179 additions and 39 deletions
|
@ -11,7 +11,7 @@
|
||||||
button.primary {
|
button.primary {
|
||||||
display: grid;
|
display: grid;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
padding: 3px 15px;
|
padding: 0.45rem 15px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent);
|
||||||
background: var(--darken);
|
background: var(--darken);
|
||||||
|
|
16
src/components/Card.vue
Normal file
16
src/components/Card.vue
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
display: grid;
|
||||||
|
width: 220px;
|
||||||
|
height: 150px;
|
||||||
|
padding: 15px;
|
||||||
|
background: var(--darken);
|
||||||
|
border: 0.5px solid var(--green);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -19,10 +19,13 @@
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
fieldset.search {
|
fieldset.search {
|
||||||
|
--size: 10px;
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent);
|
||||||
background: var(--darken);
|
background: var(--darken);
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 16px;
|
||||||
grid-template-columns: 0.2fr 0.5fr 0.3fr;
|
grid-template-columns: 0.2fr 0.5fr 0.3fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -31,7 +34,7 @@ fieldset.search {
|
||||||
fieldset.search input {
|
fieldset.search input {
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding: 10px 10px;
|
padding: calc( 1.3rem / 2) calc( 1.3rem / 2);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
@ -42,8 +45,8 @@ fieldset.search .search__context {
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
background: var(--black);
|
background: var(--black);
|
||||||
margin: 10px;
|
margin: var(--size);
|
||||||
padding: 10px 0;
|
padding: var(--size) 0;
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.625rem;
|
||||||
& .search__context-title {
|
& .search__context-title {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
|
@ -64,8 +67,8 @@ fieldset.search .search__buttons {
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
& svg.icon {
|
& svg.icon {
|
||||||
width: 1.3rem;
|
width: 1.3em;
|
||||||
height: 1.3rem;
|
height: 1.3em;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
3
src/icons/CarbonAddLarge.vue
Normal file
3
src/icons/CarbonAddLarge.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M17 15V5h-2v10H5v2h10v10h2V17h10v-2z"/></svg>
|
||||||
|
</template>
|
3
src/icons/CarbonSearch.vue
Normal file
3
src/icons/CarbonSearch.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9"/></svg>
|
||||||
|
</template>
|
|
@ -1,8 +1,62 @@
|
||||||
---
|
---
|
||||||
import Base from "@/layouts/Base.astro"
|
import Base from "@/layouts/Base.astro"
|
||||||
|
import Button from "@/components/Button.vue"
|
||||||
|
import Footer from "@/components/Footer.astro"
|
||||||
|
import Search from "@/components/Search.vue"
|
||||||
|
|
||||||
|
const { type } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base>
|
<Base>
|
||||||
|
<header>
|
||||||
|
{ type !== 'home' && <>
|
||||||
|
<div />
|
||||||
|
<Search />
|
||||||
|
</> }
|
||||||
|
<div class="end">
|
||||||
|
<span class="rate"> 0 / 5000 RQT </span>
|
||||||
|
<Button class="sign" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
</Base>
|
</Base>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header fieldset.search {
|
||||||
|
justify-self: center;
|
||||||
|
--size: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .end {
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.rate {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.sign {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: grid;
|
||||||
|
min-height: calc(100vh - 55px - 2.5rem);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
90
src/pages/cards.astro
Normal file
90
src/pages/cards.astro
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
---
|
||||||
|
import Default from "@/layouts/Default.astro"
|
||||||
|
import Card from "@/components/Card.vue"
|
||||||
|
import CarbonAddLarge from "@/icons/CarbonAddLarge.vue"
|
||||||
|
import CarbonSearch from "@/icons/CarbonSearch.vue"
|
||||||
|
---
|
||||||
|
|
||||||
|
<Default>
|
||||||
|
<Card class="card__content">
|
||||||
|
<div class="content__heading">
|
||||||
|
<h3> Coins </h3>
|
||||||
|
<div class="content__search-score">
|
||||||
|
<CarbonSearch />
|
||||||
|
<span> 10K </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Search coins of evm networks
|
||||||
|
</p>
|
||||||
|
<span class="badge"> Free </span>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card class="card__add">
|
||||||
|
<CarbonAddLarge class="add__icon" />
|
||||||
|
</Card>
|
||||||
|
</Default>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(main) {
|
||||||
|
align-items: start;
|
||||||
|
justify-items: start;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__add {
|
||||||
|
place-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__content {
|
||||||
|
display: grid;
|
||||||
|
gap: 15px;
|
||||||
|
color: var(--primary);
|
||||||
|
& h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
& p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
& .badge {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__content .content__heading {
|
||||||
|
display: inline-grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__content .content__heading .content__search-score {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
justify-self: end;
|
||||||
|
& svg {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
color: var(--primary);
|
||||||
|
padding: 0 10px;
|
||||||
|
display: inline-grid;
|
||||||
|
grid-column: 1;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
background: var(--darken);
|
||||||
|
border: 0.5px solid var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__add .add__icon {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,43 +1,14 @@
|
||||||
---
|
---
|
||||||
import Default from "@/layouts/Default.astro"
|
import Default from "@/layouts/Default.astro"
|
||||||
import Button from "@/components/Button.vue"
|
|
||||||
import Search from "@/components/Search.vue"
|
import Search from "@/components/Search.vue"
|
||||||
import Footer from "@/components/Footer.astro"
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Default>
|
<Default type="home">
|
||||||
<header>
|
|
||||||
<span class="rate"> 0 / 5000 RQT </span>
|
|
||||||
<Button class="sign" />
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<Search />
|
<Search />
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</Default>
|
</Default>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
header {
|
:global(main) {
|
||||||
display: grid;
|
|
||||||
grid-auto-flow: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: end;
|
|
||||||
margin-top: 10px;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.rate {
|
|
||||||
color: var(--primary);
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.sign {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
place-items: center;
|
||||||
min-height: calc(100vh - 55px - 2.5rem);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue