Improve the book search view

zodman · Nov 28, 2020 · 8225949 · 8225949
1 parent 0e62e51
commit 8225949
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/core/static/css/styles.css b/core/static/css/styles.css
@@ -1,3 +1,7 @@
+:root {
+    --justify-important: left;
+}
+
 header {
     padding-top: 0;
     margin-left: 0.5rem;
@@ -19,16 +23,35 @@ footer {
     right: 0;
     left: 0;
 }
+
+footer,
+header,
+main {
+    margin: 0 auto;
+    max-width: var(--width-content);
+    padding: 0rem 2rem;
+}
+
 hr { margin-top: 0; margin-bottom: 0; }
 h1 { font-family: 'Open Sans', sans-serif; }
 nav ul li { display: block; }
 
+table {
+    width: 100%;
+    display: inline-table;
+}
+
+form {
+    max-width: 100%;
+}
+
 .min-vh-100 {
     min-height: 100vh !important;
 }
 
 flex-container { display: flex; }
 .flex { display: flex; }
+.flex-grow { flex-grow: 1; }
 .self-center { align-self: center; }
 .leading-none { line-height: 1; }
 .m-0 { margin: 0; }

diff --git a/core/templates/base.html b/core/templates/base.html
@@ -36,7 +36,7 @@ <h1 class="leading-none m-0 pl-1 self-center">
         </ul>
       </nav>
     </aside>
-    <main>
+    <main class="flex-grow">
       <h2> {% block subtitle %}<h1>Django Sockpuppet</h1>{% endblock subtitle %}</h2>
       {% block main %}
       {% endblock %}

diff --git a/core/templates/book_search.html b/core/templates/book_search.html
@@ -31,13 +31,13 @@
                 </tr>
               </thead>
               <tbody>
-                  {% for book in books|slice:'0:5'  %}
+                  {% for book in books|slice:'0:10'  %}
                 <tr>
-                    <td>{{book.subject|join:', '|truncatechars:10}} </td>
+                    <td>{{book.subject|join:', '|truncatechars:40}} </td>
                     <td>{{book.title|truncatechars:30}}</td>
                     <td>{{book.author_name|join:', '|truncatechars:30}}</td>
                     <td>{{book.publish_year.0 }}</td>
-                    <td>{{book.isbn.0|truncatechars:5}}</td>
+                    <td>{{book.isbn.0|truncatechars:30}}</td>
                 </tr>
                   {% endfor %}
               </tbody>