Knah-Tsaeb/MyShaarli
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

185
inc/user.css
View file

@ -1,23 +1,31 @@
* {
box-sizing: border-box;
}
html { html {
overflow-y: scroll; overflow-y: scroll;
background: #434343; background: #434343;
/* Old browsers */ /* Old browsers */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#434343), color-stop(100%,#cdcdcd) )no-repeat scroll 0 0 transparent; background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#434343), color-stop(100%,#cdcdcd) ) no-repeat scroll 0 0 transparent;
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent; background: -webkit-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent;
background: -o-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent; background: -o-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent;
background: -ms-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent; background: -ms-linear-gradient(top,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent;
background: linear-gradient(to bottom,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent; background: linear-gradient(to bottom,#434343 0,#cdcdcd 100%) no-repeat scroll 0 0 transparent;
background: -moz-linear-gradient(center top,#434343,#cdcdcd) no-repeat scroll 0 0 transparent; background: -moz-linear-gradient(center top,#434343,#cdcdcd) no-repeat scroll 0 0 transparent;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#cdcdcd', GradientType=0); filter: progid : DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#cdcdcd', GradientType=0);
} }
body { 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,16 +237,49 @@ 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;
} }
#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,14 +370,11 @@ hr {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
pre, pre, code, kbd, samp {
code, font-family: monospace, monospace;
kbd,
samp {
font-family: monospace,monospace;
font-size: 0.98em; font-size: 0.98em;
color: #000; color: #000;
_font-family: 'courier new',monospace; _font-family: 'courier new', monospace;
} }
pre { pre {
@ -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,8 +459,12 @@ em {
font-style: italic; font-style: italic;
} }
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px) { .result {
/* A few fixes for mobile devices (far from perfect). */ /*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 { .nomobile {
display: none; display: none;
} }
@ -457,26 +482,25 @@ em {
#headerform { #headerform {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
display : block; display: block;
} }
.searchform,.tagfilter { .searchform, .tagfilter {
display: block !important; display: block !important;
margin: 0px !important; margin: 0px !important;
padding: 0px !important; padding: 0px !important;
width: 100% !important; width: 100% !important;
height : 2em; height: 2em;
} }
.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 {
width: 30%; width: 30%;
font-size: smaller; font-size: smaller;
height : 2em; height: 2em;
} }
#searchform_value { #searchform_value {
@ -494,8 +518,7 @@ em {
left: 0px; left: 0px;
} }
#paging_privatelinks { #paging_privatelinks {float;none;
float;none;
} }
#paging_linksperpage { #paging_linksperpage {
@ -504,7 +527,7 @@ em {
font-size: smaller; font-size: smaller;
} }
#paging_older,#paging_newer,#paging_linksperpage a { #paging_older, #paging_newer, #paging_linksperpage a {
border: 1px solid black; border: 1px solid black;
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
background-color: #666; background-color: #666;
@ -533,7 +556,7 @@ em {
left: 0px; left: 0px;
} }
#daily_col1,#daily_col2,#daily_col3 { #daily_col1, #daily_col2, #daily_col3 {
float: none; float: none;
width: 100%; width: 100%;
padding: 0px; padding: 0px;
@ -566,7 +589,7 @@ em {
max-width: 100%; max-width: 100%;
} }
.linkcontainer { .linkcontainer {
margin : 0; margin: 0;
} }
} }
@ -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;
}; };
} }

113
tpl/editlink.html
View file

@ -1,45 +1,80 @@
<!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"}
</head> {if="empty($GLOBALS['disablejquery'])"}
<body <script src="inc/jquery.min.js#"></script>
{if condition="$link.title==''"}onload="document.linkform.lf_title.focus();" <script src="inc/jquery-ui.min.js#"></script>
{elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();" {/if}
{else}onload="document.linkform.lf_tags.focus();"{/if} > </head>
<div id="pageheader"> <body
{include="page.header"} {if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
<div id="editlinkform"> {elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();"
<form method="post" name="linkform"> {else}onload="document.linkform.lf_tags.focus();"{/if} >
<input type="hidden" name="lf_linkdate" value="{$link.linkdate}"> <div id="pageheader">
<i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" style="width:100%"><br> {include="page.header"}
<i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" style="width:100%"><br> <div id="editlinkform">
<i>Description</i><br><textarea name="lf_description" rows="4" cols="25" style="width:100%">{$link.description|htmlspecialchars}</textarea><br> <form method="post" name="linkform">
<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_url">URL</label>
{if condition="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"} <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"> <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>
{else} </p>
{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="hidden" name="token" value="{$token}">
<input type="submit" value="Cancel" name="cancel_edit" class="bigbutton" style="margin-left:40px;"> {if condition="$http_referer"}
{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="returnurl" value="{$http_referer|htmlspecialchars}">
<input type="hidden" name="token" value="{$token}"> {/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
</script> });
{/if} $("#help").click(function() {
</body> window.open("doc/markdown.php", "myWindow","scrollbars=1, width=400, height=400");
return false;
});
});
</script>
{/if}
</body>
</html> </html>