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

3
static/js/notes2.mjs
View file

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

34
static/less/notes2.less
View file

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