feat: html tweaks

src/core/views.py

@@ -18,6 +18,7 @@ gbnetloc = urlparse(allbooks_url).netloc
 def index(request: HttpRequest):
     context = {
         'title': 'epub2go',
+        'http_host': request.META['HTTP_HOST'],
         'books': books,
         'book_count': len(books),
     }
@@ -42,7 +43,7 @@ def validateUrl(param)->bool :
 
     return False
 
-@shared_task
+#@shared_task
 def getEpub(param):
     # TODO validate / sanitize input
     # TODO check for existing file and age

src/epub2go_web/static/styles.css

@@ -13,6 +13,19 @@ h1,h2,h3{
 }
 
 /* custom styles here */
+:root{
+    --white:#faf0e673;
+}
+body{
+    background-color: var(--white)
+}
+header{
+    text-align: center;
+    justify-content: center;
+}
+.searchbar{
+    width: fit-content;
+}
 tr:nth-child(even){
     background-color: #EEEEEE;
 }
@@ -20,11 +33,22 @@ tr:hover{
     background-color: #DDDDDD;
     transition: all 2ms;
 }
-.table-icon{
+.inline-icon{
     vertical-align: middle;
     height: 1em;
 }
 .header-icon{
     vertical-align: middle;
     height: 1em;
+    padding: .5em;
+}
+a:hover, a:any-link{
+    text-decoration: none;
+    color: inherit;
+}
+.table-link{
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 3px;
 }

src/epub2go_web/templates/index.html

@@ -11,21 +11,21 @@
     <header>
         <div>
         <h1>{{ title }}</h1>
-        <p>Im Moment finden sich hier {{ book_count }} Bücher. </p>
+        <a href="javascript:void(window.open('{{ http_host }}/?t='+encodeURIComponent(window.location.toString())))" title="Als Lesezeichen speichern"><!--TODO fix domain part as variable-->
-        <a href="javascript:void(window.open('./?t='+encodeURIComponent(window.location.toString())))" title="Als Lesezeichen speichern"> <!--TODO fix domain part as variable-->
             <img src="{% static 'bookmark.svg' %}" alt="Bookmarklet" class="header-icon">
         </a>
         <a href="https://github.com/eneller/epub2go-web">
             <img src="{% static 'github.svg' %}" alt="GitHub" class="header-icon">
         </a></div>
         <search>
-            <form onsubmit="submitSearch(event)">
+            <form onsubmit="submitSearch(event)" class="searchbar">
-            <input type="su" id="searchInput" placeholder="Suchen">
+            <input type="search" id="searchInput" placeholder="Suche nach Titel" minlength="3">
             </form>
         </search>
+        <p>Im Moment finden sich hier {{ book_count }} Bücher. </p>
     </header>
     <main>
-        <!-- TODO use dl here-->
+        <!-- NOTE use dl here?-->
         <table id="table">
             <thead>
                 <tr>
@@ -38,12 +38,12 @@
             {% for item in books %} 
                 <tr>
                 <td>
-                    <a href= {{ item.url }} target="_blank" rel="noopener noreferrer">
+                    <a href= {{ item.url }} target="_blank" rel="noopener noreferrer" class="table-link">
-                        <img src="{% static 'open-link.svg' %}" alt="Open Link" class="table-icon">
+                        <img src="{% static 'open-link.svg' %}" alt="Open Link" class="inline-icon">
                     </a>
                 </td>
                 <td class="table-data">
-                    <a href="./?t= {{ item.url }}">
+                    <a href="./?t= {{ item.url }}" class="table-link">
                     {{ item.title }}
                     </a>
                 </td>