Ailur
/
burgernotes-client-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

in-progress revamp of the entire UI

This commit is contained in:
maaa 2024-06-22 01:27:04 +02:00
parent e6e6ce6f71
commit 7a7cbe65f3
4 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/index.html
View File

@ -20,7 +20,6 @@
</div>
<div class="bottomBar">
<button id="removeBox" class="removeButton"></button>
<button onclick="toggleMarkdown()" class="markdownButton"></button>
<button id="wordCountBox">0 words</button>
<div class="textManipulator">
@ -31,9 +30,14 @@
</div>
<div id="notesBar" class="notesBar">
<button id="newNote" class="newNote">
<button id="newNote" class="newNote" style="margin-left: 5px;">
<div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg"></div>
<div class="vcenter">New note</div>
</button>
<button class="newNote" style="margin-left: 37.5px; background-color: var(--bar) !important;">
</button>
<button id="removeBox" class="newNote">
<div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/delete.svg"></div>
</button>
<div id="notesDiv" class="notesDiv">
<button class="loadingStuff" id="loadingStuff"></button>

48
static/css/style.css
View File

@ -4,11 +4,12 @@
:root {
--contrast: #eee;
--contrast2: #fff;
--bar: #f4f4f4;
--bar: #FAFAFA;
--editor: #ffffff;
--text-color: #000000;
--border-color: #dadada;
--border-color: #dcdcdc;
--theme-color: #1c71d8;
--note-theme-color: #CDE1EC;
--hover-theme-color: #4990e7;
--nonimporant-theme-color: #EBEBEB;
--hover-nonimportant-theme-color: #dbdbdb;
@ -18,9 +19,11 @@
--exit-color: #e9e9e9;
--session-color: #f4f4f4;
--note-button: #ffffff;
--note-button-text-color: #ffffff;
--note-button-hover: #eeeeee;
--note-button-text-color: #000;
--unselected-note-button-text-color: #000000;
--option-background: #ffffff;
--icon-button-hover: #ececec;
--invertdm: 0%;
}
@ -35,6 +38,7 @@
--text-color: #ffffff;
--border-color: #393b3d;
--theme-color: #3584e4;
--note-theme-color: #293B53;
--hover-theme-color: #4990e7;
--nonimporant-theme-color: #4A4A4A;
--hover-nonimportant-theme-color: #595959;
@ -44,9 +48,11 @@
--exit-color: #454649;
--session-color: #2d2f31;
--note-button: #202124;
--note-button-hover: #2a2c2f;
--note-button-text-color: #ffffff;
--unselected-note-button-text-color: #ffffff;
--option-background: #202124;
--icon-button-hover: #333333;
--invertdm: 100%;
}
@ -285,15 +291,13 @@ body {
.notesBar {
position: fixed;
width: 180px;
top: 50px;
height: calc(100% - 50px - 30px - 1px);
height: calc(100%);
background-color: var(--bar);
border: solid;
border-color: var(--border-color);
border-width: 0;
border-right-width: 1px;
border-top-width: 1px;
}
.notesDiv {
@ -308,11 +312,11 @@ body {
padding: 10px;
margin: 5px;
margin-bottom: 0;
background-color: var(--note-button);
background-color: var(--bar);
color: var(--unselected-note-button-text-color);
border-radius: 8px;
border: solid;
border: none;
border-color: var(--border-color);
border-width: 1px;
font-size: 15px;
@ -321,6 +325,12 @@ body {
cursor: pointer;
white-space: nowrap;
overflow-x: hidden;
transition: 0.125s;
}
.notesBar .noteButton:hover {
background-color: var(--note-button-hover);
}
.notesBar .loadingStuff {
@ -343,29 +353,35 @@ body {
}
.notesBar .selected {
background-color: var(--theme-color) !important;
background-color: var(--note-theme-color) !important;
border: none;
color: var(--note-button-text-color);
}
.notesBar .selected:hover {
background-color: var(--note-theme-color) !important;
}
.notesBar .newNote {
height: 41px;
width: 41px;
line-height: 41px;
text-align: left;
font-size: 16px;
cursor: pointer;
display: flex;
margin-top: 5px;
background: var(--note-button);
background-color: var(--bar);
border-radius: 8px;
border: var(--border-color) solid 1px;
width: calc(100% - 7px - 7px - 3.5px);
margin-left: 5px;
border: none;
transition: 0.125s;
}
.notesBar .newNote:hover {
background-color: var(--icon-button-hover);
}
.notesBar .newNote img {
height: 32px;
padding-right: 5px;
height: 20px;
filter: invert(var(--invertdm));
}

3
static/svg/add.svg
View File

@ -1 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z"/></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 7 1 v 6 h -6 v 2 h 6 v 6 h 2 v -6 h 6 v -2 h -6 v -6 z m 0 0" fill="#222222"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 B

After

Width:  |  Height:  |  Size: 221 B

11
static/svg/delete.svg
View File

@ -1 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
<g fill="#2e3436">
<path d="m 1 3 h 14 c 0.550781 0 1 0.449219 1 1 s -0.449219 1 -1 1 h -14 c -0.550781 0 -1 -0.449219 -1 -1 s 0.449219 -1 1 -1 z m 0 0"/>
<path d="m 4 4 v -1.5 c 0 -1.386719 1.113281 -2.5 2.5 -2.5 h 2.980469 c 1.382812 0 2.5 1.113281 2.5 2.5 v 1.5 h -2 v -1.5 c 0 -0.269531 -0.230469 -0.5 -0.5 -0.5 h -2.980469 c -0.269531 0 -0.5 0.230469 -0.5 0.5 v 1.5 z m 0 0"/>
<path d="m 4 4 v 9 c 0 0.546875 0.453125 1 1 1 h 6 c 0.546875 0 1 -0.453125 1 -1 v -9 h 2 v 9 c 0 1.660156 -1.339844 3 -3 3 h -6 c -1.660156 0 -3 -1.339844 -3 -3 v -9 z m 0 0"/>
<path d="m 7 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
<path d="m 10 7 v 5 c 0 0.277344 -0.222656 0.5 -0.5 0.5 s -0.5 -0.222656 -0.5 -0.5 v -5 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 s 0.5 0.222656 0.5 0.5 z m 0 0"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 1.0 KiB