Skip to content

Commit f2779cb

Browse files
author
Matthew Petersen
committed
layout for trivia category selection
1 parent 660b7f7 commit f2779cb

File tree

2 files changed

+133
-82
lines changed

2 files changed

+133
-82
lines changed

‎myviews/settings.ejs

+104-63
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,17 @@
1414

1515
<!-- Additional js libs -->
1616
<!-- <script src="<%=baseUrl%>/js/jquery-3.3.1.slim.min.js"></script> -->
17-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
19-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
20-
<!-- <script src="<%=baseUrl%>/js/bootstrap.min.js"></script> -->
17+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
19+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
2120
<!-- <script src="<%=baseUrl%>/js/bootstrap-colourpicker.min.js"></script> -->
2221
<script src="/js/iro.min.js"></script>
2322

2423
<!--- CSS -->
25-
<link rel="stylesheet" href="<%=baseUrl%>/css/bootstrap.min.css">
26-
<link rel="stylesheet" href="<%=baseUrl%>/css/font-awesome.min.css">
24+
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
2725
<link rel="stylesheet" href="<%=baseUrl%>/css/settings-styles.css">
2826
<link rel="stylesheet" href="<%=baseUrl%>/css/light.min.css">
27+
<link rel="stylesheet" href="<%=baseUrl%>/css/font-awesome.min.css">
2928
<!-- <link rel="stylesheet" href="<%=baseUrl%>/css/bootstrap-colourpicker.min.css"> -->
3029
<!-- <script src="/js/script.js"></script> -->
3130

@@ -877,6 +876,7 @@
877876
</div>
878877
<div id="collapseTrivia" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTrivia">
879878
<div class="panel-body">
879+
<small class="form-text text-muted">Questions are refreshed daily, or after a restart/save.</small><br>
880880
<div class="form-group">
881881
<div class="custom-control custom-control-nolabel custom-switch ml-auto">
882882
<input type="checkbox" class="custom-control-input" name="enableTrivia" id="enableTrivia"
@@ -895,7 +895,7 @@
895895
<label for="triviaTimer">Trivia timer</label>
896896
<input type="text" class="form-control" id="triviaTimer" name="triviaTimer" aria-describedby="triviaTimer" placeholder="Suggest 15"
897897
value="<% if(typeof formData !== 'undefined' && errors){%><%=formData.triviaTimer%>"<%}else{%><%=settings.triviaTimer%>"<%}%>>
898-
<small id="triviaTimerHelp" class="form-text text-muted">Enter the number of seconds for trivia questions to run for.</small>
898+
<small id="triviaTimerHelp" class="form-text text-muted">Enter the number of seconds for the trivia countdown timer.</small>
899899
</div>
900900
<div class="form-group">
901901
<label for="triviaTimer">Number of questions</label>
@@ -905,70 +905,111 @@
905905
</div>
906906
907907
<label for="exampleFormControlSelect2">Trivia categories</label>
908-
<select multiple class="form-control triviaCategories" id="triviaCategories" name="triviaCategories"
909-
value="<% if(typeof formData !== 'undefined' && errors){%><%=formData.triviaCategoriesr%>"<%}else{%><%=settings.triviaCategories%>"<%}%>>
910-
<option value="9">General Knowledge</option>
911-
<option value="10">Books</option>
912-
<option value="11">Film</option>
913-
<option value="12">Music</option>
914-
<option value="14">Television</option>
915-
<option value="31">Anime and Manga</option>
916-
<option value="18">Computers</option>
917-
<option value="15">Video Games</option>
918-
<option value="16">Board Games</option>
919-
<option value="17">Science and Nature</option>
920-
<option value="19">Mathematics</option>
921-
<option value="13">Musicals and Theatres</option>
922-
<option value="20">Mythology</option>
923-
<option value="21">Sports</option>
924-
<option value="22">Geography</option>
925-
<option value="23">History</option>
926-
<option value="24">Politics</option>
927-
<option value="25">Art</option>
928-
<option value="26">Celebrities</option>
929-
<option value="27">Animals</option>
930-
<option value="28">Vehicles</option>
931-
<option value="29">Comics</option>
932-
<option value="30">Gadgets</option>
933-
<option value="32">Cartoon and Animation</option>
934-
</select>
935-
<div class="form-text text-muted"><small>Select trivia categories. (hold ctrl to multi-select)</small>
936-
</div>
937-
938-
<script lang="javascript">
939-
// select saved or forms triva categories
940-
var formCategories = [];
941-
var savedCategories = [];
942-
<%if(typeof formData !== 'undefined' && errors){%>
943-
formCategories = '<%=formData.triviaCategories%>'.split(',')%>;
944-
$('select[name=triviaCategories]').val(formCategories);
945-
//$('.triviaCategories').triviaCategories('refresh');
946-
<%}else{%>
947-
savedCategories = '<%=settings.triviaCategories%>'.split(',')%>;
948-
$('select[name=triviaCategories]').val(savedCategories);
949-
//$('.triviaCategories').triviaCategories('refresh');
950-
<%}%>
951-
</script>
908+
<div class="dropdown">
909+
<button class="btn btn-secondary dropdown-toggle" type="button"
910+
id="dropdownMenu1" data-toggle="dropdown"
911+
aria-haspopup="true" aria-expanded="true">Question cateogries
912+
<i class=""></i>
913+
<span class="caret"></span>
914+
</button>
915+
<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1" id="x" name="x">
916+
<li><label class="categoryTitle"><b>General</b></label></li>
917+
<li><label><input type="checkbox" name="triviaCategories" value="27">Animals</label></li>
918+
<li><label><input type="checkbox" name="triviaCategories" value="30">Gadgets</label></li>
919+
<li><label><input type="checkbox" name="triviaCategories" value="9">General Knowledge</label></li>
920+
<li><label><input type="checkbox" name="triviaCategories" value="20">Mythology</label></li>
921+
<li><label><input type="checkbox" name="triviaCategories" value="21">Sports</label></li>
922+
<li><label><input type="checkbox" name="triviaCategories" value="28">Vehicles</label></li>
923+
<li><label class="categoryTitle"><b>Entertainment</b></label></li>
924+
<li><label><input type="checkbox" name="triviaCategories" value="25">Art</label></li>
925+
<li><label><input type="checkbox" name="triviaCategories" value="16">Board Games</label></li>
926+
<li><label><input type="checkbox" name="triviaCategories" value="26">Celebrities</label></li>
927+
<li><label><input type="checkbox" name="triviaCategories" value="13">Musicals and Theatres</label></li>
928+
<li><label><input type="checkbox" name="triviaCategories" value="15">Video Games</label></li>
929+
<li><label class="categoryTitle"><b>Media</b></label></li>
930+
<li><label><input type="checkbox" name="triviaCategories" value="31">Anime and Manga</label></li>
931+
<li><label><input type="checkbox" name="triviaCategories" value="10">Books</label></li>
932+
<li><label><input type="checkbox" name="triviaCategories" value="32">Cartoon and Animation</label></li>
933+
<li><label><input type="checkbox" name="triviaCategories" value="29">Comics</label></li>
934+
<li><label><input type="checkbox" name="triviaCategories" value="11">Film</label></li>
935+
<li><label><input type="checkbox" name="triviaCategories" value="12">Music</label></li>
936+
<li><label><input type="checkbox" name="triviaCategories" value="14">Television</label></li>
937+
<li><label class="categoryTitle"><b>Science &amp; Technology</b></label></li>
938+
<li><label><input type="checkbox" name="triviaCategories" value="18">Computers</label></li>
939+
<li><label><input type="checkbox" name="triviaCategories" value="22">Geography</label></li>
940+
<li><label><input type="checkbox" name="triviaCategories" value="23">History</label></li>
941+
<li><label><input type="checkbox" name="triviaCategories" value="19">Mathematics</label></li>
942+
<li><label><input type="checkbox" name="triviaCategories" value="24">Politics</label></li>
943+
<li><label><input type="checkbox" name="triviaCategories" value="17">Science and Nature</label></li>
944+
</ul>
945+
<small class="form-text text-muted">Select the trivia categories you want to display.</small>
946+
947+
</div>
948+
949+
<script type="text/javascript">
950+
$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
951+
$(this).closest("li").toggleClass("active", this.checked);
952+
});
953+
954+
$(document).on('click', '.allow-focus', function (e) {
955+
e.stopPropagation();
956+
});
957+
</script>
958+
959+
<script lang="javascript">
960+
// select saved or forms triva categories
961+
var formCategories = [];
962+
var savedCategories = [];
963+
// load posted form data
964+
<%if(typeof formData !== 'undefined' && errors){%>
965+
formCategories = '<%=formData.triviaCategories%>'.split(',')%>;
966+
formCategories.forEach(function(id){
967+
$('[name="triviaCategories"]').each( function() {
968+
if ( $(this).val() == id ){
969+
$(this).attr('checked', true);
970+
$(this).closest("li").toggleClass("active", this.checked);
971+
}
972+
else{
973+
if ( $(this).attr('checked') == true){
974+
$(this).attr('checked', false);
975+
}
976+
}
977+
});
978+
});
979+
<%}else{%>
980+
// load saved trivia selections
981+
savedCategories = '<%=settings.triviaCategories%>'.split(',')%>;
982+
savedCategories.forEach(function(id){
983+
$('[name="triviaCategories"]').each( function() {
984+
if ( $(this).val() == id ){
985+
$(this).attr('checked', true);
986+
$(this).closest("li").toggleClass("active", this.checked);
987+
}
988+
else{
989+
if ( $(this).attr('checked') == true){
990+
$(this).attr('checked', false);
991+
}
992+
}
993+
});
994+
});
995+
<%}%>
996+
</script>
952997
953998
954999
</div>
9551000
</div>
9561001
</div>
957-
958-
959-
960-
9611002
</div>
9621003
963-
<hr />
964-
<button type="reset" class="btn btn-info" onclick="location.href = '<%=baseUrl%>/settings';">Reload
965-
Saved</button>&nbsp;&nbsp;&nbsp; <button type="reset" class="btn btn-info"
966-
onclick="location.href = '<%=baseUrl%>/';">Main Page</button>
967-
<button type="submit" class="btn btn-danger" style="float: right;">Save</button>
968-
</form>
969-
</div>
1004+
<hr />
1005+
<button type="reset" class="btn btn-info" onclick="location.href = '<%=baseUrl%>/settings';">Reload
1006+
Saved</button>&nbsp;&nbsp;&nbsp; <button type="reset" class="btn btn-info"
1007+
onclick="location.href = '<%=baseUrl%>/';">Main Page</button>
1008+
<button type="submit" class="btn btn-danger" style="float: right;">Save</button>
1009+
</form>
1010+
</div>
9701011
971-
<% if(message !== undefined && message != ""){%>
1012+
<% if(message !== undefined && message != ""){%>
9721013
<p id="rcorners"><%=message%></br>
9731014
<%}%>
9741015
<!-- About -->

‎public/css/settings-styles.css

+29-19
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ body{margin-top:20px;
283283
}
284284

285285
#triviaCategories {
286-
height: 500px;
286+
/* height: 500px; */
287287
padding: .375rem 1.75rem .375rem .75rem;
288288
font-size: 1.1rem;
289289
font-weight: 400;
@@ -304,24 +304,34 @@ body{margin-top:20px;
304304
white-space: nowrap;
305305
margin:0;
306306
transition: background-color .4s ease;
307-
}
308-
.checkbox-menu li input {
309-
margin: 0px 5px;
310-
top: 2px;
311-
position: relative;
312-
}
307+
}
308+
309+
.dropdown-menu {
310+
background-color: rgb(178, 178, 218);
311+
}
312+
313+
.checkbox-menu li input {
314+
margin: 0px 5px;
315+
top: 2px;
316+
position: relative;
317+
}
313318

314-
.checkbox-menu li.active label {
315-
background-color: #cbcbff;
316-
font-weight:bold;
317-
}
319+
.checkbox-menu li.active label {
320+
background-color: #cbcbff;
321+
font-weight:bold;
322+
}
318323

319-
.checkbox-menu li label:hover,
320-
.checkbox-menu li label:focus {
321-
background-color: #f5f5f5;
322-
}
324+
.checkbox-menu li label:hover,
325+
.checkbox-menu li label:focus {
326+
background-color: #f5f5f5;
327+
}
323328

324-
.checkbox-menu li.active label:hover,
325-
.checkbox-menu li.active label:focus {
326-
background-color: #b8b8ff;
327-
}
329+
.checkbox-menu li.active label:hover,
330+
.checkbox-menu li.active label:focus {
331+
background-color: #b8b8ff;
332+
}
333+
334+
.categoryTitle {
335+
font-weight: bold;
336+
font-size: large;
337+
}

0 commit comments

Comments
 (0)