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> <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"> <input type="url" id="scrape-url-input" placeholder="Paste recipe link, Instagram Reel, or TikTok video here..." autocomplete="off">
</div> </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"> <button type="submit" class="btn btn-primary" id="btn-scrape-submit">
<i data-lucide="wand-2"></i> <span>Extract Recipe</span> <i data-lucide="wand-2"></i> <span>Extract Recipe</span>
</button> </button>
@ -83,7 +83,7 @@
<i data-lucide="instagram"></i> <span>Social Import</span> <i data-lucide="instagram"></i> <span>Social Import</span>
</button> </button>
<input type="file" id="scan-image-input" accept="image/*" style="display: none;"> <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> <i data-lucide="camera"></i> <span>Scan Photo</span>
</button> </button>
</div> </div>

82
public/style.css
View file

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