0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00

last changes

This commit is contained in:
Víctor Losada Hernández
2025-11-15 20:23:03 +01:00
parent 4aacb36b3f
commit af477c56b1
2 changed files with 45 additions and 29 deletions

View File

@@ -205,15 +205,20 @@ const MetadataEditor = createClass({
renderAuthors : function(){
const authors = this.props.metadata.authors;
let text = 'None.';
if(authors && authors.length){
text = authors.join(', ');
}
if(!this.state.isOwner || authors.length < 2) return (
<div className='field authors'>
<label>authors</label>
<div className='value'>
{text}
{authors.length > 0 && (
<a href={`/user/${authors[0]}`} className='author-link' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
{authors[0]}{authors.length > 1 && ', '}
</a>
)}
{authors.length > 1 && authors.slice(1).map((author, i)=>(
<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${author}'s profile in a new tab`}>
{author}{i+2 < authors.length && ', '}
</a>
))}
</div>
</div>
);
@@ -223,7 +228,7 @@ const MetadataEditor = createClass({
<ul className='list'>
{authors.length > 0 && (
<li className='tag owner' title='Owner'>
<a href={`/user/${authors[0]}`} className='author-link'>
<a href={`/user/${authors[0]}`} className='author-link' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
{authors[0]}
</a>
</li>
@@ -231,7 +236,7 @@ const MetadataEditor = createClass({
{authors.length > 1 && authors.slice(1).map((author, i)=>(
<li className='tag author' key={i + 1} title='Author'>
<a href={`/user/${author}`} className='author-link'>
<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${authors[0]}'s profile in a new tab`}>
{author}
</a>
<button

View File

@@ -162,33 +162,44 @@
}
}
.authors.field {
.tag.owner {
position: relative;
background-color:@silverLight;
min-width:25px;
display:grid;
place-items:center;
font-weight: 900;
.tag {
font-weight:300;
transition:background-color 0.2s;
&::after {
content: "\f521";
font-family: "Font Awesome 6 Free";
color:gold;
position: absolute;
top: 0;
left: 50%;
width:15px;
height:15px;
translate:-50% -90%;
&.owner {
position: relative;
background-color:@silverLight;
min-width:25px;
display:grid;
place-items:center;
font-weight: 900;
&::after {
content: "\f521";
font-family: "Font Awesome 6 Free";
color:gold;
position: absolute;
top: 0;
left: 0;
width:15px;
height:15px;
rotate:-45deg;
translate:-50% -50%;
}
}
&:has(button:hover) {
background:#d97d7d;
}
}
button {
color:@redLight;
}
button {
color:@red;
}
}
a {
color:black;
text-decoration:unset;
}
}