From 0742e7b634d4fa199bfee1115743fd369d54845a Mon Sep 17 00:00:00 2001
From: Nabuki <shichiromail@gmail.com>
Date: Thu, 11 Apr 2024 12:43:25 +0300
Subject: [PATCH] intermediate design improvements

---
 .../lib/components/LimitNumberInput.svelte    |  41 ++++-
 .../lib/components/MultiChoiceDropdown.svelte |  73 +++++++-
 .../src/lib/components/TextImageInput.svelte  | 172 +++++++++++++++---
 frontend/src/routes/+page.svelte              |  36 +++-
 4 files changed, 283 insertions(+), 39 deletions(-)

diff --git a/frontend/src/lib/components/LimitNumberInput.svelte b/frontend/src/lib/components/LimitNumberInput.svelte
index cedfd80..fb5b490 100644
--- a/frontend/src/lib/components/LimitNumberInput.svelte
+++ b/frontend/src/lib/components/LimitNumberInput.svelte
@@ -7,7 +7,6 @@
 	let value = maxLimit;
 
 	function updateValue(event: any) {
-		// Use a type assertion to tell TypeScript the target is an input element
 		let inputElement = event.target as HTMLInputElement;
 		let inputValue = +inputElement.value;
 
@@ -19,7 +18,6 @@
 			value = inputValue;
 		}
 
-		// Dispatch the update event with the new value
 		dispatch('update', value);
 	}
 
@@ -28,7 +26,44 @@
 	});
 </script>
 
-<div>
+<div class="input-container">
 	<span>Лимит: </span>
 	<input type="number" bind:value on:input={updateValue} />
 </div>
