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

public/css/main.css

@@ -1254,6 +1254,31 @@ html, body {
     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 {
     margin-bottom: 8px;
 }
@@ -2083,11 +2108,19 @@ p.upload-rules a {
 .upload-form-table .table-torrent-link input[type="text"] {
     width: 62%;
 }
-.upload-form-table .editor-statusbar {
-    position: relative;
-    margin-top: -27px;
-    margin-bottom: 2px;
+.upload-form-table #desc {
+	margin-bottom: 20px;
+}
+.comment-text .editor-statusbar {
+    right: 9px;
+    bottom: 20px;
+}
+.editor-statusbar {
+    position: absolute;
+	padding: 0;
+    right: 8px;
     z-index: 1;
+    bottom: 6px;
 }
 
 .upload-form-table details {

public/css/themes/classic.css

@@ -279,6 +279,9 @@ select.form-input {
 .CodeMirror {
     padding: 0;
 }
+.comment-form .CodeMirror, .comment-form .CodeMirror-scroll {
+	min-height: 70px;
+}
 
 .upload-form-table .checkbox-container {
     height: 22px;
@@ -689,33 +692,58 @@ span.tag {
 }
 .upload-form-table .table-torrent-link input {
     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;
     font-size: 10px;
 }
-.upload-form-table .editor-toolbar, .upload-form-table .CodeMirror {
+.editor-toolbar, .CodeMirror {
     border-radius: 0;
     border-color: #c4c4c4;
     opacity: 1;
 }
-.upload-form-table .editor-toolbar::before {
+.editor-toolbar::before {
     margin-bottom: 2px;
 }
-.upload-form-table .editor-toolbar::after {
+.editor-toolbar::after {
     margin-top: 4px;
 }
-.upload-form-table .editor-toolbar a {
+.editor-toolbar a {
     width: 26px;
     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;
 }
+.comment-form .editor-toolbar a:before {
+    line-height: 18px;
+}
 .upload-form-table .CodeMirror-scroll, .upload-form-table .CodeMirror {
     min-height: 120px;
 }
-.upload-form-table .CodeMirror-scroll {
+.CodeMirror-scroll {
     max-width: unset!important;
 }
 

templates/site/torrents/upload.jet.html

@@ -64,7 +64,7 @@
 		  </tr>
 		  <tr>
 		     <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 class="hidden">
 		     <td class="table-input-label"><label for="anidex_api">Upload to Anidex:</label></td>

templates/site/torrents/view.jet.html

@@ -337,6 +337,7 @@ Modal.Init({
   button: ["#reportPopup", "#tagPopup"]
 });
 </script>
+<script type="text/javascript" src="{{ URL.Parse("/js/simplemde.min.js") }}"></script>
 {{ if !torrentFileExists(Torrent.Hash, Torrent.TorrentLink)}}
 <script type="text/javascript">
 	var torrentLink = document.getElementById("torrent-download-link"),
@@ -379,6 +380,7 @@ Modal.Init({
 		});
 	}
 </script>
+<script type="text/javascript">new SimpleMDE({ element: document.getElementsByName("comment")[0], spellChecker: false, showIcons: [ "strikethrough", "code", "table", "horizontal-rule" ] });</script>
 {{end}}
 {{if Torrent.StatsObsolete[1] }}
 <script type="text/javascript">