Skip to content

Commit

Permalink
Merge pull request #25 from CodersTV/improve-dashboard
Browse files Browse the repository at this point in the history 
Improve dashboard UX/UI
  • Loading branch information
@gabrielhpugliese
gabrielhpugliese committed Jan 31, 2015
2 parents 2664876 + d06b1fa commit 2b01ec2
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 47 deletions.
5 changes: 3 additions & 2 deletions client/views/channels/channels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h1 class="oswald text-muted">Browse <em class="text-color">videos</em></h1>
<div class="thumbnail">
{{#if isLive}}
<legend class="video-live video-status">
Live
Live
</legend>
{{else}}
<legend class="video-status">
Expand Down Expand Up @@ -84,9 +84,10 @@ <h4 class="truncate text-color" title="{{title}}" alt="{{title}}">{{title}}</h4>
<a href="{{getVideoUrl owner _id}}" class="btn btn-lg btn-color btn-primary"><i class="fa fa-youtube-play"></i>Watch</a>
{{/if}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

85 changes: 44 additions & 41 deletions client/views/dashboard/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,22 @@ <h4>Alright!</h4>
<label class="col-md-2 control-label" for="URL">
Hangout on Air link <br/>
<a href="https://coderstv.uservoice.com/knowledgebase/articles/199921-how-do-i-get-a-google-hangout-on-air-link-" target="_blank">(How can I get that ?)</a>
</label>
<div class="col-md-4">
</label>
<div class="col-md-5">
<input id="URL" name="URL" type="text" placeholder="Paste here. E.g.: http://youtu.be/rxfCPa8LUwQ" class="form-control input-md" required="">
<span class="help-block">
<a href="https://plus.google.com/hangouts/_?hso=0" target="_blank" style="text-decoration:none;">Click here to start a <img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-24x100-normal.png"
Click here to start a <a href="https://plus.google.com/hangouts/_?hso=0" target="_blank" style="text-decoration:none;"><img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-24x100-normal.png"
alt="Hangout on Air"
title="Hangout on Air"
style="border:0;width:100px;height:24px;"/></a>
</span>
or <a href="https://www.youtube.com/my_live_events?action_create_live_event=1">Youtube Live Event (advanced)</a>
</span>
</div>
</div>

<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="language">Add tags <small class="text-muted">(will be indexed on search)</small></label>
<label class="col-md-2 control-label" for="language">Add tags<br/><small class="text-muted">(will be indexed on search)</small></label>
<div class="col-md-6">
<input id="language" name="language" type="text" placeholder="E.g. Python" class="form-control input-md" autocomplete="on" spellcheck="off" required="" data-role="tagsinput">
</div>
Expand All @@ -68,7 +69,7 @@ <h4>Alright!</h4>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-2 control-label" for="video-description">Video Description<br/><small class="text-muted">(supports Github Flavored Markdown)</small></label>
<div class="col-md-8">
<div class="col-md-8">
<textarea class="form-control" id="video-description" name="video-description" rows="10">Give full description of your broadcast.
For example, you can paste some code here with markdown tags and it will render pretty on the video page:

Expand All @@ -93,66 +94,50 @@ <h4>Alright!</h4>

</fieldset>
</form>

</div>
<hr />
<div class="row">
<h4>Your Past Broadcasts</h4>
<div class="container">
<div class="row video-list">
{{#each pastList}}
{{> video_thumb}}
{{> video_thumb_dashboard withRemoveButton=true video=this}}
{{/each}}
</div>
</div>
</div>
</div>
</template>

<template name="preferences_video_thumb">
<li class="span4">
<div class="thumbnail">
<img src="http://img.youtube.com/vi/{{URL}}/hqdefault.jpg">
<div class="caption">
<h3 class="truncate">{{title}}</h3>
<h4 class="truncate">
{{#with getUser owner}}
{{profile.name}}
{{/with}}
</h4>
<p>
{{#each language}}
{{this}}
{{/each}}
</p>
<!-- <span><i class="icon-eye-open"></i> {{visualizations}}</span> -->
<p align="center">
<a href="{{getVideoUrl owner _id}}" class="btn btn-primary btn-block">Watch</a>
</p>
<p align="center">
<a class="btn btn-danger btn-block remove-video" id="{{_id}}">Remove</a>
</p>
</div>
</div>
</li>
</template>

<template name="dashboard_video_thumb">
<template name="video_thumb_dashboard">
{{#with video}}
<div class="col-md-4 col-sm-4 text-center">
<div class="thumbnail">
{{#if isLive}}
<legend class="video-live video-status">
Live
Live
</legend>
{{else}}
<legend class="video-status">
Finished
</legend>
{{/if}}
<div class="image">
{{#if isLive}}
<a href="{{getCoderChannelURL owner}}" class="video-title-link">
<img src="http://img.youtube.com/vi/{{URL}}/hqdefault.jpg" class="img-responsive" alt="{{title}}" title="{{title}}">
</a>
{{else}}
<a href="{{getVideoUrl owner _id}}" class="video-title-link">
<img src="http://img.youtube.com/vi/{{URL}}/hqdefault.jpg" class="img-responsive" alt="{{title}}" title="{{title}}">
</a>
{{/if}}
{{#if duration}}
<div class="duration">
{{#if $gt duration.hours 0}}{{duration.hours}}:{{/if}}{{duration.minutes}}:{{duration.seconds}}
</div>
{{/if}}
</div>
<div class="caption">
<h4 class="truncate text-color" title="{{title}}" alt="{{title}}">{{title}}</h4>
Expand All @@ -164,8 +149,16 @@ <h4 class="truncate text-color" title="{{title}}" alt="{{title}}">{{title}}</h4>
</p>
<div class="row">
<div class="col-md-12 text-center">
<p class="pull-left"><i class="fa fa-code"></i>{{language}}</p>
<p class="pull-right">
<p class="tags" title="{{language}}" alt="{{language}}"><i class="fa fa-tag"></i>
{{#each language}}
{{this}}
{{/each}}
</p>
</div>
</div>
<div class="row">
<div class="co-md-12 text-center">
<p>
<i class="fa fa-calendar"></i>
{{#if isLive}}
Live
Expand All @@ -178,11 +171,21 @@ <h4 class="truncate text-color" title="{{title}}" alt="{{title}}">{{title}}</h4>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<p class="watch-video">
{{#if isLive}}
<a href="{{getCoderChannelURL owner}}" class="btn btn-lg btn-color btn-primary"><i class="fa fa-youtube-play"></i>Watch</a>
{{else}}
<a href="{{getVideoUrl owner _id}}" class="btn btn-lg btn-color btn-primary"><i class="fa fa-youtube-play"></i>Watch</a>
{{/if}}
</p>
{{#if ../withRemoveButton}}
<p class="remove-video">
<a class="btn btn-danger remove-video">Remove</a>
</p>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/with}}
</template>
15 changes: 11 additions & 4 deletions client/views/dashboard/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,19 @@ Template.dashboard.events({
'click #create-channel button[name=start-broadcast]' : function (event) {
event.preventDefault();

var form = {},
$formDiv = $('#create-channel'),
values = $formDiv.serializeArray();
var form = {};
var $target = $(event.target);
var $formDiv = $('#create-channel');
var values = $formDiv.serializeArray();

$target.attr('disabled', 'disabled');
_.each(values, function (doc) {
form[doc.name] = doc.value;
});

Meteor.call('createChannel', form, function (err) {
$target.removeAttr('disabled');

if (err) {
if (err.reason === 'Logout') {
Meteor.logout();
Expand Down Expand Up @@ -77,7 +81,10 @@ Template.dashboard.events({
return Template.dashboard.alertError(err.reason);
}
});
},
}
});

Template.video_thumb_dashboard.events({
'click a.remove-video': function (event) {
var _id = this._id;

Expand Down

0 comments on commit 2b01ec2

Please sign in to comment.