+
+<style>
+	.input-container {
+		display: flex;
+		align-items: center;
+		font-family: sans-serif;
+		color: #333;
+	}
+
+	.input-container > span {
+		margin-right: 8px;
+	}
+
+	input[type='number'] {
+		outline: none;
+		border: none;
+		background-color: transparent;
+		padding: 8px 0;
+		font-size: 16px;
+		width: 40px;
+		color: inherit;
+		-webkit-appearance: textfield;
+		overflow: hidden; /* Might want to hide overflow if the value is wider than the input */
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button,
+	input[type='number']::-moz-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	input[type='number']:focus {
+		border: none;
+		box-shadow: none;
+	}
+</style>
diff --git a/frontend/src/lib/components/MultiChoiceDropdown.svelte b/frontend/src/lib/components/MultiChoiceDropdown.svelte
index 5d61add..e4845a9 100644
--- a/frontend/src/lib/components/MultiChoiceDropdown.svelte
+++ b/frontend/src/lib/components/MultiChoiceDropdown.svelte
@@ -51,7 +51,9 @@
 </script>
 
 <div class="dropdown" bind:this={dropdownElement} on:click={handleDropdownClick}>
-	<button on:click={() => (isDropdownOpen = !isDropdownOpen)}> Выбрать города </button>
+	<span on:click={() => (isDropdownOpen = !isDropdownOpen)}
+		>Выбрать города {isDropdownOpen ? '▲' : '▼'}</span
+	>
 	{#if isDropdownOpen}
 		<div class="dropdown-menu">
 			<label>
@@ -73,18 +75,83 @@
 </div>
 
 <style>
+	button {
+		background-color: #f9f9f9; /* Light gray background */
+		color: #333; /* Dark text for better readability */
+		border: 1px solid #ccc; /* Light border for a flat look */
+		padding: 8px 16px;
+		font-size: 16px;
+		border-radius: 4px; /* Slightly rounded corners */
+		cursor: pointer;
+		outline: none;
+		transition:
+			background-color 0.2s,
+			box-shadow 0.2s,
+			border-color 0.2s;
+	}
+
+	button:hover,
+	button:focus {
+		background-color: #e8e8e8; /* Slightly darker on hover/focus */
+		border-color: #bbb; /* Darker border on hover/focus */
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+	}
+
 	.dropdown-menu {
 		border: 1px solid #ccc;
+		border-radius: 4px; /* Match button corners */
 		padding: 10px;
 		margin-top: 5px;
 		background: white;
 		position: absolute;
+		width: max-content; /* Adjust width to content */
+		max-width: 100%; /* Prevent overflow */
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for pop-out effect */
+		z-index: 1000; /* Ensure dropdown appears above other content */
 	}
+
 	label {
-		display: block;
+		display: flex;
+		align-items: center;
 		cursor: pointer;
+		margin: 5px 0; /* Spacing between options */
 	}
-	button {
+
+	input[type='checkbox'] {
+		margin-right: 8px; /* Space between checkbox and label text */
+	}
+
+	/* Style tweaks for better touch interaction */
+	input[type='checkbox'] {
+		transform: scale(1.2);
+		margin-right: 10px;
+	}
+
+	.dropdown {
+		position: relative;
+		font-family: 'Arial', sans-serif; /* Using Arial as a placeholder for generic sans-serif */
+	}
+
+	span {
+		color: #007bff; /* Link-like blue color */
 		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		font-family: sans-serif; /* Ensuring the chevron uses the same sans-serif font */
+		font-size: 16px; /* Adjust size as needed */
+	}
+
+	.dropdown-menu {
+		font-family: sans-serif;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		padding: 10px;
+		margin-top: 5px;
+		background: white;
+		position: absolute;
+		width: max-content;
+		max-width: 100%;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		z-index: 1000;
 	}
 </style>
diff --git a/frontend/src/lib/components/TextImageInput.svelte b/frontend/src/lib/components/TextImageInput.svelte
index c129c9e..85cb864 100644
--- a/frontend/src/lib/components/TextImageInput.svelte
+++ b/frontend/src/lib/components/TextImageInput.svelte
@@ -69,9 +69,35 @@
 	}
 </script>
 
-<div>
+<div class="input-wrapper">
 	{#if inputMode === 'text'}
-		<input type="text" placeholder="Введите описание места" bind:value={text} />
+		<div class="text-input-box">
+			<button
+				class="icon-button switch-button"
+				on:click={switchInputMode}
+				title="Switch to Image Input"
+			>
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+					<circle cx="8.5" cy="8.5" r="1.5"></circle>
+					<polyline points="21 15 16 10 5 21"></polyline>
+				</svg>
+			</button>
+			<div class="text-input-container">
+				<input
+					type="text"
+					placeholder="Введите описание места"
+					bind:value={text}
+					class="text-input"
+				/>
+				<button class="icon-button search-button" title="Search">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<circle cx="11" cy="11" r="8"></circle>
+						<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+					</svg>
+				</button>
+			</div>
+		</div>
 	{:else}
 		<input
 			type="file"
@@ -90,47 +116,139 @@
 			on:dragleave={handleDragLeave}
 			class:drag-over={isDraggingOver}
 		>
-			Перетащите изображение сюда или нажмите чтобы загрузить из проводника
+			<div class="image-preview-container">
+				{#if imagePreviewUrl}
+					<img class="preview-img" src={imagePreviewUrl} alt="Image preview" />
+				{:else}
+					<div class="image-placeholder"></div>
+				{/if}
+			</div>
+			Перетащите изображение сюда или<br /> нажмите чтобы загрузить из проводника
 		</label>
-		{#if imagePreviewUrl}
-			<img class="preview-img" src={imagePreviewUrl} alt="Image preview" />
-		{/if}
+		<button
+			class="icon-button switch-button"
+			on:click={switchInputMode}
+			title="Switch to Text Input"
+		>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<path d="M5 4h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path>
+				<polyline points="12 10 12 14"></polyline>
+				<line x1="10" y1="12" x2="14" y2="12"></line>
+			</svg>
+		</button>
 	{/if}
-	<button class="switch-button" on:click={switchInputMode}>
-		Переключиться на ввод {inputMode === 'text' ? 'картинки' : 'текста'}
-	</button>
 </div>
 
 <style>
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-family: sans-serif;
+		width: 100%;
+		max-width: 500px; /* Adjust this to fit your design */
+	}
+
+	.text-input-box {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+		margin-bottom: 20px;
+	}
+
+	.text-input-container {
+		display: flex;
+		align-items: center;
+		position: relative;
+		flex-grow: 1;
+		background-color: #f0f0f0; /* Light background for the input area */
+		border: 2px solid #ccc; /* Light grey border for a flat look */
+		border-radius: 5px; /* Slightly rounded corners for aesthetics */
+	}
+
+	.text-input {
+		flex-grow: 1;
+		padding: 10px;
+		font-size: 16px;
+		border: none; /* Removing individual input border for a unified look */
+		border-radius: 5px;
+		outline: none;
+		background-color: transparent; /* Ensure the background matches the container */
+	}
+
+	.text-input:focus {
+		border-color: #007bff;
+	}
+
+	.icon-button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #333; /* Icon color for visibility */
+	}
+
+	.icon-button svg {
+		height: 24px; /* Adjust size as needed */
+		width: 24px;
+		stroke: #333; /* Icon color */
+	}
+
 	.drop-zone {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 20px;
 		border: 2px dashed #ccc;
 		border-radius: 5px;
 		padding: 20px;
-		text-align: center;
-		margin-top: 10px;
+		text-align: left;
 		color: #ccc;
+		transition:
+			border-color 0.3s,
+			color 0.3s;
+		width: 100%;
+		min-height: 120px; /* Minimum height to accommodate the placeholder */
 	}
 
 	.drop-zone.drag-over {
-		border-color: #000;
-		color: #000;
+		border-color: #007bff;
+		color: #007bff;
 	}
 
-	.preview-img {
-		width: 100%; /* Adjust based on your needs */
-		height: auto;
-		display: block;
-		margin-top: 10px;
+	.image-preview-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100px; /* Fixed width for the preview */
+		height: 100px; /* Fixed height for the preview */
+		background-color: #f0f0f0; /* Placeholder color */
+		border: 2px dashed #ccc; /* Placeholder border style */
+		position: relative; /* Allows precise control over the image and placeholder positioning */
 	}
 
-	.switch-button {
-		display: block;
-		margin: 20px 0;
-		padding: 10px 20px;
-		background-color: #007bff;
-		color: white;
-		border: none;
-		border-radius: 5px;
-		cursor: pointer;
+	.preview-img,
+	.image-placeholder {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: cover;
+	}
+
+	.image-placeholder {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>');
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: 50%; /* Adjust the placeholder icon size */
 	}
 </style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d4e40dd..cc7f0b4 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -71,18 +71,42 @@
 
 <main>
 	<TextImageInput on:selected={handleSelect} />
-	{#if initialOptions === undefined}
-		<p>Загрузка...</p>
-	{:else}
-		<MultiChoiceDropdown options={initialOptions} on:selected={handleSelectedOptions} />
-	{/if}
-	<LimitNumberInput on:update={handleUpdate} />
+	<div class="inputs-row">
+		{#if initialOptions === undefined}
+			<p>Загрузка...</p>
+		{:else}
+			<MultiChoiceDropdown options={initialOptions} on:selected={handleSelectedOptions} />
+		{/if}
+		<LimitNumberInput on:update={handleUpdate} />
+	</div>
 	<button on:click={handleSubmit}>Искать</button>
 </main>
 
 <style>
 	main {
+		display: flex;
+		flex-direction: column;
+		justify-content: center; /* Center vertically */
+		align-items: center; /* Center horizontally */
+		min-height: 100vh; /* Full height of the viewport */
 		padding: 1rem;
 		font-family: Arial, sans-serif;
 	}
+
+	.inputs-row {
+		display: flex;
+		justify-content: space-around; /* Adjust this as needed */
+		align-items: center; /* Centers items vertically within the row */
+		width: 100%;
+		max-width: 600px; /* Adjust based on your design */
+		margin: 1rem 0; /* Adds margin around the row for spacing */
+	}
+
+	button {
+		margin-top: 1rem;
+	}
+
+	p {
+		text-align: center;
+	}
 </style>