f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 22:38:43 +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 request from '../../../../utils/request-middleware.js';
import googleDriveIcon from '../../../../googleDrive.svg'; 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'; import dedent from 'dedent';
const BrewItem = ({ const BrewItem = ({
@@ -16,6 +17,7 @@ const BrewItem = ({
}, },
updateListFilter = ()=>{}, updateListFilter = ()=>{},
reportError = ()=>{}, reportError = ()=>{},
theme,
renderStorage = true, renderStorage = true,
})=>{ })=>{
@@ -101,10 +103,10 @@ const BrewItem = ({
</span> </span>
); );
} }
console.log(theme);
return ( return (
<span className='storage' title='Homebrewery Storage'> <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> </span>
); );
}; };
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+18 -8
View File
@@ -7,6 +7,7 @@
--bg-image : @backgroundImageAlt; --bg-image : @backgroundImageAlt;
--text-clr : black; --text-clr : black;
--text-shadow-clr : white; --text-shadow-clr : white;
--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
position : relative; position : relative;
display : flex; display : flex;
@@ -57,9 +58,11 @@
font-weight : bold; font-weight : bold;
white-space : nowrap; white-space : nowrap;
cursor : pointer; 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 : 1px solid currentColor;
border-radius : 4px; border-radius : 4px;
&::before { &::before {
margin-right : 3px; margin-right : 3px;
font-family : 'Font Awesome 6 Free'; font-family : 'Font Awesome 6 Free';
@@ -72,22 +75,18 @@
--tag-system : #800000; --tag-system : #800000;
&.type { &.type {
color : var(--tag-type); color : var(--tag-type);
background-color : rgba(from var(--tag-type) r g b / 0.2);
&::before { content : '\f0ad'; } &::before { content : '\f0ad'; }
} }
&.group { &.group {
color : var(--tag-group); color : var(--tag-group);
background-color : rgba(from var(--tag-group) r g b / 0.1);
&::before { content : '\f500'; } &::before { content : '\f500'; }
} }
&.meta { &.meta {
color : var(--tag-meta); color : var(--tag-meta);
background-color : rgba(from var(--tag-meta) r g b / 0.2);
&::before { content : '\f05a'; } &::before { content : '\f05a'; }
} }
&.system { &.system {
color : var(--tag-system); color : var(--tag-system);
background-color : rgba(from var(--tag-system) r g b / 0.2);
&::before { content : '\f518'; } &::before { content : '\f518'; }
} }
} }
@@ -127,11 +126,20 @@
.deleteLink { color : @red; } .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 { .grid > .brewItem {
justify-content : space-between; justify-content : space-between;
width : clamp(300px, 48%, 500px); width : clamp(300px, 48%, 500px);
min-height : 125px; min-height : 125px;
padding : 5px 15px 5px 6px; padding : 7px 17px 7px 8px;
padding-right : 30px; padding-right : 30px;
border-radius : 5px; border-radius : 5px;
box-shadow : 0 4px 5px 0 #333333; box-shadow : 0 4px 5px 0 #333333;
@@ -160,7 +168,7 @@
width : 300px; width : 300px;
height : 400px; height : 400px;
padding : 100px 10px 50px; 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-repeat : no-repeat;
background-position : center 20%, center; background-position : center 20%, center;
background-size : 50%, cover; background-size : 50%, cover;
@@ -221,7 +229,6 @@
grid-area : tags; grid-area : tags;
color : inherit; color : inherit;
i { color : inherit;} i { color : inherit;}
> span { background : hsl(from currentColor h 20% 80%); }
} }
.brewAuthors { grid-area : authors; } .brewAuthors { grid-area : authors; }
.brewPages { grid-area : pages; } .brewPages { grid-area : pages; }
@@ -235,6 +242,9 @@
height : 40px; height : 40px;
} }
} }
.darkMode .card .brewItem {
border-width:2px;
}
.list > .brewItem { .list > .brewItem {
display : grid; display : grid;
grid-template-columns : 35% 3fr 150px; 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_SORT_TYPE = 'HB_listPage_sortType';
const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group'; const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode'; const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
const USERPAGE_THEME_MODE = 'HB_listPage_theme_mode';
const DEFAULT_SORT_TYPE = 'alpha'; const DEFAULT_SORT_TYPE = 'alpha';
const DEFAULT_SORT_DIR = 'asc'; const DEFAULT_SORT_DIR = 'asc';
const DEFAULT_LAYOUT_MODE = 'grid'; const DEFAULT_LAYOUT_MODE = 'grid';
const DEFAULT_THEME_MODE = 'light';
const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
const [filterString, setFilterString] = useState(query?.filter || ''); 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 [sortDir, setSortDir] = useState(query?.dir || null);
const [groupVisibility, setGroupVisibility] = useState({}); const [groupVisibility, setGroupVisibility] = useState({});
const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE); const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
const groupVisibilityRef = useRef(groupVisibility); const groupVisibilityRef = useRef(groupVisibility);
const sortTypeRef = useRef(sortType); 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 newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
const newThemeMode = localStorage.getItem(USERPAGE_THEME_MODE) || DEFAULT_THEME_MODE;
setGroupVisibility(namedBrewCollection); setGroupVisibility(namedBrewCollection);
setSortType(newSortType); setSortType(newSortType);
setSortDir(newSortDir); setSortDir(newSortDir);
setLayoutMode(newLayoutMode); setLayoutMode(newLayoutMode);
setThemeMode(newThemeMode);
return ()=>{ return ()=>{
window.onbeforeunload = null; window.onbeforeunload = null;
@@ -80,6 +85,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
brew={brew} brew={brew}
key={idx} key={idx}
reportError={reportError} reportError={reportError}
theme={themeMode}
updateListFilter={(tag)=>{ updateListFilter={(tag)=>{
updateUrl(filterString, sortType, sortDir, tag); updateUrl(filterString, sortType, sortDir, tag);
}} }}
@@ -282,8 +288,8 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
}; };
const handleLayoutChange = (e, mode)=>{ const handleLayoutChange = (e, mode)=>{
setLayoutMode(e.target.checked ? mode : 'grid'); setLayoutMode(e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid'); localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
return; return;
}; };
@@ -306,16 +312,22 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
</div> </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 = ()=>{ const renderThemePicker = ()=>{
return ( return (
<div className="radio-toggle theme-container"> <div className="radio-toggle theme-container">
<h6>Theme:</h6> <h6>Theme:</h6>
<label className="option"> <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"/> <i className="fas fa-sun"/>
</label> </label>
<label className="option"> <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"/> <i className="fas fa-moon"/>
</label> </label>
</div> </div>
@@ -337,12 +349,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
} }
return ( return (
<div className='listPage sitePage'> <div className='sitePage listPage'>
{navItems} {navItems}
{renderNav()} {renderNav()}
<div className='content V3'> <div className={`content V3 ${themeMode + 'Mode'}`}>
<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div> <div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
</div> </div>
</div> </div>