zer0interrupt/recipe-manager
1
0
Fork 0
mirror of https://gitlab.com/Zer0interrupt/recipe-manager.git synced 2026-11-01 23:24:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: position extraction, social import, and scan photo buttons below url input field

Browse source
This commit is contained in:
Chris 2026-11-01 02:40:38 -05:00
parent fa95266675
commit d848305355
2 changed files with 64 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -75,7 +75,7 @@
<i data-lucide="link" class="input-icon"></i>
<input type="url" id="scrape-url-input" placeholder="Paste recipe link, Instagram Reel, or TikTok video here..." autocomplete="off">
</div>
<div class="hero-buttons-group" style="display: flex; gap: 8px;">
<div class="hero-buttons-group">
<button type="submit" class="btn btn-primary" id="btn-scrape-submit">
<i data-lucide="wand-2"></i> <span>Extract Recipe</span>
</button>
@ -83,7 +83,7 @@
<i data-lucide="instagram"></i> <span>Social Import</span>
</button>
<input type="file" id="scan-image-input" accept="image/*" style="display: none;">
<button type="button" class="btn btn-accent" id="btn-scan-image" style="background-color: var(--secondary); color: var(--text-white);" title="Scan Recipe from Photo">
<button type="button" class="btn btn-accent" id="btn-scan-image" title="Scan Recipe from Photo">
<i data-lucide="camera"></i> <span>Scan Photo</span>
</button>
</div>

82
public/style.css
View file

@ -339,44 +339,46 @@ h1, h2, h3, h4, h5, h6 {
}
.url-input-form {
max-width: 750px;
max-width: 720px;
margin: 0 auto;
display: flex;
gap: 12px;
flex-direction: column;
gap: 14px;
}
.url-input-form .input-wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
background-color: var(--bg-card);
padding: 8px;
padding: 4px;
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
}
.url-input-form:focus-within {
.url-input-form .input-wrapper:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-glow);
}
.input-wrapper {
position: relative;
flex-grow: 1;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 16px;
left: 18px;
color: var(--text-muted);
width: 20px;
height: 20px;
pointer-events: none;
}
.url-input-form input {
width: 100%;
padding: 14px 14px 14px 50px;
padding: 16px 16px 16px 52px;
background: transparent;
border: none;
font-size: 1rem;
font-size: 1.02rem;
color: var(--text-main);
outline: none;
}
@ -386,6 +388,32 @@ h1, h2, h3, h4, h5, h6 {
opacity: 0.8;
}
.hero-buttons-group {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.hero-buttons-group .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
font-size: 0.95rem;
font-weight: 600;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.hero-buttons-group .btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Recipes Dashboard Library */
.library-section {
border-top: 1px solid var(--border-color);
@ -2047,24 +2075,36 @@ h1, h2, h3, h4, h5, h6 {
.url-input-form {
flex-direction: column;
padding: 6px;
padding: 0;
gap: 10px;
}
.url-input-form .input-wrapper {
padding: 2px;
border-radius: var(--border-radius-md);
gap: 8px;
}
.url-input-form input {
padding: 10px 10px 10px 42px;
font-size: 0.9rem;
padding: 12px 12px 12px 42px;
font-size: 0.92rem;
}
.hero-buttons-group {
width: 100%;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.hero-buttons-group button {
flex: 1;
height: 44px;
font-size: 0.9rem;
flex: 1 1 calc(50% - 6px);
height: 42px;
font-size: 0.88rem;
padding: 8px 12px;
}
.hero-buttons-group button#btn-scrape-submit {
flex: 1 1 100%;
}
/* Hide desktop dashboard tab bar */