saad/minimal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Website enhancements.

Browse Source
This commit is contained in:
Ivan Davidov 2019-12-22 14:04:12 +02:00
parent e970112f96
commit 76c6bd9e23
12 changed files with 65 additions and 116 deletions

4
www-react/src/Footer.tsx

@ -4,7 +4,7 @@ import {COPYRIGHT} from './ts/main';
class Footer extends Component {
render() {
return (
<div>
<React.Fragment>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<div className="row">
@ -20,7 +20,7 @@ class Footer extends Component {
</div>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

19
www-react/src/Menu.tsx

@ -2,17 +2,22 @@ import React, {Component} from 'react';
import {loadTab} from './ts/main';
class Menu extends Component {
handleMenu(e: React.MouseEvent, tab: string) {
e.preventDefault();
loadTab(tab);
}
render() {
return (
<div className="row">
<div className="twelve columns" style={{textAlign: "center"}}>
<a id="hm1" className="button button-primary" href="#home" onClick={() => {loadTab("#home"); return false;}}>Home</a>&nbsp;
<a id="hm2" className="button button-primary" href="#changes" onClick={() => {loadTab("#changes"); return false;}}>Changes</a>&nbsp;
<a id="hm3" className="button button-primary" href="#about" onClick={() => {loadTab("#about"); return false;}}>About</a>&nbsp;
<a id="hm4" className="button button-primary" href="#tutorial" onClick={() => {loadTab("#tutorial"); return false;}}>Tutorial</a>&nbsp;
<a id="hm5" className="button button-primary" href="#emulator" onClick={() => {loadTab("#emulator"); return false;}}>Emulator</a>&nbsp;
<a id="hm6" className="button button-primary" href="#download" onClick={() => {loadTab("#download"); return false;}}>Download</a>&nbsp;
<a id="hm7" className="button" target="_blank" rel="noopener noreferrer" href="http://github.com/ivandavidov/minimal">GitHub</a>
<a id="hm1" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#home');}}>Home</a>&nbsp;
<a id="hm2" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#changes');}}>Changes</a>&nbsp;
<a id="hm3" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#about');}}>About</a>&nbsp;
<a id="hm4" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#tutorial');}}>Tutorial</a>&nbsp;
<a id="hm5" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#emulator');}}>Emulator</a>&nbsp;
<a id="hm6" className="button button-primary" href="# " onClick={(e) => {this.handleMenu(e, '#download');}}>Download</a>&nbsp;
<a id="hm7" className="button" target="_blank" rel="noopener noreferrer" href="https://github.com/ivandavidov/minimal">GitHub</a>
</div>
</div>
);

15
www-react/src/sections/changelogs/ChangeLog1.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog1 extends Component {
render() {
return (
<div>
<div id="show1" style={{display: "block"}}>
<strong>28-Jul-2014</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(1, true); return false;}}>show</a>
</div>
<div id="hide1" style={{display: "none"}}>
<strong>28-Jul-2014</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(1, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={1} version="28-Jul-2014" expanded={false} />
<div id="text1" style={{display: "none"}}>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<ul>
@ -24,7 +17,7 @@ class ChangeLog1 extends Component {
</li>
</ul>
</div>
</div>
</React.Fragment>
);
}
}

15
www-react/src/sections/changelogs/ChangeLog2.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog2 extends Component {
render() {
return (
<div>
<div id="show2" style={{display: "block"}}>
<strong>25-Aug-2014</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(2, true); return false;}}>show</a>
</div>
<div id="hide2" style={{display: "none"}}>
<strong>25-Aug-2014</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(2, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={2} version="25-Aug-2014" expanded={false} />
<div id="text2" style={{display: "none"}}>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<ul>
@ -28,7 +21,7 @@ class ChangeLog2 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

15
www-react/src/sections/changelogs/ChangeLog3.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog3 extends Component {
render() {
return (
<div>
<div id="show3" style={{display: "block"}}>
<strong>07-Feb-2015</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(3, true); return false;}}>show</a>
</div>
<div id="hide3" style={{display: "none"}}>
<strong>07-Feb-2015</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(3, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={3} version="07-Feb-2015" expanded={false} />
<div id="text3" style={{display: "none"}}>
<ul>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
@ -22,7 +15,7 @@ class ChangeLog3 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

16
www-react/src/sections/changelogs/ChangeLog4.tsx

@ -1,18 +1,12 @@
import React, {Component} from 'react';
import {logSwap, loadTab} from '../../ts/main';
import LogAction from './LogAction';
import {loadTab} from '../../ts/main'
class ChangeLog4 extends Component {
render() {
return (
<div>
<div id="show4" style={{display: "block"}}>
<strong>14-Sep-2015</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(4, true); return false;}}>show</a>
</div>
<div id="hide4" style={{display: "none"}}>
<strong>14-Sep-2015</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(4, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={4} version="14-Sep-2015" expanded={false} />
<div id="text4" style={{display: "none"}}>
<ul>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
@ -34,7 +28,7 @@ class ChangeLog4 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

15
www-react/src/sections/changelogs/ChangeLog5.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog5 extends Component {
render() {
return (
<div>
<div id="show5" style={{display: "block"}}>
<strong>03-Apr-2016</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(5, true); return false;}}>show</a>
</div>
<div id="hide5" style={{display: "none"}}>
<strong>03-Apr-2016</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(5, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={5} version="03-Apr-2016" expanded={false} />
<div id="text5" style={{display: "none"}}>
<ul>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
@ -37,7 +30,7 @@ class ChangeLog5 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

15
www-react/src/sections/changelogs/ChangeLog6.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog6 extends Component {
render() {
return (
<div>
<div id="show6" style={{display: "block"}}>
<strong>20-Jan-2017</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(6, true); return false;}}>show</a>
</div>
<div id="hide6" style={{display: "none"}}>
<strong>20-Jan-2017</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(6, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={6} version="20-Jan-2017" expanded={false} />
<div id="text6" style={{display: "none"}}>
<ul>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
@ -58,7 +51,7 @@ class ChangeLog6 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

15
www-react/src/sections/changelogs/ChangeLog7.tsx

@ -1,18 +1,11 @@
import React, {Component} from 'react';
import {logSwap} from '../../ts/main';
import LogAction from './LogAction';
class ChangeLog7 extends Component {
render() {
return (
<div>
<div id="show7" style={{display: "block"}}>
<strong>28-Jan-2018</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(7, true); return false;}}>show</a>
</div>
<div id="hide7" style={{display: "none"}}>
<strong>28-Jan-2018</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(7, false); return false;}}>hide</a>
</div>
<React.Fragment>
<LogAction entry={7} version="28-Jan-2018" expanded={false} />
<div id="text7" style={{display: "none"}}>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<ul>
@ -58,7 +51,7 @@ class ChangeLog7 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

6
www-react/src/sections/changelogs/ChangeLog8.tsx

@ -4,8 +4,8 @@ import LogAction from './LogAction';
class ChangeLog8 extends Component {
render() {
return (
<div>
<LogAction entry={8} version="15-Dec-2019" />
<React.Fragment>
<LogAction entry={8} version="15-Dec-2019" expanded={true} />
<div id="text8" style={{display: "block"}}>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
<ul>
@ -45,7 +45,7 @@ class ChangeLog8 extends Component {
</ul>
</div>
<div style={{fontSize: 10 + "%"}}>&nbsp;</div>
</div>
</React.Fragment>
);
}
}

28
www-react/src/sections/changelogs/LogAction.tsx

@ -4,21 +4,31 @@ import {logSwap} from '../../ts/main';
type LogActionProps = {
entry: number,
version: string;
expanded: boolean;
}
type LogActionState = {
show: boolean;
}
class LogAction extends Component<LogActionProps> {
class LogAction extends Component<LogActionProps, LogActionState> {
constructor(props: LogActionProps) {
super(props);
this.state = {show: props.expanded};
}
handleLogEntryChange(e: React.MouseEvent) {
let newState: boolean = !this.state.show;
this.setState({show: newState});
logSwap(this.props.entry, newState);
e.preventDefault();
}
render() {
return (
<React.Fragment>
<div id={"show" + this.props.entry} style={{display: "none"}}>
<strong>{this.props.version}</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(this.props.entry, true); return false;}}>show</a>
</div>
<div id={"hide" + this.props.entry} style={{display: "block"}}>
<strong>{this.props.version}</strong>&nbsp;
<a href="#changes" onClick={() => {logSwap(this.props.entry, false); return false;}}>hide</a>
</div>
<strong>{this.props.version}</strong>&nbsp;
<a href="# " onClick={(e) => {this.handleLogEntryChange(e);}}>{this.state.show ? "hide" : "show"}</a>
</React.Fragment>
)
}

18
www-react/src/ts/main.ts

@ -20,16 +20,6 @@ export function menuSwap(itemIndex: number): void {
export function logSwap(itemIndex: number, show: boolean): void {
for(let i: number = 1; i <= logs; i++) {
let showObj: HTMLElement | null = document.getElementById("show" + i);
if(!showObj) {
throw new Error("logSwap: showObj is null");
}
let hideObj: HTMLElement | null = document.getElementById("hide" + i);
if(!hideObj) {
throw new Error("logSwap: hideObj is null");
}
let textObj: HTMLElement | null = document.getElementById("text" + i);
if(!textObj) {
throw new Error("logSwap: textObj is null");
@ -37,18 +27,10 @@ export function logSwap(itemIndex: number, show: boolean): void {
if(i === itemIndex) {
if(show === true) {
showObj.style.display = "none";
hideObj.style.display = "block";
textObj.style.display = "block";
} else {
showObj.style.display = "block";
hideObj.style.display = "none";
textObj.style.display = "none";
}
} else if(show === true) {
showObj.style.display = "block";
hideObj.style.display = "none";
textObj.style.display = "none";
}
}
}