feat: html tweaks

This commit is contained in:
eneller
2025-03-19 18:57:29 +01:00
parent 09561d1bfd
commit 9469018fc6
3 changed files with 35 additions and 10 deletions

View File

@@ -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;
}

View File

@@ -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('./?t='+encodeURIComponent(window.location.toString())))" title="Als Lesezeichen speichern"> <!--TODO fix domain part as variable-->
<a href="javascript:void(window.open('{{ http_host }}/?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)">
<input type="su" id="searchInput" placeholder="Suchen">
<form onsubmit="submitSearch(event)" class="searchbar">
<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">
<img src="{% static 'open-link.svg' %}" alt="Open Link" class="table-icon">
<a href= {{ item.url }} target="_blank" rel="noopener noreferrer" class="table-link">
<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>