Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update templates with viewport meta tag

Browse source 
This addition helps ensure proper rendering and
responsiveness of the webpage across
different devices and screen sizes.
This commit is contained in:
James Musselman 2023-11-30 03:23:38 -06:00
parent de49f8fbc7
commit bcc9135851
4 changed files with 117 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

198
templates/edit.html
View file

@ -3,11 +3,14 @@
<head> <head>
<title>Edit File</title> <title>Edit File</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <link rel="stylesheet" type="text/css"
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
</script> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<script src="/static/build/editor.js" type="text/javascript"></script> <script src="/static/build/editor.js" type="text/javascript"></script>
<style> <style>
@ -40,26 +43,37 @@
<div class="d-flex justify-content-between bg-light-grey border-bottom p-2"> <div class="d-flex justify-content-between bg-light-grey border-bottom p-2">
<div> <div>
<div class="dropdown d-inline-block"> <div class="dropdown d-inline-block">
<button class="btn dropdown-toggle" type="button" id="headingDropdown" data-bs-toggle="dropdown" <button class="btn dropdown-toggle" type="button" id="headingDropdown"
aria-expanded="false"> data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-heading"></i> <i class="fas fa-heading"></i>
</button> </button>
<ul class="dropdown-menu" aria-labelledby="headingDropdown"> <ul class="dropdown-menu" aria-labelledby="headingDropdown">
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h1')">Heading 1</button></li> <li><button class="dropdown-item" type="button"
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h2')">Heading 2</button></li> onclick="formatText('heading', 'h1')">Heading 1</button></li>
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h3')">Heading 3</button></li> <li><button class="dropdown-item" type="button"
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h4')">Heading 4</button></li> onclick="formatText('heading', 'h2')">Heading 2</button></li>
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h5')">Heading 5</button></li> <li><button class="dropdown-item" type="button"
<li><button class="dropdown-item" type="button" onclick="formatText('heading', 'h6')">Heading 6</button></li> onclick="formatText('heading', 'h3')">Heading 3</button></li>
<li><button class="dropdown-item" type="button"
onclick="formatText('heading', 'h4')">Heading 4</button></li>
<li><button class="dropdown-item" type="button"
onclick="formatText('heading', 'h5')">Heading 5</button></li>
<li><button class="dropdown-item" type="button"
onclick="formatText('heading', 'h6')">Heading 6</button></li>
</ul> </ul>
</div> </div>
<button type="button" class="btn" onclick="formatText('bold')" aria-label="Bold"><i class="fas fa-bold"></i></button> <button type="button" class="btn" onclick="formatText('bold')" aria-label="Bold"><i
<button type="button" class="btn " onclick="formatText('italic')"><i class="fas fa-italic"></i></button> class="fas fa-bold"></i></button>
<button type="button" class="btn " onclick="formatText('underline')"><i class="fas fa-underline"></i></button> <button type="button" class="btn " onclick="formatText('italic')"><i
<button type="button" class="btn " onclick="formatText('strikeThrough')"><i class="fas fa-strikethrough"></i></button> class="fas fa-italic"></i></button>
<button type="button" class="btn " onclick="formatText('underline')"><i
class="fas fa-underline"></i></button>
<button type="button" class="btn " onclick="formatText('strikeThrough')"><i
class="fas fa-strikethrough"></i></button>
<button type="button" class="btn " onclick="undo()"><i class="fas fa-undo"></i></button> <button type="button" class="btn " onclick="undo()"><i class="fas fa-undo"></i></button>
<button type="button" class="btn " onclick="redo()"><i class="fas fa-redo"></i></button> <button type="button" class="btn " onclick="redo()"><i class="fas fa-redo"></i></button>
<button type="button" class="btn " onclick="formatText('removeFormat')"><i class="fas fa-eraser"></i></button> <button type="button" class="btn " onclick="formatText('removeFormat')"><i
class="fas fa-eraser"></i></button>
</div> </div>
<!-- First few buttons visible on small screens --> <!-- First few buttons visible on small screens -->
@ -67,19 +81,22 @@
<button class="btn " onclick="addTable()"><i class="fas fa-table" disabled></i></button> <button class="btn " onclick="addTable()"><i class="fas fa-table" disabled></i></button>
<button class="btn " onclick="addVideo()"><i class="fas fa-video"></i></button> <button class="btn " onclick="addVideo()"><i class="fas fa-video"></i></button>
<button type="button" class="btn " onclick="formatText('insertUnorderedList')"><i class="fas fa-list-ul"></i></button> <button type="button" class="btn " onclick="formatText('insertUnorderedList')"><i
<button type="button" class="btn " onclick="formatText('insertOrderedList')"><i class="fas fa-list-ol"></i></button> class="fas fa-list-ul"></i></button>
<button type="button" class="btn " onclick="formatText('insertOrderedList')"><i
class="fas fa-list-ol"></i></button>
<button type="button" class="btn " onclick="insertImage()"><i class="fas fa-image"></i></button> <button type="button" class="btn " onclick="insertImage()"><i class="fas fa-image"></i></button>
<!--- <button type="button" class="btn " onclick="formatText('formatBlock', '<blockquote>')" disabled><i class="fas fa-quote-right"></i></button> <!--- <button type="button" class="btn " onclick="formatText('formatBlock', '<blockquote>')" disabled><i class="fas fa-quote-right"></i></button>
<button type="button" class="btn " onclick="formatText('formatBlock', '<code>')" disabled><i class="fas fa-code"></i></button> --> <button type="button" class="btn " onclick="formatText('formatBlock', '<code>')" disabled><i class="fas fa-code"></i></button> -->
<button type="button" class="btn " onclick="formatText('insertHorizontalRule')"><i class="fas fa-grip-lines"></i></button> <button type="button" class="btn " onclick="formatText('insertHorizontalRule')"><i
class="fas fa-grip-lines"></i></button>
<button class="btn " onclick="insertLink()"><i class="fas fa-link"></i></button> <button class="btn " onclick="insertLink()"><i class="fas fa-link"></i></button>
</div> </div>
<!-- Dropdown with remaining buttons on small screens --> <!-- Dropdown with remaining buttons on small screens -->
<div class="dropdown position-relative d-md-none"> <div class="dropdown position-relative d-md-none">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton"
aria-expanded="false"> data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
@ -87,15 +104,20 @@
<li><button class="dropdown-item" type="button" onclick="addVideo()">Add Video</button></li> <li><button class="dropdown-item" type="button" onclick="addVideo()">Add Video</button></li>
<li><button class="dropdown-item" type="button" <li><button class="dropdown-item" type="button"
onclick="formatText('insertUnorderedList')">Insert Unordered List</button></li> onclick="formatText('insertUnorderedList')">Insert Unordered List</button></li>
<li><button class="dropdown-item" type="button" onclick="formatText('insertOrderedList')">Insert Ordered List</button></li> <li><button class="dropdown-item" type="button"
<li><button class="dropdown-item" type="button" onclick="insertImage()">Insert Image</button></li> onclick="formatText('insertOrderedList')">Insert Ordered List</button></li>
<li><button class="dropdown-item" type="button" onclick="formatText('insertHorizontalRule')">Insert Horizontal Rule</button></li> <li><button class="dropdown-item" type="button" onclick="insertImage()">Insert
<li><button class="dropdown-item" type="button" onclick="insertLink()">Insert Link</button></li> Image</button></li>
<li><button class="dropdown-item" type="button"
onclick="formatText('insertHorizontalRule')">Insert Horizontal Rule</button></li>
<li><button class="dropdown-item" type="button" onclick="insertLink()">Insert Link</button>
</li>
</ul> </ul>
</div> </div>
<div> <div>
<button class="btn " onclick="confirmOverwrite()"> <i class="fa fa-notes-medical"></i> Templates</i></button> <button class="btn " onclick="confirmOverwrite()"> <i class="fa fa-notes-medical"></i>
Templates</i></button>
<button class="btn " onclick="saveForm()"><i class="fas fa-save"></i></button> <button class="btn " onclick="saveForm()"><i class="fas fa-save"></i></button>
<button class="btn " onclick="confirmDeletion()"><i class="fas fa-trash"></i></button> <button class="btn " onclick="confirmDeletion()"><i class="fas fa-trash"></i></button>
</div> </div>
@ -103,77 +125,77 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<form id="save-form" method="post" action="/save?filename={{.Filename}}"> <form id="save-form" method="post" action="/save?filename={{.Filename}}">
<textarea hidden="true" id="editor-form-content" name="editor"></textarea> <textarea hidden="true" id="editor-form-content" name="editor"></textarea>
<input type="hidden" id="filename-form-content" name="filename" value="{{.Filename}}"> <input type="hidden" id="filename-form-content" name="filename" value="{{.Filename}}">
<div class="editor shadow-none" id="editor" role="textbox" contenteditable="true" <div class="editor shadow-none" id="editor" role="textbox" contenteditable="true"
data-placeholder="The page lays unwritten...."> data-placeholder="The page lays unwritten....">
{{.FileContent}} {{.FileContent}}
</div> </div>
</form> </form>
<div id="tableModal" class="modal"> <div id="tableModal" class="modal">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Add Table</h5> <h5 class="modal-title">Add Table</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-row"> <div class="form-row">
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<label for="tableRows">Rows</label> <label for="tableRows">Rows</label>
<input type="number" class="form-control" id="tableRows" value="3" min="2"> <input type="number" class="form-control" id="tableRows" value="3" min="2">
</div> </div>
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<label for="tableColumns">Columns</label> <label for="tableColumns">Columns</label>
<input type="number" class="form-control" id="tableColumns" value="3" min="2"> <input type="number" class="form-control" id="tableColumns" value="3" min="2">
</div>
</div> </div>
</div> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="document.getElementById('tableModal').style.display = 'none'">Cancel</button>
onclick="document.getElementById('tableModal').style.display = 'none'">Cancel</button> <button type="button" class="btn btn-primary" onclick="createTable()">Create Table</button>
<button type="button" class="btn btn-primary" onclick="createTable()">Create Table</button> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script> <script>
// The deletion is kept here as I (Musselman) have not found a way to implement the {{.Filename}} into the javascript. // The deletion is kept here as I (Musselman) have not found a way to implement the {{.Filename}} into the javascript.
function confirmDeletion() { function confirmDeletion() {
if (confirm("Are you sure you want to delete {{.Filename}}?")) { if (confirm("Are you sure you want to delete {{.Filename}}?")) {
const filename = "{{.Filename}}"; const filename = "{{.Filename}}";
deleteFile(filename); deleteFile(filename);
}
} }
}
function deleteFile(filename) { function deleteFile(filename) {
// Send a POST request to the server to delete the specified file // Send a POST request to the server to delete the specified file
fetch("/delete", { fetch("/delete", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ files: [filename] }), body: JSON.stringify({ files: [filename] }),
})
.then(response => {
if (response.ok) {
window.location.replace("/home");
} else {
// Handle the error, e.g., display an error message
console.error("Error deleting file");
}
}) })
.catch(error => { .then(response => {
console.error("Error deleting file:", error); if (response.ok) {
}); window.location.replace("/home");
} } else {
</script> // Handle the error, e.g., display an error message
<script src="/static/build/darkmode.js" type="text/javascript"></script> console.error("Error deleting file");
}
})
.catch(error => {
console.error("Error deleting file:", error);
});
}
</script>
<script src="/static/build/darkmode.js" type="text/javascript"></script>
</body> </body>
</html> </html>

2
templates/index.html
View file

@ -5,6 +5,8 @@
<title>Notatio</title> <title>Notatio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS for spinner --> <!-- Font Awesome CSS for spinner -->
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"

3
templates/list.html
View file

@ -8,6 +8,9 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/build/list.js" type="text/javascript"></script> <script src="/static/build/list.js" type="text/javascript"></script>
<script src="/static/build/darkmode.js" type="text/javascript"></script> <script src="/static/build/darkmode.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>

2
templates/newuser.html
View file

@ -8,6 +8,8 @@
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>