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 () {
function square(i) {
return {
val: square_values[i] || i,
val: square_values[i],
idx: i,
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 {
width: 80px;
margin-left: 0px;
}
td.tictactoe {
div.message_content td.tictactoe {
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>
{{ move_status }}
<br />
<h4>{{ move_status }}</h4>
<table class="tictactoe">
{{#each squares}}