mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-25 05:02:58 +00:00
small changes to layout modes
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user