small changes to layout modes

This commit is contained in:
Víctor Losada Hernández
2026-09-06 17:37:32 +02:00
parent 4fdb2a17a5
commit 56401904b2
2 changed files with 17 additions and 4 deletions
@@ -286,20 +286,20 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
<div className='layout-container'> <div className='layout-container'>
<div className='layout-option' title='grid'> <div className='layout-option' title='grid'>
<label> <label>
<i className='fas fa-grip'></i>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} /> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
<i className='fas fa-grip'></i>
</label> </label>
</div> </div>
<div className='layout-option' title='list'> <div className='layout-option' title='list'>
<label> <label>
<i className='fas fa-grip'></i>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} /> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
<i className='fas fa-grip'></i>
</label> </label>
</div> </div>
<div className='layout-option' title='card'> <div className='layout-option' title='card'>
<label> <label>
<i className='fas fa-table'></i>
<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} /> <input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
<i className='fas fa-table'></i>
</label> </label>
</div> </div>
</div> </div>
@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import '@sharedStyles/colors.less';
.noColumns() { .noColumns() {
-webkit-column-width : auto; -webkit-column-width : auto;
@@ -192,7 +193,7 @@
flex-wrap : wrap; flex-wrap : wrap;
row-gap : 5px; row-gap : 5px;
column-gap : 15px; column-gap : 15px;
align-items : baseline; align-items : center;
justify-content : center; justify-content : center;
width : 100%; width : 100%;
height : 30px; height : 30px;
@@ -202,5 +203,17 @@
background-color : #555555; background-color : #555555;
border-top : 1px solid #666666; border-top : 1px solid #666666;
border-bottom : 1px solid #666666; border-bottom : 1px solid #666666;
input[type="radio"] {
display:none;
}
i {
transition:color 0.2s;
}
input:checked + i {
color:@blue;
}
} }
} }