ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-10 06:35:16 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #187 from teaxyz/tom-styling

Browse source 
styling for fuzzy filter input
This commit is contained in:
Neil 2022-11-10 07:26:10 +08:00 committed by GitHub
parent df3f9fcfd4 6117aa677c
commit 206acf1861
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/layouts/partials/package-grid.html
View file

@ -4,17 +4,30 @@
<!-- Package Grid Header -->
<hr>
<div class="container package-grid-header">
<div class="container package-grid-header two-boxes">
<section class="flex flex-column flex-md-row">
<h3>packages</h3>
<div id="searchBar" class="flex flex-column flex-md-row">
<input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
{{- partial "sort-dropdown.html" -}}
</div>
</section>
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
</div>
<hr>
<section>
<div class="button-container">
<div id="searchBar">
<div style="display:flex; align-items:center;">
<div class="icon">
<i class="icon-search-icon"></i>
</div>
<input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
</div>
{{- partial "sort-dropdown.html" -}}
</div>
</div>
</section>
<hr>
<div class="package-grid">
<!-- Start Package Grid -->
@ -93,24 +106,40 @@
overflow: hidden;
}
.icon-search-icon{
font-size: 30px;
color: #949494;
margin-right: 20px;
position: relative;
top: 2px;
}
#searchBar {
padding: 0px;
height: 150px;
display: flex;
justify-content: space-between;
align-items: center;
}
#searchBar .sorting-container {
min-width: 260px;
}
#searchBar input {
min-width: 260px;
height: 60px;
padding: 5px 10px;
font-size: 32px;
font-family: "pp-neue-machina", sans-serif;
color:#00ffd0;
text-transform:uppercase;
margin-bottom: -5px;
min-width: 60%;
padding: 0px;
background-color: #1a1a1a !important;
color: #949494;
border: none;
color: #00ffd0;
outline: none;
border: 2px solid #949494;
border-radius: 0px;
}
#searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: white;
color: #949494;
opacity: 1; /* Firefox */
}
</style>