Skip to content

Commit

Permalink
Merge pull request sakaiproject#2384 from SedueRey/SAK-31066
Browse files Browse the repository at this point in the history 
SAK-31066 - UI issues in Roster
  • Loading branch information
@adrianfish
adrianfish committed Apr 29, 2016
2 parents 06a3691 + dd8987f commit 941db6b
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 47 deletions.
20 changes: 17 additions & 3 deletions roster2/src/handlebars/enrollment_overview.handlebars
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,24 @@
</tr>
</tbody>
</table>
<div id="roster_type_selector">
<div id="roster_type_selector" class="row">
{{#if viewOfficialPhoto}}
<input type="radio" name="roster_picture_type" value="official" id="roster_official_picture_button" {{#if roster.rosterOfficialPictureMode}}checked{{/if}}/><span>{{translate 'roster_show_official_pictures'}}</span>
<input type="radio" name="roster_picture_type" value="profile" id="roster_profile_picture_button" {{#unless roster.rosterOfficialPictureMode}}checked{{/unless}}/><span>{{translate 'roster_show_profile_pictures'}}</span>
<div class="form-inline">
<div class="form-group">
<div class="radio">
<label style="margin-right: 1em;">
<input style="margin-right: 0.5em;" type="radio" name="roster_picture_type" value="official" id="roster_official_picture_button" {{#if roster.rosterOfficialPictureMode}}checked{{/if}}/><span>{{translate 'roster_show_official_pictures'}}</span>
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label style="margin-right: 1em;">
<input style="margin-right: 0.5em;" type="radio" name="roster_picture_type" value="profile" id="roster_profile_picture_button" {{#unless roster.rosterOfficialPictureMode}}checked{{/unless}}/><span>{{translate 'roster_show_profile_pictures'}}</span>
</label>
</div>
</div>
</div>
{{/if}}
</div>
<div id="roster-members"></div>
Expand Down
18 changes: 16 additions & 2 deletions roster2/src/handlebars/overview.handlebars
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,22 @@

<div id="roster_type_selector" class="row">
{{#if viewOfficialPhoto}}
<input type="radio" name="roster_picture_type" value="official" id="roster_official_picture_button" {{#if checkOfficialPicturesButton}}checked{{/if}}/><span>{{translate 'roster_show_official_pictures'}}</span>
<input type="radio" name="roster_picture_type" value="profile" id="roster_profile_picture_button" {{#unless checkOfficialPicturesButton}}checked{{/unless}}/><span>{{translate 'roster_show_profile_pictures'}}</span>
<div class="form-inline">
<div class="form-group">
<div class="radio">
<label>
<input style="margin-right: 1em;" type="radio" name="roster_picture_type" value="official" id="roster_official_picture_button" {{#if checkOfficialPicturesButton}}checked{{/if}}/><span>{{translate 'roster_show_official_pictures'}}</span>
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input style="margin-right: 1em;" type="radio" name="roster_picture_type" value="profile" id="roster_profile_picture_button" {{#unless checkOfficialPicturesButton}}checked{{/unless}}/><span>{{translate 'roster_show_profile_pictures'}}</span>
</label>
</div>
</div>
</div>
{{/if}}
</div>
<div id="roster-members"></div>
Expand Down
57 changes: 43 additions & 14 deletions roster2/src/webapp/css/roster.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@
}

.roster-last-visit-time-cell {
font-size: 0.8em;
font-size: 0.9em;
}

#roster_content{
Expand All @@ -184,17 +184,14 @@

/* Table display for large screen sizes */
@media only screen and (min-width: 800px) and (max-width: 1100px) {
.roster-member {
font-size: 0.75em;
}
.roster-groups-selector {
max-width: 100px !important;
}
}
@media only screen and (min-width: 800px) {
.rosterPicture {
border:0px none;
max-width:95%;
max-width:100%;
max-height:auto;
position: relative;
top: 3px;
Expand All @@ -218,6 +215,13 @@
margin: 0 0 0 -21px;
}

.rosterActions .icon.connection-request {
background-position: center right;
background-repeat: no-repeat;
padding-right: 18px;
font-size: 0.95em;
}

#roster-members {
display: block;
}
Expand All @@ -228,8 +232,12 @@
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 3px;
margin-bottom: 3px;
padding: 5px;
margin-bottom: 0;
}

.roster-member:nth-child(even){
background: #F5F5F5;
}

.roster-picture {
Expand All @@ -249,7 +257,8 @@

.roster-table-row {
display: inline-block;
width: 9%;
width: 10%;
vertical-align: top;
}

.roster-member:first-child .roster-table-row .roster-table-cell:first-child {
Expand All @@ -260,7 +269,13 @@
border-bottom: 1px solid;
}

.roster-member:first-child .roster-picture, .roster-member:first-child .rosterActions {
.roster-member:first-child .roster-picture {
padding-top: 30px;
position: relative;
top: 0;
}

.roster-member:first-child .rosterActions {
padding-top: 30px;
position: relative;
top: 4px;
Expand All @@ -269,16 +284,33 @@
.roster-table-cell {
display: inline-block;
vertical-align: middle;
font-size: 0.8em;
}

.roster-table-cell:first-child {
display: none;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.roster-table-row:first-child {
display: inline-block;
width: 40%;
width: 35%;
}
.roster-table-row:nth-child(2) {
display: inline-block;
width: 17%;
}
.roster-table-row:nth-child(2) .roster-table-cell{
max-width: 100%;
}
.roster-table-row:nth-child(2) a.profile{
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.roster-groups-selector {
Expand All @@ -289,7 +321,4 @@
.roster-last-visit-time {
width: 12%;
}
.roster-last-visit-time-cell {
font-size: 0.7em;
}
}
59 changes: 31 additions & 28 deletions roster2/src/webapp/js/roster.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,21 @@

(function ($) {

/**
* Check if there is no scroll rendered and there are more pages
*/
/**
* Check if there is no scroll rendered and there are more pages
*/
roster.checkScroll = function () {
// Check if body height is lower than window height (scrollbar missed, maybe you need to get more pages automatically)
if ($("body").height() <= $(window).height()) {
setTimeout(function () {
var renderedMembers = $(".roster-member").size();
// Without filter conditions get more pages if there are more members than rendered and rendered > 0
// If you have an active filter maybe you could display less members than total
// So get more pages only if rendered match a page size (10 is pagesize)
if (roster.site.membersTotal > renderedMembers && renderedMembers > 0 && renderedMembers % 10 === 0) {
$("body").data("scroll-roster", true);
$(window).trigger('scroll.roster');
}
var renderedMembers = $(".roster-member").size();
// Without filter conditions get more pages if there are more members than rendered and rendered > 0
// If you have an active filter maybe you could display less members than total
// So get more pages only if rendered match a page size (10 is pagesize)
if (roster.site.membersTotal > renderedMembers && renderedMembers > 0 && renderedMembers % 10 === 0) {
$("body").data("scroll-roster", true);
$(window).trigger('scroll.roster');
}
}, 100);
}
};
Expand Down Expand Up @@ -154,7 +154,7 @@
roster.readyClearButton(state);

// We don't want parallel membership requests
$('#navbar_overview_link > span > a').off('click');
$('#navbar_overview_link > span > a').off('click');

roster.renderMembership({ forceOfficialPicture: showOfficialPictures, replace: true });
});
Expand Down Expand Up @@ -522,11 +522,14 @@

roster.getRoleFragments = function (roleCounts) {

console.log( roleCounts );

return Object.keys(roleCounts).map(function (key) {

var frag = roster.i18n.role_breakdown_fragment.replace(/\{0\}/, roleCounts[key]);
return frag.replace(/\{1\}/, key);
}).join();
console.log( frag );
return frag.replace(/\{1\}/, '<strong>' +key + '</strong>');
}).join(", ");
};

roster.formatDate = function (time) {
Expand All @@ -542,15 +545,15 @@
// Functions and attributes added. All the code from hereon is executed
// after load.

if (!roster.siteId) {
alert('The site id MUST be supplied as a bootstrap parameter.');
return;
}
if (!roster.userId) {
alert("No current user. Have you logged in?");
return;
}
if (!roster.siteId) {
alert('The site id MUST be supplied as a bootstrap parameter.');
return;
}
if (!roster.userId) {
alert("No current user. Have you logged in?");
return;
}

Handlebars.registerHelper('translate', function (key) {
return roster.i18n[key];
Expand All @@ -569,19 +572,19 @@
});

Handlebars.registerHelper('unconnected', function () {
return this.connectionStatus === CONNECTION_NONE;
return this.connectionStatus === CONNECTION_NONE;
});

Handlebars.registerHelper('confirmed', function () {
return this.connectionStatus === CONNECTION_CONFIRMED;
return this.connectionStatus === CONNECTION_CONFIRMED;
});

Handlebars.registerHelper('requested', function () {
return this.connectionStatus === CONNECTION_REQUESTED;
return this.connectionStatus === CONNECTION_REQUESTED;
});

Handlebars.registerHelper('incoming', function () {
return this.connectionStatus === CONNECTION_INCOMING;
return this.connectionStatus === CONNECTION_INCOMING;
});

Handlebars.registerHelper('roleAllowed', function (options) {
Expand All @@ -594,7 +597,7 @@

roster.init = function () {

roster.i18n = $.i18n.map;
roster.i18n = $.i18n.map;

roster.i18n.months = roster.i18n.months.split(',');

Expand Down

0 comments on commit 941db6b

Please sign in to comment.