f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-21 12:12:58 +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 TagInput from '../tagInput/tagInput.jsx';
import Themes from '@themes/themes.json';
import validations from './validations.js';
@@ -84,7 +83,6 @@ const MetadataEditor = createReactClass({
return `- ${err}`;
}).join('\n');
debouncedReportValidity(e.target, errMessage);
return false;
}
@@ -186,8 +184,8 @@ const MetadataEditor = createReactClass({
<label>authors</label>
<div className='value'>
{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`}>
{authors[0]}{authors.length > 1 && ', '}
<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 && ', '}
</a>
)}
{authors.length > 1 && authors.slice(1).map((author, i)=>(
@@ -227,7 +225,6 @@ const MetadataEditor = createReactClass({
</ul>
</div>
);
},
renderThemeDropdown : function(){
@@ -264,7 +261,7 @@ const MetadataEditor = createReactClass({
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.'>
<Combobox trigger='click'
id="combobox-themes"
id='combobox-themes'
className='themes-dropdown'
default={currentThemeDisplay}
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'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<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'}`} />
</button>
</div>
@@ -405,7 +402,6 @@ const MetadataEditor = createReactClass({
</div>
</div>
{this.renderLanguageDropdown()}
{this.renderThemeDropdown()}
@@ -433,7 +429,6 @@ const MetadataEditor = createReactClass({
</div>
</div>
<h2>Privacy</h2>
<div className='field publish'>
client/homebrew/editor/metadataEditor/metadataEditor.less
+76 -95
View File
@@ -7,39 +7,39 @@
}
.metadataEditor {
--bg-clr: white;
--bg-image: @backgroundImageAlt;
--h1-clr: black;
--h2-clr: #007;
--label-clr: black;
--input-bg: white;
--input-bg-hover:#ddd;
--input-text-clr: black;
--input-placeholder-clr: grey;
--bg-clr : white;
--bg-image : @backgroundImageAlt;
--h1-clr : black;
--h2-clr : #000077;
--label-clr : black;
--input-bg : white;
--input-bg-hover : #DDDDDD;
--input-text-clr : black;
--input-placeholder-clr : grey;
position : absolute;
box-sizing : border-box;
width : 100%;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
padding : 25px;
overflow-y : auto;
font-size : 13px;
background-color : var(--bg-clr);
background-image : var(--bg-image);
background-size : cover;
color: var(--label-clr);
position : absolute;
box-sizing : border-box;
width : 100%;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
padding : 25px;
overflow-y : auto;
font-size : 13px;
color : var(--label-clr);
background-color : var(--bg-clr);
background-image : var(--bg-image);
background-size : cover;
h1 {
margin : 0 0 40px;
font-weight : bold;
font-size : 18px;
font-weight : bold;
color : var(--h1-clr);
text-transform : uppercase;
color: var(--h1-clr);
}
h2 {
font-size:15px;
margin : 16px 0;
font-size : 15px;
font-weight : bold;
color : var(--h2-clr);
border-bottom : 2px solid currentColor;
@@ -73,8 +73,8 @@
font-size : 1em;
font-weight : 800;
line-height : 1.8em;
color : inherit;
text-transform : capitalize;
color:inherit;
}
& > .value {
flex : 1 1 auto;
@@ -89,11 +89,11 @@
}
}
input[type='text'], textarea {
background-color: var(--input-bg);
color:var(--input-text-clr);
border : 1px solid var(--input-placeholder-clr);
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color: var(--input-bg-hover); }
&::placeholder { color: var(--input-placeholder-clr); }
color : var(--input-text-clr);
background-color : var(--input-bg);
border : 1px solid var(--input-placeholder-clr);
&:hover, :focus { outline : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
&::placeholder { color : var(--input-placeholder-clr); }
}
&.description {
@@ -124,12 +124,12 @@
max-width : 200px;
.dropdown-options {
background-color:var(--input-bg);
color: var(--input-text-clr);
color : var(--input-text-clr);
background-color : var(--input-bg);
.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 {
background:var(--input-text-clr);
color: var(--input-bg);
color : var(--input-bg);
background : var(--input-text-clr);
}
.authors.field {
.tag {
font-weight:300;
transition:background-color 0.2s;
font-weight : 300;
transition : background-color 0.2s;
&.owner {
position: relative;
background-color:@silverLight;
min-width:25px;
display:grid;
place-items:center;
font-weight: 900;
position : relative;
display : grid;
place-items : center;
min-width : 25px;
font-weight : 900;
background-color : @silverLight;
&::after {
content: "\f521";
font-family: "Font Awesome 6 Free";
color:gold;
position: absolute;
top: 0;
left: 0;
width:15px;
height:15px;
rotate:-25deg;
translate:-30% -50%;
transform: scaleY(0.7);
position : absolute;
top : 0;
left : 0;
width : 15px;
height : 15px;
font-family : 'Font Awesome 6 Free';
color : gold;
content : '\f521';
transform : scaleY(0.7);
rotate : -25deg;
translate : -30% -50%;
}
}
&:has(button) a {
padding-right:5px;
}
&:has(button:hover) {
background:#d97d7d;
}
&:has(button) a { padding-right : 5px; }
&:has(button:hover) { background : #D97D7D; }
button {
color:@red;
}
button { color : @red; }
}
a {
text-underline-offset:0.2em;
}
a { text-underline-offset : 0.2em; }
}
.themes.field {
& .dropdown-container {
z-index : 200;
}
& .dropdown-container { z-index : 200; }
& .dropdown-options { overflow-y : visible; }
.disabled {
font-style : italic;
@@ -262,7 +251,7 @@
.item {
position : relative;
overflow : visible;
color:inherit;
color : inherit;
background-color : var(--input-bg);
border-top : 1px solid #767676;
.preview {
@@ -284,13 +273,11 @@
padding-block : 0.5em;
padding-inline : 1em;
font-weight : 900;
border-bottom : 2px solid #666;
border-bottom : 2px solid #666666;
}
}
input {
padding-right: 25px;
}
input { padding-right : 25px; }
.texture-container {
position : absolute;
@@ -355,9 +342,7 @@
button {
cursor : pointer;
&:hover {
color: @redLight;
}
&:hover { color : @redLight; }
}
}
@@ -403,29 +388,25 @@
}
.editor.darkMode .metadataEditor {
--bg-clr: #555;
--bg-image: @backgroundImageAlt;
--h1-clr: white;
--h2-clr: #aaf;
--label-clr: #ddd;
--input-bg: #333;
--input-bg-hover: #666;
--input-text-clr: #eee;
--input-placeholder-clr: #aaa;
--bg-clr : #555555;
--bg-image : @backgroundImageAlt;
--h1-clr : white;
--h2-clr : #AAAAFF;
--label-clr : #DDDDDD;
--input-bg : #333333;
--input-bg-hover : #666666;
--input-text-clr : #EEEEEE;
--input-placeholder-clr : #AAAAAA;
--bg-image: @backgroundImageAltDark;
--bg-image : @backgroundImageAltDark;
a {
color: @blueLight;
color : @blueLight;
&:visited {
color: #cb8ad8;
}
&:visited { color : #CB8AD8; }
}
.thumbnail-preview[src="/client/homebrew/thumbnail.png"] {
filter:invert(.8);
}
.thumbnail-preview[src='/client/homebrew/thumbnail.png'] { filter : invert(0.8); }
button.publish {
.colorButton(#3137de) !important;
}