Finished designing the editor console
This commit is contained in:
parent
4b6dbd4441
commit
bc3b811fc9
@ -17,18 +17,32 @@
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-button div {
|
.editor-controls a i {
|
||||||
margin: 0;
|
font-size: larger;
|
||||||
position: absolute;
|
margin: 2px;
|
||||||
top: 50%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-button a {
|
.option-controls, .block-controls {
|
||||||
transform: translate(-50%, -50%);
|
width: fit-content;
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-controls a, .block-controls a {
|
||||||
|
margin: 0 10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-controls a i, .block-controls a i {
|
||||||
|
font-size: larger;
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button div {
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 0%;
|
transform: translate(0, -50%);
|
||||||
position: absolute;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.accordion-button::after {
|
.accordion-button::after {
|
||||||
@ -44,3 +58,12 @@
|
|||||||
background-color: #bb2d3b;
|
background-color: #bb2d3b;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-button {
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-button i {
|
||||||
|
font-size: larger;
|
||||||
|
}
|
||||||
@ -48,6 +48,7 @@
|
|||||||
<script>
|
<script>
|
||||||
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
|
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
|
||||||
</script>
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||||||
<script
|
<script
|
||||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
||||||
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
||||||
|
|||||||
@ -11,123 +11,22 @@
|
|||||||
<h1>Editor</h1>
|
<h1>Editor</h1>
|
||||||
<div class="container editor-panel" id="editor" tabindex="-1">
|
<div class="container editor-panel" id="editor" tabindex="-1">
|
||||||
<div class="accordion" id="editor-root">
|
<div class="accordion" id="editor-root">
|
||||||
<div class="accordion-item" id="i0">
|
|
||||||
<h2 class="accordion-header" id="h0">
|
|
||||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c0" aria-expanded="true" aria-controls="c0">
|
|
||||||
<div class="float-start">Question 1</div>
|
|
||||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
|
||||||
</div>
|
|
||||||
</h2>
|
|
||||||
<div id="c0" class="accordion-collapse collapse" aria-labelledby="h0" data-bs-parent="#editor-root">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<div class="question-text">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">Question 1</span>
|
|
||||||
<textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">Question Type</span>
|
|
||||||
<select id="q0-type" class="form-select">
|
|
||||||
<option value ="Multiple Choice">Multiple Choice</option>
|
|
||||||
<option value="Yes/No">Yes/No</option>
|
|
||||||
<option value="List">Ordered List</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<label for="q0-options" class="form-label">Options</label>
|
|
||||||
<ul class="options" id="q0-options">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-options-0-caption">0</span>
|
|
||||||
<input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-options-1-caption">1</span>
|
|
||||||
<input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<div class="editor-controls">
|
|
||||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
|
||||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-correct-caption">Correct</span>
|
|
||||||
<input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-tags-caption">Tags</span>
|
|
||||||
<textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags
List of tags</textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-item" id="i1">
|
|
||||||
<h2 class="accordion-header" id="h1">
|
|
||||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c1" aria-expanded="true" aria-controls="c1">
|
|
||||||
<div class="float-start">Block 1</div>
|
|
||||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
|
||||||
</div>
|
|
||||||
</h2>
|
|
||||||
<div id="c1" class="accordion-collapse collapse" aria-labelledby="h1" data-bs-parent="#editor-root">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<div class="accordion" id="b1">
|
|
||||||
<div class="accordion-item" id="b1-item">
|
|
||||||
<h2 class="accordion-header" id="h2">
|
|
||||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c2" aria-expanded="true" aria-controls="c2">
|
|
||||||
<div class="float-start">Question 1</div>
|
|
||||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
|
||||||
</div>
|
|
||||||
</h2>
|
|
||||||
<div id="c2" class="accordion-collapse collapse" aria-labelledby="h2" data-bs-parent="#b1">
|
|
||||||
<div class="accordion-body">
|
|
||||||
<div class="question-text">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">Question 1</span>
|
|
||||||
<textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">Question Type</span>
|
|
||||||
<select id="q0-type" class="form-select">
|
|
||||||
<option value ="Multiple Choice">Multiple Choice</option>
|
|
||||||
<option value="Yes/No">Yes/No</option>
|
|
||||||
<option value="List">Ordered List</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<label for="q1-options" class="form-label">Options</label>
|
|
||||||
<ul class="options" id="q1-options">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-options-0-caption">0</span>
|
|
||||||
<input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-options-1-caption">1</span>
|
|
||||||
<input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
<div class="editor-controls">
|
|
||||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
|
||||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-correct-caption">Correct</span>
|
|
||||||
<input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text" id="q0-tags-caption">Tags</span>
|
|
||||||
<textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags
List of tags</textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{% include "editor/components/client-alerts.html" %}
|
{% include "editor/components/client-alerts.html" %}
|
||||||
<div class="editor-controls">
|
<div class="editor-controls">
|
||||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
<a href="javascript:void(0);" class="btn btn-primary" data-action="add-block" title="Add Block" aria-title="Add Block">
|
||||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
<i class="bi bi-folder-plus"></i>
|
||||||
|
Add Block
|
||||||
|
</a>
|
||||||
|
<a href="javascript:void(0);" class="btn btn-primary" data-action="add-question" title="Add Question" aria-title="Add Question">
|
||||||
|
<i class="bi bi-file-plus-fill"></i>
|
||||||
|
Add Question
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="editor-controls">
|
||||||
|
<a href="javascript:void(0);" class="btn btn-danger" data-action="cancel">Cancel</a>
|
||||||
|
<a href="javascript:void(0);" class="btn btn-success" data-action="done">Done</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user