Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[add] markdown documentation

Browse source 
[upd] better css and semantic for edit/add form
This commit is contained in:
Knah Tsaeb 2015-05-13 12:07:03 +02:00
parent 33502774af
commit 2e05b32a32
4 changed files with 376 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

201
doc/markdown.php Normal file
View 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/>
&nbsp;&nbsp;1. item
<br/>
&nbsp;&nbsp;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/>
&nbsp;&nbsp;* item
<br/>
&nbsp;&nbsp;* 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>
![Shaarli logo](/images/logo.png "Shaarli logo")
</p>
<a href="#result_6" onclick="toggle_visibility('result_6');return false;">Result</a>
<div class="result" id="result_6">
<?php
echo $Parsedown -> text('![Shaarli logo](/images/logo.png "Shaarli logo")');
?>
</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 => &nbsp;&nbsp;
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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 932 B

149
inc/user.css
View file

@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
html { html {
overflow-y: scroll; overflow-y: scroll;
background: #434343; background: #434343;
@ -16,8 +20,12 @@ body {
background-color: inherit; background-color: inherit;
} }
a, .markdownHelp{
.linkdescription a { background-color: #FFFFFF;
padding: 0.3em;
}
a, .linkdescription a {
color: #E28E3F; color: #E28E3F;
-webkit-transition: all 100ms ease-in-out; -webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out;
@ -26,8 +34,7 @@ a,
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
} }
a:hover, a:hover, .linkdescription a:hover {
.linkdescription a:hover {
color: #F57900; color: #F57900;
} }
@ -55,15 +62,13 @@ pre code {
margin-left: 130px; margin-left: 130px;
} }
#linklist, #linklist, #cloudtag {
#cloudtag {
margin: 0 auto; margin: 0 auto;
padding: 0.3em; padding: 0.3em;
max-width: 80%; max-width: 80%;
} }
#linklist li, #linklist li, #linklist li.private {
#linklist li.private {
margin: 1em 0; margin: 1em 0;
padding: 0.3em; padding: 0.3em;
border: 1px solid #cdcdcd; border: 1px solid #cdcdcd;
@ -75,23 +80,25 @@ pre code {
background: #fff; background: #fff;
} }
#linklist li .linkdescription li { #linklist li .linkdescription li,
.markdownHelp li {
margin: 0; margin: 0;
border: none; border: none;
list-style-position: outside; list-style-position: outside;
list-style-type: disc; list-style-type: disc;
} }
#linklist li .linkdescription ol li { #linklist li .linkdescription ol li,
.markdownHelp ol li {
list-style: decimal; list-style: decimal;
} }
#linklist li .linkdescription ol { #linklist li .linkdescription ol,
.markdownHelp ol {
list-style: decimal outside; list-style: decimal outside;
} }
.linktitle, .linktitle, .linkeditbuttons {
.linkeditbuttons {
font-size: 1.6em; font-size: 1.6em;
font-weight: bold; font-weight: bold;
} }
@ -192,9 +199,7 @@ pre code {
color: #ffffc9; color: #ffffc9;
} }
.searchform, .searchform, .tagfilter, .addform {
.tagfilter,
.addform {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0; margin: 0;
@ -207,17 +212,13 @@ pre code {
align-items: flex-start; align-items: flex-start;
} }
.searchform input:nth-child(1), .searchform input:nth-child(1), .tagfilter input:nth-child(1), .addform input:nth-child(1) {
.tagfilter input:nth-child(1),
.addform input:nth-child(1){
order: 1; order: 1;
flex: 1 0 auto; flex: 1 0 auto;
align-self: stretch; align-self: stretch;
} }
.searchform input:nth-child(2), .searchform input:nth-child(2), .tagfilter input:nth-child(2), .addform input:nth-child(2) {
.tagfilter input:nth-child(2),
.addform input:nth-child(2) {
order: 2; order: 2;
flex: 0 0 20%; flex: 0 0 20%;
align-self: stretch; align-self: stretch;
@ -236,9 +237,7 @@ pre code {
margin-left: 0.3em; margin-left: 0.3em;
} }
.tagfilter input.bigbutton, .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
.searchform input.bigbutton,
.addform input.bigbutton {
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -246,6 +245,41 @@ pre code {
#editlinkform { #editlinkform {
margin: 0 auto; 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 { #pageheader #logo {
@ -284,20 +318,14 @@ img {
max-width: 100%; max-width: 100%;
} }
h1, h1, h2, h3, h4, h5, h6 {
h2,
h3,
h4,
h5,
h6 {
font-weight: normal; font-weight: normal;
line-height: 1em; line-height: 1em;
color: #111; color: #111;
margin-bottom: 0.5em;
} }
h4, h4, h5, h6 {
h5,
h6 {
font-weight: bold; font-weight: bold;
} }
@ -342,10 +370,7 @@ hr {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
pre, pre, code, kbd, samp {
code,
kbd,
samp {
font-family: monospace, monospace; font-family: monospace, monospace;
font-size: 0.98em; font-size: 0.98em;
color: #000; color: #000;
@ -363,8 +388,7 @@ pre {
background-color: #f7f7f7; background-color: #f7f7f7;
} }
b, b, strong {
strong {
font-weight: bold; font-weight: bold;
} }
@ -385,8 +409,7 @@ mark {
background: #ff0; background: #ff0;
} }
sub, sub, sup {
sup {
position: relative; position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
@ -401,8 +424,7 @@ sub {
bottom: -0.25em; bottom: -0.25em;
} }
ul, ul, ol {
ol {
margin: 1em 0; margin: 1em 0;
padding: 0 0 0 2em; padding: 0 0 0 2em;
} }
@ -429,8 +451,7 @@ td {
vertical-align: top; vertical-align: top;
} }
del, del, ins {
ins {
text-decoration: line-through; text-decoration: line-through;
} }
@ -438,6 +459,10 @@ em {
font-style: italic; font-style: italic;
} }
.result {
/*display: none;*/
}
@media handheld, only screen and (max-width: 480px) , only screen and (max-device-width: 854px) { @media handheld, only screen and (max-width: 480px) , only screen and (max-device-width: 854px) {
/* A few fixes for mobile devices (far from perfect). */ /* A few fixes for mobile devices (far from perfect). */
.nomobile { .nomobile {
@ -469,8 +494,7 @@ em {
} }
.searchform input, .tagfilter input { .searchform input, .tagfilter input {
height : 2em; height: 2em;padding 0.1em;
padding 0.1em;
} }
.tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton { .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
@ -494,8 +518,7 @@ em {
left: 0px; left: 0px;
} }
#paging_privatelinks { #paging_privatelinks {float;none;
float;none;
} }
#paging_linksperpage { #paging_linksperpage {
@ -583,8 +606,7 @@ em {
font-size: 12pt; font-size: 12pt;
} }
a, a, a:visited {
a:visited {
text-decoration: underline; text-decoration: underline;
} }
@ -602,21 +624,17 @@ em {
content: " (" attr(title) ") "; content: " (" attr(title) ") ";
} }
.ir a:after, .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""; content: "";
} }
pre, pre, blockquote {
blockquote {
padding-right: 1em; padding-right: 1em;
border: 1px solid #999; border: 1px solid #999;
page-break-inside: avoid; page-break-inside: avoid;
} }
tr, tr, img {
img {
page-break-inside: avoid; page-break-inside: avoid;
} }
@ -624,23 +642,22 @@ em {
max-width: 100% !important; max-width: 100% !important;
} }
@ page:left { @
page:left {
margin: 15mm 20mm 15mm 10mm; margin: 15mm 20mm 15mm 10mm;
} }
@ page:right { @
page:right {
margin: 15mm 10mm 15mm 20mm; margin: 15mm 10mm 15mm 20mm;
} }
p, p, h2, h3 {
h2,
h3 {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
h2, h2, h3 {
h3 {
page-break-after: avoid; page-break-after: avoid;
}; };
} }

