Skip to content

Commit

Permalink
Added lots of css changes to dialog and changed functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmols
dmols committed Feb 13, 2024
1 parent d28bfc9 commit 088a39d
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 79 deletions.
2 changes: 1 addition & 1 deletion src/creator.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ Hangman.controller 'HangmanCreatorCtrl', ['$timeout', '$scope', '$sanitize', 'Re
$scope.hideCover()

$scope.hideCover = ->
$scope.showTitleDialog = $scope.showIntroDialog = false
$scope.showTitleDialog = $scope.showIntroDialog = $scope.questionBankDialog = false

$scope.initNewWidget = (widget, baseUrl) ->
$scope.$apply ->
Expand Down
57 changes: 31 additions & 26 deletions src/creator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@
<div class="logo"></div>
<h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
<div ng-click="showTitleDialog = true" class="link">Edit...</div>
<button class= "questionBankButton" ng-click="questionBankDialog = !questionBankDialog">Question Bank</button>
<button
ng-class= "{'questionBankButton': true, 'gray-out': !enableQuestionBank}"
ng-click="questionBankDialog = !questionBankDialog"
ng-disabled="items.length === 0">
Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
</button>
<span class="attempts">
<p>Incorrect guesses per phrase</p>
<div class="slide-btn">
Expand Down Expand Up @@ -170,34 +175,10 @@ <h3>Phrase</h3>
<span>{{currentPage+1}}/{{numberOfPages()}}</span>
<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage+1">Next</button>
</div>
<div ng-show= "questionBankDialog" class="overlay"></div>
<div class="questionBankDialog-wrapper" ng-show= "questionBankDialog">
<div class="questionBankDialog">
<div class="enable-qb-question">
<strong>Enable question bank? </strong>
<div>
<span>
<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
</span>
</div>
</div>
<div>
<span ng-show="enableQuestionBank" >
<strong>How many questions to ask? </strong>
<div>
<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
<span> out of {{items.length}} </span>
</div>
</span>
</div>
</div>
<button class="dialogCloseButton" ng-click="(questionBankVal <= items.length && questionBankVal > 0) && (questionBankDialog = !questionBankDialog)">Okay</button>
</div>
<div ng-show="!items.length &amp;&amp; step" class="arrow-box">
<span>Click here to add your first question</span>
</div>
<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog }"></div>
<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog || questionBankDialog }"></div>
<div ng-class="{ show: showIntroDialog }" class="box intro">
<img src="assets/creator_example.png">
<h1>Guess the Phrase</h1>
Expand All @@ -213,5 +194,29 @@ <h1>Guess the Phrase</h1>
<input type="text" placeholder="My Guess the Phrase widget" ng-model="title" focus-me="showTitleDialog" ng-enter="hideCover()">
<input type="button" value="Done" ng-click="hideCover()">
</div>
<div ng-class="{ show: questionBankDialog }" ng-click= 'hideCover()' class="box questionBankDialog">
<div class="enable-qb-question">
<strong>Enable question bank? </strong>
<div class="enable-qb-options" ng-click="$event.stopPropagation()">
<span>
<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
</span>
</div>
</div>
<div>
<span ng-show="enableQuestionBank" >
<strong>How many questions to ask? </strong>
<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
<span> out of {{items.length}} </span>
</div>
</span>
</div>
<button class="dialogCloseButton"
ng-click="(questionBankVal <= items.length && questionBankVal > 0) && (questionBankDialog = !questionBankDialog)"
ng-disabled="questionBankVal < 0 || questionBankVal > items.length">Confirm</button>
</div>

</body>
</html>
156 changes: 104 additions & 52 deletions src/creator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,81 @@ button.add-question {
}
}

.questionBankDialog {

position: fixed;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
background-color: white;
padding: 0;
height: 200px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

input {
margin-top: 0;
padding: 0;
width: unset;
background: white;
font-size: 17px;
text-align: center;
border: none;
vertical-align: unset;
font-family: 'Lato';
}
.num-input-wrapper {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
margin-bottom: 15px;

.numInput {
color: black;
outline: 1px solid black;
width: 35px;
margin: 2px 5px 0 0;
}
}

.enable-qb-question {
margin-top: 15px;
margin-bottom: 15px;

.enable-qb-options {
display: flex;
justify-content: center;
}
}

.dialogCloseButton {
position: relative;
margin-top: 5px;
margin-bottom: 5px;
font-size: 15px;
width: 100px;
background-color: #70bd34;
color: black;

&:hover {
background-color: #88df45;
border: 1px solid #88df45;
color: black;
cursor: pointer;
}

&:disabled {
background-color: #cccccc;
color: white;
}
}
}

.arrow-box {
position: absolute;
background: #fbf767;
Expand Down Expand Up @@ -622,9 +697,37 @@ button.add-question {

.questionBankButton {
position: absolute;
background-color: #5a5a5a;
background-color: $green;
color: #fff;
width: unset;
right: 550px;
top: 35px;

&:hover {
background-color: #7AD038;
cursor: pointer;
}

&:disabled {
background-color: #ccc;
border: 1px solid #ccc;
color: #fff;
cursor: not-allowed;
}

&.gray-out:not(:disabled) {
background-color: #5a5a5a;
border: 1px solid #5a5a5a;
color: #fff;

&:hover {
background-color: #938f8f;
border: 1px solid #938f8f;
cursor: pointer;
}

}

}

.attempts {
Expand Down Expand Up @@ -780,57 +883,6 @@ button.add-question {
}
}

.questionBankDialog-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid greenyellow;
border-radius: 5px;
background-color: white;
color: black;
height: 300px;
width: 250px;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;

.questionBankDialog {
margin: 15px;

.numInput {
width: 30px;
margin-top: 10px;
}

.enable-qb-question {
margin-top: 15px;
margin-bottom: 15px;
}

}

.dialogCloseButton {
position: absolute;
bottom: 10px;
background-color: rgb(26, 244, 171);
color: black;
}

}

// To blur the background while the dialog is open
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9000;
backdrop-filter: blur(5px);
}

.question-tip {
position: absolute;
right: 28px;
Expand Down

0 comments on commit 088a39d

Please sign in to comment.