add: prototipo pagina utenti con barra di ricerca
parent
6c15c6ac7b
commit
d34d169d17
@ -0,0 +1,42 @@
|
|||||||
|
---
|
||||||
|
import PageLayout from '../layouts/PageLayout.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<PageLayout pageName="users">
|
||||||
|
<h1>Utenti</h1>
|
||||||
|
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" />
|
||||||
|
<span class="material-symbols-outlined">search</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-results">
|
||||||
|
<div class="search-result">
|
||||||
|
<div class="icon"><span class="material-symbols-outlined">person</span></div>
|
||||||
|
<div class="text">Persona 1</div>
|
||||||
|
<div class="right">
|
||||||
|
<a href="#">
|
||||||
|
<span class="material-symbols-outlined">globe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="search-result">
|
||||||
|
<span class="material-symbols-outlined">person</span>
|
||||||
|
<div class="text">Persona 2</div>
|
||||||
|
<div class="right">
|
||||||
|
<a href="#">
|
||||||
|
<span class="material-symbols-outlined">globe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="search-result">
|
||||||
|
<span class="material-symbols-outlined">person</span>
|
||||||
|
<div class="text">Persona 3</div>
|
||||||
|
<div class="right">
|
||||||
|
<a href="#">
|
||||||
|
<span class="material-symbols-outlined">globe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageLayout>
|
@ -0,0 +1,94 @@
|
|||||||
|
//
|
||||||
|
// Components - for complex parts of the UI like search bars or compound buttons
|
||||||
|
//
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
font-size: 24px;
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
@extend .input-text;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:hover input[type='text'] {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='text'] {
|
||||||
|
border: none;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-symbols-outlined {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.search-result {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto 1fr auto;
|
||||||
|
grid-template-areas: 'icon text . right';
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 4px 4px 0 0 #222;
|
||||||
|
|
||||||
|
& > .icon {
|
||||||
|
grid-area: icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .text {
|
||||||
|
grid-area: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .right {
|
||||||
|
grid-area: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,68 @@
|
|||||||
|
//
|
||||||
|
// Controls - for things like buttons, input, select
|
||||||
|
//
|
||||||
|
|
||||||
|
button,
|
||||||
|
.button,
|
||||||
|
[role='button'] {
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 4px 4px 0 0 #222;
|
||||||
|
|
||||||
|
transition: all 64ms linear;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translate(-1px, -1px);
|
||||||
|
box-shadow: 5px 5px 0 0 #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
box-shadow: 2px 2px 0 0 #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0.25rem 1.5rem;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
color: #222;
|
||||||
|
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #1e6733;
|
||||||
|
color: #f4fef7;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2b8b47;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon {
|
||||||
|
padding: 0.25rem;
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-text,
|
||||||
|
input[type='text'] {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
|
||||||
|
border: 3px solid #222;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 4px 4px 0 0 #222;
|
||||||
|
|
||||||
|
padding: 0 0.25rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue