[add] markdown documentation
[upd] better css and semantic for edit/add form
This commit is contained in:
parent
33502774af
commit
2e05b32a32
4 changed files with 376 additions and 123 deletions
201
doc/markdown.php
Normal file
201
doc/markdown.php
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<?php
|
||||
include ('../inc/Parsedown.php');
|
||||
$Parsedown = new Parsedown();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
<link type="text/css" rel="stylesheet" href="../inc/shaarli.css" />
|
||||
<?php
|
||||
if (is_file('../inc/user.css')) {
|
||||
echo '<link type="text/css" rel="stylesheet" href="../inc/user.css" />';
|
||||
}
|
||||
?>
|
||||
<title>Markdown help</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="markdownHelp">
|
||||
<h2>Headings</h2>
|
||||
<p>
|
||||
#Heading 1
|
||||
<br/>
|
||||
##Heading 2
|
||||
<br/>
|
||||
###Heading 3
|
||||
<br/>
|
||||
####Heading 4
|
||||
<br/>
|
||||
#####Heading 5
|
||||
<br/>
|
||||
######Heading 6
|
||||
<br/>
|
||||
</p>
|
||||
<a href="#result_1" onclick="toggle_visibility('result_1');return false;">Result</a>
|
||||
<div class="result" id="result_1">
|
||||
<?php
|
||||
echo $Parsedown -> text("#Heading 1 \n##Heading 2 \n###Heading 3 \n####Heading 4 \n#####Heading 5 \n######Heading 6 \n ");
|
||||
?>
|
||||
</div>
|
||||
<h2>Phrase Emphasis</h2>
|
||||
<p>
|
||||
*italic* **bold** ~~strike~~
|
||||
</p>
|
||||
<a href="#result_2" onclick="toggle_visibility('result_2');return false;">Result</a>
|
||||
<div class="result" id="result_2">
|
||||
<?php
|
||||
echo $Parsedown -> text('*italic* **bold** ~~strike~~');
|
||||
?>
|
||||
</div>
|
||||
<h2>Links</h2>
|
||||
<p>
|
||||
[Shaarli original homepage](http://sebsauvage.net/wiki/doku.php?id=php:shaarli "php:shaarli [sebsauvage]")
|
||||
<br/>
|
||||
or simply put link http://sebsauvage.net/wiki/doku.php?id=php:shaarli
|
||||
</p>
|
||||
<a href="#result_3" onclick="toggle_visibility('result_3');return false;">Result</a>
|
||||
<div class="result" id="result_3">
|
||||
<?php
|
||||
echo $Parsedown -> text('[Shaarli original homepage](http://sebsauvage.net/wiki/doku.php?id=php:shaarli "php:shaarli [sebsauvage]") or simply put link http://sebsauvage.net/wiki/doku.php?id=php:shaarli');
|
||||
?>
|
||||
</div>
|
||||
<h2>Lists</h2>
|
||||
<p>
|
||||
Ordered list :
|
||||
<br/>
|
||||
1. item
|
||||
<br/>
|
||||
2. item
|
||||
<br/>
|
||||
1. item
|
||||
<br/>
|
||||
2. item
|
||||
<br/>
|
||||
3. item
|
||||
</p>
|
||||
<a href="#result_4" onclick="toggle_visibility('result_4');return false;">Result</a>
|
||||
<div class="result" id="result_4">
|
||||
<?php
|
||||
echo $Parsedown -> text(" 1. item \n 2. item \n 1. item \n 2. item \n 3. item");
|
||||
?>
|
||||
</div>
|
||||
<p>
|
||||
Unordered list :
|
||||
<br/>
|
||||
* item
|
||||
<br/>
|
||||
* item
|
||||
<br/>
|
||||
* item
|
||||
<br/>
|
||||
* item
|
||||
</p>
|
||||
<a href="#result_5" onclick="toggle_visibility('result_5');return false;">Result</a>
|
||||
<div class="result" id="result_5">
|
||||
<?php
|
||||
echo $Parsedown -> text("* item \n* item \n * item \n * item");
|
||||
?>
|
||||
</div>
|
||||
<h2>Images</h2>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<a href="#result_6" onclick="toggle_visibility('result_6');return false;">Result</a>
|
||||
<div class="result" id="result_6">
|
||||
<?php
|
||||
echo $Parsedown -> text('');
|
||||
?>
|
||||
</div>
|
||||
<h2>Blockquotes</h2>
|
||||
<p>
|
||||
>You want to share the links you discover ? Shaarli is a minimalist delicious clone you can install on your own website. It is designed to be personal (single-user), fast and handy.
|
||||
<br/>
|
||||
>> Citation under citation
|
||||
</p>
|
||||
<a href="#result_7" onclick="toggle_visibility('result_7');return false;">Result</a>
|
||||
<div class="result" id="result_7">
|
||||
<?php
|
||||
echo $Parsedown -> text(">You want to share the links you discover ? Shaarli is a minimalist delicious clone you can install on your own website. It is designed to be personal (single-user), fast and handy.
|
||||
\n
|
||||
>> Citation under citation");
|
||||
?>
|
||||
</div>
|
||||
<h2>Inline code</h2>
|
||||
<p>
|
||||
Try this command ``uptime`` in Linux terminal
|
||||
</p>
|
||||
<a href="#result_8" onclick="toggle_visibility('result_8');return false;">Result</a>
|
||||
<div class="result" id="result_8">
|
||||
<?php
|
||||
echo $Parsedown -> text('Try this command ``uptime`` in Linux terminal');
|
||||
?>
|
||||
</div>
|
||||
<h2>Block code</h2>
|
||||
<p>
|
||||
Try this command
|
||||
<br/>
|
||||
```
|
||||
<br/>
|
||||
uptime
|
||||
<br/>
|
||||
```
|
||||
<br/>
|
||||
in Linux terminal
|
||||
</p>
|
||||
<a href="#result_9" onclick="toggle_visibility('result_9');return false;">Result</a>
|
||||
<div class="result" id="result_9">
|
||||
<?php
|
||||
echo $Parsedown -> text("Try this command \n ``` \n uptime \n ``` \n in Linux terminal");
|
||||
?>
|
||||
</div>
|
||||
<h2>Horizontal Rules</h2>
|
||||
* * * or
|
||||
<br/>
|
||||
*** or
|
||||
<br/>
|
||||
***** or
|
||||
<br/>
|
||||
- - - or
|
||||
<br/>
|
||||
---------------------------------------
|
||||
<br/>
|
||||
<a href="#result_10" onclick="toggle_visibility('result_10');return false;">Result</a>
|
||||
<div class="result" id="result_10">
|
||||
<?php
|
||||
echo $Parsedown -> text('* * *');
|
||||
?>
|
||||
</div>
|
||||
<h2>Manual Line Breaks</h2>
|
||||
<p>
|
||||
Add two space at endline
|
||||
<br/>
|
||||
This line break =>
|
||||
<br/>
|
||||
here
|
||||
</p>
|
||||
<a href="#result_11" onclick="toggle_visibility('result_11');return false;">Result</a>
|
||||
<div class="result" id="result_11">
|
||||
<?php
|
||||
echo $Parsedown -> setMarkupEscaped(true) -> setBreaksEnabled(true) -> text("This line break =>
|
||||
here");
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var allResult = document.getElementsByClassName('result');
|
||||
for (var i = 0; i < allResult.length; ++i) {
|
||||
allResult[i].style.display = "none";
|
||||
}
|
||||
function toggle_visibility(id) {
|
||||
var e = document.getElementById(id);
|
||||
if (e.style.display == 'block') {
|
||||
e.style.display = 'none';
|
||||
} else {
|
||||
e.style.display = 'block';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/help_icon.png
Normal file
BIN
images/help_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 932 B |
149
inc/user.css
149
inc/user.css
|
|
@ -1,3 +1,7 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
background: #434343;
|
||||
|
|
@ -16,8 +20,12 @@ body {
|
|||
background-color: inherit;
|
||||
}
|
||||
|
||||
a,
|
||||
.linkdescription a {
|
||||
.markdownHelp{
|
||||
background-color: #FFFFFF;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
a, .linkdescription a {
|
||||
color: #E28E3F;
|
||||
-webkit-transition: all 100ms ease-in-out;
|
||||
-moz-transition: all 100ms ease-in-out;
|
||||
|
|
@ -26,8 +34,7 @@ a,
|
|||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.linkdescription a:hover {
|
||||
a:hover, .linkdescription a:hover {
|
||||
color: #F57900;
|
||||
}
|
||||
|
||||
|
|
@ -55,15 +62,13 @@ pre code {
|
|||
margin-left: 130px;
|
||||
}
|
||||
|
||||
#linklist,
|
||||
#cloudtag {
|
||||
#linklist, #cloudtag {
|
||||
margin: 0 auto;
|
||||
padding: 0.3em;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
#linklist li,
|
||||
#linklist li.private {
|
||||
#linklist li, #linklist li.private {
|
||||
margin: 1em 0;
|
||||
padding: 0.3em;
|
||||
border: 1px solid #cdcdcd;
|
||||
|
|
@ -75,23 +80,25 @@ pre code {
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
#linklist li .linkdescription li {
|
||||
#linklist li .linkdescription li,
|
||||
.markdownHelp li {
|
||||
margin: 0;
|
||||
border: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
#linklist li .linkdescription ol li {
|
||||
#linklist li .linkdescription ol li,
|
||||
.markdownHelp ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
#linklist li .linkdescription ol {
|
||||
#linklist li .linkdescription ol,
|
||||
.markdownHelp ol {
|
||||
list-style: decimal outside;
|
||||
}
|
||||
|
||||
.linktitle,
|
||||
.linkeditbuttons {
|
||||
.linktitle, .linkeditbuttons {
|
||||
font-size: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -192,9 +199,7 @@ pre code {
|
|||
color: #ffffc9;
|
||||
}
|
||||
|
||||
.searchform,
|
||||
.tagfilter,
|
||||
.addform {
|
||||
.searchform, .tagfilter, .addform {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
|
|
@ -207,17 +212,13 @@ pre code {
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.searchform input:nth-child(1),
|
||||
.tagfilter input:nth-child(1),
|
||||
.addform input:nth-child(1){
|
||||
.searchform input:nth-child(1), .tagfilter input:nth-child(1), .addform input:nth-child(1) {
|
||||
order: 1;
|
||||
flex: 1 0 auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.searchform input:nth-child(2),
|
||||
.tagfilter input:nth-child(2),
|
||||
.addform input:nth-child(2) {
|
||||
.searchform input:nth-child(2), .tagfilter input:nth-child(2), .addform input:nth-child(2) {
|
||||
order: 2;
|
||||
flex: 0 0 20%;
|
||||
align-self: stretch;
|
||||
|
|
@ -236,9 +237,7 @@ pre code {
|
|||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
.tagfilter input.bigbutton,
|
||||
.searchform input.bigbutton,
|
||||
.addform input.bigbutton {
|
||||
.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -246,6 +245,41 @@ pre code {
|
|||
|
||||
#editlinkform {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#editlinkform p {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
#editlinkform label {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#editlinkform input[type='text'],
|
||||
#editlinkform textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#editlinkform a {
|
||||
float: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.submitButton .bigbutton{
|
||||
width : 25%;
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
width : 80%;
|
||||
}
|
||||
|
||||
#pageheader #logo {
|
||||
|
|
@ -284,20 +318,14 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
line-height: 1em;
|
||||
color: #111;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -342,10 +370,7 @@ hr {
|
|||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
pre, code, kbd, samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 0.98em;
|
||||
color: #000;
|
||||
|
|
@ -363,8 +388,7 @@ pre {
|
|||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -385,8 +409,7 @@ mark {
|
|||
background: #ff0;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
sub, sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
|
|
@ -401,8 +424,7 @@ sub {
|
|||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
ul, ol {
|
||||
margin: 1em 0;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
|
|
@ -429,8 +451,7 @@ td {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
del,
|
||||
ins {
|
||||
del, ins {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
|
@ -438,6 +459,10 @@ em {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
.result {
|
||||
/*display: none;*/
|
||||
}
|
||||
|
||||
@media handheld, only screen and (max-width: 480px) , only screen and (max-device-width: 854px) {
|
||||
/* A few fixes for mobile devices (far from perfect). */
|
||||
.nomobile {
|
||||
|
|
@ -469,8 +494,7 @@ em {
|
|||
}
|
||||
|
||||
.searchform input, .tagfilter input {
|
||||
height : 2em;
|
||||
padding 0.1em;
|
||||
height: 2em;padding 0.1em;
|
||||
}
|
||||
|
||||
.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
|
||||
|
|
@ -494,8 +518,7 @@ em {
|
|||
left: 0px;
|
||||
}
|
||||
|
||||
#paging_privatelinks {
|
||||
float;none;
|
||||
#paging_privatelinks {float;none;
|
||||
}
|
||||
|
||||
#paging_linksperpage {
|
||||
|
|
@ -583,8 +606,7 @@ em {
|
|||
font-size: 12pt;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
a, a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -602,21 +624,17 @@ em {
|
|||
content: " (" attr(title) ") ";
|
||||
}
|
||||
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
pre, blockquote {
|
||||
padding-right: 1em;
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
tr, img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
|
|
@ -624,23 +642,22 @@ em {
|
|||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@ page:left {
|
||||
@
|
||||
page:left {
|
||||
margin: 15mm 20mm 15mm 10mm;
|
||||
}
|
||||
|
||||
@ page:right {
|
||||
@
|
||||
page:right {
|
||||
margin: 15mm 10mm 15mm 20mm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
p, h2, h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
h2, h3 {
|
||||
page-break-after: avoid;
|
||||
};
|
||||
}
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>{include="includes"}
|
||||
{if="empty($GLOBALS['disablejquery'])"}<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>{/if}
|
||||
<head>
|
||||
{include="includes"}
|
||||
{if="empty($GLOBALS['disablejquery'])"}
|
||||
<script src="inc/jquery.min.js#"></script>
|
||||
<script src="inc/jquery-ui.min.js#"></script>
|
||||
{/if}
|
||||
</head>
|
||||
<body
|
||||
{if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
|
||||
|
|
@ -11,33 +15,64 @@
|
|||
{include="page.header"}
|
||||
<div id="editlinkform">
|
||||
<form method="post" name="linkform">
|
||||
<input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
|
||||
<i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" style="width:100%"><br>
|
||||
<i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" style="width:100%"><br>
|
||||
<i>Description</i><br><textarea name="lf_description" rows="4" cols="25" style="width:100%">{$link.description|htmlspecialchars}</textarea><br>
|
||||
<i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" style="width:100%"><br>
|
||||
<i>Origine</i><br><input type="text" name="lf_via" value="{$link.via|htmlspecialchars}" style="width:100%"><br>
|
||||
<p>
|
||||
<label for="lf_url">URL</label>
|
||||
<input type="text" id="lf_url" name="lf_url" value="{$link.url|htmlspecialchars}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="lf_title">Title</label>
|
||||
<input type="text" id="lf_title" name="lf_title" value="{$link.title|htmlspecialchars}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="lf_description">Description</label><a href="" id="help"><img src="../images/help_icon.png" alt="help icon"/></a>
|
||||
<textarea id="lf_description" name="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea>
|
||||
</p>
|
||||
<p>
|
||||
<label for="lf_tags">Tags</label>
|
||||
<input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="lf_via">Origine</label>
|
||||
<input type="text" id="lf_via" name="lf_via" value="{$link.via|htmlspecialchars}">
|
||||
</p>
|
||||
{if condition="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
|
||||
<p>
|
||||
<input type="checkbox" checked="checked" name="lf_private" id="lf_private">
|
||||
<label for="lf_private"><i>Private</i></label><br>
|
||||
<label for="lf_private">Private</label>
|
||||
</p>
|
||||
{else}
|
||||
<p>
|
||||
<input type="checkbox" name="lf_private" id="lf_private">
|
||||
<label for="lf_private"><i>Private</i></label><br>
|
||||
<label for="lf_private">Private</label>
|
||||
</p>
|
||||
{/if}
|
||||
<p class="submitButton">
|
||||
<input type="hidden" id="lf_linkdate" name="lf_linkdate" value="{$link.linkdate}">
|
||||
<input type="submit" value="Save" name="save_edit" class="bigbutton">
|
||||
<input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
|
||||
{if condition="!$link_is_new"}
|
||||
<input type="submit" value="Delete" name="delete_link" class="bigbutton" onClick="return confirmDeleteLink();">
|
||||
{/if}
|
||||
<input type="submit" value="Save" name="save_edit" class="bigbutton" style="margin-left:40px;">
|
||||
<input type="submit" value="Cancel" name="cancel_edit" class="bigbutton" style="margin-left:40px;">
|
||||
{if condition="!$link_is_new"}<input type="submit" value="Delete" name="delete_link" class="bigbutton" style="margin-left:180px;" onClick="return confirmDeleteLink();">{/if}
|
||||
<input type="hidden" name="token" value="{$token}">
|
||||
{if condition="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer|htmlspecialchars}">{/if}
|
||||
{if condition="$http_referer"}
|
||||
<input type="hidden" name="returnurl" value="{$http_referer|htmlspecialchars}">
|
||||
{/if}
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{include="page.footer"}
|
||||
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
|
||||
<script language="JavaScript">
|
||||
$(document).ready(function()
|
||||
{
|
||||
$('#lf_tags').autocomplete({source:'{$source}?ws=tags',minLength:1});
|
||||
$(document).ready(function() {
|
||||
$('#lf_tags').autocomplete({
|
||||
source : '{$source}?ws=tags',
|
||||
minLength : 1
|
||||
});
|
||||
$("#help").click(function() {
|
||||
window.open("doc/markdown.php", "myWindow","scrollbars=1, width=400, height=400");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Reference in a new issue