mirror of
https://github.com/sorenpeter/timeline.git
synced 2025-12-15 10:57:01 +00:00
added tinyMarkDownEditor and adjustede the CSS
This commit is contained in:
sørenpeter
parent
1cd49bc230
commit
5fdb52f205
6 changed files with 257 additions and 1 deletions
|
|
@ -320,7 +320,7 @@ article small a:hover {
|
|||
|
||||
#new_twt {
|
||||
border: none;
|
||||
text-align: center
|
||||
/* text-align: center*/
|
||||
}
|
||||
|
||||
#new_twt input[type="submit"] {
|
||||
|
|
|
|||
233
libs/tiny-mde.css
Normal file
233
libs/tiny-mde.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
.TinyMDE {
|
||||
/* background-color:#fff;
|
||||
color:#000;
|
||||
font-size:16px;
|
||||
line-height:24px;
|
||||
outline: none;
|
||||
padding:5px; */
|
||||
|
||||
color: var(--text);
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: var(--standard-border-radius);
|
||||
min-height: 6rem;
|
||||
background-color: #222; /* darch.dk only */
|
||||
}
|
||||
/*
|
||||
.TMBlankLine {
|
||||
height:24px;
|
||||
}
|
||||
|
||||
.TMH1, .TMSetextH1 {
|
||||
font-size:22px;
|
||||
line-height:32px;
|
||||
font-weight:bold;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.TMSetextH1 {
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.TMSetextH1Marker {
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.TMH2, .TMSetextH2 {
|
||||
font-size:20px;
|
||||
line-height:28px;
|
||||
font-weight:bold;
|
||||
margin-bottom:4px;
|
||||
}
|
||||
*/
|
||||
|
||||
.TMMark_TMCode {
|
||||
font-family:monospace;
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
.TMFencedCodeBacktick, .TMFencedCodeTilde, .TMIndentedCode, .TMCode {
|
||||
font-family:monospace;
|
||||
font-size:.9em;
|
||||
background-color: var(--accent-bg);
|
||||
}
|
||||
|
||||
.TMCodeFenceBacktickOpen, .TMCodeFenceTildeOpen {
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: monospace;
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
.TMCodeFenceBacktickClose, .TMCodeFenceTildeClose {
|
||||
border-top: 1px solid var(--border);
|
||||
font-family: monospace;
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
.TMInfoString {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.TMCode {
|
||||
border:1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.TMBlockquote {
|
||||
font-style: italic;
|
||||
border-left:2px solid var(--border);
|
||||
padding-left:10px;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
/*
|
||||
.TMMark {
|
||||
color:#a0a0a0;
|
||||
}
|
||||
|
||||
.TMMark_TMH1, .TMMark_TMH2 {
|
||||
color:#ff8080;
|
||||
}
|
||||
*/
|
||||
|
||||
.TMMark_TMUL, .TMMark_TMOL {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.TMImage {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #00ff00;
|
||||
}
|
||||
|
||||
.TMLink {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
|
||||
.TMLinkLabel {
|
||||
text-decoration: underline;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.TMLinkLabel_Definition, .TMLinkLabel_Valid {
|
||||
color: #40c040;
|
||||
}
|
||||
|
||||
.TMLinkLabel_Invalid {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.TMLinkTitle {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.TMLinkDestination, .TMAutolink {
|
||||
text-decoration: underline;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/*
|
||||
.TMHR {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TMHR:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 40%;
|
||||
border-bottom: 2px solid #808080;
|
||||
width: 20%;
|
||||
z-index:0;
|
||||
}
|
||||
*/
|
||||
|
||||
.TMHTML, .TMHTMLBlock {
|
||||
font-family:monospace;
|
||||
font-size:.9em;
|
||||
color:#8000ff;
|
||||
}
|
||||
|
||||
.TMHTMLBlock {
|
||||
color:#6000c0;
|
||||
}
|
||||
|
||||
.TMCommandBar {
|
||||
/* background-color:#f8f8f8;
|
||||
height:24px;
|
||||
border:4px solid #f8f8f8; */
|
||||
box-sizing: content-box;
|
||||
display:flex;
|
||||
user-select: none;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.TMCommandBar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.TMCommandButton {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height:24px;
|
||||
width:24px;
|
||||
padding:3px;
|
||||
margin-right:4px;
|
||||
color: var(--text-light);
|
||||
fill: var(--text-light);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
font-size:20px;
|
||||
line-height:18px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.TMCommandDivider {
|
||||
box-sizing: content-box;
|
||||
height:24px;
|
||||
margin-left:4px;
|
||||
margin-right:8px;
|
||||
width:0px;
|
||||
/* border-left:1px solid var(--border);*/
|
||||
/* border-right:1px solid #ffffff;*/
|
||||
border-left:1px solid var(--border);
|
||||
}
|
||||
|
||||
.TMCommandButton_Active {
|
||||
font-weight: bold;
|
||||
color: var(--accent-bg);
|
||||
fill: var(--accent-bg);
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.TMCommandButton_Inactive {
|
||||
/* background-color:#f8f8f8;*/
|
||||
background-color: var(--accent-bg);
|
||||
}
|
||||
|
||||
.TMCommandButton_Disabled {
|
||||
/* color:#a0a0a0;
|
||||
fill:#a0a0a0; */
|
||||
color: var(--text-light);
|
||||
fill: var(--text-light);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.TMCommandButton_Active:hover,
|
||||
.TMCommandButton_Disabled:hover,
|
||||
.TMCommandButton_Inactive:hover {
|
||||
/* background-color:#e0e0ff;*/
|
||||
/* fill:#000000;*/
|
||||
fill: var(--accent);
|
||||
|
||||
}
|
||||
}
|
||||
1
libs/tiny-mde.min.css
vendored
Normal file
1
libs/tiny-mde.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.TinyMDE{background-color:#fff;color:#000;font-size:16px;line-height:24px;outline:none;padding:5px}.TMBlankLine{height:24px}.TMH1,.TMSetextH1{font-size:22px;font-weight:700;line-height:32px;margin-bottom:8px}.TMSetextH1{margin-bottom:0}.TMSetextH1Marker{margin-bottom:8px}.TMH2,.TMSetextH2{font-size:20px;font-weight:700;line-height:28px;margin-bottom:4px}.TMMark_TMCode{font-family:monospace;font-size:.9em}.TMCode,.TMFencedCodeBacktick,.TMFencedCodeTilde,.TMIndentedCode{background-color:#e0e0e0;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickOpen,.TMCodeFenceTildeOpen{border-bottom:1px solid silver;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickClose,.TMCodeFenceTildeClose{border-top:1px solid silver;font-family:monospace;font-size:.9em}.TMInfoString{color:#00f}.TMCode{border:1px solid silver;border-radius:2px}.TMBlockquote{border-left:2px solid silver;font-style:italic;margin-left:10px;padding-left:10px}.TMMark{color:#a0a0a0}.TMMark_TMH1,.TMMark_TMH2,.TMMark_TMOL,.TMMark_TMUL{color:#ff8080}.TMImage{text-decoration:underline;text-decoration-color:#0f0}.TMLink{text-decoration:underline;text-decoration-color:#00f}.TMLinkLabel{font-family:monospace;text-decoration:underline}.TMLinkLabel_Definition,.TMLinkLabel_Valid{color:#40c040}.TMLinkLabel_Invalid{color:red}.TMLinkTitle{font-style:italic}.TMAutolink,.TMLinkDestination{color:#00f;text-decoration:underline}.TMHR{position:relative}.TMHR:before{border-bottom:2px solid grey;bottom:50%;content:"";left:40%;position:absolute;width:20%;z-index:0}.TMHTML,.TMHTMLBlock{color:#8000ff;font-family:monospace;font-size:.9em}.TMHTMLBlock{color:#6000c0}.TMCommandBar{-ms-overflow-style:none;background-color:#f8f8f8;border:4px solid #f8f8f8;box-sizing:content-box;display:flex;height:24px;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-webkit-user-select:none;user-select:none}.TMCommandBar::-webkit-scrollbar{display:none}.TMCommandButton{fill:#404040;box-sizing:border-box;color:#404040;cursor:pointer;display:inline-block;font-family:sans-serif;font-size:20px;height:24px;line-height:18px;margin-right:4px;padding:3px;text-align:center;vertical-align:middle;width:24px}.TMCommandDivider{border-left:1px solid silver;border-right:1px solid #fff;box-sizing:content-box;height:24px;margin-left:4px;margin-right:8px;width:0}.TMCommandButton_Active{fill:navy;background-color:#c0c0ff;color:navy;font-weight:700}.TMCommandButton_Inactive{background-color:#f8f8f8}.TMCommandButton_Disabled{fill:#a0a0a0;color:#a0a0a0}@media (hover:hover){.TMCommandButton_Active:hover,.TMCommandButton_Disabled:hover,.TMCommandButton_Inactive:hover{fill:#000;background-color:#e0e0ff}}
|
||||
1
libs/tiny-mde.min.js
vendored
Normal file
1
libs/tiny-mde.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -10,6 +10,11 @@ $profile = getTwtsFromTwtxtString($config['public_txt_url']);
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="<?= $baseURL ?>/media/logo.png">
|
||||
<?php if( isset($_SESSION['password'])) { ?>
|
||||
<script src="<?= $baseURL ?>/libs/tiny-mde.min.js"></script>
|
||||
<!-- <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/tiny-mde.min.css" /> -->
|
||||
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/tiny-mde.css" />
|
||||
<?php } ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/simple.css">
|
||||
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/timeline.css">
|
||||
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/custom.css">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// TODO: Give a warning if the file is not found
|
||||
$config = parse_ini_file('private/config.ini');
|
||||
|
||||
|
||||
if ($config['debug_mode']) {
|
||||
ini_set('display_errors', 1);
|
||||
ini_set('display_startup_errors', 1);
|
||||
|
|
@ -151,12 +152,27 @@ if (isset($_GET['hash'])) {
|
|||
<article id="new_twt">
|
||||
<form method="POST">
|
||||
<div id="posting">
|
||||
<div id="toolbar"></div>
|
||||
<textarea class="textinput" id="new_post" name="new_post"
|
||||
rows="4" cols="100" autofocus required onfocus="var val=this.value; this.value=''; this.value= val;"
|
||||
placeholder="Your twt"><?= $textareaValue ?></textarea>
|
||||
<!-- <br> -->
|
||||
<input type="submit" value="Post" name="submit">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var tinyMDE = new TinyMDE.Editor({
|
||||
element: "new_post",
|
||||
// content: "Type your twt"
|
||||
});
|
||||
var commandBar = new TinyMDE.CommandBar({
|
||||
element: "toolbar",
|
||||
editor: tinyMDE,
|
||||
commands: ['bold', 'italic', 'strikethrough', 'ul', 'ol', 'blockquote', 'code', '|', 'insertLink', 'insertImage'],
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</form>
|
||||
</article>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue