1
Fork 0
mirror of https://github.com/Steffo99/unisteffo.git synced 2024-11-22 16:04:21 +00:00

Update bluelib

This commit is contained in:
Steffo 2020-06-18 17:23:31 +02:00
parent ffd51732bc
commit 3b0e0efc80
Signed by: steffo
GPG key ID: 896A80F55F7C97F0
52 changed files with 43 additions and 860 deletions

View file

@ -0,0 +1,5 @@
@import "../../styles/constants.less";
.tick {
color: @cyan;
}

View file

@ -1,25 +0,0 @@
import style from "./Box.less";
export const BoxColors = Object.freeze({
RED: style.red,
ORANGE: style.orange,
YELLOW: style.yellow,
LIME: style.lime,
CYAN: style.cyan,
BLUE: style.blue,
MAGENTA: style.magenta,
DEFAULT: style.default
})
export default function (props) {
let color = BoxColors.DEFAULT;
if(props.color) {
color = props.color;
}
return (
<div class={style.box + " " + color}>
{props.children}
</div>
);
}

View file

@ -1,49 +0,0 @@
@import "../../styles/constants.less";
.box {
padding: 8px;
border-radius: 4px;
margin: 4px;
height: calc(100% - 8px);
min-width: 256px;
}
.default {
background-color: fade(@fg, 5%);
color: @fg;
}
.red {
background-color: fade(@red, 5%);
color: @red;
}
.orange {
background-color: fade(@orange, 5%);
color: @orange;
}
.yellow {
background-color: fade(@yellow, 5%);
color: @yellow;
}
.lime {
background-color: fade(@lime, 5%);
color: @lime;
}
.cyan {
background-color: fade(@cyan, 5%);
color: @cyan;
}
.blue {
background-color: fade(@blue, 5%);
color: @blue;
}
.magenta {
background-color: fade(@magenta, 5%);
color: @magenta;
}

View file

@ -1,10 +0,0 @@
import style from "./Example.less";
import {Component} from "preact";
export default function(props) {
return (
<div class={style.example}>
{props.children}
</div>
);
}

View file

@ -1,31 +0,0 @@
@import "../../styles/constants.less";
@eplus: fade(@example, 5%);
@eplusplus: fade(@example, 10%);
.example {
color: @example;
background-color: @eplus;
padding: 4px;
border-radius: 4px;
margin: 4px 0;
table {
border-spacing: 0;
border: 2px solid @eplusplus;
background-color: @eplus;
border-collapse: collapse;
thead, tbody {
th, td {
padding: 4px;
border: 1px solid @eplusplus;
}
}
thead {
background-color: @eplusplus;
color: @accent;
}
}
}

View file

@ -1,5 +0,0 @@
export default function(props) {
return (
<a href={props.src} title={props.alt} target={"_blank"}><img src={props.src} alt={props.alt}/></a>
)
}

View file

@ -1,5 +0,0 @@
export default function (props) {
return (
<a href={props.href}>{props.children}</a>
);
}

View file

@ -1,15 +0,0 @@
import style from "./Panel.less";
import Box from "./Box";
export default function(props) {
return (
<Box color={props.color}>
<h3 class={style.title}>
{props.title}
</h3>
<div class={style.contents}>
{props.children}
</div>
</Box>
);
}

View file

@ -1,10 +0,0 @@
@import "../../styles/constants.less";
.title {
font-family: @title;
}
.contents {
font-family: @text;
}

View file

@ -1,15 +0,0 @@
import Split from "../Layout/Split";
import {Fragment} from "preact";
export default function (props) {
return (
<Fragment>
<h2>
{props.title}
</h2>
<Split>
{props.children}
</Split>
</Fragment>
);
}

View file

@ -1,9 +0,0 @@
import style from "./TablePanel.less";
export default function (props) {
return (
<table class={style.tablepanel}>
{props.children}
</table>
);
}

View file

@ -1,6 +0,0 @@
@import "../../styles/constants.less";
.tablepanel {
margin: 4px;
width: calc(100% - 8px);
}

View file

