From 2336f8508beb45aef04109e96b952b4922ce736d Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 19 Sep 2024 10:57:55 -0500 Subject: [PATCH 1/3] Rearrange CSS and small HTML changes Simplified and unified some font-size declarations, adjusted the "descriptions" for various inputs to be similar structure and appearance, change the components h1 label from "Brew" to "Properties Editor", updated the comment about Publishing. --- .../editor/metadataEditor/metadataEditor.jsx | 9 +- .../editor/metadataEditor/metadataEditor.less | 121 ++++++++++-------- 2 files changed, 71 insertions(+), 59 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index 0f1f6ad54..bfb94f479 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -304,17 +304,14 @@ const MetadataEditor = createClass({ onChange={(e)=>this.handleRenderer('V3', e)} /> V3 - - - Click here to see the demo page for the old Legacy renderer! - + Click here to see the demo page for the old Legacy renderer! ; }, render : function(){ return
-

Brew

+

Properties Editor

@@ -383,7 +380,7 @@ const MetadataEditor = createClass({
{this.renderPublish()} - Published homebrews will be publicly viewable and searchable (eventually...) + Published brews are searchable in the Vault and visible on your user page. Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines. You can unpublish a brew any time.
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index 27ebd88c2..6a9f4bcc6 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/client/homebrew/editor/metadataEditor/metadataEditor.less @@ -1,5 +1,6 @@ @import 'naturalcrit/styles/colors.less'; + .metadataEditor { position : absolute; z-index : 5; @@ -9,6 +10,7 @@ padding : 25px; overflow-y : auto; background-color : #999999; + font-size : 13px; .sectionHead { margin : 20px 0; @@ -43,15 +45,21 @@ min-width : 200px; & > label { width : 80px; - font-size : 11px; font-weight : 800; line-height : 1.8em; text-transform : uppercase; + font-size: .9em; } & > .value { flex : 1 1 auto; width : 50px; &:invalid { background : #FFB9B9; } + small { + display : block; + font-size : 0.9em; + font-style : italic; + line-height : 1.4em; + } } input[type='text'], textarea { border : 1px solid gray; @@ -78,7 +86,6 @@ textarea.value { height : auto; font-family : 'Open Sans', sans-serif; - font-size : 0.8em; resize : none; } } @@ -87,12 +94,6 @@ z-index : 200; max-width : 150px; } - small { - display : inline-block; - font-size : 0.6em; - font-style : italic; - line-height : 1.4em; - } } @@ -113,18 +114,13 @@ display : inline-flex; align-items : center; margin-right : 15px; - font-size : 0.7em; + font-size : 0.9em; font-weight : 800; white-space : nowrap; vertical-align : middle; cursor : pointer; user-select : none; } - a { - display : inline-flex; - font-size : 0.7em; - font-weight : 800; - } input { margin : 3px; vertical-align : middle; @@ -149,12 +145,10 @@ } } .authors.field .value { - font-size : 0.8em; line-height : 1.5em; } .themes.field { - font-size : 13.33px; .navDropdownContainer { position : relative; z-index : 100; @@ -165,9 +159,9 @@ background-color : darkgray; } & > div:first-child { - padding : 6px 3px; + padding : 3px 3px; background-color : inherit; - border : 2px solid rgb(118,118,118); + border : 1px solid gray; i { float : right; } &:hover { color : white; @@ -240,30 +234,38 @@ } } } - .field .list { - display : flex; - flex : 1 0; - flex-wrap : wrap; + #groupedIcon { + #backgroundColors; + position : relative; + top : -0.3em; + right : -0.3em; + display : inline-block; + min-width : 20px; + height : ~'calc(100% + 0.6em)'; + color : white; + text-align : center; + cursor : pointer; - > * { flex : 0 0 auto; } + i { + position : relative; + top : 50%; + transform : translateY(-50%); + } - #groupedIcon { - #backgroundColors; - position : relative; - top : -0.3em; - right : -0.3em; - display : inline-block; - min-width : 20px; - height : ~'calc(100% + 0.6em)'; - color : white; - text-align : center; - cursor : pointer; + &:not(:last-child) { border-right : 1px solid black; } + + &:last-child { border-radius : 0 0.5em 0.5em 0; } + } + .field .tag-input { + flex: 1 0; + .list { + display : flex; + flex : 1 0; + flex-wrap : wrap; + + > * { flex : 0 0 auto; } + - i { - position : relative; - top : 50%; - transform : translateY(-50%); - } &:not(:last-child) { border-right : 1px solid black; } @@ -277,8 +279,7 @@ background-color : #DDDDDD; border-radius : 0.5em; - .icon { - #groupedIcon; } + .icon { #groupedIcon; } } .input-group { @@ -293,18 +294,32 @@ min-width : 75px; height : 100%; } - - .invalid:focus { background-color : pink; } - - .icon { - #groupedIcon; - top : -0.54em; - right : 1px; - height : 97%; - font-size : 0.8em; - - i { font-size : 1.125em; } + + .input-group { + height : ~'calc(.9em + 4px + .6em)'; + + input { border-radius : 0.5em 0 0 0.5em; } + + input:last-child { border-radius : 0.5em; } + + .value { + width : 7.5vw; + min-width : 75px; + height : 100%; + } + + .invalid:focus { background-color : pink; } + + .icon { + #groupedIcon; + top : -0.54em; + right : 1px; + height : 97%; + + i { font-size : 1.125em; } + } } } + } -} +} \ No newline at end of file From a6ac6b98c2c04903e7544d321f739d63844b8a81 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 19 Sep 2024 11:09:22 -0500 Subject: [PATCH 2/3] some fixes and updates This fixes something i broke with last commit, but should be final commit. --- .../editor/metadataEditor/metadataEditor.less | 66 ++++++++----------- .../stringArrayEditor/stringArrayEditor.jsx | 2 +- 2 files changed, 30 insertions(+), 38 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index 6a9f4bcc6..1ffd72831 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/client/homebrew/editor/metadataEditor/metadataEditor.less @@ -234,41 +234,34 @@ } } } - #groupedIcon { - #backgroundColors; - position : relative; - top : -0.3em; - right : -0.3em; - display : inline-block; - min-width : 20px; - height : ~'calc(100% + 0.6em)'; - color : white; - text-align : center; - cursor : pointer; - i { - position : relative; - top : 50%; - transform : translateY(-50%); - } + .field .list { + display : flex; + flex : 1 0; + flex-wrap : wrap; - &:not(:last-child) { border-right : 1px solid black; } + > * { flex : 0 0 auto; } - &:last-child { border-radius : 0 0.5em 0.5em 0; } - } - .field .tag-input { - flex: 1 0; - .list { - display : flex; - flex : 1 0; - flex-wrap : wrap; + #groupedIcon { + #backgroundColors; + position : relative; + top : -0.3em; + right : -0.3em; + display : inline-block; + min-width : 20px; + height : ~'calc(100% + 0.6em)'; + color : white; + text-align : center; + cursor : pointer; - > * { flex : 0 0 auto; } + i { + position : relative; + top : 50%; + transform : translateY(-50%); + } - - &:not(:last-child) { border-right : 1px solid black; } - + &:last-child { border-radius : 0 0.5em 0.5em 0; } } @@ -294,32 +287,31 @@ min-width : 75px; height : 100%; } - + .input-group { height : ~'calc(.9em + 4px + .6em)'; - + input { border-radius : 0.5em 0 0 0.5em; } - + input:last-child { border-radius : 0.5em; } - + .value { width : 7.5vw; min-width : 75px; height : 100%; } - + .invalid:focus { background-color : pink; } - + .icon { #groupedIcon; top : -0.54em; right : 1px; height : 97%; - + i { font-size : 1.125em; } } } } - } } \ No newline at end of file diff --git a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx index 8f06ae561..47ab038cc 100644 --- a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx +++ b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx @@ -128,7 +128,7 @@ const StringArrayEditor = createClass({ return
-
+
{valueElements}
From 544f4c6103665f0725a8dacf3ba61b3b42443bea Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 19 Sep 2024 15:29:35 -0500 Subject: [PATCH 3/3] tweak headers --- .../editor/metadataEditor/metadataEditor.jsx | 10 +++------- .../editor/metadataEditor/metadataEditor.less | 14 ++++++++++---- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx index bfb94f479..e66fa64e2 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx +++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx @@ -311,7 +311,7 @@ const MetadataEditor = createClass({ render : function(){ return
-

Properties Editor

+

Properties Editor

@@ -359,9 +359,7 @@ const MetadataEditor = createClass({ {this.renderRenderOptions()} -
- -

Authors

+

Authors

{this.renderAuthors()} @@ -372,9 +370,7 @@ const MetadataEditor = createClass({ notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']} onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/> -
- -

Privacy

+

Privacy

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index 1ffd72831..62ec6b37b 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/client/homebrew/editor/metadataEditor/metadataEditor.less @@ -12,11 +12,17 @@ background-color : #999999; font-size : 13px; - .sectionHead { + h1 { + margin: 0 0 40px; + font-weight: bold; + text-transform: uppercase; + } + + h2 { margin : 20px 0; - font-weight : 1000; - - &:first-of-type { margin-top : 0; } + font-weight : bold; + border-bottom: 2px solid gray; + color: #555; } & > div { margin-bottom : 10px; }