h/pwnpi-amora
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: make file list more accessible for small screens, adds checkmark for setting file name

Browse Source
This commit is contained in:
Himadri Bhattacharjee
2023-08-12 09:21:46 +05:30
parent b761c66091
commit 4626de8d34
3 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/static/index.html
View File

@@ -11,7 +11,7 @@
<body>
<div class="container">
<div class="files">
<div class="hide files">
</div>
<div class="sidebar">
<div class="documents icon"></div>
@@ -19,7 +19,14 @@
<div class="add icon"></div>
</div>
<div class="editorarea">
<input class="title" placeholder="new file"></input>
<div class="title-bar">
<input class="title" placeholder="new file"></input>
<button class="title-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>
</button>
</div>
<textarea class="editor"></textarea>
</div>
</div>

35
src/static/main.css
View File

@@ -13,8 +13,9 @@ body {
}
.container {
height: calc(70vh);
height: 70vh;
display: flex;
overflow: hidden;
flex-direction: row;
}
@@ -44,8 +45,9 @@ body {
background: #111;
display: flex;
flex-direction: column;
width: 25vw;
width: 0;
overflow: scroll;
flex-shrink: 0;
}
.entry {
@@ -90,23 +92,36 @@ body {
.editorarea {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
}
.editorarea > .title {
padding: 0.5rem 1rem;
.editorarea > .title-bar {
color: #888;
background: #222;
outline: none;
border: none;
border-bottom: #444 solid 0.1rem;
display: flex;
flex-direction: row;
}
.editorarea > .title-bar > .title {
outline: none;
border: none;
background: #222;
flex-grow: 1;
padding: 0.5rem 1rem;
}
.editorarea > .title-bar > .title-btn {
border: none;
background: #222;
padding: 0 0.4rem 0 0.4rem;
}
.editor {
background: #222;
border: none;
resize: none;
min-width: max-content;
height: calc(70vh - 3rem);
padding: 0.5rem;
}
@@ -136,3 +151,9 @@ body {
.editor:focus {
outline: none;
}
@media screen and (orientation: portrait) {
.show {
width: calc(100vw - 3rem);
}
}

8
src/static/script.js
View File

@@ -11,7 +11,8 @@ const logs = document.querySelector('.logs')
const documents_icon = document.querySelector('.documents')
const run_icon = document.querySelector('.run')
const add_icon = document.querySelector('.add')
const title = document.querySelector('.editorarea > .title')
const title = document.querySelector('.editorarea > .title-bar > .title')
const title_button = document.querySelector('.editorarea > .title-bar > .title-btn')
let timer
function doApi(message) {
@@ -74,6 +75,11 @@ title.addEventListener('keypress', (e) => {
}
})
title_button.addEventListener('click', () => {
title.readOnly = true
doApi({"action": "create", "filename": title.value})
});
add_icon.addEventListener('click', () => {
editor.value = ''
title.value = ''