f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 20:29:01 +00:00
Code Wiki Activity

custom icons

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-03 21:44:07 +02:00
parent 1c0b9a5852
commit 500f71356e
5 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/listPage.jsx
+3 -3
View File
@@ -294,19 +294,19 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
<div className='layout-option' title='grid'>
<label>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
<i className='fas fa-grip-vertical'></i>
<i className='fac compressed-grid'></i>
</label>
</div>
<div className='layout-option' title='list'>
<label>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
<i className='fas fa-list'></i>
<i className='fas fa-bars'></i>
</label>
</div>
<div className='layout-option' title='card'>
<label>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
<i className='fas fa-table'></i>
<i className='fac format-card'></i>
</label>
</div>
</div>
client/homebrew/pages/basePages/listPage/listPage.less
+4
View File
@@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import '@sharedStyles/colors.less';
@import '../../../../icons/customIcons.less';
.noColumns() {
-webkit-column-width : auto;
@@ -21,6 +22,9 @@
--bg-clr: white;
.content {
padding : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
@media screen and (max-width : 1200px) {
padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
}
@media screen and (max-width : 800px) {
padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
}
client/icons/compressed-grid.svg
+13
View File
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.76 400.41">
<g id="Layer_1-2" data-name="Layer 1">
<rect width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect x="216.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect x="216.6" y="107.6" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect x="216.6" y="215.2" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
<rect x="216.6" y="322.8" width="183.16" height="77.61" rx="16.76" ry="16.76"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 807 B

client/icons/customIcons.less
+2
View File
@@ -32,3 +32,5 @@
.single-spread { mask-image : url('../icons/single-spread.svg'); }
.facing-spread { mask-image : url('../icons/facing-spread.svg'); }
.flow-spread { mask-image : url('../icons/flow-spread.svg'); }
.format-card { mask-image: url('../icons/format-card.svg'); }
.compressed-grid { mask-image: url('../icons//compressed-grid.svg'); }
client/icons/format-card.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324.38 433.46" width="324.38" height="433.46" xml:space="preserve">
<g id="Layer_2-2" data-name="Layer 2">
<path d="M267.61,0H56.77C25.42,0,0,25.42,0,56.77v319.92c0,31.35,25.42,56.77,56.77,56.77h210.84c31.35,0,56.77-25.42,56.77-56.77V56.77c0-31.35-25.42-56.77-56.77-56.77ZM94.52,45.62c12.6,0,22.81,10.21,22.81,22.81s-10.21,22.81-22.81,22.81-22.81-10.21-22.81-22.81,10.21-22.81,22.81-22.81ZM73.06,187.38l34.38-57.2c4.29-7.14,14.6-7.26,19.05-.22l7.7,12.17c1.02,1.61,3.36,1.65,4.44.08l31.31-45.56c4.44-6.45,13.96-6.47,18.42-.04l62.23,89.65c5.3,7.63-.16,18.07-9.45,18.07H82.65c-8.7.01-14.07-9.49-9.59-16.95ZM258.24,388.61H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,348.81H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31ZM258.24,309H67.91c-6.8,0-12.31-5.51-12.31-12.31s5.51-12.31,12.31-12.31h190.33c6.8,0,12.31,5.51,12.31,12.31s-5.51,12.31-12.31,12.31Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB