magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better grid layout

Browse source
This commit is contained in:
Magnus Åhall 2025-02-09 11:50:11 +01:00
parent e276e6d156
commit bb6279c55a
3 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/css/notes2.css
View file

@ -6,6 +6,7 @@ html {
display: grid;
grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: 64px 56px 48px min-content 1fr;
}
@media only screen and (max-width: 600px) {
#notes2 {
@ -77,6 +78,7 @@ html {
#crumbs {
grid-area: crumbs;
display: grid;
align-items: center;
justify-items: center;
margin: 16px;
}
@ -84,19 +86,14 @@ html {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
}
#sync-progress.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
#sync-progress progress {
width: calc(100% - 16px);
width: 100%;
padding: 0 7px;
max-width: 900px;
height: 16px;
border-radius: 4px;
}
@ -121,11 +118,18 @@ html {
border-radius: 4px;
}
#sync-progress .count {
width: min-content;
white-space: nowrap;
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
#sync-progress.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
.crumbs {
display: flex;
flex-wrap: wrap;

5
static/js/notes2.mjs
View file

@ -29,10 +29,7 @@ export class Notes2 extends Component {
return html`
<${Tree} app=${this} key=${treeKey} startNode=${startNode} />
<div id="nodeui">
<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
</div>
<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
`
}//}}}
getStartNode() {//{{{

34
static/less/notes2.less
View file

@ -19,6 +19,13 @@ html {
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
64px
56px
48px
min-content
1fr;
@media only screen and (max-width: 600px) {
grid-template-areas:
@ -46,6 +53,10 @@ html {
color: #ddd;
z-index: 100; // Over crumbs shadow
&:focus {
//background-color: #f0f;
}
#logo {
display: grid;
position: relative;
@ -114,6 +125,7 @@ html {
#crumbs {
grid-area: crumbs;
display: grid;
align-items: center;
justify-items: center;
margin: 16px;
}
@ -122,20 +134,15 @@ html {
grid-area: sync;
display: grid;
justify-items: center;
justify-self: center;
width: 100%;
max-width: 900px;
height: 56px;
position: relative;
&.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
progress {
width: calc(100% - 16px);
width: 100%;
padding: 0 7px;
max-width: 900px;
height: 16px;
border-radius: 4px;
}
@ -166,11 +173,20 @@ html {
}
.count {
width: min-content;
white-space: nowrap;
margin-top: 0px;
color: #888;
position: absolute;
top: 22px;
}
&.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear;
}
}
.crumbs {