Skip to content

Commit

Permalink
intermediate design improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Senopiece
Senopiece committed Apr 11, 2024
1 parent f569515 commit 0742e7b
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 39 deletions.
41 changes: 38 additions & 3 deletions frontend/src/lib/components/LimitNumberInput.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,7 +18,6 @@
value = inputValue;
}
// Dispatch the update event with the new value
dispatch('update', value);
}
Expand All @@ -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>
73 changes: 70 additions & 3 deletions frontend/src/lib/components/MultiChoiceDropdown.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
172 changes: 145 additions & 27 deletions frontend/src/lib/components/TextImageInput.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Loading

0 comments on commit 0742e7b

Please sign in to comment.