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

dark mode for the userpage

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-07 11:08:22 +02:00
parent e4043736a4
commit a9ba54535c
3 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+5 -3
View File
@@ -4,7 +4,8 @@ import moment from 'moment';
import request from '../../../../utils/request-middleware.js';
import googleDriveIcon from '../../../../googleDrive.svg';
import homebreweryIcon from '../../../../thumbnail.svg';
import homebreweryIconWhite from '@themes/assets/naturalCritLogoWhite.svg';
import homebreweryIconBlack from '@themes/assets/naturalCritLogoBlack.svg';
import dedent from 'dedent';
const BrewItem = ({
@@ -16,6 +17,7 @@ const BrewItem = ({
},
updateListFilter = ()=>{},
reportError = ()=>{},
theme,
renderStorage = true,
})=>{
@@ -101,10 +103,10 @@ const BrewItem = ({
</span>
);
}
console.log(theme);
return (
<span className='storage' title='Homebrewery Storage'>
<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
<img className='homebreweryIcon' src={theme === 'light' ? homebreweryIconBlack : homebreweryIconWhite} alt='Homebrewery Storage' />
</span>
);
};
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+18 -8
View File
@@ -7,6 +7,7 @@
--bg-image : @backgroundImageAlt;
--text-clr : black;
--text-shadow-clr : white;
--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
position : relative;
display : flex;
@@ -57,9 +58,11 @@
font-weight : bold;
white-space : nowrap;
cursor : pointer;
background-color : rgba(from var(--tag-base) r g b / 0.1);
color:black;
background : hsl(from currentColor h 20% 80%);
border : 1px solid currentColor;
border-radius : 4px;
&::before {
margin-right : 3px;
font-family : 'Font Awesome 6 Free';
@@ -72,22 +75,18 @@
--tag-system : #800000;
&.type {
color : var(--tag-type);
background-color : rgba(from var(--tag-type) r g b / 0.2);
&::before { content : '\f0ad'; }
}
&.group {
color : var(--tag-group);
background-color : rgba(from var(--tag-group) r g b / 0.1);
&::before { content : '\f500'; }
}
&.meta {
color : var(--tag-meta);
background-color : rgba(from var(--tag-meta) r g b / 0.2);
&::before { content : '\f05a'; }
}
&.system {
color : var(--tag-system);
background-color : rgba(from var(--tag-system) r g b / 0.2);
&::before { content : '\f518'; }
}
}
@@ -127,11 +126,20 @@
.deleteLink { color : @red; }
}
}
.darkMode .brewItem {
--bg-clr : #444;
--bg-image : @backgroundImageAltDark;
--text-clr : #ddd;
--text-shadow-clr : black;
--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
}
.grid > .brewItem {
justify-content : space-between;
width : clamp(300px, 48%, 500px);
min-height : 125px;
padding : 5px 15px 5px 6px;
padding : 7px 17px 7px 8px;
padding-right : 30px;
border-radius : 5px;
box-shadow : 0 4px 5px 0 #333333;
@@ -160,7 +168,7 @@
width : 300px;
height : 400px;
padding : 100px 10px 50px;
background-image : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image);
background-image : var(--hb-logo), var(--bg-image);
background-repeat : no-repeat;
background-position : center 20%, center;
background-size : 50%, cover;
@@ -221,7 +229,6 @@
grid-area : tags;
color : inherit;
i { color : inherit;}
> span { background : hsl(from currentColor h 20% 80%); }
}
.brewAuthors { grid-area : authors; }
.brewPages { grid-area : pages; }
@@ -235,6 +242,9 @@
height : 40px;
}
}
.darkMode .card .brewItem {
border-width:2px;
}
.list > .brewItem {
display : grid;
grid-template-columns : 35% 3fr 150px;
client/homebrew/pages/basePages/listPage/listPage.jsx
+18 -6
View File
@@ -10,10 +10,12 @@ const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
const USERPAGE_THEME_MODE = 'HB_listPage_theme_mode';
const DEFAULT_SORT_TYPE = 'alpha';
const DEFAULT_SORT_DIR = 'asc';
const DEFAULT_LAYOUT_MODE = 'grid';
const DEFAULT_THEME_MODE = 'light';
const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
const [filterString, setFilterString] = useState(query?.filter || '');
@@ -22,6 +24,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
const [sortDir, setSortDir] = useState(query?.dir || null);
const [groupVisibility, setGroupVisibility] = useState({});
const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
const groupVisibilityRef = useRef(groupVisibility);
const sortTypeRef = useRef(sortType);
@@ -53,11 +56,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
}, {});
const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
const newThemeMode = localStorage.getItem(USERPAGE_THEME_MODE) || DEFAULT_THEME_MODE;
setGroupVisibility(namedBrewCollection);
setSortType(newSortType);
setSortDir(newSortDir);
setLayoutMode(newLayoutMode);
setThemeMode(newThemeMode);
return ()=>{
window.onbeforeunload = null;
@@ -80,6 +85,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
brew={brew}
key={idx}
reportError={reportError}
theme={themeMode}
updateListFilter={(tag)=>{
updateUrl(filterString, sortType, sortDir, tag);
}}
@@ -282,8 +288,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
};
const handleLayoutChange = (e, mode)=>{
setLayoutMode(e.target.checked ? mode : 'grid');
localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
setLayoutMode(e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
return;
};
@@ -306,16 +312,22 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
</div>
);
};
const handleThemeChange = (e, mode)=>{
setThemeMode(e.target.checked ? mode : DEFAULT_THEME_MODE);
localStorage.setItem(USERPAGE_THEME_MODE, e.target.checked ? mode : DEFAULT_THEME_MODE);
return;
};
const renderThemePicker = ()=>{
return (
<div className="radio-toggle theme-container">
<h6>Theme:</h6>
<label className="option">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
<i className="fas fa-sun"/>
</label>
<label className="option">
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')}/>
<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')} checked={themeMode === 'dark'}/>
<i className="fas fa-moon"/>
</label>
</div>
@@ -337,12 +349,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
}
return (
<div className='listPage sitePage'>
<div className='sitePage listPage'>
{navItems}
{renderNav()}
<div className='content V3'>
<div className={`content V3 ${themeMode + 'Mode'}`}>
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
</div>
</div>