new results-list design

src/theme/DocTagDocListPage/index.tsx

@@ -11,6 +11,7 @@ import SearchMetadata from '@theme/SearchMetadata';
 import type {Props} from '@theme/DocTagDocListPage';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 // Very simple pluralization: probably good enough for now
 function useNDocsTaggedPlural() {
@@ -45,18 +46,35 @@ function usePageTitle(props: Props): string {
 function DocItem({doc}: {doc: Props['tag']['items'][number]}): JSX.Element {
   return (
     <article className="margin-vert--lg">
-       <div className={clsx("row row--no-gutters", styles.item)}>
-          {/* <div className="col col--2" aria-hidden="true">
-          </div> */}
-          <div className={clsx("col col--12", styles.item__inner)}>
-            <div>
+      <div className={clsx("row row--no-gutters", styles.item)}>
+
+        {/* Image Content */}
+        <div className="col col--1" aria-hidden="true">
+          <img 
+            src={doc.image || useBaseUrl("img/open-telekom-cloud-social-card.png")} 
+            alt={doc.title} 
+            className={styles.item__image} 
+          />
+        </div>
+
+        {/* Title content */}
+        <div className={clsx("col col--11", styles.item__inner)}>
+          <div style={{ paddingTop: '4px', paddingLeft: '15px' }}>
             <Link to={doc.permalink}>
               <Heading as="h2">{doc.title}</Heading>
             </Link>
-            {doc.description && <p>{doc.description}</p>}
-            </div>
+            {/* {doc.description && <p className={styles.item__description}>{doc.description}</p>} */}
+          </div>
+        </div>
+
+        {/* Description content */}
+        <div className={clsx("col col--12", styles.item__inner)}>
+          <div>
+            {doc.description && <p className={styles.item__description}>{doc.description}</p>}
           </div>
         </div>
+
+      </div>
     </article>
   );
 }
@@ -87,13 +105,16 @@ function DocTagDocListPageContent({
             <header className="margin-bottom--xl">
               <Heading as="h1">{title}</Heading>
               {tag.description && <p>{tag.description}</p>}
-              <Link href={tag.allTagsPath}>
-                <Translate
-                  id="theme.tags.tagsPageLink"
-                  description="The label of the link targeting the tag list page">
-                  View All Tags
-                </Translate>
-              </Link>
+
+              <scale-button size="small" variant="secondary" href={tag.allTagsPath}>
+                <scale-icon-action-backward></scale-icon-action-backward> 
+                  <Translate
+                    id="theme.tags.tagsPageLink"
+                    description="The label of the link targeting the tag list page">
+                    View All Tags
+                  </Translate>
+              </scale-button>
+
             </header>
             <section className="margin-vert--lg">
               {tag.items.map((doc) => (

src/theme/DocTagDocListPage/styles.module.css

@@ -1,28 +1,50 @@
 
 .item {
-  box-shadow: 0 1px 3px gray;
+  /* box-shadow: 0 1px 3px gray;
   background-color: var(--ifm-background-color);
   border-radius: 0.5rem;
   color: black;
-  overflow: hidden;
+  overflow: hidden; */
 }
 
 html[data-theme='dark'] .item {
-  box-shadow: 0px 1px 3px var(--ifm-color-primary);
+  /* box-shadow: 0px 1px 3px var(--ifm-color-primary);
   background-color: var(--ifm-background-color);
   border-radius: 0.5rem;
   color: white;
-  overflow: hidden;
+  overflow: hidden; */
 }
 
 .item__inner {
   align-items: center;
   display: flex;
 }
+
 .item__inner div {
-  padding: 1.5rem;
+  /* padding: 1.5rem; */
+  /* padding-top: 5px; */
+  /* padding-left: -25px; */
 }
-.item__title span {
+
+.item__title {
   display: block;
   font-size: 1.25rem;
-}
+}
+
+.item__image {
+  width: 100%;
+  max-width: 80px; /* Adjust as needed */
+  height: auto;
+  border-radius: 8px; /* Optional: Rounded corners */
+}
+
+.item__description {
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* Limit to 3 lines */
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis; /* Add '...' at the end */
+  max-height: 4.5em; /* Adjust based on your line height */
+  line-height: 1.5em; /* Ensures proper line spacing */
+}