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

[add] markdown documentation 

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

113
tpl/editlink.html
View File

@ -1,45 +1,80 @@
<!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>
<body
{if condition="$link.title==''"}onload="document.linkform.lf_title.focus();"
{elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();"
{else}onload="document.linkform.lf_tags.focus();"{/if} >
<div id="pageheader">
{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>
{if condition="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
<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();"
{elseif condition="$link.description==''"}onload="document.linkform.lf_description.focus();"
{else}onload="document.linkform.lf_tags.focus();"{/if} >
<div id="pageheader">
{include="page.header"}
<div id="editlinkform">
<form method="post" name="linkform">
<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">
&nbsp;<label for="lf_private"><i>Private</i></label><br>
{else}
&nbsp;<label for="lf_private">Private</label>
</p>
{else}
<p>
<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}
<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}
</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});
});
</script>
{/if}
</body>
<input type="hidden" name="token" value="{$token}">
{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
});
$("#help").click(function() {
window.open("doc/markdown.php", "myWindow","scrollbars=1, width=400, height=400");
return false;
});
});
</script>
{/if}
</body>
</html>