list view

web/app/static/src/main.css

 
 
 .related {
-    @apply w-[8rem] lg:w-[12rem] pl-[4rem] p-5 text-right;
+    @apply w-[6rem] lg:w-[12rem] lg:pl-[4rem] px-2 py-4 lg:p-5 text-right;
 }
 
 .cell-margin {
 }
 
 .fade-right::after {
-    @apply absolute top-0 right-0 w-40 h-full pointer-events-none;
+    @apply absolute top-0 right-0 w-12 lg:w-40 h-full pointer-events-none;
 
     content: '';
-    background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);
+    background-image: linear-gradient(to left,#fff 0%, #fff 5%, rgba(255,255,255,0) 100%);
 
 }
 
 .menuitem {
-    @apply block px-4 py-2 link flex items-center;
+    @apply px-4 py-2 link items-center;
 }
 
 

web/app/static/styles/main.css

 .pointer-events-none {
   pointer-events: none;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
 .top-10 {
   top: 2.5rem;
 }
+.top-12 {
+  top: 3rem;
+}
+.top-14 {
+  top: 3.5rem;
+}
 .z-10 {
   z-index: 10;
 }
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
-.row-span-2 {
-  grid-row: span 2 / span 2;
-}
-.row-span-3 {
-  grid-row: span 3 / span 3;
-}
 .row-start-1 {
   grid-row-start: 1;
 }
 .m-4 {
   margin: 1rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 .ml-3 {
   margin-left: 0.75rem;
 }
-.ml-\[13rem\] {
-  margin-left: 13rem;
-}
 .ml-auto {
   margin-left: auto;
 }
 .h-screen {
   height: 100vh;
 }
+.h-8 {
+  height: 2rem;
+}
+.h-16 {
+  height: 4rem;
+}
+.h-14 {
+  height: 3.5rem;
+}
 .w-10 {
   width: 2.5rem;
 }
 .w-\[25rem\] {
   width: 25rem;
 }
+.w-\[28vw\] {
+  width: 28vw;
+}
 .w-\[30rem\] {
   width: 30rem;
 }
-.w-\[32rem\] {
-  width: 32rem;
-}
 .w-\[35rem\] {
   width: 35rem;
 }
 .w-full {
   width: 100%;
 }
+.min-w-\[10rem\] {
+  min-width: 10rem;
+}
+.min-w-\[7rem\] {
+  min-width: 7rem;
+}
+.min-w-\[5rem\] {
+  min-width: 5rem;
+}
 .max-w-\[30rem\] {
   max-width: 30rem;
 }
 .grid-flow-col {
   grid-auto-flow: column;
 }
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.grid-cols-\[1fr\2c 1fr\] {
-  grid-template-columns: 1fr 1fr;
-}
-.grid-cols-\[30rem\2c 30rem\] {
-  grid-template-columns: 30rem 30rem;
-}
-.grid-cols-\[50rem\2c 30rem\] {
-  grid-template-columns: 50rem 30rem;
-}
-.grid-cols-\[52rem\2c 30rem\] {
-  grid-template-columns: 52rem 30rem;
+.grid-cols-\[auto\2c 1fr\] {
+  grid-template-columns: auto 1fr;
 }
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
-.content-center {
-  align-content: center;
-}
 .content-start {
   align-content: flex-start;
 }
-.items-start {
-  align-items: flex-start;
-}
 .items-center {
   align-items: center;
 }
 .justify-center {
   justify-content: center;
 }
-.gap-4 {
-  gap: 1rem;
+.justify-between {
+  justify-content: space-between;
 }
 .gap-8 {
   gap: 2rem;
 }
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
 .rounded-full {
   border-radius: 9999px;
 }
-.border {
-  border-width: 1px;
-}
 .border-b-2 {
   border-bottom-width: 2px;
 }
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
-.border-emerald-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(5 150 105 / var(--tw-border-opacity));
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
   -o-object-fit: contain;
      object-fit: contain;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
+.p-8 {
+  padding: 2rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .pl-1 {
   padding-left: 0.25rem;
 }
   line-height: 1.22;
 }
 .text-sm {
-  font-size: 0.85rem;
+  font-size: 0.95rem;
   line-height: 1.35;
 }
 .text-xs {
 
 
 .related {
-  width: 8rem;
-  padding: 1.25rem;
-  padding-left: 4rem;
+  width: 6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   text-align: right;
 }
 
 
   .related {
     width: 12rem;
+    padding: 1.25rem;
+    padding-left: 4rem;
   }
 }
 
   top: 0px;
   right: 0px;
   height: 100%;
-  width: 10rem;
+  width: 3rem;
+}
+
+@media (min-width: 1024px) {
+
+  .fade-right::after {
+    width: 10rem;
+  }
+}
+
+.fade-right::after {
 
     content: '';
-    background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);
+    background-image: linear-gradient(to left,#fff 0%, #fff 5%, rgba(255,255,255,0) 100%);
+
 }
 
 .menuitem {
-  display: block;
-  display: flex;
   align-items: center;
   padding-left: 1rem;
   padding-right: 1rem;
 
  @media (min-width: 1024px) {
 
+  .lg\:row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+
+  .lg\:ml-\[13rem\] {
+    margin-left: 13rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
   .lg\:block {
     display: block;
   }
     display: flex;
   }
 
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:w-\[10\.5rem\] {
+    width: 10.5rem;
+  }
+
+  .lg\:w-\[32rem\] {
+    width: 32rem;
+  }
+
+  .lg\:max-w-\[30rem\] {
+    max-width: 30rem;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-\[52rem\2c 30rem\] {
+    grid-template-columns: 52rem 30rem;
+  }
+
+  .lg\:grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
   .lg\:grid-rows-\[auto\2c auto\2c auto\] {
     grid-template-rows: auto auto auto;
   }
+
+  .lg\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .lg\:border-black {
+    --tw-border-opacity: 1;
+    border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  }
+
+  .lg\:p-0 {
+    padding: 0px;
+  }
+
+  .lg\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .lg\:text-center {
+    text-align: center;
+  }
 }

web/app/static/tailwind.config.js

     extend: {
       fontSize: {
         // xs: ['0.95rem', { lineHeight: '1.35' }],
-        sm: ['0.85rem', { lineHeight: '1.35' }],
+        sm: ['0.95rem', { lineHeight: '1.35' }],
         base: ['1.1rem', { lineHeight: '1.22' }],
         lg: ['1.24rem', { lineHeight: '1.1' }],
         xl: ['1.5rem', { lineHeight: '1.1' }],

web/app/templates/base.html

 # Flask-Moment: https://flask-moment.readthedocs.io/en/latest/
 # Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
 -->
+
+{% macro menu() %}
+    <a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
+        class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title hidden lg:block">
+        Tools
+    </a>
+
+    <a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
+        class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title  hidden lg:block">
+        Practices
+    </a>
+
+    <a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
+        class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book  hidden lg:block">
+        Books
+    </a>
+
+    <a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
+        class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto  hidden lg:block">
+        About / <br> Contact
+    </a>
+
+    <!-- <div class="ml-auto mr-2">
+                        {% if current_user.is_authenticated %}
+                        <a href="{{ url_for('create.create_resource') }}" class="block link">
+                            Add resource
+                        </a>
+                        {% endif %}
+                        {% if current_user.is_authenticated %}
+                        <a href="{{ url_for('main.profile') }}" class="block link">
+                            Profile
+                        </a>
+                        {% endif %}
+                        {% if not current_user.is_authenticated %}
+                        <a href="{{ url_for('auth.login') }}" class="block link">
+                            Login
+                        </a>
+                        <a href="{{ url_for('auth.signup') }}" class="block link">
+                            Sign Up
+                        </a>
+                        {% endif %}
+                        {% if current_user.is_authenticated %}
+                        <a href="{{ url_for('auth.logout') }}" class="block link">
+                            Logout
+                        </a>
+                        {% endif %}
+                    </div> -->
+
+    <form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
+        <input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1"
+            placeholder="Search">
+        <input class="hidden" type="submit" hidden />
+    </form>
+{% endmacro %}
+
 {% macro relationships_links(resource) %}
 
     {% if resource.tools %}
     <div class="">
-        <div class="px-4">
+        <div class="px-4 mt-16 lg:mt-0">
             Tools
         </div>
         {% for tool in resource.tools %}
     {% endif %}
     {% if resource.books %}
     <div class="">
-        <div class="px-4">
+        <div class="px-4 mt-16 lg:mt-0">
             Books
         </div>
     
     {% endif %}
     {% if resource.practices %}
     <div class="">
-        <div class="px-4">
+        <div class="px-4 mt-16 lg:mt-0">
             Practices
         </div>
     
         {% endfor %}
     </div>
     {% endif %}
-    
 
 {% endmacro %}
 
+{% macro resource_list(resource, loop, show_number=true) %}
+<div class="border-b-2 border-black">
+    <a class="block h-full py-1 px-4 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
+        resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
+        resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
+        resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
+        %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
+
+        <span class="{% if show_number %} hidden  {% endif %} lg:w-[10.5rem] lg:text-center ">
+            {% if show_number %}
+            {{loop.index}} / {{count}}
+            {% else %}
+            <span class="capitalize inline-block min-w-[5rem] px-4 text-right">{{ resource['type'] }}</span>
+            {% endif %}
+        </span>
+
+
+        <span class="{{ resource.type }}">
+            {{ resource.name }}
+        </span>
+        {% if resource['year'] %}
+            {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
+        {% endif %}
+    </a>
+</div>
+{% endmacro %}
+
 {% macro resource_with_related(resource, loop, show_number=true) %}
     <div class="w-full  border-b-2 border-black fade-right">
         <div class="content w-full py-8   overflow-x-auto">
             <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 " >
-                <div class=" related ">
+                <div class=" related hidden lg:block ">
                     {% if show_number %}
                     <p>{{loop.index}} / {{count}}</p>
                     {% else %}
                     <p class="capitalize">{{ resource['type'] }}</p>
                     {% endif %}
                 </div>
-                <div class="cell w-[32rem] row-start-1 row-span-3">
+                <div class="cell w-[28vw] lg:w-[32rem] row-start-1 lg:row-span-3">
                     {{ resource_lead(resource) }}
                 </div>
     
                 {% if resource.tools %}
-                <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
+                <div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit">
                     <div class="related">
                         Related<br>Tools
                     </div>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     
-    <script src="https://unpkg.com/htmx.org@1.8.6"></script>
-    <script src="//unpkg.com/alpinejs" defer></script>
     <title>Experimental Publishing Compendium</title>
+    <script src="{{ url_for('static',filename='js/alpine.min.js') }}" defer></script>
+    <script src="{{ url_for('static',filename='js/htmx.min.js') }}"></script>
     <link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet">
     <script>
         // htmx.on('htmx:beforeRequest', e=> {
     </div>
 
     <div id="all">
-        <header class="sticky top-0 z-10 bg-white  border-b-[2px] border-black">
-            <nav class=" lg:flex justify-center items-stretch">
-                <a class="menuitem  w-48 " href="{{ url_for('main.index') }}"><span>Experimental Publishing Compendium <span class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span></a>
-
-                <a href="{{ url_for('tool.get_tools') }}" class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title ">
-                    Tools
-                </a>
-
-                <a href="{{ url_for('practice.get_practices') }}" class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title">
-                    Practices
-                </a>
-
-                <a href="{{ url_for('book.get_books') }}" class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book">
-                    Books
-                </a>
-
-                <a href="{{ url_for('main.about') }}" class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto">
-                    About / <br> Contact
-                </a>
-                
-                <!-- <div class="ml-auto mr-2">
-                    {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('create.create_resource') }}" class="block link">
-                        Add resource
-                    </a>
-                    {% endif %}
-                    {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('main.profile') }}" class="block link">
-                        Profile
-                    </a>
-                    {% endif %}
-                    {% if not current_user.is_authenticated %}
-                    <a href="{{ url_for('auth.login') }}" class="block link">
-                        Login
-                    </a>
-                    <a href="{{ url_for('auth.signup') }}" class="block link">
-                        Sign Up
-                    </a>
-                    {% endif %}
-                    {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('auth.logout') }}" class="block link">
-                        Logout
-                    </a>
-                    {% endif %}
-                </div> -->
-
-                <form action="{{ url_for('search.basic_search') }}">
-                    <input type="text" name="query" class="text-center text-base border-l-2 border-black pl-1" placeholder="Search">
-                    <input type="submit" hidden />
-                </form>
-                
+        <header class="sticky top-0 z-10 bg-white  border-b-[2px] border-black flex justify-between w-full">
+            <nav class=" lg:flex justify-center items-stretch w-full">
+                <a class="block menuitem  w-48 " href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"><span>Experimental Publishing Compendium <span class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span></a>
+                {{ menu() }}
             </nav>
+            <div class="burger h-14 cursor-pointer block lg:hidden p-4">
+                <svg width="100%" height="100%" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1 4H19" stroke="black" stroke-width="1.5" />
+                    <path d="M19 9H1" stroke="black" stroke-width="1.5" />
+                    <path d="M1 14H19" stroke="black" stroke-width="1.5" />
+                </svg>
+
+            </div>
         </header>
     
         <!-- Begin page content -->

web/app/templates/book.html

 
 {% block content %}
 
-    <div class="cell-margin grid mt-16 grid-cols-[1fr,1fr]">
+    <div class="cell-margin grid mt-16 lg:grid-cols-2">
         
         <div class="left">
             <div class="mb-2">Book</div>
     
                 </div>
                 {% endif %}
-                
     
     
                 <div class="">
                 </div>
             </div>
         </div>
-        <div class="right ">
-            <div class="grid grid-cols-2">
+        <div class="right p-4 pr-8 lg:p-0">
+            <div class="grid lg:grid-cols-2">
                 {{ relationships_links(resource) }} 
             </div>
         </div>

web/app/templates/index.html

 {% block content %}
 <div class="">
 
-    <div class="border-b-2 border-black grid grid-cols-[52rem,30rem]  content-start">
-
-        <div class="ml-[13rem] text my-8 meta max-w-[30rem]">
+    <div class="border-b-2 border-black grid gap-8 lg:grid-cols-[52rem,30rem]  content-start">
+        <div class="mx-2 lg:ml-[13rem] text my-8 meta max-w-[30rem]">
             {{ text|safe }}
-
             <br/>
             <a href="{{ url_for(request.endpoint, view='list') }}">LIST VIEW</a>
-
-        </div>
-        <div class="h-full ">
-            <div class="flex h-full gap-8 justify-start items-center ">
-                <div class="text-right">Show<br>related</div>
-                <label class="switch">
-                    <input type="checkbox">
-                    <span class="slider round"></span>
-                </label>
-                <div class="">Simpler<br>List</div>
-            </div>
         </div>
     </div>
 
-    {% if view == 'list' %}
-        THIS IS LIST VIEW 
-    {% else %}
+  
     
-        {% for tool in tools %}
-
-            {{ resource_with_related(tool, loop, false) }}
 
+    {% if view == 'list' %}
+        {% for tool in tools %}
+        {{ resource_list(tool, loop, false) }}
         {% endfor %}
-
-        {% for book in books %}
-
-            {{ resource_with_related(book, loop, false) }}
-
+    {% else %}    
+        {% for tool in tools %}
+        {{ resource_with_related(tool, loop, false) }}
         {% endfor %}
+    {% endif %}
 
-        {% for tool in tools2 %}
 
-            {{ resource_with_related(tool, loop, false) }}
 
-        {% endfor %}
 
-        {% for book in books2 %}
+    {% if view == 'list' %}
+        {% for book in books %}
+        {{ resource_list(book, loop, false) }}
+        {% endfor %}
+    {% else %}
+        {% for book in books %}
+        {{ resource_with_related(book, loop, false) }}
+        {% endfor %}
+    {% endif %}
 
-            {{ resource_with_related(book, loop, false) }}
 
-        {% endfor %}
 
-    {% endif %}
+    
 
 </div>
 {% endblock %}

web/app/templates/resource.html

 
 
 
-<div class="cell-margin grid mt-16 grid-cols-[1fr,1fr]">
+<div class="cell-margin grid mt-16 lg:grid-cols-2">
     <div class="left ">
         <div class="mb-4 capitalize">{{ resource['type'] }}</div>
-        <div class="border-r-2 border-black pr-8">
+        <div class="lg:border-r-2 lg:border-black lg:pr-8">
             <h2 class="block-margin huge-title {{ resource['type'] }}">
                 {% block title %} 
                 {% autoescape false %}
         </div>
     </div>
     
-    <div class="right ">
-        <div class="grid grid-cols-2 ">
+    <div class="right p-4 pr-8 lg:p-0 ">
+        <div class="grid lg:grid-cols-2">
             {{ relationships_links(resource) }}
         </div>
     </div>

web/app/templates/resources.html

 </div> -->
 
 
-    <div class="border-b-2 border-black grid grid-cols-[52rem,30rem]  content-start">
-    
-      <div class="ml-[13rem] text my-8 meta max-w-[30rem]">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
-            nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
-            commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
+    <div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem]  content-start">
+      <div class="mx-2 lg:ml-[13rem] text my-8 meta lg:max-w-[30rem]">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
+        nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
+        commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
 
-            <br/><br/>
-            <a href="{{ url_for(request.endpoint, view='list') }}">LIST VIEW</a>
+        <br/><br/>
+        <a href="{{ url_for(request.endpoint, view='list') }}">As list</a> <a href="{{ url_for(request.endpoint, view='') }}">With related</a>
 
       </div>
-      <div class="h-full ">
-        <div class="flex h-full gap-8 justify-start items-center ">
-          <div class="text-right">Show<br>related</div>
-          <label class="switch">
-            <input type="checkbox">
-            <span class="slider round"></span>
-          </label>
-          <div class="">Simpler<br>List</div>
-        </div>
-      </div>
     </div>
 <script>
   function filter() {
 </script>
 <div class="" x-data="filter()">
     <div id="resources" :class="expandFilters?'expanded':''">
-        <div class="std-margin grid lg:grid-cols-4 mb-16">
+        <div class="std-margin grid lg:grid-cols-4 sticky top-14">
+          <div class="hidden lg:block cursor-pointer" @click="expandFilters = !expandFilters">Show/hide filters</div>
             {% if practices_filter %}
-            <div class="hidden lg:block cursor-pointer" @click="expandFilters = !expandFilters">Show/hide filters</div>
             <div class="">
                 <div class="filter-header">Practices</div>
                 <div class="filter-options my-4" x-show="expandFilters">
 
         <div>
             {% if view == 'list' %}
-              THIS IS LIST VIEW 
+              {% for resource in resources %}
+                {{ resource_list(resource, loop) }}
+              {% endfor %}
             {% else %}
-
-            {% for resource in resources %}
-              {{ resource_with_related(resource, loop) }}
-            {% endfor %}
-
+              {% for resource in resources %}
+                {{ resource_with_related(resource, loop) }}
+              {% endfor %}
             {% endif %}
         </div>
     </div>

web/app/templates/search.html

 {% extends 'base.html' %}
 
 {% block content %}
-
-{% for result in results %}
-  {{ result.name }}
-{% endfor %}
+<div class="grid lg:grid-cols-3">
+  {% for result in results %}
+    <div class="cell">
+      {{ resource_lead(result) }}
+    </div>
+  {% endfor %}
+</div>
 
 {% endblock %}