shuqi
/
pixel-icon-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI updates

This commit is contained in:
Shuqi 2023-12-05 12:48:05 +08:00
parent 772d1fdf87
commit 6c0726b3e5
5 changed files with 103 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
php/index.php
View File

@ -31,12 +31,6 @@ $files = array_filter($files, function ($file) {
</script> </script>
<script type="module" crossorigin src="./assets/index.js"></script> <script type="module" crossorigin src="./assets/index.js"></script>
<link rel="stylesheet" href="./assets/index.css"> <link rel="stylesheet" href="./assets/index.css">
<style>
.preload img {
width: 1em;
height: 1em
}
</style>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
@ -56,18 +50,20 @@ $files = array_filter($files, function ($file) {
</header> </header>
<div id="introduction"> <div id="introduction">
<p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p> <p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p>
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.</p> <p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, saved in SVG vector format.</p>
<p>To download, please click the icons you want, or click the [Download All] button above.</p> <p>To download, please click the icons you want, or click the [Download All] button above.</p>
</div> </div>
<div id="root"> <div id="root">
<ul class="icon-list show-name">
<?php foreach ($files as $file): ?> <?php foreach ($files as $file): ?>
<div class="preload"> <li>
<a href="download.php?icon=<?= $file ?>" target="_blank"> <a href="download.php?icon=<?= $file ?>" target="_blank">
<img src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>"> <img class="icon" src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
<?= str_replace(".svg", "", $file) ?> <div className='name'><?= str_replace(".svg", "", $file) ?></div>
</a> </a>
</div> </li>
<?php endforeach ?> <?php endforeach ?>
</ul>
</div> </div>
<footer> <footer>
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p> <p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>

5
src/App.css
View File

@ -66,6 +66,11 @@ ul.icon-list .name {
font-family: "Open Sans PX"; font-family: "Open Sans PX";
} }
.no-result {
text-align: center;
padding: 6rem 0;
}
@media (hover:hover) { @media (hover:hover) {
ul.icon-list>li:hover img.icon { ul.icon-list>li:hover img.icon {
transform: translateY(-6px); transform: translateY(-6px);

4
src/App.jsx
View File

@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
import { setQuery } from './app/searchSlice' import { setQuery } from './app/searchSlice'
import { setShowName } from './app/displaySlice' import { setShowName } from './app/displaySlice'
import { IconList } from './IconList' import { IconList } from './IconList'
import './App.css' // import './App.css'
function App() { function App() {
const inputSearch = useRef() const inputSearch = useRef()
@ -25,7 +25,7 @@ function App() {
return ( return (
<> <>
<div className="pixel-input"> <div className="pixel-input">
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" autoComplete='no' /> <input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
</div> </div>
<div id='display-options'> <div id='display-options'>
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' /> <input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />

8
src/IconList.jsx
View File

@ -33,6 +33,14 @@ export const IconList = function () {
window.open(`download.php?icon=${filename}`) window.open(`download.php?icon=${filename}`)
} }
if (icons.length == 0) {
return (
<div className="no-result">
No icon found for<br />"{query}"
</div>
)
}
return ( return (
<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }> <ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
{ icons.map( (filename, index) => ( { icons.map( (filename, index) => (

79
src/index.css
View File

@ -69,7 +69,8 @@ p {
} }
input[type="text"] { input[type="text"] {
font-family: 'Silkscreen', sans-serif; font-family: 'Open Sans PX', sans-serif;
font-size: 20px;
padding: 9px; padding: 9px;
color: var(--font-color); color: var(--font-color);
border: 2px solid var(--grey-color); border: 2px solid var(--grey-color);
@ -271,6 +272,80 @@ img.theme-icon {
margin-left: auto margin-left: auto
} }
@media (prefers-color-scheme: light) {
#root {
width: 100%;
}
input#search {
width: 100%;
}
#display-options {
margin-top: 18px;
font-size: 1em;
line-height: 18px;
display: flex;
gap: 0.5em;
}
ul.icon-list {
list-style: none;
margin: 36px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
/* display: grid;
grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */
gap: 18px;
}
ul.icon-list.show-name {
/* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */
}
ul.icon-list>li {
box-sizing: border-box;
width: 54px;
padding: 9px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
ul.icon-list.show-name>li {
padding: 9px;
width: 99px;
height: 126px;
/* border: 1px solid #ccc; */
}
ul.icon-list img.icon {
width: 36px;
height: auto;
cursor: pointer;
}
ul.icon-list .name {
font-size: 20px;
line-height: 24px;
margin-top: 9px;
font-family: "Open Sans PX";
}
ul.icon-list a {
color: var(--font-color);
}
.no-result {
text-align: center;
padding: 6rem 0;
}
@media (hover:hover) {
ul.icon-list>li:hover img.icon {
transform: translateY(-6px);
}
} }