viveksantayana/ska-referee-test
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 19 Wiki Activity

Finished designing the editor console

Browse Source
This commit is contained in:
Vivek Santayana
2022-06-21 02:44:23 +01:00
parent 4b6dbd4441
commit bc3b811fc9
3 changed files with 46 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ref-test/app/editor/static/css/editor.css
View File

@@ -17,18 +17,32 @@
z-index: 10;
}
.accordion-button div {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
.editor-controls a i {
font-size: larger;
margin: 2px;
}
.accordion-button a {
transform: translate(-50%, -50%);
.option-controls, .block-controls {
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%;
right: 0%;
position: absolute;
transform: translate(0, -50%);
}
.accordion-button::after {
@@ -43,4 +57,13 @@
.accordion-error:not(.collapsed) {
background-color: #bb2d3b;
color: white;
}
.panel-button {
padding: 6px;
margin: 0px 2px;
}
.panel-button i {
font-size: larger;
}

1
ref-test/app/editor/templates/editor/components/base.html
View File

@@ -48,6 +48,7 @@
<script>
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"

127
ref-test/app/editor/templates/editor/index.html
View File

@@ -11,123 +11,22 @@
<h1>Editor</h1>
<div class="container editor-panel" id="editor" tabindex="-1">
<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&#010;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&#010;List of tags</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include "editor/components/client-alerts.html" %}
<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>
<a href="javascript:void(0);" class="btn btn-primary" data-action="add-block" title="Add Block" aria-title="Add Block">
<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>
{% endblock %}