lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update css

Browse source
This commit is contained in:
cuom1999 2024-01-31 20:46:25 -06:00
parent 0de11d26a6
commit 96ad972600
3 changed files with 95 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/comments.scss
View file

@ -208,11 +208,6 @@ a {
} }
.comment-post-wrapper { .comment-post-wrapper {
div {
padding-bottom: 2px;
padding-right: 10px;
}
input, textarea { input, textarea {
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;

17
resources/pagedown_widget.scss
View file

@ -1,3 +1,5 @@
@import "vars";
.wmd-panel { .wmd-panel {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -14,7 +16,7 @@
width: 100%; width: 100%;
background: #fff; background: #fff;
border: 1px solid DarkGray; border: 1px solid DarkGray;
font-family: "Noto Sans",Arial,"Lucida Grande",sans-serif !important; font-family: $monospace-fonts;
} }
.wmd-preview { .wmd-preview {
@ -23,8 +25,14 @@
} }
.wmd-button-row { .wmd-button-row {
margin: 10px 5px 5px; margin-top: 10px;
margin-bottom: 5px;
padding: 0; padding: 0;
display: flex; /* Display as a flex container */
flex-wrap: nowrap; /* Prevent items from wrapping */
overflow-x: auto;
white-space: nowrap;
gap: 3px;
} }
.wmd-button { .wmd-button {
@ -37,8 +45,7 @@
background-position: center; background-position: center;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
padding-left: 2px; flex: 0 0 auto;
padding-right: 3px;
} }
.wmd-bold-button { .wmd-bold-button {
@ -124,7 +131,7 @@
.wmd-spacer .wmd-spacer
{ {
display: inline-flex; display: inline-flex;
width: 20px; width: 10px;
} }
.wmd-prompt-background { .wmd-prompt-background {

170
templates/markdown_editor/markdown_editor.html
View file

@ -1,21 +1,23 @@
{% set layout='no_wrapper' %}
{% extends "base.html" %} {% extends "base.html" %}
{% block media %} {% block media %}
<style> <style>
main{ body{
overflow: hidden; overflow: hidden;
} }
#content{ #content{
width: 100%; width: 100%;
} height: calc(100vh - 50px);
#content.wrapper{ margin-bottom: 0;
padding: 0; padding: 0;
} }
.form-area{ #content-body {
float: left; padding: 0;
width: 47%; height: 100%;
height: 100% display: flex;
} }
.wmd-preview{ .wmd-preview{
float: right; float: right;
margin-top: 0; margin-top: 0;
@ -23,58 +25,54 @@
.width-controller{ .width-controller{
width: 51%; width: 51%;
} }
.wmd-input{ #id_body-preview{
height: calc(100vh - 72px); overflow: scroll;
} }
.right-markdown{ .form-area {
height: calc(100vh - 72px); flex-grow: 1;
overflow-y: scroll;
}
.wrap{
display: flex;
} }
</style> </style>
{% endblock %} {% endblock %}
{% block js_media %} {% block js_media %}
<script> <script>
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const context = this;
const later = () => {
clearTimeout(timeout);
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
function update_preview() {
$.ajax({
url: "{{url('blog_preview')}}",
type: 'POST',
data: {
preview: $(this).val()
},
success: function(data) {
$('#display').html(data);
MathJax.typeset();
populateCopyButton();
},
error: function(error) {
alert(error);
console.log(error.message);
}
})
}
$(document).ready(function(){ $(document).ready(function(){
$("#wmd-input-id_body").on("keyup", function() { const debounced_update_preview = debounce(update_preview, 250);
const csrfToken = "{{ csrf_token }}"; $("#wmd-input-id_body").on("keyup", debounced_update_preview);
$.ajax({
url: "{{url('blog_preview')}}",
type: 'POST',
data: {
preview: $(this).val()
},
success: function(data) {
$('#display').html(data);
MathJax.typeset();
populateCopyButton();
},
error: function(error) {
alert(error);
console.log(error.message)
}
})
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const leftDiv = document.getElementById("wmd-input-id_body");
const rightDiv = document.getElementById("display");
leftDiv.addEventListener("scroll", function() {
rightDiv.scrollTop = leftDiv.scrollTop;
});
rightDiv.addEventListener("scroll", function() {
leftDiv.scrollTop = rightDiv.scrollTop;
});
}); });
</script> </script>
@ -96,46 +94,44 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="wrap"> <div id="new-comment" class="form-area">
<div id="new-comment" class="form-area"> <input type="hidden" name="parent" id="id_parent">
<input type="hidden" name="parent" id="id_parent"> <div class="comment-post-wrapper">
<div class="comment-post-wrapper"> <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
<div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled"> <div class="wmd-panel">
<div class="wmd-panel"> <div id="wmd-button-bar-id_body"></div>
<div id="wmd-button-bar-id_body"></div> <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
<textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea> </div>
</div> <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
<div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button"> <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
<div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div> <div class="dmmd-preview-content content-description"></div>
<div class="dmmd-preview-content content-description"></div> </div>
</div> <div class="pagedown-image-upload">
<div class="pagedown-image-upload"> <h2>{{_('Insert Image')}}</h2>
<h2>{{_('Insert Image')}}</h2> <div class="form-row">
<div class="form-row"> <div>
<div> <label class="label">{{_('From the web')}}</label>
<label class="label">{{_('From the web')}}</label> <input class="url-input" type="text" placeholder="http://">
<input class="url-input" type="text" placeholder="http://">
</div>
</div>
<div class="form-row">
<div>
<label class="label">{{_('From your computer')}}</label>
<input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
</div>
</div>
<div class="submit-row">
<div class="submit-loading"></div>
<input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
<p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
</div> </div>
</div> </div>
</div></div> <div class="form-row">
</div> <div>
<label class="label">{{_('From your computer')}}</label>
<input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
</div>
</div>
<div class="submit-row">
<div class="submit-loading"></div>
<input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
<p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
</div>
</div>
</div></div>
</div> </div>
</div>
<div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content"> <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
<div class="right-markdown dmmd-preview-content content-description" id="display"></div> <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
</div>
</div> </div>
{% endblock %} {% endblock %}