add styles and js
This commit is contained in:
parent
6295fc757d
commit
cfba193aac
121
public/css/style.css
Normal file
121
public/css/style.css
Normal file
@ -0,0 +1,121 @@
|
||||
/* Style for the 3-column layout */
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
max-width: 1020px;
|
||||
/* Adjust to your desired width */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.top-tab {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Style for hamburger menu */
|
||||
.hamburger {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px 0 15px 15px;
|
||||
border: black solid 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.fa-check {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.fa-bars:before,
|
||||
.fa-navicon:before {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
ul.menu-open {
|
||||
display: block !important;
|
||||
background-color: #f9c74d;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.ref-tab {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ref-tab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ref-tab ul li {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.ref {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.ref > div#ref {
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: black solid 1px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.notes {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
textarea#notes {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#refQuery {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
div#refQuery #search {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
1
public/css/style.css.map
Normal file
1
public/css/style.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACCJ;;ADEA;EACI,YAAA;EACA,WAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,wBAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,wCAAA;ACAJ;;ADGA;EACI,YAAA;ACAJ;;ADGA;;EAEI,YAAA;ACAJ;;ADIA;EACI,yBAAA;EACA,yBAAA;EACA,aAAA;EACA,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,eAAA;ACDJ;;ADWA;EACI,WAAA;ACRJ;;ADWA;EACI,aAAA;EACA,2BAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;ACRJ;;ADWA;EACI,SAAA;EACA,UAAA;ACRJ;;ADWA;EACI,gBAAA;EACA,qBAAA;ACRJ;;ADWA;EACI,UAAA;ACRJ;;ADWA;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACRJ;;ADWA;EACI,UAAA;ACRJ;;ADWA;EACI,WAAA;EACA,YAAA;ACRJ;;ADWA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;ACRJ;;ADWA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACRJ","file":"style.css"}
|
||||
1
public/css/style.min.css
vendored
Normal file
1
public/css/style.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
body{margin:0}.container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.top-tab{height:50px;width:100%}.hamburger{display:flex;justify-content:space-between;align-items:center;margin:15px 0 15px 15px;border:#000 solid 1px;cursor:pointer;border-radius:5px;width:20px;height:20px;padding:5px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.fa-bars:before,.fa-navicon:before{padding:3px}ul.menu-open{display:block !important;background-color:#f9c74d;padding:10px;z-index:100;list-style:none;list-style-type:none;position:fixed}.ref-tab{width:60px}.tab button{display:flex;justify-content:flex-start;align-items:center;height:100px;width:100%;cursor:pointer;text-align:center}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.ref{width:35%}.ref>div#ref{overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}.notes{width:55%}textarea#notes{width:100%;height:100%}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5)}div#refQuery #search{border:none;border-radius:5px;padding:10px 20px;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f4;width:150px;height:25px;cursor:pointer}/*# sourceMappingURL=style.min.css.map */
|
||||
1
public/css/style.min.css.map
Normal file
1
public/css/style.min.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAGJ,WACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,WAAA,CACA,UAAA,CAKJ,WACI,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,uBAAA,CACA,qBAAA,CACA,cAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,WAAA,CACA,mCAAA,CAGJ,mCAEI,WAAA,CAIJ,aACI,wBAAA,CACA,wBAAA,CACA,YAAA,CACA,WAAA,CACA,eAAA,CACA,oBAAA,CACA,cAAA,CAUJ,SACI,UAAA,CAGJ,YACI,YAAA,CACA,0BAAA,CACA,kBAAA,CACA,YAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,SAAA,CAGJ,aACI,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA","file":"style.min.css"}
|
||||
130
public/css/style.scss
Normal file
130
public/css/style.scss
Normal file
@ -0,0 +1,130 @@
|
||||
/* Style for the 3-column layout */
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
max-width: 1020px;
|
||||
/* Adjust to your desired width */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.top-tab {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Style for hamburger menu */
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px 0 15px 15px;
|
||||
border: black solid 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.fa-check {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.fa-bars:before,
|
||||
.fa-navicon:before {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
// Display the menu links
|
||||
ul.menu-open {
|
||||
display: block !important;
|
||||
background-color: #f9c74d;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.ref-tab,
|
||||
.ref,
|
||||
.notes {
|
||||
// float: left;
|
||||
// padding: 20px;
|
||||
}
|
||||
|
||||
.ref-tab {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ref-tab ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ref-tab ul li {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.ref {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.ref>div#ref {
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: black solid 1px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.notes {
|
||||
width: 55%
|
||||
}
|
||||
|
||||
textarea#notes {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div#refQuery {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
div#refQuery #search {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
235
public/js/script.js
Normal file
235
public/js/script.js
Normal file
@ -0,0 +1,235 @@
|
||||
// Get the link element
|
||||
const link = document.querySelector('.hamburger');
|
||||
var converter = null;
|
||||
var references = {};
|
||||
|
||||
// Add an event listener to the link
|
||||
if (link) {
|
||||
link.addEventListener('click', function () {
|
||||
// Toggle the class of the link to open or close the menu
|
||||
document.querySelector('ul.hamburger-list').classList.toggle('menu-open');
|
||||
});
|
||||
}
|
||||
|
||||
function setHeight() {
|
||||
converter = new showdown.Converter();
|
||||
converter.setFlavor('github');
|
||||
|
||||
body = document.querySelector('body');
|
||||
body.style.height = window.innerHeight + 'px';
|
||||
|
||||
cont = document.querySelector('.container');
|
||||
cont.style.height = (window.innerHeight - 50) + 'px';
|
||||
|
||||
tabs = document.querySelector('.ref-tab');
|
||||
tabs.style.height = (window.innerHeight - 60) + 'px';
|
||||
|
||||
ref = document.querySelector('.ref');
|
||||
ref.style.height = (window.innerHeight - 125) + 'px';
|
||||
|
||||
notes = document.querySelector('.notes');
|
||||
notes.style.height = (window.innerHeight - 150) + 'px';
|
||||
|
||||
setTimeout(saveNote, 5000);
|
||||
}
|
||||
|
||||
function newNote() {
|
||||
notes = document.querySelector('.notes');
|
||||
notes.textContent = '';
|
||||
}
|
||||
|
||||
function openNote() {
|
||||
|
||||
}
|
||||
|
||||
function saveNote(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if(!validateNote()) {
|
||||
setTimeout(saveNote, 5000);
|
||||
return;
|
||||
}
|
||||
fetch('/index.php/save-note', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: {
|
||||
title: document.querySelector('#noteTitle').value,
|
||||
speaker: document.querySelector('#speaker').value,
|
||||
series: document.querySelector('#series').value,
|
||||
note: document.querySelector('#notes').textContent
|
||||
}
|
||||
.then(response => response.text)
|
||||
.then(results => {
|
||||
results = JSON.parse(results);
|
||||
alert(results);
|
||||
showSave();
|
||||
})
|
||||
});
|
||||
setTimeout(saveNote, 5000);
|
||||
}
|
||||
|
||||
function validateNote() {
|
||||
const note = document.querySelector('#notes');
|
||||
const speaker = document.querySelector('#speaker');
|
||||
const series = document.querySelector('#series');
|
||||
const title = document.querySelector('#noteTitle');
|
||||
|
||||
if(!title.value.length) {return false;}
|
||||
|
||||
if(!speaker.value) {return false;}
|
||||
|
||||
if(!series.value) {return false;}
|
||||
|
||||
if(!note.textContent.length) {return false;}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function showSave() {// Get the element that will display the checkmark
|
||||
var checkmark = document.getElementById("save-check");
|
||||
|
||||
// Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
|
||||
setInterval(function() {
|
||||
// Increment the opacity of the checkmark by 0.01 each time
|
||||
checkmark.style.opacity += 0.1;
|
||||
|
||||
// If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
|
||||
if (checkmark.style.opacity >= 1) {
|
||||
checkmark.style.opacity = 0;
|
||||
clearInterval(setInterval);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to discard the note by clearing all input fields and closing the menu.
|
||||
*/
|
||||
function discardNote() {
|
||||
document.querySelector('#noteTitle').value = '';
|
||||
document.querySelector('#speaker').value = 0;
|
||||
document.querySelector('#series').value = 0;
|
||||
document.querySelector('#template').value = 0;
|
||||
document.querySelector('#notes').value = '';
|
||||
|
||||
openRef();
|
||||
}
|
||||
|
||||
function openRef() {
|
||||
refQuery = document.querySelector('#refQuery');
|
||||
if (refQuery.style.display === 'block') {
|
||||
refQuery.style.display = 'none';
|
||||
} else {
|
||||
refQuery.style.display = 'block';
|
||||
}
|
||||
|
||||
menu = document.querySelector('ul.hamburger-list');
|
||||
refQuery.style.left = (menu.clientLeft + menu.clientWidth) + 'px';
|
||||
refQuery.style.top = (menu.clientTop + menu.clientHeight) + 'px';
|
||||
}
|
||||
|
||||
function queryRef() {
|
||||
const input = document.querySelector('#refQuery #search');
|
||||
fetch('/index.php/retrieve-reference', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'plain/text'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
'reference': input.value
|
||||
})
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(results => {
|
||||
results = JSON.parse(results);
|
||||
|
||||
const list = document.querySelector('#ref-list');
|
||||
var newList = document.createElement('li');
|
||||
newList.className = 'tab';
|
||||
var button = document.createElement('button');
|
||||
button.innerText = results.title;
|
||||
button.onclick = function () {
|
||||
document.querySelector('#ref').innerHTML = converter.makeHtml(references[button.innerText]);
|
||||
}
|
||||
button.ondblclick = function () {
|
||||
document.querySelector('#ref').innerHTML = '';
|
||||
delete references[results.title];
|
||||
var list = button.parentElement;
|
||||
list.remove();
|
||||
}
|
||||
newList.appendChild(button);
|
||||
list.appendChild(newList);
|
||||
|
||||
const ref = document.querySelector('#ref');
|
||||
ref.innerHTML = converter.makeHtml(results.text);
|
||||
|
||||
references[results.title] = results.text;
|
||||
|
||||
input.value = '';
|
||||
openRef();
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
|
||||
function retrieveTemplate(orig, dest) {
|
||||
const temp = document.querySelector('#' + orig);
|
||||
if (temp.value == '0') {
|
||||
document.querySelector('#' + dest).value = '';
|
||||
return;
|
||||
}
|
||||
fetch('/index.php/retrieve-template', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'plain/text'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
'template': temp.value
|
||||
})
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(results => {
|
||||
const div = document.querySelector('#' + dest);
|
||||
div.value = results;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the template by sending a POST request to the server with template data.
|
||||
*/
|
||||
function saveTemplate() {
|
||||
fetch('/index.php/save-template', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'plain/text'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
'template_id': document.querySelector('#template_id').value,
|
||||
'template_name': document.querySelector('#template_name').value,
|
||||
'template_value': document.querySelector('#template_value').value,
|
||||
})
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(results => {
|
||||
alert(results);
|
||||
});
|
||||
}
|
||||
|
||||
function retrieveSeries() {
|
||||
|
||||
}
|
||||
|
||||
function saveSeries() {
|
||||
|
||||
}
|
||||
|
||||
function retrieveSpeaker() {
|
||||
|
||||
}
|
||||
|
||||
function saveSpeaker() {
|
||||
|
||||
}
|
||||
|
||||
function referenceEditor() {
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user