Skip to content

Commit

Permalink
Merge pull request #41 from EmpowrOrg/dev
Browse files Browse the repository at this point in the history 
RC 1
  • Loading branch information
@dri94
dri94 authored Oct 3, 2022
2 parents a78eb2c + 67a5ca2 commit 45378b3
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 218 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ An XBlock for Empowr's course platform that allows for the input and checking of


## TODO

- Fix Solution Tab. Most work for a solution tab is done, however it doesn't properly display.
- Add support for all CodeMirror languages. This is an easy task, just tedious.

## Installation
Expand Down
65 changes: 54 additions & 11 deletions swiftplugin/swiftplugin/static/css/swiftplugin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
.nav-link#yoursolution2-tab, .nav-link#empowrsolution-tab {
display: block;
padding: .5rem 1rem;
color: white;
/* color: white; */
color: #424242!important;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
Expand All @@ -30,7 +31,7 @@ div#code-container-area {
border-style: solid;
border-radius: 16px;
border-color: rgb(132, 132, 132)!important;
height:80vh;
height: calc(70vmin + 40px);
overflow:hidden;
}

Expand All @@ -41,7 +42,7 @@ div#code-container-area {

.code-bottom {
background: none;
height: 30vh;
/* height: 30vh; */
display: flex;
flex-direction: column;
}
Expand All @@ -58,7 +59,7 @@ div#code-container-area {
.CodeMirror-wrap {
width: 50% !important;
border-right: 1px solid #e6e6e6;
min-height: 600px;
/* min-height: 600px; */
border-radius: 16px 0 0 16px;

}
Expand All @@ -74,22 +75,64 @@ div#code-container-area {
border-color: #7730b0 !important;
}

.btn-primary#select-lang-btn, .btn-primary#submit-btn {
color: #fff !important;
background-color: #5c0e81 !important;
border-color: #5c0e81 !important;
}

.btn-primary#select-lang-btn:hover, .btn-primary#submit-btn:hover {
background-color: #7730b0 !important;
border-color: #7730b0 !important;
}

.CodeMirror{
height: auto !important;
}

.instructions-container, .CodeMirror-wrap{
height: 70vmin !important;
overflow-y: scroll;
}

.heading-dropdown-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}

.tab-pane.fade.show.active + .tab-pane.fade.hidden.active{
margin-bottom: -70vmin;
}

.CodeMirror.cm-s-default.CodeMirror-wrap{
width: 100% !important;
}

.tab-content-wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px){
.CodeMirror-wrap{
width: 100% !important;
min-height: 400px;
/* min-height: 400px; */
}
div#code-container-area {
height:100vh;
/* height:100vh; */
overflow:hidden;

}

textarea#code-solution-area {
border: 1px solid #e6e6e6;
width: 100%;
min-height: 400px;
div#code-solution-area {
height:100vh;
overflow:hidden;
}
}

@media only screen and (max-width: 992px) {
.heading-dropdown-wrapper {
flex-direction: column;
align-items: flex-start;
}
}
79 changes: 40 additions & 39 deletions swiftplugin/swiftplugin/static/html/swiftplugin.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<section class="col-md-12">
<div class="container">
<div class="col-12">

<h1 class="mb-2" id="assignment-title">Title</h1>
<div id="code-container-area">
<ul class="nav nav-pills" id="myTab" role="tablist">
Expand All @@ -18,50 +17,52 @@ <h1 class="mb-2" id="assignment-title">Title</h1>
</button>
</li>
</ul>
<div class="tab-content " id="myTabContent">
<div class="tab-pane fade show active" id="yoursolution2" role="tabpanel"
aria-labelledby="yoursolution2-tab">
<div class="row code-solution-row">
<textarea id="code-area" rows="25" class="col-sm-12 col-md-6 col-lg-12">Layout 2</textarea>
<div class="col-md-6 instructions-container">
<div class="mt-4">
<h1 class="mb-2">Instructions</h1>
<p id="assigment-instructions-text"></p>
<a id="run-btn" class="btn btn-primary btn-shadow-primary-100"
href="javascript:void(0);">Run Code
</a>
<a id="submit-btn" class="btn btn-primary btn-shadow-primary-100"
href="javascript:void(0);">Submit Code
</a>
</div>
<h1 id="response-title" class="mt-2 mb-2">Output</h1>
<div class="code-bottom mb-4">
<div id="response-area">
<p class="response-txt" id="response-txt" readonly></p>
</div>
</div>
<br>
<div class="tab-content-wrapper">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="yoursolution2" role="tabpanel"
aria-labelledby="yoursolution2-tab">
<div class="row code-solution-row">
<textarea id="code-area" rows="25"
class="col-sm-12 col-md-6 col-lg-12">Layout 2</textarea>
</div>
</div>
<div class="tab-pane fade hidden active" id="empowrsolution" role="tabpanel"
aria-labelledby="empowrsolution-tab">
<div class="row code-solution-row">
<textarea id="code-solution-area" rows="25" class="col-sm-12 col-md-6"
readonly></textarea>
</div>
</div>
</div>
<div class="tab-pane fade hidden active" id="empowrsolution" role="tabpanel"
aria-labelledby="empowrsolution-tab">
<div class="row code-solution-row">
<textarea id="code-solution-area" rows="25" class="col-sm-12 col-md-6" readonly></textarea>
<div class="col-md-6 instructions-container">
<div class="mt-4">
<h1 class="mb-2">Instructions</h1>
<p class="assigment-instructions-text"></p>
</div>
<h1 class="mt-2 mb-2">Expected Output</h1>
<div class="code-bottom mb-4">
<div class="response-area">
<p class="response-txt" class="response-txt" readonly></p>
</div>
<div class="instructions-container">
<div>
<div class="heading-dropdown-wrapper">
<h1 class="mb-2">Instructions</h1>
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" id="select-lang-btn" href="#"
role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-expanded="false">
Select Language
</a>
<ul id="ul-1" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
</ul>
</div>
<br>
</div>
<p id="assigment-instructions-text"></p>
<a id="run-btn" class="btn btn-primary btn-shadow-primary-100"
href="javascript:void(0);">Run Code
</a>
<a id="submit-btn" class="btn btn-primary btn-shadow-primary-100"
href="javascript:void(0);">Submit Code
</a>
</div>
<h1 id="response-title" class="mt-2 mb-2">Output</h1>
<div class="code-bottom mb-4">
<div id="response-area">
<p class="response-txt" id="response-txt" readonly></p>
</div>
</div>
<br>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 45378b3

Please sign in to comment.