Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.

Commit 0bdd7d2

Browse files
zihan21206zihan21206
committed
💄 Final fix for css
1 parent 9b939b3 commit 0bdd7d2

File tree

5 files changed

+44
-77
lines changed

5 files changed

+44
-77
lines changed

‎runestone/hparsons/css/hparsons.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
div.hparsons div.latexoutput {
2-
background-color: #eeeeee;
3-
padding: 1em;
4-
margin-bottom: 10px;
5-
border-radius: 5px;
1+
.hparsons_section {
2+
position: relative;
3+
margin-right: auto;
4+
margin-left: auto;
5+
max-width: 800px;
6+
clear: both;
67
}
8+
9+
.hparsons_section > *:not(.hparsons_section) {
10+
max-width: 500pt;
11+
margin-left: auto;
12+
margin-right: auto;
13+
}

‎runestone/hparsons/js/horizontal-parsons.js‎

Lines changed: 26 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3047,25 +3047,27 @@ class ParsonsInput {
30473047
this.el = document.createElement('div');
30483048
this.parentElement = parentElement;
30493049
this.el.id = 'regextool-' + this.parentElement.toolNumber + '-parsons-input';
3050-
this.el.append('Drag or click to select from the symbols below to form your code');
3050+
const dragTip = document.createElement('div');
3051+
dragTip.innerText = 'Drag or click to select from the symbols below to form your code';
3052+
dragTip.classList.add('hparsons-tip');
3053+
this.el.append(dragTip);
30513054
this._dragArea = document.createElement('div');
30523055
this.el.appendChild(this._dragArea);
30533056
this._dragArea.classList.add('drag-area');
3054-
this._dragArea.style.height = '20px';
3055-
this._dragArea.style.backgroundColor = '#fffcc4';
3056-
this.el.append('Your Code:');
3057+
const dropTip = document.createElement('div');
3058+
dropTip.innerText = 'Your code:';
3059+
dropTip.classList.add('hparsons-tip');
3060+
this.el.append(dropTip);
30573061
this._dropArea = document.createElement('div');
30583062
this.el.appendChild(this._dropArea);
30593063
this._dropArea.classList.add('drop-area');
3060-
this._dropArea.style.height = '20px';
3061-
// this._dropArea.style.backgroundColor = '#bcebd7';
30623064
this._prevPosition = -1;
30633065
this.expandableBlocks = [];
30643066
this.expandableBlockTooltips = null;
30653067
this._dragSortable = new Sortable(this._dragArea, {
30663068
group: {
30673069
name: 'shared',
3068-
pull: 'clone',
3070+
pull: true,
30693071
put: false
30703072
},
30713073
sort: false,
@@ -15682,29 +15684,26 @@ class HParsonsElement extends HTMLElement {
1568215684
static toolCount = 0;
1568315685
toolNumber;
1568415686
temporaryInputEvent;
15687+
inputDiv;
1568515688
constructor() {
1568615689
super();
1568715690
HParsonsElement.toolCount += 1;
1568815691
// console.log(RegexElement.toolCount);
1568915692
this.toolNumber = HParsonsElement.toolCount;
1569015693
this.root = this.attachShadow({ mode: 'open' });
15691-
this.hparsonsInput = new ParsonsInput(this);
15692-
// add style
1569315694
this.addStyle();
15695+
this.inputDiv = document.createElement('div');
15696+
this.inputDiv.classList.add('hparsons-input');
15697+
this.root.append(this.inputDiv);
15698+
this.hparsonsInput = new ParsonsInput(this);
1569415699
// a div wrapping the input and the test case status
15695-
const inputAndTestStatusDiv = document.createElement('div');
15696-
this.root.append(inputAndTestStatusDiv);
15697-
inputAndTestStatusDiv.classList.add('regex-input-and-test-status');
1569815700
// init regex input based on the input type
15699-
const inputDiv = document.createElement('div');
15700-
inputAndTestStatusDiv.appendChild(inputDiv);
15701-
inputDiv.classList.add('regex-input-div');
1570215701
this._parsonsData = new Array();
1570315702
this.parsonsExplanation = null;
1570415703
this.inputType = 'parsons';
1570515704
// this.regexErrorMessage = document.createElement('div');
1570615705
// this.regexErrorPosition = -1;
15707-
this.initRegexInput(inputDiv);
15706+
this.initRegexInput();
1570815707
this.temporaryInputEvent = {};
1570915708
}
1571015709
set parsonsData(data) {
@@ -15719,60 +15718,22 @@ class HParsonsElement extends HTMLElement {
1571915718
// TODO[refactor]: put stylesheet in a separate css/scss file
1572015719
addStyle = () => {
1572115720
const sheet = document.createElement('style');
15722-
sheet.innerHTML += '.regex-textbox {width: 100%; display:none;}\n';
15723-
sheet.innerHTML += '.regex-input-and-test-status {display: flex; flex-wrap: nowrap;}\n';
15724-
sheet.innerHTML += '.regex-test-status {font-family: monospace; font-size: 15px; color:black; padding:20px 0 0 10px;height: fit-content;}\n';
15725-
sheet.innerHTML += '.regex-test-status.Fail {font-family: monospace; font-size: 15px; color:#ebd071;}\n';
15726-
sheet.innerHTML += '.regex-test-status.Pass {font-family: monospace; font-size: 15px; color:green;}\n';
15727-
// regex status tag
15728-
sheet.innerHTML += '.regex-status { border-radius: 4px; visibility: collapse; font-family: monospace; padding: 3px 6px; margin: 2px 10px; color: #fff; }\n';
15729-
sheet.innerHTML += '.regex-status.error { visibility: visible; background-color: red; }\n';
15730-
sheet.innerHTML += '.regex-status.valid { visibility: visible; background-color: green; }\n';
15731-
sheet.innerHTML += '.parsons-selected {background-color: red;}\n';
15732-
// regex error message
15733-
sheet.innerHTML += '.regex-error-message {color: red; font-family: monospace; font-size: 15px;}\n';
15734-
sheet.innerHTML += '.regex-error-message.hidden {visibility: collapse;}\n';
1573515721
// parsons block
15736-
sheet.innerHTML += '.parsons-block {display: inline-block; font-family: monospace; font-size: large; background-color: white; padding: 1px 2px; border: 1px solid; border-color:gray; margin: 0 1px; border-radius: 2px; position: relative;}\n';
15737-
sheet.innerHTML += '.parsons-block:hover, .parsons-block:focus { border-color: black; padding: 0 6px; border: 2px solid;}\n';
15738-
sheet.innerHTML += '.drop-area { background-color: #b1dafa; }\n';
15739-
sheet.innerHTML += '.drop-area.Pass { background-color: #bcebd7; }\n';
15740-
sheet.innerHTML += '.drop-area.Fail { background-color: #ebd071; }\n';
15741-
sheet.innerHTML += '.drop-area.Error { background-color: #ff99b3; }\n';
15722+
sheet.innerHTML += '.hparsons-input {padding: 15px;}\n';
15723+
sheet.innerHTML += '.hparsons-tip { font-style: italic; }\n';
15724+
sheet.innerHTML += '.parsons-block {display: inline-block; font-family: monospace; border-color:gray; margin: 0 1px; position: relative; border-radius: 10px; background-color: #efefef; border: 1px solid #d3d3d3; padding: 5px 10px; margin-top: 5px;}\n';
15725+
sheet.innerHTML += '.parsons-block:hover, .parsons-block:focus { border-color: black;}\n';
15726+
sheet.innerHTML += '.drop-area { background-color: #ffa; padding: 0 5px; height: 42px; }\n';
1574215727
// TODO:(UI) move the tooltip to the top of the line
1574315728
sheet.innerHTML += '.parsons-block .tooltip { visibility: hidden; width: 200px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; margin: 0 10px; bottom: 120%; margin-left: -100px;}\n';
1574415729
sheet.innerHTML += '.parsons-block .tooltip::after {content: " ";position: absolute; top: 100%;left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}\n';
1574515730
sheet.innerHTML += '.drag-area .parsons-block:hover .tooltip { visibility: visible;}\n';
15746-
sheet.innerHTML += '.drag-area{ width: 510px;}\n';
15747-
sheet.innerHTML += '.regex-test-string-container {display:flex;}\n';
15748-
sheet.innerHTML += '.regex-test-string-div, .regex-input-div { margin: 8px 0; height: fit-content; }\n';
15749-
sheet.innerHTML += '.regex-test-string-div { flex: 1; }\n';
15750-
sheet.innerHTML += '.regex-input-div { width: 80%; }\n';
15751-
sheet.innerHTML += '.regex-input-div > div {display:inline-block;}\n';
15752-
// the dropdown menu for regex options
15753-
sheet.innerHTML += '.regex-options-dropdown-btn { background-color: #3498DB; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;}\n';
15754-
sheet.innerHTML += '.regex-options-dropdown-btn:hover, .regex-options-dropdown-btn:focus { background-color: #2980B9;}\n';
15755-
sheet.innerHTML += '.regex-options-dropdown { position: relative; display: inline-block; }\n';
15756-
sheet.innerHTML += '.regex-options-container { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}\n';
15757-
sheet.innerHTML += '.regex-options-container > button{ color: black; padding: 12px 16px; text-decoration: none; display: block; width: -webkit-fill-available;}\n';
15758-
sheet.innerHTML += '.regex-options-container .selected{ background-color: pink;}\n';
15759-
sheet.innerHTML += '.show {display:block;}\n';
15731+
sheet.innerHTML += '.drag-area { background-color: #efefff; padding: 0 5px; height: 42px; }\n';
1576015732
// unittest
15761-
sheet.innerHTML += '.regex-unittest > table, .regex-unittest td {border: 1px solid black; padding: 3px; text-align: center; border-collapse: collapse;}\n';
15762-
// TODO: showing the table for now
15763-
// sheet.innerHTML += '.regex-unittest > table, .regex-unittest td {border: 1px solid black; padding: 3px; text-align: center;}\n'
15764-
// sheet.innerHTML += '.regex-unittest.collapse{display:none;}\n'
15765-
// for study 0: hide the table
15766-
sheet.innerHTML += '.hidetests .regex-unittest{display:none;}\n';
15767-
document.body.appendChild(sheet);
1576815733
this.root.appendChild(sheet);
1576915734
const global_sheet = document.createElement('style');
15770-
global_sheet.innerHTML += '.regex-test-string .ql-editor, .regex-input .ql-editor { padding: 5px; border: 1px solid; border-radius: 3px; font-family: monospace; font-size: 14px; box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%); line-height: 18px; letter-spacing: 0.5px;}\n';
1577115735
global_sheet.innerHTML += '.regex-input .ql-editor {height: fit-content;}\n';
1577215736
global_sheet.innerHTML += '.ql-editor { box-shadow: 0 0 2px 5px #b1dafa; margin: 5px; }\n';
15773-
global_sheet.innerHTML += '.Pass .ql-editor { box-shadow: 0 0 2px 5px #bcebd7; margin: 5px; }\n';
15774-
global_sheet.innerHTML += '.Fail .ql-editor { box-shadow: 0 0 2px 5px #ebd071; margin: 5px; }\n';
15775-
global_sheet.innerHTML += '.Error .ql-editor { box-shadow: 0 0 2px 5px #ff99b3; margin: 5px; }\n';
1577615737
this.appendChild(global_sheet);
1577715738
};
1577815739
logEvent = (eventContent) => {
@@ -15808,29 +15769,28 @@ class HParsonsElement extends HTMLElement {
1580815769
attributeChangedCallback(name, oldValue, newValue) {
1580915770
switch (name) {
1581015771
case 'input-type': {
15811-
this.initRegexInput(this.root.querySelector('.regex-input-div'));
15772+
this.initRegexInput();
1581215773
break;
1581315774
}
1581415775
}
1581515776
}
15816-
initRegexInput(inputDiv) {
15817-
inputDiv.innerHTML = '';
15777+
initRegexInput() {
15778+
this.inputDiv.innerHTML = '';
1581815779
let inputType = this.getAttribute('input-type');
1581915780
this.inputType = inputType == 'parsons' ? 'parsons' : 'text';
1582015781
this._parsonsData = new Array();
1582115782
this.parsonsExplanation = null;
15822-
inputDiv.appendChild(document.createElement('br'));
1582315783
// todo:(UI) fix the css for the input
1582415784
if (this.inputType == 'parsons') {
1582515785
// init elements: parsons regex input
1582615786
this.hparsonsInput = new ParsonsInput(this);
15827-
inputDiv.appendChild(this.hparsonsInput.el);
15787+
this.inputDiv.appendChild(this.hparsonsInput.el);
1582815788
}
1582915789
else {
1583015790
// (this.inputType == 'text')
1583115791
const regex_slot = document.createElement('slot');
1583215792
regex_slot.name = 'regex-input';
15833-
inputDiv.appendChild(regex_slot);
15793+
this.inputDiv.appendChild(regex_slot);
1583415794
// TODO: (refactor) rename RegexInput
1583515795
this.hparsonsInput = new TextInput(this);
1583615796
this.appendChild(this.hparsonsInput.el);

‎runestone/hparsons/js/hparsons-sql.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default class SQLHParons extends RunestoneBase {
139139
// copied from activecode, already modified to add parsons
140140
createEditor() {
141141
this.outerDiv = document.createElement("div");
142-
$(this.outerDiv).addClass("ac_section alert alert-warning");
142+
$(this.outerDiv).addClass("hparsons_section alert alert-warning");
143143
$(this.origElem).replaceWith(this.outerDiv);
144144
this.outerDiv.innerHTML = `<horizontal-parsons input-type='parsons' id='${this.divid}-hparsons'>`;
145145
this.hparsons = $(this.outerDiv).find("horizontal-parsons")[0];

‎runestone/hparsons/test/_sources/index.rst‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Horizontal Parsons Test
44

55
.. Testing horizontal Parsons problems.
66
7-
Horizontal Parsons + SQL
7+
Horizontal Parsons + SQL aaa
88
--------------------------------------
99
.. hparsons:: test_activecode_6
1010
:language: sql

‎test.sh‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
#!/bin/bash
2-
# cd ~/code/regex
3-
# npm run build
4-
# cp ~/code/regex/packages/horizontal-parsons/horizontal-parsons.js ~/code/RunestoneComponents/runestone/hparsons/js/horizontal-parsons.js
5-
cd ~/RunestoneComponents
2+
cd ~/code/regex
3+
npm run build
4+
cp ~/code/regex/packages/horizontal-parsons/horizontal-parsons.js ~/code/RunestoneComponents/runestone/hparsons/js/horizontal-parsons.js
5+
cd ~/code/RunestoneComponents
66
npm run build
77
pip install .
88
cd runestone/hparsons/test

0 commit comments

Comments
 (0)