js and style add to fav

assets/styles/app.css

@@ -141,6 +141,7 @@ main#searchResults {
         text-align: center;
     }
     & div.results {
+        width: 90%;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         justify-items: stretch;
@@ -152,10 +153,24 @@ section.album {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
     padding: 0.7rem;
     width: auto;
-    transition: all ease-out 0.2s;
+    /* max-width: max-content; */
+    transition: all ease-out 0.15s;
     box-shadow: var(--shadow);
+    border-radius: var(--radius);
+    &.fav {
+        transform: rotate(-1deg);
+    }
+    &:hover {
+        transform: scale(1.01);
+        box-shadow: var(--shadow-hover);
+        &.fav {
+            transform: rotate(-1deg) scale(1.01);
+        }
+    }
     & > span {
         width: fit-content;
         & > * {
@@ -167,8 +182,16 @@ section.album {
         width: 100%;
         max-width: 260px;
     }
-    &:hover {
+    & > button {
-        transform: scale(1.02);
+        background: var(--light);
-        box-shadow: var(--shadow-hover);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        padding: 8px 12px;
+        transition: all ease-out 0.15s;
+        border: none;
+        outline: none;
+        &:hover {
+            box-shadow: var(--shadow-hover);
+        }
     }
 }

templates/search/search.html.twig

@@ -1,11 +1,23 @@
 {% extends 'base.html.twig' %} {% block title %} results for {{ query }} !{%
 endblock %} {% block body %}
+<script>
+    function addToFavs(id) {
+        // alert(id);
+        // /favorite/add/{id}
+        fetch("/favorite/add/" + id).then((data) => {
+            if (data.status == 200) {
+                document.querySelector("#id" + id).classList.add("fav");
+                alert("Added to favs");
+            }
+        });
+    }
+</script>
 <main id="searchResults">
     <h1>Results for "{{ query }}" with {{fruit_emoji}}:</h1>
     <div class="results">
         {% for result in results %} {% set array = result['title']|split('-') %}
         {% set artist = array[0] %} {% set album = array[1] %}
-        <section class="album">
+        <section class="album" id="id{{result['id']}}">
             <span>
                 <h2>{{album}}</h2>
                 by
@@ -16,7 +28,9 @@ endblock %} {% block body %}
                 src="{{result['cover_image']}}"
                 alt="{{album ~ ' by ' ~ artist}}"
             />
-            <br />
+            <button onclick="addToFavs({{result['id']}})">
+                Add to favorites
+            </button>
         </section>
         {% endfor %}
     </div>