Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

set up wireframe side panel

Browse source
This commit is contained in:
Nickiel12 2024-01-26 12:15:30 -08:00
parent 71caaa8230
commit 6d547e0585
3 changed files with 95 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/dataendpoints.templ
View file

@ -58,12 +58,36 @@ templ account_summary_rows(accounts *[]types.TwoIntsItem){
}
templ transaction_quick_access() {
<div class="c-base h-100">
<p> Hello world </p>
<div id="transaction-quick-access-panel">
<div class="t-header">
<button
class="borderless-btn btn-sm mx-auto c-green ch-teal"
style="color: var(--pf-base);"
>
<i class="" data-feather="plus"></i>
Add New
</button>
<div class="m-auto d-flex">
<input id="show-pending-transactions" type="checkbox"></input>
<label for="show-pending-transactions">
Show Pending
</label>
</div>
</div>
<div class="t-list">
<div class="tab-div">
<button id="open-draft">
<i data-feather="file-plus"></i>
</button>
</div>
<div class="t-list-container">
</div>
</div>
</div>
}
templ right_panel_quick_access() {
<div class="c-base h-100">
<div id="quick-access-panel">
</div>
}

68
web/sass/nav.scss
View file

@ -48,3 +48,71 @@ nav {
}
}
#transaction-quick-access-panel {
height: 100%;
display:flex;
flex-direction: column;
.t-header {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
input {
margin-top: auto;
margin-bottom: auto;
margin-left: 5px;
margin-right: 8px;
border-radius: 0.25rem;
border: 1px solid var(--#{$prefix}-text);
width: 1.25em;
height: 1.25em;
}
}
.t-list {
display: flex;
flex-grow: 1;
margin-left: 10px;
margin-right: 10px;
.tab-div {
height: 100%;
width: 50px;
display: flex;
#open-draft {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
background-color: var(--#{$prefix}-base);
color: var(--#{$prefix}-text);
border: 2px solid var(--#{$prefix}-overlay1);
border-right-color: transparent;
margin-top: 40px;
margin-left: auto;
margin-right: -3px;
height: 50px;
width: 50px;
display:flex;
z-index: 1;
svg {
margin: auto;
}
}
}
.t-list-container {
overflow-y: scroll;
border: 2px solid var(--#{$prefix}-surface1);
margin: 5px;
margin-left: 0px;
background-color: var(--#{$prefix}-base);
height: 100%;
flex-grow: 1;
border-radius: $border-radius;
}
}
}
#quick-access-panel {
background-color: var(--#{$prefix}-base);
border-radius: $border-radius;
height: 100%;
border: 2px solid var(--#{$prefix}-surface1);
}

8
web/transactions.templ
View file

@ -59,14 +59,6 @@ templ transactions_page(userID int, accounts *[]string) {
<button class="ms-5 borderless-btn">
<span class="my-auto mx-3">No Filters</span>
</button>
<button
class="borderless-btn ms-auto me-3 c-green ch-teal"
style="color: var(--pf-base);"
>
<i class="" data-feather="plus"></i>
Add New
</button>
</div>
<div class="row mt-5">