patx/projectpay
update index.html ui
Commit 988499d · patx · 2026-07-06T00:32:54-04:00
Comments
No comments yet.
Diff
diff --git a/templates/base.html b/templates/base.html
index 3b57dba..e324519 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -334,10 +334,8 @@
width: 100%;
}
.has-sticky-index {
- padding-top: 78px;
- padding-bottom: 92px;
+ padding-bottom: 124px;
}
- .sticky-index-top,
.sticky-index-search {
position: fixed;
left: 0;
@@ -346,33 +344,41 @@
background: rgba(247, 247, 247, .96);
padding: 12px 20px;
}
- .sticky-index-top {
- top: 0;
- }
.sticky-index-search {
bottom: 0;
}
- .sticky-index-actions,
.sticky-index-search-inner {
max-width: 1080px;
margin: 0 auto;
}
- .sticky-index-actions {
- display: grid;
- grid-template-columns: 3fr 1fr;
- gap: 10px;
- }
- .sticky-index-actions .button {
- width: 100%;
- }
- .sticky-index-actions .logout-button {
- background: #fff;
- border-color: #efb5ad;
- color: #b42318;
- }
.sticky-index-search .searchbar {
margin: 0;
}
+ .floating-new-project {
+ position: fixed;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ right: max(20px, calc((100vw - 1080px) / 2 + 20px));
+ bottom: 58px;
+ z-index: 11;
+ width: 56px;
+ height: 56px;
+ border: 1px solid #176b5b;
+ border-radius: 50%;
+ background: #176b5b;
+ color: #fff;
+ box-shadow: 0 10px 24px rgba(31, 41, 51, .22);
+ font-size: 34px;
+ font-weight: 500;
+ line-height: 1;
+ padding: 0 0 4px;
+ text-decoration: none;
+ }
+ .floating-new-project:hover {
+ background: #13584c;
+ border-color: #13584c;
+ }
.empty { color: #697586; padding: 18px 0; }
.amount { text-align: right; }
@media (max-width: 760px) {
diff --git a/templates/index.html b/templates/index.html
index a4ac465..95d6c3c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,12 +2,7 @@
{% block title %}Projects{% endblock %}
{% block page_class %}has-sticky-index{% endblock %}
{% block content %}
- <div class="sticky-index-top">
- <div class="sticky-index-actions">
- <a class="button" href="/new">New Project</a>
- <a class="button logout-button" href="/logout">Logout</a>
- </div>
- </div>
+ <a class="floating-new-project" href="/new" aria-label="New Project" title="New Project">+</a>
<div class="sticky-index-search">
<div class="sticky-index-search-inner">