From 2336f8508beb45aef04109e96b952b4922ce736d Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 19 Sep 2024 10:57:55 -0500 Subject: [PATCH] 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