mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-13 19:18:43 +00:00
fix recents
This commit is contained in:
Víctor Losada Hernández
@@ -90,5 +90,4 @@ const Nav = {
|
||||
|
||||
};
|
||||
|
||||
|
||||
export default Nav;
|
||||
|
||||
@@ -62,7 +62,7 @@ const Navbar = ({ account, brew, title, props }) => {
|
||||
</Dropdown>
|
||||
<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
|
||||
<div className='nav-section'>
|
||||
<Nav.item kbd={mod + ' + z'}>Undo</Nav.item>
|
||||
<Nav.item kbd={mod + ' + z'} disabled>Undo</Nav.item>
|
||||
<Nav.item kbd={mod + ' + Shift + z'}>Redo</Nav.item>
|
||||
<Nav.item kbd={mod + ' + x'}>cut</Nav.item>
|
||||
<Nav.item kbd={mod + ' + c'}>copy</Nav.item>
|
||||
@@ -90,7 +90,7 @@ const Navbar = ({ account, brew, title, props }) => {
|
||||
account
|
||||
</Nav.item>
|
||||
</div>
|
||||
<Dropdown className='navItem' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
|
||||
<Dropdown className='navItem recent' groupName={'Recent Brews'} customTrigger={<>Recent Brews</>} icon={null} key={'recent'}>
|
||||
<RecentNavItem />
|
||||
</Dropdown>
|
||||
</Dropdown>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,9 +148,9 @@ const RecentItems = createReactClass({
|
||||
return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
|
||||
<span className='title'>{brew.title || '[ no title ]'}</span>
|
||||
<span className='time'>{Moment(brew.ts).fromNow()}</span>
|
||||
<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
|
||||
<button className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></button>
|
||||
</a>
|
||||
})};
|
||||
})}
|
||||
</div>
|
||||
};
|
||||
|
||||
@@ -167,9 +167,7 @@ const RecentItems = createReactClass({
|
||||
},
|
||||
|
||||
render : function(){
|
||||
return <div className='recent'>
|
||||
{this.renderDropdown()}
|
||||
</div>;
|
||||
return this.renderDropdown()
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user