ofs/fensir
2
0
Fork 1
Code Issues 2 Pull requests Activity Actions

Layout card items (#5)

Browse source 
Reviewed-on: #5
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
Konrad Geletey 2024-12-08 12:37:20 +03:00 committed by Konrad Geletey
parent fa8b158954
commit 8420434edb
Signed by: git
GPG key ID: 0CB1190D5D313992
8 changed files with 179 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.vue
View file

@ -11,7 +11,7 @@
button.primary {
display: grid;
color: var(--primary);
padding: 3px 15px;
padding: 0.45rem 15px;
font-size: 16px;
border: 1px solid var(--accent);
background: var(--darken);

16
src/components/Card.vue Normal file
View 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>

13
src/components/Search.vue
View file

@ -19,10 +19,13 @@
<style scoped>
fieldset.search {
--size: 10px;
border: 1px solid var(--accent);
background: var(--darken);
min-width: 50%;
display: grid;
justify-content: space-between;
font-size: 16px;
grid-template-columns: 0.2fr 0.5fr 0.3fr;
align-items: center;
outline: none;
@ -31,7 +34,7 @@ fieldset.search {
fieldset.search input {
border: 0;
outline: 0;
padding: 10px 10px;
padding: calc( 1.3rem / 2) calc( 1.3rem / 2);
color: var(--primary);
background: none;
}
@ -42,8 +45,8 @@ fieldset.search .search__context {
grid-auto-flow: column;
justify-self: start;
background: var(--black);
margin: 10px;
padding: 10px 0;
margin: var(--size);
padding: var(--size) 0;
padding-left: 0.625rem;
& .search__context-title {
color: var(--accent);
@ -64,8 +67,8 @@ fieldset.search .search__buttons {
gap: 15px;
margin-right: 15px;
& svg.icon {
width: 1.3rem;
height: 1.3rem;
width: 1.3em;
height: 1.3em;
justify-self: end;
color: var(--primary);
}

3
src/icons/CarbonAddLarge.vue Normal file
View 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
View 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>

56
src/layouts/Default.astro
View file

@ -1,8 +1,62 @@
---
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>
<slot />
<header>
{ type !== 'home' && <>
<div />
<Search />
</> }
<div class="end">
<span class="rate"> 0 / 5000 RQT </span>
<Button class="sign" />
</div>
</header>
<main>
<slot />
</main>
<Footer />
</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
View 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>

35
src/pages/index.astro
View file

@ -1,43 +1,14 @@
---
import Default from "@/layouts/Default.astro"
import Button from "@/components/Button.vue"
import Search from "@/components/Search.vue"
import Footer from "@/components/Footer.astro"
---
<Default>
<header>
<span class="rate"> 0 / 5000 RQT </span>
<Button class="sign" />
</header>
<main>
<Search />
</main>
<Footer />
<Default type="home">
<Search />
</Default>
<style>
header {
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;
:global(main) {
place-items: center;
min-height: calc(100vh - 55px - 2.5rem);
}
</style>