@ -1,97 +0,0 @@
import {Component} from 'preact'
import style from "./Timer.less"
export default class Timer extends Component {
constructor() {
super();
this.state = {
"now": Date.now()
};
this.timer = null;
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({"now": Date.now()})
}, 1000)
}
componentWillUnmount() {
if(this.timer !== null) {
clearInterval(this.timer)
}
}
render() {
let dateTo = "Unknown date";
let className = style.timer;
let parts = {
milliseconds: "?",
seconds: "?",
minutes: "?",
hours: "?",
days: "?",
};
if(this.props.to) {
dateTo = new Date(this.props.to);
let timeLeft = dateTo - this.state.now;
if(timeLeft > 0) {
parts = {
milliseconds: timeLeft % 1000,
seconds: Math.floor(timeLeft / 1000) % 60,
minutes: Math.floor(timeLeft / 60000) % 60,
hours: Math.floor(timeLeft / 3600000) % 24,
days: Math.floor(timeLeft / 86400000),
};
}
else {
parts = {
milliseconds: 0,
seconds: 0,
minutes: 0,
hours: 0,
days: 0,
};
className += " " + style.expired;
}
}
else {
className += " " + style.unknown;
}
return (
<div class={className} title={dateTo}>
<div class={style.days + " " + style.count}>
{parts.days}
</div>
<div className={style.days + " " + style.text}>
giorni
</div>
<div class={style.hours + " " + style.count}>
{parts.hours}
</div>
<div className={style.hours + " " + style.text}>
ore
</div>
<div class={style.minutes + " " + style.count}>
{parts.minutes}
</div>
<div className={style.minutes + " " + style.text}>
minuti
</div>
<div class={style.seconds + " " + style.count}>
{parts.seconds}
</div>
<div class={style.seconds + " " + style.text}>
secondi
</div>
</div>
)
}
}

View file

@ -1,59 +0,0 @@
@import "../../styles/constants";
.timer {
display: grid;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 8px;
margin-bottom: 8px;
padding: 8px;
grid-template-columns: 80px 80px 80px 80px;
border: 2px solid @plusplus;
border-radius: 4px;
}
.days {
grid-column: 1;
}
.hours {
grid-column: 2;
}
.minutes {
grid-column: 3;
}
.seconds {
grid-column: 4;
}
.count {
grid-row: 1;
font-size: xx-large;
color: @accent;
}
.text {
grid-row: 2;
font-size: small;
}
.unknown {
color: @magenta;
border: 2px solid fade(@magenta, 20%);
.count {
color: @magenta;
}
}
.expired {
color: @red;
border: 2px solid fade(@red, 20%);
.count {
color: @red;
}
}

View file

@ -1,10 +0,0 @@
import style from "./Todo.less";
export default function (props) {
if(process.env.NODE_ENV === "development") {
return <span class={style.todo}>{props.children}</span>;
}
else {
return null;
}
}

View file

@ -1,9 +0,0 @@
@import "../../styles/constants.less";
.todo {
border: 1px yellow solid;
border-radius: 2px;
padding: 1px;
background-color: black;
color: yellow;
}

View file

@ -0,0 +1,5 @@
@import "../../styles/constants";
.minus {
color: @blue;
}

View file

@ -0,0 +1,5 @@
@import "../../styles/constants";
.plus {
color: @red;
}

View file

