feat(cisa): style images (algolia#6033)

thomasbritton · Feb 5, 2024 · 1fc011e · 1fc011e
1 parent 0dbeb82
commit 1fc011e
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 78 deletions.
diff --git a/packages/create-instantsearch-app/e2e/__snapshots__/templates.test.js.snap b/packages/create-instantsearch-app/e2e/__snapshots__/templates.test.js.snap
@@ -2551,6 +2551,15 @@ exports[`Templates InstantSearch.js File content: src/app.css 1`] = `
 #pagination {
   margin: 2rem auto;
   text-align: center;
+}
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
 }"
 `;
 
@@ -2577,8 +2586,10 @@ search.addWidgets([
       item: (hit, { html, components }) => html\`
         <article>
           <img src=\${hit.imageAttribute} alt=\${hit.attribute1} />
-          <h1>\${components.Highlight({ hit, attribute: 'attribute1' })}</h1>
-          <p>\${components.Highlight({ hit, attribute: 'attribute2' })}</p>
+          <div>
+            <h1>\${components.Highlight({ hit, attribute: 'attribute1' })}</h1>
+            <p>\${components.Highlight({ hit, attribute: 'attribute2' })}</p>
+          </div>
         </article>
       \`,
     },
@@ -4159,6 +4170,15 @@ exports[`Templates JavaScript Client File content: src/app.css 1`] = `
   margin-bottom: 1rem;
 }
 
+.ais-hits--item article {
+  display: flex;
+}
+
+.ais-hits--item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
+
 #searchBox {
   margin-bottom: 2rem;
 }"
@@ -4184,8 +4204,10 @@ function renderHits(query) {
               \`<li class=\\"ais-hits--item\\">
                 <article>
                   <img src=\\"\${hit.imageAttribute}\\" alt=\\"\${hit.attribute1}\\" />
-                  <h1>\${hit._highlightResult.attribute1.value}</h1>
-                  <p>\${hit._highlightResult.attribute2.value}</p>
+                  <div>
+                    <h1>\${hit._highlightResult.attribute1.value}</h1>
+                    <p>\${hit._highlightResult.attribute2.value}</p>
+                  </div>
                 </article>
               </li>\`
           )
@@ -4468,6 +4490,15 @@ exports[`Templates JavaScript Helper File content: src/app.css 1`] = `
   margin-bottom: 1rem;
 }
 
+.ais-hits--item article {
+  display: flex;
+}
+
+.ais-hits--item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
+
 #searchBox {
   margin-bottom: 2rem;
 }"
