rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles: fix spacing between title and tag input

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-06-07 12:16:38 -03:00
parent a9f0c6fd2f
commit 57689f1f15
3 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -17,6 +17,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
autocompleteTagHintVisible, autocompleteTagHintVisible,
autocompleteTagResults, autocompleteTagResults,
tags, tags,
tagsContainerMaxWidth,
} = appState.noteTags; } = appState.noteTags;
const [dropdownVisible, setDropdownVisible] = useState(false); const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -94,12 +95,13 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
return ( return (
<form <form
onSubmit={onFormSubmit} onSubmit={onFormSubmit}
className={`${tags.length > 0 ? 'mt-2' : 'mt-1'}`} className={`${tags.length > 0 ? 'mt-2' : ''}`}
> >
<Disclosure open={dropdownVisible} onChange={showDropdown}> <Disclosure open={dropdownVisible} onChange={showDropdown}>
<input <input
ref={inputRef} ref={inputRef}
className="w-80 bg-default text-xs color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom" className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} bg-default text-xs
color-text no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom`}
value={autocompleteSearchQuery} value={autocompleteSearchQuery}
onChange={onSearchQueryChange} onChange={onSearchQueryChange}
type="text" type="text"
@@ -111,8 +113,8 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
{dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && ( {dropdownVisible && (autocompleteTagResults.length > 0 || autocompleteTagHintVisible) && (
<DisclosurePanel <DisclosurePanel
ref={dropdownRef} ref={dropdownRef}
className="sn-dropdown w-80 flex flex-col py-2 absolute" className={`${tags.length > 0 ? 'w-80' : 'w-70 mr-10'} sn-dropdown flex flex-col py-2 absolute`}
style={{ maxHeight: dropdownMaxHeight }} style={{ maxHeight: dropdownMaxHeight, maxWidth: tagsContainerMaxWidth }}
> >
<div className="overflow-y-scroll"> <div className="overflow-y-scroll">
{autocompleteTagResults.map((tagResult) => ( {autocompleteTagResults.map((tagResult) => (

2
app/assets/javascripts/components/NoteTagsContainer.tsx
View File

@@ -21,7 +21,7 @@ const NoteTagsContainer = observer(({ appState }: Props) => {
return ( return (
<div <div
className="bg-default flex flex-wrap min-w-80 -mt-1 mr-2" className="bg-default flex flex-wrap min-w-80 -mt-1 -mr-2"
style={{ style={{
maxWidth: tagsContainerMaxWidth, maxWidth: tagsContainerMaxWidth,
}} }}

14
app/assets/stylesheets/_sn.scss
View File

@@ -65,6 +65,10 @@
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.mr-10 {
margin-right: 2.5rem;
}
.-mt-1 { .-mt-1 {
margin-top: -0.25rem; margin-top: -0.25rem;
} }
@@ -73,6 +77,10 @@
margin-right: -0.25rem; margin-right: -0.25rem;
} }
.-mr-2 {
margin-right: -0.5rem;
}
.py-1 { .py-1 {
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
@@ -298,6 +306,10 @@
width: 20rem; width: 20rem;
} }
.w-70 {
width: 17.5rem;
}
/** /**
* A button that is just an icon. Separated from .sn-button because there * A button that is just an icon. Separated from .sn-button because there
* is almost no style overlap. * is almost no style overlap.
@@ -339,7 +351,7 @@
.sn-dropdown { .sn-dropdown {
@extend .bg-default; @extend .bg-default;
@extend .min-w-80; // @extend .min-w-80;
@extend .rounded; @extend .rounded;
@extend .box-shadow; @extend .box-shadow;