@ -1,4 +1,4 @@
@import "../../styles/constants.less";
@import "../styles/constants.less";
.footer {
margin-top: 8px;

View file

@ -1,28 +0,0 @@
import style from "./Split.less";
export default function (props) {
let children;
if(Array.isArray(props.children)) {
children = props.children.map(element => {
return (
<div class={style.splitchild}>
{element}
</div>
);
});
}
else {
children = (
<div class={style.splitchild}>
{props.children}
</div>
);
}
return (
<div class={style.split}>
<div class={style.splitparent}>{children}</div>
</div>
);
}

View file

@ -1,16 +0,0 @@
@import "../../styles/constants.less";
.split {
}
.splitparent {
display: flex;
flex-wrap: wrap;
}
.splitchild {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}

View file

@ -1,4 +1,4 @@
@import "../../../styles/constants.less";
@import "../../styles/constants.less";
.unbounded {
color: @blue;

View file

@ -1,5 +0,0 @@
@import "../../../styles/constants.less";
.tick {
color: @cyan;
}

View file

@ -1,5 +0,0 @@
@import "../../../styles/constants";
.minus {
color: @blue;
}

View file

@ -1,5 +0,0 @@
@import "../../../styles/constants";
.plus {
color: @red;
}

View file

@ -1,7 +0,0 @@
import Latex, {LatexDisplay} from "./Latex";
export default function (props) {
return (
<Latex inline={false} display={LatexDisplay.BLOCK}>{props.children}</Latex>
);
}

View file

@ -1,11 +0,0 @@
import SyntaxHighlighter from 'react-syntax-highlighter'
import {monokai} from "react-syntax-highlighter/dist/cjs/styles/hljs";
import stripTabs from "../../utils/stripTabs";
export default function(props) {
return (
<SyntaxHighlighter language={props.language ? props.language : "plaintext"} style={monokai}>
{stripTabs(String(props.children))}
</SyntaxHighlighter>
)
}

View file

@ -1,7 +0,0 @@
import Latex, {LatexDisplay} from "./Latex";
export default function (props) {
return (
<Latex inline={true} display={LatexDisplay.INLINE}>{props.children}</Latex>
);
}

View file

@ -1,59 +0,0 @@
import style from './Latex.less';
import {useContext} from "preact/hooks";
import LatexRenderColor from "../../contexts/LatexRenderColor";
import LatexDefaultInline from "../../contexts/LatexDefaultInline";
import LatexDefaultDisplay from "../../contexts/LatexDefaultDisplay";
export const LatexDisplay = Object.freeze({
INLINE: style.inline,
BLOCK: style.block,
})
export default function(props) {
// black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
let renderColor = useContext(LatexRenderColor);
let defaultInline = useContext(LatexDefaultInline);
let defaultDisplay = useContext(LatexDefaultDisplay);
let inline;
if(props.inline === undefined) {
inline = defaultInline;
}
else {
inline = props.inline;
}
let display;
if(props.display === undefined) {
if(defaultDisplay === null) {
display = LatexDisplay.INLINE;
}
else {
display = defaultDisplay;
}
}
else {
display = props.display;
}
if(inline) {
let equation = `\\inline {\\color{${renderColor}} ${props.children} }`;
return (
<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
alt={props.children}
title={props.children}
class={style.latex + " " + display}
/>
);
}
else {
let equation = `{\\color{${renderColor}} ${props.children} }`;
return (
<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
alt={props.children}
title={props.children}
class={style.latex + " " + display}
/>
);
}
}

View file

@ -1,14 +0,0 @@
@import "../../styles/constants.less";
.latex {
}
.inline {
display: inline-block;
vertical-align: middle;
}
.block {
display: block;
}

View file

@ -1,14 +0,0 @@
import showdown from "showdown";
import stripTabs from "../../utils/stripTabs";
import style from "./Markdown.less";
export default function(props) {
let converter = new showdown.Converter({
"tables": true,
});
converter.setFlavor("github");
let html = converter.makeHtml(stripTabs(String(props.children)));
return <div class={style.markdown} dangerouslySetInnerHTML={{__html: html}}/>;
}

View file

@ -1,12 +0,0 @@
@import "../../styles/constants.less";
.markdown {
h1, h2, h3, h4, h5, h6 {
text-align: left;
}
h1 {
padding-bottom: 2px;
border-bottom: 1px solid @plusplusplus;
}
}

View file

@ -1,9 +0,0 @@
import BLatex from "./BLatex";
export default function (props) {
return (
<p>
<BLatex>{props.children}</BLatex>
</p>
);
}

View file

@ -1,3 +0,0 @@
import {createContext} from "preact";
export default createContext(null);

View file

@ -1,3 +0,0 @@
import {createContext} from "preact";
export default createContext(true);

View file

@ -1,3 +0,0 @@
import {createContext} from "preact";
export default createContext("White");

View file

@ -37,13 +37,12 @@ import Home from './routes/Home';
import Fisica from './routes/Fisica';
import VlDiGeometria from './routes/VlDiGeometria';
import MingwInstall from './routes/MingwInstall';
import Footer from './components/Layout/Footer';
import Footer from './components/Footer';
import Statistica from './routes/Statistica';
import OttimizzazioneLineare from "./routes/OttimizzazioneLineare";
import BasiDiDati from './routes/BasiDiDati';
import CalcoloNumerico from './routes/CalcoloNumerico';
import ApprendimentoSistemiArtificiali from "./routes/ApprendimentoSistemiArtificiali";
import LatexRenderColor from "./contexts/LatexRenderColor";
import NetLogo from "./routes/NetLogo";
import AlgoritmiEStruttureDati from "./routes/AlgoritmiEStruttureDati";
@ -51,7 +50,6 @@ import AlgoritmiEStruttureDati from "./routes/AlgoritmiEStruttureDati";
export default function(props) {
return (
<div id="app">
<LatexRenderColor.Provider value={"White"}>
<h1><a href="/">Appuntiweb</a> <small>di <a href="https://steffo.eu/">Steffo</a></small></h1>
<Router history={createHashHistory()}>
<Home path="/"/>
@ -67,7 +65,6 @@ export default function(props) {
<AlgoritmiEStruttureDati path="/algoritmiestrutturedati"/>
</Router>
<Footer/>
</LatexRenderColor.Provider>
</div>
);
}

View file

@ -1,154 +1,2 @@
@import "styles/constants.less";
* {
box-sizing: border-box;
}
body {
background-color: @bg;
color: @fg;
font-family: @sans;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 4px;
margin-bottom: 4px;
color: @accent;
font-family: @title;
font-weight: normal;
text-align: center;
}
// By default h1 are as large as h2
h1 {
font-size: xx-large;
}
a {
color: @link;
text-decoration: none;
&:hover {
color: @linkhover;
}
&:active {
color: @linkactive;
}
}
img, iframe {
max-width: 100%;
max-height: 300px;
border-radius: 4px;
}
pre, code {
font-family: @mono;
font-size: 14px;
}
blockquote {
color: @fg;
border-left: 3px solid @plusplusplusplus;
background-color: @plus;
padding: 4px 4px 4px 8px;
margin: 8px 0;
}
input[type="text"], input[type="password"] {
color: @fg;
background-color: @bg;
border: 1px solid @plusplus;
border-radius: 4px;
padding: 4px;
font-size: medium;
&:disabled, &.disabled {
color: @disabledfg;
background-color: @disabledbg;
border-style: dotted;
cursor: not-allowed;
}
}
button {
color: @fg;
background-color: @bg;
border: 1px solid @plusplus;
border-radius: 4px;
padding: 4px;
font-size: medium;
&:hover, &.hover {
background-color: @plusplus;
border: 1px solid @fg;
color: @fg;
}
&:active, &.active {
background-color: fade(@accent, 20%);
border: 1px solid @accent;
color: @accent;
}
&:disabled, &.disabled {
color: @disabledfg;
background-color: @disabledbg;
border-style: dotted;
cursor: not-allowed;
}
}
hr {
border: 1px solid @plusplusplusplus;
margin-top: 24px;
margin-bottom: 24px;
}
table {
border-spacing: 0;
border: 2px solid @plusplus;
background-color: @plus;
border-collapse: collapse;
thead, tbody {
th, td {
padding: 4px;
border: 1px solid @plusplus;
}
}
thead {
background-color: @plusplus;
color: @accent;
}
}
li {
margin: 10px 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
b {
color: @accent;
}
abbr[title] {
cursor: help;
}
aside {
margin: 4px 0;
padding: 4px;
font-size: smaller;
background-color: @plus;
border-radius: 4px;
}

View file

@ -7,7 +7,7 @@ import ILatex from "../components/Rendering/ILatex";
import TablePanel from "../components/Elements/TablePanel";
import BLatex from "../components/Rendering/BLatex";
import PLatex from "../components/Rendering/PLatex";
import Tick from "../components/PageSpecific/ApprendimentoSistemiArtificiali/Tick";
import Tick from "../components/ApprendimentoSistemiArtificiali/Tick";
const r = String.raw;

View file

@ -2,8 +2,8 @@ import { Component } from 'preact';
import Latex, {LatexDisplay} from '../components/Rendering/Latex';
import Panel from '../components/Elements/Panel';
import Section from "../components/Elements/Section";
import Plus from '../components/PageSpecific/Fisica/Plus';
import Minus from '../components/PageSpecific/Fisica/Minus';
import Plus from '../components/Fisica/Plus';
import Minus from '../components/Fisica/Minus';
import Todo from "../components/Elements/Todo";
import LatexDefaultInline from "../contexts/LatexDefaultInline";
import LatexDefaultDisplay from "../contexts/LatexDefaultDisplay";

View file

@ -4,14 +4,14 @@ import Panel from "../components/Elements/Panel";
import Example from "../components/Elements/Example";
import Todo from "../components/Elements/Todo";
import Timer from "../components/Elements/Timer";
import Empty from "../components/PageSpecific/OttimizzazioneLineare/Empty";
import Unbounded from "../components/PageSpecific/OttimizzazioneLineare/Unbounded";
import Min from "../components/PageSpecific/OttimizzazioneLineare/Min";
import Max from "../components/PageSpecific/OttimizzazioneLineare/Max";
import Empty from "../components/OttimizzazioneLineare/Empty";
import Unbounded from "../components/OttimizzazioneLineare/Unbounded";
import Min from "../components/OttimizzazioneLineare/Min";
import Max from "../components/OttimizzazioneLineare/Max";
import PLatex from "../components/Rendering/PLatex";
import LatexDefaultInline from "../contexts/LatexDefaultInline";
import TablePanel from "../components/Elements/TablePanel";
import Finite from "../components/PageSpecific/OttimizzazioneLineare/Finite";
import Finite from "../components/OttimizzazioneLineare/Finite";
const r = String.raw;

View file

@ -2,8 +2,8 @@ import Latex, {LatexDisplay} from '../components/Rendering/Latex';
import Panel from '../components/Elements/Panel';
import Section from "../components/Elements/Section";
import Example from "../components/Elements/Example";
import Plus from "../components/PageSpecific/Fisica/Plus";
import Minus from "../components/PageSpecific/Fisica/Minus";
import Plus from "../components/Fisica/Plus";
import Minus from "../components/Fisica/Minus";
import LatexDefaultInline from "../contexts/LatexDefaultInline";
import LatexDefaultDisplay from "../contexts/LatexDefaultDisplay";

View file

@ -1,121 +0,0 @@
@import "constants.less";
.CodeMirror {
font-family: "Consolas", monospace !important;
background-color: @bg !important;
color: @fg !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 1px solid @bg-lighter !important;
border-right: 1px solid @bg-lighter !important;
border-radius: 0 !important;
caret-color: white;
.cm-link {
color: @cyan !important;
}
.cm-url {
color: @link !important;
}
.cm-tag {
color: @magenta !important;
}
.cm-strong {
color: @yellow !important;
}
.cm-em {
color: @orange !important;
}
.cm-quote {
color: @lime !important;
}
.cm-comment {
color: lightgray !important;
}
.cm-header {
color: @accent !important;
}
.CodeMirror-cursor {
border-left: 1px solid @fg !important;
}
}
.editor-toolbar, .editor-statusbar {
background-color: @bg-light !important;
color: @fg !important;
opacity: 1 !important;
a {
color: @fg !important;
border: 0 !important;
&:hover {
background-color: @bg-lighter !important;
color: lighten(@fg, 25%) !important;
}
&.active {
background-color: fade(@fg, 30%) !important;
color: white !important;
&:hover {
background-color: @bg-lighter !important;
color: lighten(@fg, 25%) !important;
}
}
}
.fas, .far, .fab {
color: @fg !important;
&:hover {
color: @fg !important;
}
&:active {
color: white !important;
}
}
}
.editor-toolbar {
border-top: 1px solid @bg-lighter !important;
border-left: 1px solid @bg-lighter !important;
border-right: 1px solid @bg-lighter !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
button {
color: @fg;
&:hover {
background-color: @bg-lighter;
border: none;
}
&:active, &.active {
background-color: @bg-lighter;
border: none;
color: @accent;
}
}
i.separator {
border-color: @bg-lighter;
}
}
.editor-statusbar {
border-bottom: 1px solid @bg-lighter !important;
border-left: 1px solid @bg-lighter !important;
border-right: 1px solid @bg-lighter !important;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}