web_programming/fridge_bites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'added frontend for search input and user/login button' (#6) from TIST-13 into develop

Browse Source 
Reviewed-on: #6
This commit is contained in:
steve_dekart 2025-06-15 21:45:29 +02:00
commit e860e0c338
2 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/css/style.css
View File

@ -93,9 +93,56 @@ body {
/*placeholder for search and login section*/
.search-and-login {
width: 277px;
display: flex;
align-items: center;
position: relative;
/* width: 277px;
height: 49px;
border: #000 solid 1px;
border: #000 solid 1px; */
}
.search-input{
height: 36px;
background-color: #C7E2C9;
border: 1px solid #A8C9AA;
border-radius: 10px;
padding: 10px;
font-family: var(--common-font);
font-size: 14px;
color: var(--input-text-color);
padding-left: 2rem;
margin-right: 16px;
}
.login-link{
background-color: #C7E2C9;
height: 36px;
width: 36px;
text-align: center;
border-radius: 10px;
color: rgba(0, 113, 91, 0.45);
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #A8C9AA;
}
.search-input::placeholder {
color: rgba(0, 113, 91, 0.45);
}
.search-icon {
position: absolute;
left: 0.6rem;
top: 50%;
transform: translateY(-50%);
color: rgba(0, 113, 91, 0.45);
pointer-events: none;
}
.quote {
@ -106,6 +153,7 @@ body {
margin-top: 46px;
margin-bottom: 30px;
text-align: center;
}
.black-qoute-word {

6
components/templates/layout/header.php
View File

@ -62,7 +62,11 @@
</nav>
<div class="search-and-login">
placeholder
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" class="search-input" placeholder="Search recipes...">
<a href="<?php the_permalink("users:login") ?>" class="login-link hover-anim">
<i class="fa-regular fa-user"></i>
</a>
</div>
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
<i id="menu-icon" class="fa-solid fa-bars"></i>