Add Markdown editor to view page (#1736)
* Update view.jet.html * Styling to make the markdown textarea smaller by default * Fix markdown editor in fullscreen * Different positionsand sizes are needed in classic theme * Add class to <td> containing description textarea, needed in order to apply a CSS rule onto it
Cette révision appartient à :
Parent
04896f3ec4
révision
03d9d4e680
|
@ -1254,6 +1254,31 @@ html, body {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.CodeMirror-fullscreen, .editor-toolbar.fullscreen {
|
||||||
|
max-width: none!important;
|
||||||
|
}
|
||||||
|
.editor-toolbar.fullscreen {
|
||||||
|
padding: 8px 6px!important;
|
||||||
|
}
|
||||||
|
.comment-form .CodeMirror, .comment-form .CodeMirror-scroll {
|
||||||
|
min-height: 122px;
|
||||||
|
}
|
||||||
|
.comment-text, .markdown-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.comment-form .editor-toolbar {
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
.comment-form .editor-toolbar:before {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.comment-form .editor-toolbar:after {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.comment-form h3 {
|
.comment-form h3 {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
@ -2083,11 +2108,19 @@ p.upload-rules a {
|
||||||
.upload-form-table .table-torrent-link input[type="text"] {
|
.upload-form-table .table-torrent-link input[type="text"] {
|
||||||
width: 62%;
|
width: 62%;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-statusbar {
|
.upload-form-table #desc {
|
||||||
position: relative;
|
margin-bottom: 20px;
|
||||||
margin-top: -27px;
|
}
|
||||||
margin-bottom: 2px;
|
.comment-text .editor-statusbar {
|
||||||
|
right: 9px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
.editor-statusbar {
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
right: 8px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-form-table details {
|
.upload-form-table details {
|
||||||
|
|
|
@ -279,6 +279,9 @@ select.form-input {
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.comment-form .CodeMirror, .comment-form .CodeMirror-scroll {
|
||||||
|
min-height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
.upload-form-table .checkbox-container {
|
.upload-form-table .checkbox-container {
|
||||||
height: 22px;
|
height: 22px;
|
||||||
|
@ -689,33 +692,58 @@ span.tag {
|
||||||
}
|
}
|
||||||
.upload-form-table .table-torrent-link input {
|
.upload-form-table .table-torrent-link input {
|
||||||
width: 100%!important;
|
width: 100%!important;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar {
|
.editor-toolbar, .CodeMirror {
|
||||||
|
max-width: 459px;
|
||||||
|
}
|
||||||
|
.editor-toolbar.fullscreen {
|
||||||
|
top: 40px;
|
||||||
|
}
|
||||||
|
.CodeMirror-fullscreen {
|
||||||
|
top: 90px;
|
||||||
|
}
|
||||||
|
.markdown-container .editor-statusbar {
|
||||||
|
bottom: 6px;
|
||||||
|
left: 141px;
|
||||||
|
}
|
||||||
|
.editor-statusbar {
|
||||||
|
bottom: 19px;
|
||||||
|
left: 209px;
|
||||||
|
right: unset!important;
|
||||||
|
}
|
||||||
|
.editor-toolbar {
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar, .upload-form-table .CodeMirror {
|
.editor-toolbar, .CodeMirror {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-color: #c4c4c4;
|
border-color: #c4c4c4;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar::before {
|
.editor-toolbar::before {
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar::after {
|
.editor-toolbar::after {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar a {
|
.editor-toolbar a {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
.upload-form-table .editor-toolbar a:before {
|
.comment-form .editor-toolbar a {
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.editor-toolbar a:before {
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
}
|
}
|
||||||
|
.comment-form .editor-toolbar a:before {
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
.upload-form-table .CodeMirror-scroll, .upload-form-table .CodeMirror {
|
.upload-form-table .CodeMirror-scroll, .upload-form-table .CodeMirror {
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
}
|
}
|
||||||
.upload-form-table .CodeMirror-scroll {
|
.CodeMirror-scroll {
|
||||||
max-width: unset!important;
|
max-width: unset!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -64,7 +64,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="table-input-label"><label for="desc">{{ T("torrent_description")}}</label></td>
|
<td class="table-input-label"><label for="desc">{{ T("torrent_description")}}</label></td>
|
||||||
<td class="table-input"><textarea name="desc" id="desc" class="form-input up-input" style="height: 10rem;">{{Form.Description}}</textarea></td>
|
<td class="table-input markdown-container"><textarea name="desc" id="desc" class="form-input up-input" style="height: 10rem;">{{Form.Description}}</textarea></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="hidden">
|
<tr class="hidden">
|
||||||
<td class="table-input-label"><label for="anidex_api">Upload to Anidex:</label></td>
|
<td class="table-input-label"><label for="anidex_api">Upload to Anidex:</label></td>
|
||||||
|
|
|
@ -337,6 +337,7 @@ Modal.Init({
|
||||||
button: ["#reportPopup", "#tagPopup"]
|
button: ["#reportPopup", "#tagPopup"]
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/javascript" src="{{ URL.Parse("/js/simplemde.min.js") }}"></script>
|
||||||
{{ if !torrentFileExists(Torrent.Hash, Torrent.TorrentLink)}}
|
{{ if !torrentFileExists(Torrent.Hash, Torrent.TorrentLink)}}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var torrentLink = document.getElementById("torrent-download-link"),
|
var torrentLink = document.getElementById("torrent-download-link"),
|
||||||
|
@ -379,6 +380,7 @@ Modal.Init({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/javascript">new SimpleMDE({ element: document.getElementsByName("comment")[0], spellChecker: false, showIcons: [ "strikethrough", "code", "table", "horizontal-rule" ] });</script>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if Torrent.StatsObsolete[1] }}
|
{{if Torrent.StatsObsolete[1] }}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
Référencer dans un nouveau ticket