@@ -4499,8 +4530,10 @@ helper.on('result', ({ results }) => {
             \`<li class=\\"ais-hits--item\\">
               <article>
                 <img src=\\"\${hit.imageAttribute}\\" alt=\\"\${hit.attribute1}\\" />
-                <h1>\${hit._highlightResult.attribute1.value}</h1>
-                <p>\${hit._highlightResult.attribute2.value}</p>
+                <div>
+                  <h1>\${hit._highlightResult.attribute1.value}</h1>
+                  <p>\${hit._highlightResult.attribute2.value}</p>
+                </div>
               </article>
             </li>\`
         )
@@ -4729,6 +4762,15 @@ em {
 .pagination {
   margin: 2rem auto;
   text-align: center;
+}
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
 }"
 `;
 
@@ -4817,12 +4859,14 @@ function Hit({ hit }: HitProps) {
   return (
     <article>
       <img src={hit.imageAttribute} alt={hit.attribute1} />
-      <h1>
-        <Highlight attribute=\\"attribute1\\" hit={hit} />
-      </h1>
-      <p>
-        <Highlight attribute=\\"attribute2\\" hit={hit} />
-      </p>
+      <div>
+        <h1>
+          <Highlight attribute=\\"attribute1\\" hit={hit} />
+        </h1>
+        <p>
+          <Highlight attribute=\\"attribute2\\" hit={hit} />
+        </p>
+      </div>
     </article>
   );
 }"
@@ -5509,12 +5553,14 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
               <template slot=\\"item\\" slot-scope=\\"{ item }\\">
                 <article>
                   <img :src=\\"item.imageAttribute\\" :alt=\\"item.attribute1\\" />
-                  <h1>
-                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
-                  </h1>
-                  <p>
-                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
-                  </p>
+                  <div>
+                    <h1>
+                      <ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
+                    </h1>
+                    <p>
+                      <ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
+                    </p>
+                  </div>
                 </article>
               </template>
             </ais-hits>
@@ -5613,6 +5659,15 @@ em {
   margin: 2rem auto;
   text-align: center;
 }
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
 </style>"
 `;
 
@@ -5805,12 +5860,14 @@ exports[`Templates Vue InstantSearch with Vue 3 File content: src/App.vue 1`] =
               <template v-slot:item=\\"{ item }\\">
                 <article>
                   <img :src=\\"item.imageAttribute\\" :alt=\\"item.attribute1\\" />
-                  <h1>
-                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
-                  </h1>
-                  <p>
-                    <ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
-                  </p>
+                  <div>
+                    <h1>
+                      <ais-highlight :hit=\\"item\\" attribute=\\"attribute1\\" />
+                    </h1>
+                    <p>
+                      <ais-highlight :hit=\\"item\\" attribute=\\"attribute2\\" />
+                    </p>
+                  </div>
                 </article>
               </template>
             </ais-hits>
@@ -5914,6 +5971,15 @@ em {
   margin: 2rem auto;
   text-align: center;
 }
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
 </style>"
 `;
 

diff --git a/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.css b/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.css
@@ -58,3 +58,12 @@
   margin: 2rem auto;
   text-align: center;
 }
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
diff --git a/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.js.hbs b/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.js.hbs
@@ -42,12 +42,14 @@ search.addWidgets([
   {{#if imageAttribute}}
   <img src=${ hit.{{imageAttribute}} } alt=${ hit.{{attributesToDisplay.[0]}} } />
   {{/if}}
-  <h1>${components.Highlight({hit, attribute: "{{attributesToDisplay.[0]}}"})}</h1>
-  {{#each attributesToDisplay}}
-  {{#unless @first}}
-  <p>${components.Highlight({hit, attribute: "{{this}}"})}</p>
-  {{/unless}}
-  {{/each}}
+  <div>
+    <h1>${components.Highlight({hit, attribute: "{{attributesToDisplay.[0]}}"})}</h1>
+    {{#each attributesToDisplay}}
+    {{#unless @first}}
+    <p>${components.Highlight({hit, attribute: "{{this}}"})}</p>
+    {{/unless}}
+    {{/each}}
+  </div>
 </article>
 `,
     },

diff --git a/packages/create-instantsearch-app/src/templates/JavaScript Client/src/app.css b/packages/create-instantsearch-app/src/templates/JavaScript Client/src/app.css
@@ -70,6 +70,15 @@ em {
   margin-bottom: 1rem;
 }
 
+.ais-hits--item article {
+  display: flex;
+}
+
+.ais-hits--item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
+
 #searchBox {
   margin-bottom: 2rem;
 }
diff --git a/packages/create-instantsearch-app/src/templates/JavaScript Client/src/app.js.hbs b/packages/create-instantsearch-app/src/templates/JavaScript Client/src/app.js.hbs
@@ -20,12 +20,14 @@ function renderHits(query) {
                   {{#if imageAttribute}}
                   <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
                   {{/if}}
-                  <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
-                  {{#each attributesToDisplay}}
-                  {{#unless @first}}
-                  <p>${hit._highlightResult.{{this}}.value}</p>
-                  {{/unless}}
-                  {{/each}}
+                  <div>
+                    <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
+                    {{#each attributesToDisplay}}
+                    {{#unless @first}}
+                    <p>${hit._highlightResult.{{this}}.value}</p>
+                    {{/unless}}
+                    {{/each}}
+                  </div>
                 {{else}}
                   <p>
                     <code>${JSON.stringify(hit).slice(0, 100)}...</code>

diff --git a/packages/create-instantsearch-app/src/templates/JavaScript Helper/src/app.css b/packages/create-instantsearch-app/src/templates/JavaScript Helper/src/app.css
@@ -69,6 +69,15 @@ em {
   margin-bottom: 1rem;
 }
 
+.ais-hits--item article {
+  display: flex;
+}
+
+.ais-hits--item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
+
 #searchBox {
   margin-bottom: 2rem;
 }
diff --git a/packages/create-instantsearch-app/src/templates/JavaScript Helper/src/app.js.hbs b/packages/create-instantsearch-app/src/templates/JavaScript Helper/src/app.js.hbs
@@ -26,12 +26,14 @@ helper.on('result', ({ results }) => {
                 {{#if imageAttribute}}
                 <img src="${ hit.{{imageAttribute}} }" alt="${ hit.{{attributesToDisplay.[0]}} }" />
                 {{/if}}
-                <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
-                {{#each attributesToDisplay}}
-                {{#unless @first}}
-                <p>${hit._highlightResult.{{this}}.value}</p>
-                {{/unless}}
-                {{/each}}
+                <div>
+                  <h1>${hit._highlightResult.{{attributesToDisplay.[0]}}.value}</h1>
+                  {{#each attributesToDisplay}}
+                  {{#unless @first}}
+                  <p>${hit._highlightResult.{{this}}.value}</p>
+                  {{/unless}}
+                  {{/each}}
+                </div>
               {{else}}
                 <p>
                   <code>${JSON.stringify(hit).slice(0, 100)}...</code>

diff --git a/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.css b/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.css
@@ -69,3 +69,12 @@ em {
   margin: 2rem auto;
   text-align: center;
 }
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
diff --git a/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.tsx.hbs b/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.tsx.hbs
@@ -96,16 +96,18 @@ function Hit({ hit }: HitProps) {
       {{#if imageAttribute}}
       <img src={ hit.{{imageAttribute}} } alt={ hit.{{attributesToDisplay.[0]}} } />
       {{/if}}
-      <h1>
-        <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
-      </h1>
-      {{#each attributesToDisplay}}
-      {{#unless @first}}
-      <p>
-        <Highlight attribute="{{this}}" hit={hit} />
-      </p>
-      {{/unless}}
-      {{/each}}
+      <div>
+        <h1>
+          <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
+        </h1>
+        {{#each attributesToDisplay}}
+        {{#unless @first}}
+        <p>
+          <Highlight attribute="{{this}}" hit={hit} />
+        </p>
+        {{/unless}}
+        {{/each}}
+      </div>
       {{else}}
       <p>
         <code>{JSON.stringify(hit).slice(0, 100)}...</code>

diff --git a/packages/create-instantsearch-app/src/templates/Vue InstantSearch with Vue 3/src/App.vue b/packages/create-instantsearch-app/src/templates/Vue InstantSearch with Vue 3/src/App.vue
@@ -52,19 +52,21 @@
                   {{#if imageAttribute}}
                   <img :src="item.{{imageAttribute}}" :alt="item.{{attributesToDisplay.[0]}}" />
                   {{/if}}
-                  <h1>
-                    <ais-highlight
-                      :hit="item"
-                      attribute="{{attributesToDisplay.[0]}}"
-                    />
-                  </h1>
-                  {{#each attributesToDisplay}}
-                  {{#unless @first}}
-                  <p>
-                    <ais-highlight :hit="item" attribute="{{this}}" />
-                  </p>
-                  {{/unless}}
-                  {{/each}}
+                  <div>
+                    <h1>
+                      <ais-highlight
+                        :hit="item"
+                        attribute="{{attributesToDisplay.[0]}}"
+                      />
+                    </h1>
+                    {{#each attributesToDisplay}}
+                    {{#unless @first}}
+                    <p>
+                      <ais-highlight :hit="item" attribute="{{this}}" />
+                    </p>
+                    {{/unless}}
+                    {{/each}}
+                  </div>
                 </article>
               </template>
             </ais-hits>
@@ -171,4 +173,13 @@ em {
   margin: 2rem auto;
   text-align: center;
 }
+
+.ais-Hits-item article {
+  display: flex;
+}
+
+.ais-Hits-item img {
+  max-height: 125px;
+  padding-right: 16px;
+}
 </style>