mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-10-14 19:44:21 +00:00
Setup basic add page visual and form.
This commit is contained in:
kor
parent
f478a00897
commit
bf3c44e567
@ -43,6 +43,8 @@
|
||||
--size-font-title: 1em;
|
||||
--size-font-body: 0.8em;
|
||||
--type-icon-size: 24px; /*font size of type icon/count*/
|
||||
|
||||
--animation-time: 200ms;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -53,6 +55,7 @@ html {
|
||||
background: var(--color-main-bg-i);
|
||||
padding: 0em;
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
body {
|
||||
padding: 0em;
|
||||
@ -96,6 +99,7 @@ body {
|
||||
margin: 0px auto;
|
||||
width: 100%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
.menu-item .count {
|
||||
padding-right: calc(var(--menu-item-elem-sep) / 2);
|
||||
@ -150,6 +154,46 @@ body {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* PAGE */
|
||||
.page-overlay {
|
||||
/* visual */
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity var(--animation-time) linear;
|
||||
transition: opacity var(--animation-time) linear;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* position */
|
||||
position: absolute;
|
||||
z-index: -100;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-overlay .content .row {
|
||||
/*float: left;
|
||||
clear: both;*/
|
||||
/*height: 40px;*/
|
||||
}
|
||||
.page-overlay .content .row input {
|
||||
padding: 10px;
|
||||
width: 400px;
|
||||
margin-bottom: 10px;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-menu-item-i);
|
||||
border-radius: var(--size-item-corner);
|
||||
}
|
||||
.page-overlay .content .row input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
opacity: 1;
|
||||
color: var(--color-menu-item-i);
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
.container {
|
||||
background: var(--color-main-bg-i);
|
||||
@ -161,6 +205,9 @@ body {
|
||||
}
|
||||
.grid {
|
||||
margin: var(--size-gutter) auto;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 1000ms linear;
|
||||
transition: opacity 1000ms linear;
|
||||
}
|
||||
.grid:after {
|
||||
/* clearfix */
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<script src="logic/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-overlay" id="overlay"></div>
|
||||
<div class="menu" id="menu"></div>
|
||||
<div class="container" id="container">
|
||||
<div class="grid" id="grid"></div>
|
||||
|
||||
@ -2,6 +2,8 @@ function Main()
|
||||
{
|
||||
this.db = null;
|
||||
this.view = null;
|
||||
this.queryPrev = '';
|
||||
this.queryCur = '';
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
@ -19,11 +21,47 @@ function Main()
|
||||
|
||||
this.load = function(target)
|
||||
{
|
||||
this.queryPrev = this.queryCur;
|
||||
target = target.substr(0,1) == "#" ? target.substr(1,target.length-1) : target;
|
||||
target = target.trim();
|
||||
var entries = this.db.filter(target);
|
||||
this.view.display(entries);
|
||||
this.queryCur = target.trim();
|
||||
|
||||
if (window.location.hash != this.queryCur)
|
||||
{
|
||||
window.location.hash = this.queryCur;
|
||||
}
|
||||
|
||||
if (this.queryCur == 'add')
|
||||
{
|
||||
this.view.add();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.view.display(this.db.filter(this.queryCur));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("hashchange", function() { main.load(window.document.location.hash); });
|
||||
window.addEventListener("hashchange", function() { main.load(window.document.location.hash); });
|
||||
|
||||
document.onkeydown = function(evt)
|
||||
{
|
||||
evt = evt || window.event;
|
||||
var isEscape = false;
|
||||
|
||||
if ("key" in evt)
|
||||
{
|
||||
isEscape = (evt.key == "Escape" || evt.key == "Esc");
|
||||
}
|
||||
else
|
||||
{
|
||||
isEscape = (evt.keyCode == 27);
|
||||
}
|
||||
|
||||
if (isEscape)
|
||||
{
|
||||
if (main.queryCur == 'add')
|
||||
{
|
||||
main.load(main.queryPrev);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,10 +1,15 @@
|
||||
function View()
|
||||
{
|
||||
this.msnry = null;
|
||||
this.overlay = null;
|
||||
this.container = null;
|
||||
this.grid = null;
|
||||
this.menu = null;
|
||||
var parent = this;
|
||||
|
||||
|
||||
// STATE
|
||||
this.enabledOverlay = false;
|
||||
|
||||
const SETTINGS = {
|
||||
STATSNUMTAGS: 5,
|
||||
STATSNUMTYPE: 10,
|
||||
@ -27,8 +32,11 @@ function View()
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
this.overlay = document.getElementById("overlay");
|
||||
this.container = document.getElementById("container");
|
||||
this.grid = document.getElementById("grid");
|
||||
this.menu = document.getElementById("menu");
|
||||
this.setupAdd();
|
||||
|
||||
if (SETTINGS.USEMASONRY)
|
||||
{
|
||||
@ -43,8 +51,75 @@ function View()
|
||||
}
|
||||
}
|
||||
|
||||
this.add = function()
|
||||
{
|
||||
this.setOverlay(true);
|
||||
}
|
||||
|
||||
this.setupAdd = function()
|
||||
{
|
||||
this.overlay.innerHTML = '';
|
||||
content += `<div class="content"><form>`;
|
||||
|
||||
content += this.createFormInput('Title');
|
||||
content += this.createFormInput('Date');
|
||||
content += this.createFormInput('Person');
|
||||
content += this.createFormInput('Source');
|
||||
|
||||
content += this.createFormInput('Project');
|
||||
content += this.createFormInput('Type');
|
||||
content += this.createFormInput('Link');
|
||||
content += this.createFormInput('Tags');
|
||||
content += this.createFormInput('Note');
|
||||
content += this.createFormInput('Quote');
|
||||
content += this.createFormInput('Terms');
|
||||
content += this.createFormInput('Progress');
|
||||
// DONE
|
||||
// REVI
|
||||
|
||||
content += `</form></div>`;
|
||||
this.overlay.innerHTML += content;
|
||||
}
|
||||
|
||||
this.createFormInput = function(id)
|
||||
{
|
||||
return `<div class="row">
|
||||
<div class="input-field">
|
||||
<input placeholder="${id}" id="${id}">
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
this.setOverlay = function(value)
|
||||
{
|
||||
if (value && !this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '1';
|
||||
// overlay.style.visibility = 'hidden';
|
||||
// overlay.style.display = 'none';
|
||||
overlay.style.zIndex = '1000';
|
||||
this.enabledOverlay = true;
|
||||
setTimeout(function()
|
||||
{
|
||||
this.grid.innerHTML = '';
|
||||
this.grid.style.height = 0;
|
||||
}, 200);
|
||||
}
|
||||
else if (!value && this.enabledOverlay)
|
||||
{
|
||||
overlay.style.opacity = '0';
|
||||
setTimeout(function()
|
||||
{
|
||||
overlay.style.zIndex = '-100';
|
||||
}, 200);
|
||||
this.enabledOverlay = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.display = function(db)
|
||||
{
|
||||
this.setOverlay(false);
|
||||
|
||||
// BUILD
|
||||
this.grid.innerHTML = '';
|
||||
this.grid.innerHTML += "<div class='grid-sizer'></div>";
|
||||
@ -302,6 +377,13 @@ function View()
|
||||
{
|
||||
let menuContent = ``;
|
||||
|
||||
// ADD
|
||||
menuContent += `<a href='#add'>`;
|
||||
menuContent += `<div class="menu-item"><b>a</b>dd</div>`;
|
||||
menuContent += `</a>`;
|
||||
|
||||
menuContent += `<div class="menu-spacer"></div>`;
|
||||
|
||||
// TYPE
|
||||
menuContent += `<a href='#'>`;
|
||||
menuContent += `<div class="menu-item">`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user