f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-23 20:32:56 +00:00
Code Wiki Activity

lint

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-09-05 23:58:57 +02:00
parent a3aebc4184
commit 36d3da79a0
2 changed files with 80 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/editor/metadataEditor/metadataEditor.jsx
+4 -9
View File
@@ -7,7 +7,6 @@ import request from '../../utils/request-middleware.js';
import Combobox from '@components/combobox.jsx'; import Combobox from '@components/combobox.jsx';
import TagInput from '../tagInput/tagInput.jsx'; import TagInput from '../tagInput/tagInput.jsx';
import Themes from '@themes/themes.json'; import Themes from '@themes/themes.json';
import validations from './validations.js'; import validations from './validations.js';
@@ -84,7 +83,6 @@ const MetadataEditor = createReactClass({
return `- ${err}`; return `- ${err}`;
}).join('\n'); }).join('\n');
debouncedReportValidity(e.target, errMessage); debouncedReportValidity(e.target, errMessage);
return false; return false;
} }
@@ -186,8 +184,8 @@ const MetadataEditor = createReactClass({
<label>authors</label> <label>authors</label>
<div className='value'> <div className='value'>
{authors.length > 0 && ( {authors.length > 0 && (
<a href={`/user/${authors[0]}`} className='author-link' target="_blank" title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}> <a href={`/user/${authors[0]}`} className='author-link' target='_blank' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
{authors[0]}{authors.length > 1 && ', '} {authors[0]}{authors.length > 1 && ', '}
</a> </a>
)} )}
{authors.length > 1 && authors.slice(1).map((author, i)=>( {authors.length > 1 && authors.slice(1).map((author, i)=>(
@@ -227,7 +225,6 @@ const MetadataEditor = createReactClass({
</ul> </ul>
</div> </div>
); );
}, },
renderThemeDropdown : function(){ renderThemeDropdown : function(){
@@ -264,7 +261,7 @@ const MetadataEditor = createReactClass({
dropdown = dropdown =
<div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'> <div className='value' data-tooltip-top='Select from the list below (built-in themes and brews you have tagged "meta:theme"), or paste in the Share URL or Share ID of any brew.'>
<Combobox trigger='click' <Combobox trigger='click'
id="combobox-themes" id='combobox-themes'
className='themes-dropdown' className='themes-dropdown'
default={currentThemeDisplay} default={currentThemeDisplay}
placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag' placeholder='Select from below, or enter the Share URL or ID of a brew with the meta:theme tag'
@@ -382,7 +379,7 @@ const MetadataEditor = createReactClass({
className='value' className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} /> onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<button className='display' onClick={this.toggleThumbnailDisplay} <button className='display' onClick={this.toggleThumbnailDisplay}
aria-label={`${this.state.showThumbnail ? 'hide thumbnail' : 'show thumbnail'}`}> aria-label={`${this.state.showThumbnail ? 'hide thumbnail' : 'show thumbnail'}`}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} /> <i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button> </button>
</div> </div>
@@ -405,7 +402,6 @@ const MetadataEditor = createReactClass({
</div> </div>
</div> </div>
{this.renderLanguageDropdown()} {this.renderLanguageDropdown()}
{this.renderThemeDropdown()} {this.renderThemeDropdown()}
@@ -433,7 +429,6 @@ const MetadataEditor = createReactClass({
</div> </div>
</div> </div>
<h2>Privacy</h2> <h2>Privacy</h2>
<div className='field publish'> <div className='field publish'>
client/homebrew/editor/metadataEditor/metadataEditor.less
+76 -95
View File
@@ -7,39 +7,39 @@
} }
.metadataEditor { .metadataEditor {
--bg-clr: white; --bg-clr : white;
--bg-image: @backgroundImageAlt; --bg-image : @backgroundImageAlt;
--h1-clr: black; --h1-clr : black;
--h2-clr: #007; --h2-clr : #000077;
--label-clr: black; --label-clr : black;
--input-bg: white; --input-bg : white;
--input-bg-hover:#ddd; --input-bg-hover : #DDDDDD;
--input-text-clr: black; --input-text-clr : black;
--input-placeholder-clr: grey; --input-placeholder-clr : grey;
position : absolute; position : absolute;
box-sizing : border-box; box-sizing : border-box;
width : 100%; width : 100%;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this. height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
padding : 25px; padding : 25px;
overflow-y : auto; overflow-y : auto;
font-size : 13px; font-size : 13px;
background-color : var(--bg-clr); color : var(--label-clr);
background-image : var(--bg-image); background-color : var(--bg-clr);
background-size : cover; background-image : var(--bg-image);
color: var(--label-clr); background-size : cover;
h1 { h1 {
margin : 0 0 40px; margin : 0 0 40px;
font-weight : bold;
font-size : 18px; font-size : 18px;
font-weight : bold;
color : var(--h1-clr);
text-transform : uppercase; text-transform : uppercase;
color: var(--h1-clr);
} }
h2 { h2 {
font-size:15px;
margin : 16px 0; margin : 16px 0;
font-size : 15px;
font-weight : bold; font-weight : bold;
color : var(--h2-clr); color : var(--h2-clr);
border-bottom : 2px solid currentColor; border-bottom : 2px solid currentColor;
@@ -73,8 +73,8 @@
font-size : 1em; font-size : 1em;
font-weight : 800; font-weight : 800;
line-height : 1.8em; line-height : 1.8em;
color : inherit;
text-transform : capitalize; text-transform : capitalize;
color:inherit;
} }
& > .value { & > .value {
flex : 1 1 auto; flex : 1 1 auto;
@@ -89,11 +89,11 @@
} }
} }
input[type='text'], textarea { input[type='text'], textarea {
background-color: var(--input-bg); color : var(--input-text-clr);
color:var(--input-text-clr); background-color : var(--input-bg);
border : 1px solid var(--input-placeholder-clr); border : 1px solid var(--input-placeholder-clr);
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color: var(--input-bg-hover); } &:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
&::placeholder { color: var(--input-placeholder-clr); } &::placeholder { color : var(--input-placeholder-clr); }
} }
&.description { &.description {
@@ -124,12 +124,12 @@
max-width : 200px; max-width : 200px;
.dropdown-options { .dropdown-options {
background-color:var(--input-bg); color : var(--input-text-clr);
color: var(--input-text-clr); background-color : var(--input-bg);
.item:hover { .item:hover {
background-color: var(--input-text-clr); color : var(--input-bg);
color: var(--input-bg); background-color : var(--input-text-clr);
} }
} }
} }
@@ -202,57 +202,46 @@
} }
.tag { .tag {
background:var(--input-text-clr); color : var(--input-bg);
color: var(--input-bg); background : var(--input-text-clr);
} }
.authors.field { .authors.field {
.tag { .tag {
font-weight:300; font-weight : 300;
transition:background-color 0.2s; transition : background-color 0.2s;
&.owner { &.owner {
position: relative; position : relative;
background-color:@silverLight; display : grid;
min-width:25px; place-items : center;
display:grid; min-width : 25px;
place-items:center; font-weight : 900;
font-weight: 900; background-color : @silverLight;
&::after { &::after {
content: "\f521"; position : absolute;
font-family: "Font Awesome 6 Free"; top : 0;
color:gold; left : 0;
position: absolute; width : 15px;
top: 0; height : 15px;
left: 0; font-family : 'Font Awesome 6 Free';
width:15px; color : gold;
height:15px; content : '\f521';
rotate:-25deg; transform : scaleY(0.7);
translate:-30% -50%; rotate : -25deg;
transform: scaleY(0.7); translate : -30% -50%;
} }
} }
&:has(button) a { &:has(button) a { padding-right : 5px; }
padding-right:5px; &:has(button:hover) { background : #D97D7D; }
}
&:has(button:hover) {
background:#d97d7d;
}
button { button { color : @red; }
color:@red;
}
}
a {
text-underline-offset:0.2em;
} }
a { text-underline-offset : 0.2em; }
} }
.themes.field { .themes.field {
& .dropdown-container { & .dropdown-container { z-index : 200; }
z-index : 200;
}
& .dropdown-options { overflow-y : visible; } & .dropdown-options { overflow-y : visible; }
.disabled { .disabled {
font-style : italic; font-style : italic;
@@ -262,7 +251,7 @@
.item { .item {
position : relative; position : relative;
overflow : visible; overflow : visible;
color:inherit; color : inherit;
background-color : var(--input-bg); background-color : var(--input-bg);
border-top : 1px solid #767676; border-top : 1px solid #767676;
.preview { .preview {
@@ -284,13 +273,11 @@
padding-block : 0.5em; padding-block : 0.5em;
padding-inline : 1em; padding-inline : 1em;
font-weight : 900; font-weight : 900;
border-bottom : 2px solid #666; border-bottom : 2px solid #666666;
} }
} }
input { input { padding-right : 25px; }
padding-right: 25px;
}
.texture-container { .texture-container {
position : absolute; position : absolute;
@@ -355,9 +342,7 @@
button { button {
cursor : pointer; cursor : pointer;
&:hover { &:hover { color : @redLight; }
color: @redLight;
}
} }
} }
@@ -403,29 +388,25 @@
} }
.editor.darkMode .metadataEditor { .editor.darkMode .metadataEditor {
--bg-clr: #555; --bg-clr : #555555;
--bg-image: @backgroundImageAlt; --bg-image : @backgroundImageAlt;
--h1-clr: white; --h1-clr : white;
--h2-clr: #aaf; --h2-clr : #AAAAFF;
--label-clr: #ddd; --label-clr : #DDDDDD;
--input-bg: #333; --input-bg : #333333;
--input-bg-hover: #666; --input-bg-hover : #666666;
--input-text-clr: #eee; --input-text-clr : #EEEEEE;
--input-placeholder-clr: #aaa; --input-placeholder-clr : #AAAAAA;
--bg-image: @backgroundImageAltDark; --bg-image : @backgroundImageAltDark;
a { a {
color: @blueLight; color : @blueLight;
&:visited { &:visited { color : #CB8AD8; }
color: #cb8ad8;
}
} }
.thumbnail-preview[src="/client/homebrew/thumbnail.png"] { .thumbnail-preview[src='/client/homebrew/thumbnail.png'] { filter : invert(0.8); }
filter:invert(.8);
}
button.publish { button.publish {
.colorButton(#3137de) !important; .colorButton(#3137de) !important;
} }