69
tpl/editlink.html
View file

@ -1,7 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>{include="includes"} <head>
{if="empty($GLOBALS['disablejquery'])"}<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>{/if} {include="includes"}
{if="empty($GLOBALS['disablejquery'])"}
<script src="inc/jquery.min.js#"></script>
<script src="inc/jquery-ui.min.js#"></script>
{/if}
</head> </head>
<body <body
{if condition="$link.title==''"}onload="document.linkform.lf_title.focus();" {if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
@ -11,33 +15,64 @@
{include="page.header"} {include="page.header"}
<div id="editlinkform"> <div id="editlinkform">
<form method="post" name="linkform"> <form method="post" name="linkform">
<input type="hidden" name="lf_linkdate" value="{$link.linkdate}"> <p>
<i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" style="width:100%"><br> <label for="lf_url">URL</label>
<i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" style="width:100%"><br> <input type="text" id="lf_url" name="lf_url" value="{$link.url|htmlspecialchars}">
<i>Description</i><br><textarea name="lf_description" rows="4" cols="25" style="width:100%">{$link.description|htmlspecialchars}</textarea><br> </p>
<i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" style="width:100%"><br> <p>
<i>Origine</i><br><input type="text" name="lf_via" value="{$link.via|htmlspecialchars}" style="width:100%"><br> <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"} {if condition="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
<p>
<input type="checkbox" checked="checked" name="lf_private" id="lf_private"> <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
&nbsp;<label for="lf_private"><i>Private</i></label><br> &nbsp;<label for="lf_private">Private</label>
</p>
{else} {else}
<p>
<input type="checkbox" name="lf_private" id="lf_private"> <input type="checkbox" name="lf_private" id="lf_private">
&nbsp;<label for="lf_private"><i>Private</i></label><br> &nbsp;<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} {/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}"> <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> </form>
</div> </div>
</div> </div>
{include="page.footer"} {include="page.footer"}
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"} {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
<script language="JavaScript"> <script language="JavaScript">
$(document).ready(function() $(document).ready(function() {
{ $('#lf_tags').autocomplete({
$('#lf_tags').autocomplete({source:'{$source}?ws=tags',minLength:1}); source : '{$source}?ws=tags',
minLength : 1
});
$("#help").click(function() {
window.open("doc/markdown.php", "myWindow","scrollbars=1, width=400, height=400");
return false;
});
}); });
</script> </script>
{/if} {/if}