Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add underscore js and bootstrap css #2

Merged
merged 2 commits into from
Jul 8, 2018
Merged

Add underscore js and bootstrap css #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3cea379
Add underscore js and bootstrap css
Jul 8, 2018
cf29478
Fix ipad css issue and event data not updated
Jul 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
.form-inline .form-control {
width: 100%;
}

h1, h2, h3, h4, h5, h6, p, body, a, img, ul, ol, blockquote, pre {
margin: 0; padding: 0; border: 0;
Expand Down Expand Up @@ -132,8 +135,8 @@ hr {
font-size: 1em;
}

.table, .table thead, .table tbody, .table th, .table td, .table tr {
display: block;
.table, .table thead, .table tbody, .table th, .table td, .table tr {
display: block;
}

.table thead tr {
Expand All @@ -144,19 +147,19 @@ hr {

.table tr { border: 1px solid #ccc; }

.table td {
.table td {
border: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40%;
padding-left: 40%;
}

.table td:before {
.table td:before {
position: absolute;
top: 6px;
left: 6px;
width: 35%;
padding-right: 10px;
width: 35%;
padding-right: 10px;
white-space: nowrap;
}

Expand Down
168 changes: 86 additions & 82 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,80 @@
<meta name="viewport" content="width=device-width">
<title>Let's volleyball</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Anonymous+Pro:400,700,400italic,700italic|Merriweather:400,700,300">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it better to use bootstrapcdn or get it locally?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't matter. Having source outside makes less impact on the server, having it locally is more reliable, however in case with boostrap CDN it shouldn't be an issue.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few comments based on this image
fields_collision_edited

  1. Event data is not updated (important)
  2. Paid checkbox is on position input (less critical)
  3. Position iput is under a button (less critical)

<link rel="stylesheet" href="css/main.css?v=1.0.2">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess many things from main.css could be removed?

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/vb.js"></script>
</head>

<script type="text/template" id="players-template">
<div class="row text-left text-sm-center font-weight-bold">
<div class="col-2 col-md-1">#</div>
<div class="col-4 col-md-3 col-lg-4">Name</div>
<div class="col-4 col-md-3">Position</div>
<div class="col-2 col-md-1">Paid</div>
<div class="col-md-4 col-lg-3 d-none d-sm-block"></div>
</div>
<hr />
<% _.each( players, function( player, index ) { %>
<div class="row form-inline">
<div class="col-2 col-md-1"><label><%= index + 1 %></label></div>
<div class="col-4 col-md-3 col-lg-4"><label id="guest_name_<%= player.guest_id %>"><%= player.guest_name %></label></div>
<div class="col-4 col-md-3"><input class="form-control" type="text" id="guest_position_<%= player.guest_id %>" value="<%= player.guest_position %>" /></div>
<div class="col-2 col-md-1 text-center"><input class="form-control" type="checkbox" id="guest_paid_<%= player.guest_id %>" value="" <% if (player.guest_paid == 1) { %>checked<% } %> /></div>
<div class="col-12 col-md-4 col-lg-3 text-left">
<div class="mt-3 d-block d-sm-none"></div>
<input type="button" class="btn btn-success" value="Update" onclick="update_guest(<%= player.guest_id %>)"/>
<input type="button" class="btn btn-danger" value="Remove" onclick="remove_guest(<%= player.guest_id %>)"/>
</div>
</div>
<hr />
<% }); %>
<div class="row form-inline">
<div class="col-2 col-md-1"><label>New</label></div>
<div class="col-4 col-md-3 col-lg-4"><input class="form-control" type="text" id="guest_name_new" value="" placeholder="Name" /></div>
<div class="col-4 col-md-3"><input class="form-control" type="text" id="guest_position_new" value="" placeholder="Position" /></div>
<div class="col-md-1 d-none d-sm-block"></div>
<div class="col-12 col-md-4 col-lg-3 text-right text-md-left">
<div class="mt-3 d-block d-sm-none"></div>
<input type="button" class="btn btn-success" value="Add player" onclick="add_guest()" />
</div>
</div>
</script>

<script>
var template = _.template($( "#players-template" ).html());
$( "#players-template" ).remove();
</script>

<script>

function update_guest(guest_id) {
var name = $('#guest_name_' + guest_id).text();
var p = prompt('Type YES to update ' + name);
if (p == null) {
return;
}
if (p != 'YES') {
alert('Update failed. You had to type YES.');
return;
}

var position = $('#guest_position_' + guest_id).val();
var paid = $('#guest_paid_' + guest_id).is(':checked') ? 1 : 0;
if (confirm('Are you sure you want to update ' + name)) {
var position = $('#guest_position_' + guest_id).val();
var paid = $('#guest_paid_' + guest_id).is(':checked') ? 1 : 0;

action_reload({
action: 'update_guest',
id: guest_id,
position: position,
is_paid: paid
});
action_reload({
action: 'update_guest',
id: guest_id,
position: position,
is_paid: paid
});
}
}

function remove_guest(guest_id) {
var name = $('#guest_name_' + guest_id).text();
var p = prompt('Type YES to remove ' + name + '. This is permanent!');
if (p == null) {
return;
}
if (p != 'YES') {
alert('Remove failed. You had to type YES to remove.');
return;
}

action_reload({
action: 'remove_guest',
id: guest_id
});
if (confirm('Are you sure you want to remove ' + name + '. This is permanent!')) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a discussion in a group regarding that. Some people suggested to type a word to actually confirm changes. Not sure if just a confirmation would be enough. Maybe use 'prompt' for removing at least?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess typing isn't comfortable while using mobile device?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They wanted to be on a very safe side to not delete by an accident

action_reload({
action: 'remove_guest',
id: guest_id
});
}
}

function add_guest() {
Expand All @@ -58,7 +88,7 @@
action: 'add_guest',
event_id: 1,
name: name,
position: position
position: position
});
}

Expand All @@ -74,34 +104,13 @@
if (result.status != 0) {
alert('error');
} else {
var tr;
for (var i = 0; i < result.message.length; ++i) {
if (i == 0) {
$('#event_date').text(result.message[i].date);
$('#event_location').text(result.message[i].location);
$('#payment_link').text('TBD');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#event_date, #event_location, #payment_link are not updated after the change anymore

}

var guest_id = result.message[i].guest_id;

tr = $('<tr/>');
tr.append('<td>' + (i+1) + '</td>');
tr.append('<td><label id="guest_name_' + guest_id + '">' + result.message[i].guest_name + '</label></td>');
tr.append('<td><input type="text" id="guest_position_' + guest_id + '" value="' + result.message[i].guest_position + '" size="10"/></td>');
tr.append('<td><input type="checkbox" id="guest_paid_' + guest_id + '" value="" ' + (result.message[i].guest_paid==1?'checked':'') + '/></td>');
tr.append('<td><input type="button" value="Update" onclick="update_guest(' + guest_id + ')"/></td>');
tr.append('<td><input type="button" value="Remove" onclick="remove_guest(' + guest_id + ')"/></td>');
$('#event-table').append(tr);
if (result.message[0] != undefined) {
$('#event_date').text(result.message[0].date);
$('#event_location').text(result.message[0].location);
$('#payment_link').text('TBD');
}

tr = $('<tr/>');
tr.append('<td>New</td>');
tr.append('<td><input type="text" id="guest_name_new" value="" size="10"/></td>');
tr.append('<td><input type="text" id="guest_position_new" value="" size="10"/></td>');
tr.append('<td></td>');
tr.append('<td>' + '<input type="button" value="Add" onclick="add_guest()"' + '</td>');
tr.append('<td></td>');
$('#event-table').append(tr);
$( "#events" ).html(template( {players: result.message} ));
}
},
error: function(response){
Expand All @@ -113,33 +122,28 @@


<body>
<div id="content">
<div class="content-wrap">
<a href="events.html">Go to all events</a>

<hr>

<p>
A primary event:
<strong>
<label id='event_date'>Loading...</label>
<label id='event_location'></label>
</strong>,
pay here: <label id='payment_link'>Loading...</label>
</p>

<table id="event-table" class="table">
<thead>
<tr>
<th>Count</th>
<th>Name</th>
<th>Position</th>
<th>Paid?</th>
<th>Update</th>
<th>Remove</th>
</tr>
</thead>
</table>
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1 col-sm-12">
<div class="row">
<div class="col">
<p><a href="events.html">Go to all events</a></p>
<p>
Most recent event:
<strong>
<label id='event_date'>Loading...</label>
<label id='event_location'></label>
</strong>,
pay here: <label id='payment_link'>Loading...</label>
</p>
</div>
</div>
<div class="row">
<div class="col">
<div id="events"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Expand Down
Loading