vincentRamiere/simpleat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

modif card resto search bar

Browse source
This commit is contained in:
Your Name 2022-01-21 16:21:44 +01:00
parent 77131ede13
commit 56d663bb7f
6 changed files with 107 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/app/card-resto/card-resto.component.html
View file

@ -1,37 +1,58 @@
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " style="width: 18rem;" > <div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " style="width: 19rem;" >
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap"> <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
<div class="rond position-absolute">
<i class="heart far fa-heart"></i>
</div>
<div class="card-body rounded-bottom"> <div class="card-body rounded-bottom">
<h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3> <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<h2 class="accordion-header pt-1" id="headingOne"> <h2 class="accordion-header pt-1" id="headingOne">
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
PLUS D'INFOS PLUS D'INFOS
</button> </button>
</h2> </h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class=" body accordion-body"> <div class=" body accordion-body">
<strong>This is the first item's accordion body.</strong> <strong>This is the first item's accordion body.</strong>
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center"> <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
<ul class="avis-star d-flex flex-row ps-0 pt-3 pe-0"> <ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-0 mb-0 ">
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
<li class="star pe-2"><i class="bi bi-star-fill"></i></li> <li class="star pe-2"><i class="bi bi-star-fill"></i></li>
<li class="star"><i class="bi bi-star-fill"></i></li> <li class="star"><i class="bi bi-star-fill"></i></li>
</ul> </ul>
<span class="ps-3"style="font-size: 1.2em; color:#545454" >4/5</span> <span class="ps-3 mt-3 "style="font-size: 1.1em; color:#545454" >5/5</span>
</div>
<div class="infos ps-1 pt-2"style="color:#545454">
<span class="categorie pe-4"style="font-style: italic;">Kebab</span>
<i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
<i class="fas fa-euro-sign ps-2 pe-1"style="color:#a8a8a8"></i><span class="prix"style="font-weight: bold;">5-10€</span>
</div>
<div class="trait-rouge pt-3"></div>
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis
les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
réaliser un livre spécimen de polices de texte.</p>
<div class="trait-rouge pt-2 pb-0"></div>
<div class="critere ps-1 pt-3">
<span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
<span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
</div>
<div class="trait-rouge pt-3"></div>
<div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
<span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
</div>
<div class="reserver pt-2">
<button type="button" class="button">Réserver</button>
</div>
</div> </div>
<span class="categorie">Kebab</span>
<img src="assets/ImagesRestos/pieton.png"><span class="categorie">550m</span>
</div> </div>
</div> <div>
</div>
</div> </div>

54
src/app/card-resto/card-resto.component.scss
View file

@ -1,3 +1,19 @@
.rond{
padding: 0.7em;
background-color: rgb(255, 255, 255);
top: 1em;
right: 1em;
border-radius: 50%;
}
.heart{
display: flex;
font-size: 1.6em;
padding: 0;
margin:0;
color: #FF2048;
}
.titre-resto{ .titre-resto{
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
} }
@ -10,8 +26,24 @@
border-radius: 0 0 0.25rem 0.25rem; border-radius: 0 0 0.25rem 0.25rem;
padding: 1.375rem 0.75rem; padding: 1.375rem 0.75rem;
} }
.accordion-button.collapsed {
background: #CE0000;
}
.accordion-button.collapsed::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.ps-5 {
padding-left: 5.4rem !important;
}
.pe-5 {
padding-right: 5rem !important;
}
.accordion .btn:focus{ .accordion .btn:focus{
box-shadow: none; box-shadow: none;
} }
@ -22,6 +54,26 @@
list-style-type: none; list-style-type: none;
font-size: 1.5em; font-size: 1.5em;
color:#ffd900; color:#ffd900;
}
.trait-rouge{
border-bottom: 1px solid #CE0000;
opacity: 50%;
}
.button{
display: block;
padding: 0.5em 2em 0.5em ;
width: 100%;
border-radius: 5px;
border: none;
background-color: #545454;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
} }

12
src/app/header/components/search-bar/search-bar.component.html
View file

@ -1,8 +1,10 @@
<nav class="navbar navbar-light"> <nav class="navbar navbar-light p-0">
<div class="container-fluid"> <div class="container-fluid d-flex align-items-center pt-3">
<img src="assets/images-header/logo.png" alt="logo"> <div class="logo ps-4">
<form style="width: 30%;" class="d-flex"> <img src="assets/images-header/LOGO2.png" alt="logo">
<input class="form-control me-5" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search"> </div>
<form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
<input class="form-control me-5 position-relative" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
</form> </form>
<div class="trait"> <div class="trait">
<p>LE BON PLAN POUR MANGER</p> <p>LE BON PLAN POUR MANGER</p>

16
src/app/header/components/search-bar/search-bar.component.scss
View file

@ -19,22 +19,18 @@
} }
img{
padding-left: 2%;
}
p{ p{
background-color: white; background-color: white;
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 130px; left: 68px;
padding : 0 10px 0 10px; padding : 0 10px 0 10px;
font-weight: bolder;
color: grey; color: grey;
} }
// .form-control{
// }
input[type="search"], textarea{
background-color: #edf5f1;
}

BIN
src/assets/images-header/LOGO2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB

1
src/index.html
View file

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>