widgets: Add basic styling for tictactoe widget.

This commit is contained in:
Rhea Parekh
2018-06-29 20:53:08 +05:30
committed by showell
parent bba8b88707
commit 2673a7f71f
3 changed files with 24 additions and 4 deletions

View File

@@ -46,7 +46,7 @@ var tictactoe_data_holder = function () {
self.get_widget_data = function () { self.get_widget_data = function () {
function square(i) { function square(i) {
return { return {
val: square_values[i] || i, val: square_values[i],
idx: i, idx: i,
disabled: waiting || square_values[i] || game_over, disabled: waiting || square_values[i] || game_over,
}; };

View File

@@ -2797,8 +2797,29 @@ div.topic_edit_spinner .loading_indicator_spinner {
div.message_content table.tictactoe { div.message_content table.tictactoe {
width: 80px; width: 80px;
margin-left: 0px;
} }
td.tictactoe { div.message_content td.tictactoe {
width: 15px; width: 15px;
border: none;
padding: 2px;
}
div.message_content button.tictactoe-square {
background-color: #81bba4;
width: 40px;
height: 40px;
border: none;
border-radius: 3px;
font-size: 25px;
color: white;
}
div.message_content button.tictactoe-square:hover {
background-color: #808c87;
}
div.message_content button.tictactoe-square:disabled {
background-color: #beded1;
} }

View File

@@ -1,7 +1,6 @@
<h3>Tic Tac Toe</h3> <h3>Tic Tac Toe</h3>
{{ move_status }} <h4>{{ move_status }}</h4>
<br />
<table class="tictactoe"> <table class="tictactoe">
{{#each squares}} {{#each squares}}