Search input

gomu-gomu · Jan 12, 2024 · a6e1f66 · a6e1f66
1 parent c5fbfee
commit a6e1f66
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 6 deletions.
diff --git a/src/images/icons/search.svg b/src/images/icons/search.svg
diff --git a/src/index.html b/src/index.html
@@ -59,7 +59,7 @@
     href="styles/particles.css"
   >
 
-  <title>Web Service Projet 1 - Covid-19</title>
+  <title>Web Service Projet 1 - Covid-19 Stats</title>
 </head>
 
 <body>
@@ -252,12 +252,35 @@ <h5 class="card-title">Vaccinations Annuelles par Pays</h5>
           <div
             data-aos="fade-up"
             data-aos-delay="600"
-            class="card card-cust card-cust--chart shadow border border-0"
+            class="card card-cust card-cust--table shadow border border-0"
           >
             <div class="card-head row p-4">
-              <div class="col">
+              <div class="col col-md-8">
                 <h5 class="card-title">Classement des Pays et des Provinces en Fonction du Nombre Total de Cas</h5>
               </div>
+
+              <div class="col col-md-4">
+                <div class="input-group input-group--search">
+                  <span
+                    class="input-group-text"
+                    id="basic-addon1"
+                  >
+                    <img
+                      alt="Search Icon"
+                      src="images/icons/search.svg"
+                    >
+                  </span>
+
+                  <input
+                    type="search"
+                    class="form-control"
+                    id="table-search-input"
+                    placeholder="Recherche de pays..."
+                    aria-label="Search"
+                    aria-describedby="basic-addon1"
+                  >
+                </div>
+              </div>
             </div>
 
             <div class="card-body">

diff --git a/src/styles/modal.css b/src/styles/modal.css
@@ -13,18 +13,18 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  
+
   margin: 20px 0;
   color: #53567e;
 }
 
-.modal .modal-body > * {
+.modal .modal-body>* {
   margin-top: -10px;
 }
 
 .modal .loader {
   height: 60px;
-
+  margin-bottom: 15px;
   transform: scale(0.5);
 
   aspect-ratio: 1;

diff --git a/src/styles/table.css b/src/styles/table.css
@@ -31,4 +31,40 @@
 .table td:is(.cases, .deaths),
 .table th:is(.cases, .deaths) {
   text-align: right;
+}
+
+.input-group.input-group--search {
+  max-width: 300px;
+
+  margin-bottom: 0;
+  margin-left: auto;
+}
+
+.input-group.input-group--search .input-group-text {
+  padding: 8px;
+  background-color: #ced0ff;
+}
+
+.input-group.input-group--search img {
+  width: 20px;
+  opacity: 0.7;
+}
+
+.input-group.input-group--search input {
+  color: #53567e;
+  background-color: #ced0ff;
+}
+
+.input-group.input-group--search input::placeholder {
+  color: #53567e;
+  font-weight: 100;
+}
+
+.card.card-cust.card-cust--table .card-head>div {
+  display: flex;
+  align-items: center;
+}
+
+.card.card-cust.card-cust--table .card-head .card-title {
+  margin-bottom: 0;
 }