From 7222d28773cfab94b51c46a666fa102bc66b36ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 7 Oct 2026 23:48:07 +0200 Subject: [PATCH] fix recents --- client/homebrew/navbar/nav.jsx | 1 - client/homebrew/navbar/navbar.jsx | 4 +- client/homebrew/navbar/navbar.less | 185 +++++++++------------- client/homebrew/navbar/recent.navitem.jsx | 8 +- 4 files changed, 84 insertions(+), 114 deletions(-) diff --git a/client/homebrew/navbar/nav.jsx b/client/homebrew/navbar/nav.jsx index 7c8fcc8c8..5815a0692 100644 --- a/client/homebrew/navbar/nav.jsx +++ b/client/homebrew/navbar/nav.jsx @@ -90,5 +90,4 @@ const Nav = { }; - export default Nav; diff --git a/client/homebrew/navbar/navbar.jsx b/client/homebrew/navbar/navbar.jsx index 345dd7788..34f6d1b8d 100644 --- a/client/homebrew/navbar/navbar.jsx +++ b/client/homebrew/navbar/navbar.jsx @@ -62,7 +62,7 @@ const Navbar = ({ account, brew, title, props }) => { Edit} icon={null} key={'edit'}>
- Undo + Undo Redo cut copy @@ -90,7 +90,7 @@ const Navbar = ({ account, brew, title, props }) => { account
- Recent Brews} icon={null} key={'recent'}> + Recent Brews} icon={null} key={'recent'}> diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less index a4fd4f972..5597d7746 100644 --- a/client/homebrew/navbar/navbar.less +++ b/client/homebrew/navbar/navbar.less @@ -47,8 +47,8 @@ padding: 5px; cursor: pointer; - &:has(button, a) { - padding:0; + &:has(> button, > a) { + padding: 0; } &.brewTitle { @@ -189,85 +189,6 @@ text-transform: none; } } - - &.recent { - position: relative; - .navDropdown .navItem { - #backgroundColorsHover; - .animate(background-color); - position: relative; - box-sizing: border-box; - display: block; - max-width: 15em; - max-height: ~'calc(100vh - 28px)'; - padding: 8px 5px 13px; - overflow: hidden auto; - color: white; - text-decoration: none; - scrollbar-color: #666666 #333333; - scrollbar-width: thin; - background-color: #333333; - border-top: 1px solid #888888; - .clear { - position: absolute; - top: 50%; - right: 0; - display: none; - width: 20px; - height: 100%; - background-color: #333333; - border-radius: 3px; - opacity: 70%; - transform: translateY(-50%); - &:hover { - opacity: 100%; - } - i { - width: 100%; - height: 100%; - margin: 0; - font-size: 10px; - text-align: center; - } - } - &:hover { - background-color: @blue; - .clear { - display: grid; - place-content: center; - } - } - .title { - display: inline-block; - width: 100%; - overflow: hidden auto; - text-overflow: ellipsis; - white-space: nowrap; - } - .time { - position: absolute; - right: 2px; - bottom: 2px; - font-size: 0.7em; - color: #888888; - } - &.header { - box-sizing: border-box; - display: block; - padding: 5px 0; - color: #bbbbbb; - text-align: center; - background-color: #333333; - border-top: 1px solid #888888; - &:nth-of-type(1) { - background-color: darken(@teal, 20%); - } - &:nth-of-type(2) { - background-color: darken(@purple, 30%); - } - } - } - } } } @@ -288,10 +209,11 @@ .homebrew nav { color: #ccc; background: #333; - height: 30px; + min-height: 29px; font-size: 14px; - font-family:Alata; - button, a { + font-family: Alata, open sans; + button, + a { &:disabled { color: #777; } @@ -305,28 +227,78 @@ color: inherit; text-decoration: none; } - .navItem, .menu-wrapper { + .navItem, + .menu-wrapper { &:hover { - background:#555; + background: #555; } &:has(> i, > kbd) { - display:flex; - gap:5px; + display: flex; + gap: 5px; justify-content: space-between; } kbd { - font-size:.8em; + font-size: 0.8em; font-family: monospace; - color:#aaa; - background:#222; - padding:2px 5px; - border-radius:5px; + color: #aaa; + background: #222; + padding: 2px 5px; + border-radius: 5px; + } + + &.recent ul { + position: relative; + + .navItem { + position: relative; + gap: 5px; + height: 2.7em; + isolation: isolate; + .clear { + width: 55px; + padding: 0; + cursor: pointer; + transition: background-color @defaultDuration; + &:hover { + background: @red; + } + } + .title { + width: 200px; + padding-left: 5px; + padding-bottom: 10px; + .ellipsis(); + } + .time { + position: absolute; + left: 5px; + bottom: 2px; + font-size: 0.8em; + color: #888888; + z-index: -1; + } + &.header { + box-sizing: border-box; + display: block; + padding: 5px 0; + color: #bbbbbb; + text-align: center; + background-color: #333333; + border-top: 1px solid #888888; + &:nth-of-type(1) { + background-color: darken(@teal, 20%); + } + &:nth-of-type(2) { + background-color: darken(@purple, 30%); + } + } + } } } .navItem { - height:2em; + height: 2em; &.header { justify-content: center; @@ -340,7 +312,7 @@ > .menu-wrapper { height: 100%; - text-wrap:nowrap; + text-wrap: nowrap; &:first-child :is(button, a) { padding-left: 15px; @@ -349,20 +321,21 @@ padding-right: 15px; } } - } - > ul ul { - background: #333; - font-size: 12px; - text-transform: capitalize; + ul { + background: #333; + font-size: 12px; + text-transform: capitalize; + padding-bottom: 5px; - .nav-section:not(:last-child) { - border-bottom: 1px solid; - margin-bottom: 10px; - } + .nav-section:not(:last-child, + .header) { + border-bottom: 1px solid; + margin-bottom: 10px; + } - li { - margin-block: 2px; + li { + margin-block: 2px; + } } } } diff --git a/client/homebrew/navbar/recent.navitem.jsx b/client/homebrew/navbar/recent.navitem.jsx index e08858e6e..86d949560 100644 --- a/client/homebrew/navbar/recent.navitem.jsx +++ b/client/homebrew/navbar/recent.navitem.jsx @@ -148,9 +148,9 @@ const RecentItems = createReactClass({ return {brew.title || '[ no title ]'} {Moment(brew.ts).fromNow()} -
{this.removeItem(`${brew.url}`, e);}}>
+ - })}; + })} }; @@ -167,9 +167,7 @@ const RecentItems = createReactClass({ }, render : function(){ - return
- {this.renderDropdown()} -
; + return this.renderDropdown() } });