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

GUI changes

Browse source
This commit is contained in:
Magnus Åhall 2025-04-19 13:41:16 +02:00
parent 4ce8ed9a08
commit 05be8548fe
3 changed files with 83 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

73
static/css/notes2.css
View file

@ -6,7 +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; grid-template-rows: 48px 56px 48px min-content 1fr;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#notes2 { #notes2 {
@ -82,9 +82,43 @@ html {
#crumbs { #crumbs {
grid-area: crumbs; grid-area: crumbs;
display: grid; display: grid;
align-items: center; align-items: start;
justify-items: center; justify-items: center;
margin: 16px; margin: 0px 16px;
}
#crumbs .crumbs {
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#crumbs .crumbs.node-modified {
background-color: #fe5f55;
color: #efede8;
}
#crumbs .crumbs.node-modified .crumb:after {
color: #efede8;
}
#crumbs .crumbs .crumb {
margin-right: 8px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
#crumbs .crumbs .crumb:after {
content: "•";
margin-left: 8px;
color: #fe5f55;
}
#crumbs .crumbs .crumb:last-child {
margin-right: 0;
}
#crumbs .crumbs .crumb:last-child:after {
content: '';
margin-left: 0px;
} }
#sync-progress { #sync-progress {
grid-area: sync; grid-area: sync;
@ -134,39 +168,6 @@ html {
opacity: 0; opacity: 0;
transition: visibility 0s 500ms, opacity 500ms linear; transition: visibility 0s 500ms, opacity 500ms linear;
} }
.crumbs {
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 5px;
}
.crumbs.node-modified {
background-color: #fe5f55;
color: #efede8;
}
.crumbs.node-modified .crumb:after {
color: #efede8;
}
.crumbs .crumb {
margin-right: 8px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.crumbs .crumb:after {
content: "•";
margin-left: 8px;
color: #fe5f55;
}
.crumbs .crumb:last-child {
margin-right: 0;
}
.crumbs .crumb:last-child:after {
content: '';
margin-left: 0px;
}
#name { #name {
color: #333; color: #333;
font-weight: bold; font-weight: bold;

2
static/js/notes2.mjs
View file

@ -99,7 +99,7 @@ class Tree extends Component {
<div id="tree" ref=${this.treeDiv} tabindex="0"> <div id="tree" ref=${this.treeDiv} tabindex="0">
<div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div> <div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div>
<div class="icons"> <div class="icons">
<img src="/images/${_VERSION}/icon_refresh.svg" /> <img src="/images/${_VERSION}/icon_refresh.svg" onclick=${()=>_sync.run()} />
</div> </div>
${renderedTreeTrunk} ${renderedTreeTrunk}
</div>` </div>`

88
static/less/notes2.less
View file

@ -20,7 +20,7 @@ html {
; ;
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-template-rows: grid-template-rows:
64px 48px
56px 56px
48px 48px
min-content min-content
@ -126,9 +126,51 @@ html {
#crumbs { #crumbs {
grid-area: crumbs; grid-area: crumbs;
display: grid; display: grid;
align-items: center; align-items: start;
justify-items: center; justify-items: center;
margin: 16px; margin: 0px 16px;
.crumbs {
background: #e4e4e4;
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
&.node-modified {
background-color: @color1;
color: @color2;
.crumb:after {
color: @color2;
}
}
.crumb {
margin-right: 8px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.crumb:after {
content: "•";
margin-left: 8px;
color: @color1
}
.crumb:last-child {
margin-right: 0;
}
.crumb:last-child:after {
content: '';
margin-left: 0px;
}
}
} }
#sync-progress { #sync-progress {
@ -190,46 +232,6 @@ html {
} }
.crumbs {
background: #e4e4e4;
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 5px;
&.node-modified {
background-color: @color1;
color: @color2;
.crumb:after {
color: @color2;
}
}
.crumb {
margin-right: 8px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.crumb:after {
content: "•";
margin-left: 8px;
color: @color1
}
.crumb:last-child {
margin-right: 0;
}
.crumb:last-child:after {
content: '';
margin-left: 0px;
}
}
#name { #name {
color: #333; color: #333;
font-weight: bold; font-weight: bold;