[closes #161] added read mode, work mode + refactor for layout structure

tracim/tracim/public/assets/css/dashboard.css

@@ -60,6 +60,7 @@ body {
     top: 51px;
     bottom: 0;
     left: 0;
+    width: 260px;
     z-index: 1000;
     display: block;
     padding: 20px;
@@ -73,13 +74,30 @@ body {
 
   }
 }
+.fixed-width-sidebar {
+  width: auto;
+  min-width: 260px;
+  max-width: 50%;
+}
+
+.content__wrapper {
+  width: auto;
+  margin: 0 260px; /* When changing this value, also change the corresponding in main.js */
+}
+.content__data {
+  padding: 0 15px;
+}
 
 #sidebar-right {
+  left: auto;
+  right: 0;
   overflow-x: visible;
   overflow-y: auto;
     background-color: #F5F5F5;
     border-left: 1px solid #CCC;
-
+}
+.navbar-right {
+  margin-right: 0px;
 }
 
 /* Sidebar navigation */
@@ -99,6 +117,20 @@ body {
   background-color: #428bca;
 }
 
+.header__navbar__switch-mode {
+  float: right;
+  display: inline-block;
+  padding: 15px;
+  cursor: pointer;
+}
+.header__navbar__switch-mode > i {
+  margin-right: 5px;
+  font-size: 16px;
+}
+.header__navbar__switch-mode.switch-work-mode {
+    background-color: #eee;
+    color: #333;
+}
 
 /*
  * Main content
@@ -144,7 +176,6 @@ iframe { border: 5px solid #b3e7ff; }
 .pod-selected-item {background-color: #EEE;}
 .pod-empty {color: #999;}
 .pod-inline-form {
-    margin-left: 12px;
     border: 6px solid #428BCA;
     padding: 0.5em;
 }
@@ -295,6 +326,7 @@ div.t-page-metadata-row, div.t-metadata-row {
 
 #sidebar-left-menu {
     margin-bottom: 20px; /* add a margin between menu bottom and footer top */
+    overflow: hidden;
 }
 
 h1.page-header {
@@ -350,10 +382,15 @@ h1.page-header {
 #sidebar-right h4 { color: #555; margin: 1.5em 0 1em 0; }
 
 #t-full-app-alert-message-id {
+    top: 0;
+    position: absolute;
     z-index: 10001;
+    width: 100%;
     padding: 0;
-    position: absolute;
-    top: 0;
+}
+#t-full-app-alert-message-id > div {
+  width: 75%;
+  margin: 1em auto 0 auto;
 }
 
 #t-full-app-alert-message-id > div.alert {
@@ -430,3 +467,46 @@ span.info.readonly {
 .folder__content__list__item__status.deleted i {
   font-size: 14px;
 }
+
+.content__home {
+  padding: 0 15px;
+}
+
+.workspace__wrapper {
+  padding: 0 15px;
+}
+.workspace__list table {
+  text-align: center;
+}
+
+.workspace__detail__wrapper {
+  padding: 0 15px;
+}
+.workspace__detail__wrapper table {
+  text-align: center;
+}
+
+.workspace__detail__user table {
+  text-align: center;
+}
+
+.content__detail {
+  padding: 0 15px;
+}
+.content__detail table {
+  text-align: center;
+}
+.anchored-title {
+  padding-left: 10px;
+}
+
+.adminuser__wrapper {
+  padding: 0 15px;
+}
+.adminuser__detail {
+  padding: 0 15px;
+}
+.adminuser__detail table {
+  text-align: center;
+}
+

tracim/tracim/public/assets/js/main.js

@@ -1,5 +1,35 @@
 $(document).ready(function () {
 
+  $('#toggle-left-sidebar-width').click( function() {
+    sidebar = $('#sidebar-left')
+    buttonIcon = $('> i', this)
+
+    if (sidebar.hasClass('fixed-width-sidebar')) {
+      sidebar.removeClass('fixed-width-sidebar')
+      buttonIcon.removeClass('fa-angle-double-left').addClass('fa-angle-double-right')
+    } else {
+      sidebar.addClass('fixed-width-sidebar')
+      buttonIcon.removeClass('fa-angle-double-right').addClass('fa-angle-double-left')
+    }
+  })
+
+  // Côme - 2017-01-06 - is the code bellow usefull ?
+  // $('#current-page-breadcrumb-toggle-button').click( function() {
+  //   $('#current-page-breadcrumb').toggle();
+  // });
+
+  // switch btn read/work btn
+  $('.header__navbar').on('click', '.header__navbar__switch-mode.switch-read-mode', function () {
+    $(this).removeClass('switch-read-mode').addClass('switch-work-mode').html('<i class="fa fa-edit fa-fw"></i> Work mode')
+    $('#sidebar-left, #sidebar-right').hide()
+    $('.content__wrapper').css({margin: '0'})
+  })
+  $('.header__navbar').on('click', '.header__navbar__switch-mode.switch-work-mode', function () {
+    $(this).removeClass('switch-work-mode').addClass('switch-read-mode').html('<i class="fa fa-eye fa-fw"></i> Read mode')
+    $('#sidebar-left, #sidebar-right').show()
+    $('.content__wrapper').css({margin: '0 260px'})
+  })
+
   // add select2 for admin/workspace/<id> for user selection
   if ($('#add-role-from-existing-user-form').length > 0) {
     $('#user_id').select2({

tracim/tracim/templates/admin/user_getall.mak

@@ -17,154 +17,144 @@
 <%def name="TITLE_ROW()">
     <div class="row-fluid">
         <div>
-            ${ROW.TITLE_ROW(_('Users'), 'fa-user', 'col-md-offset-3 col-md-8', 't-user-color', _('manage users and associated workspaces'))}
+            ${ROW.TITLE_ROW(_('Users'), 'fa-user', '', 't-user-color', _('manage users and associated workspaces'))}
         </div>
     </div>
 </%def>
 
-<div class="container-fluid">
-    <div class="row-fluid">
-        <div>
-            ## ADD A USER
-            % if fake_api.current_user.profile.id>=2:
-                ## FIXME: check if the current_user is a workspace manager (so he is also allowed to create user)
-                ## In this case the user is a pod manager, so he is allowed to create users (and to delete them)
-                <div class="row">
-                    <!-- #### CREATE A USER #### -->
-                    <div class="col-md-offset-3 col-md-8">
-                        <p class="t-spacer-above">
-                            <a class="btn btn-success" data-toggle="collapse" data-target="#create-user-form"><b>${_('Create a user account...')}</b></a>
-                        </p>
-                        <div id="create-user-form" class="collapse">
-                            <div class="pod-inline-form col-md-12" >
-                                <form role="form" method="POST" action="${tg.url('/admin/users')}">
-                                    <div class="form-group">
-                                        <label for="user-name">${_('Name')}</label>
-                                        <input name="name" type="text" class="form-control" id="user-name" placeholder="${_('Name')}">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="user-email">${_('Email')}</label>
-                                        <input name="email" type="text" class="form-control" id="user-email" placeholder="${_('Email address')}">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="user-password">${_('Password')}</label>
-                                        <input name="password" type="password" class="form-control" id="user-password" placeholder="${_('Optionnaly choose a password')}">
-                                    </div>
-                                    <div class="checkbox">
-                                      <label>
-                                        <input type="checkbox" class="checkbox" name="is_tracim_manager" id="is-tracim-manager"> ${_('This user can create workspaces')}
-                                      </label>
-                                    </div>
-                                    <div class="checkbox disabled">
-                                      <label>
-                                        <input type="checkbox" class="checkbox" disabled name="is_tracim_admin" id="is-tracim-admin"> ${_('This user is an administrator')}
-                                      </label>
-                                    </div>
-                                    <div class="checkbox">
-                                      <label>
-                                        <input type="checkbox" class="checkbox" checked name="send_email" id="send-email"> ${_('Send email to user')}
-                                      </label>
-                                    </div>
-
-                                    <span class="pull-right" style="margin-top: 0.5em;">
-                                        <button type="submit" class="btn btn-small btn-success" title="Add first comment"><i class=" fa fa-check"></i> ${_('Validate')}</button>
-                                    </span>
-                                    <script>
-                                        $(document).ready(function() {
-                                            $('#is-tracim-manager').change(function() {
-                                                if($('#is-tracim-manager').prop('checked')==true) {
-                                                    console.log('now manager is checked');
-                                                    $('#is-tracim-admin').removeAttr('disabled');
-                                                    $('#is-tracim-admin').parent().parent().removeClass('disabled');
-                                                } else {
-                                                    console.log('now manager is unchecked');
-                                                    $('#is-tracim-admin').prop('checked', false);
-                                                    $('#is-tracim-admin').attr('disabled', 'disabled');
-                                                    $('#is-tracim-admin').parent().parent().addClass('disabled');
-                                                }
-                                            });
-                                        });
-                                    </script>
-                                </form>
-                                <div style="clear: both;"></div>
-                            </div>
-                        </div>
+<div class="adminuser__wrapper">
+    ## ADD A USER
+    % if fake_api.current_user.profile.id>=2:
+        ## FIXME: check if the current_user is a workspace manager (so he is also allowed to create user)
+        ## In this case the user is a pod manager, so he is allowed to create users (and to delete them)
+        <!-- #### CREATE A USER #### -->
+        <p class="t-spacer-above">
+            <a class="btn btn-success" data-toggle="collapse" data-target="#create-user-form"><b>${_('Create a user account...')}</b></a>
+        </p>
+        <div id="create-user-form" class="collapse">
+            <div class="pod-inline-form" >
+                <form role="form" method="POST" action="${tg.url('/admin/users')}">
+                    <div class="form-group">
+                        <label for="user-name">${_('Name')}</label>
+                        <input name="name" type="text" class="form-control" id="user-name" placeholder="${_('Name')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="user-email">${_('Email')}</label>
+                        <input name="email" type="text" class="form-control" id="user-email" placeholder="${_('Email address')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="user-password">${_('Password')}</label>
+                        <input name="password" type="password" class="form-control" id="user-password" placeholder="${_('Optionnaly choose a password')}">
+                    </div>
+                    <div class="checkbox">
+                      <label>
+                        <input type="checkbox" class="checkbox" name="is_tracim_manager" id="is-tracim-manager"> ${_('This user can create workspaces')}
+                      </label>
+                    </div>
+                    <div class="checkbox disabled">
+                      <label>
+                        <input type="checkbox" class="checkbox" disabled name="is_tracim_admin" id="is-tracim-admin"> ${_('This user is an administrator')}
+                      </label>
+                    </div>
+                    <div class="checkbox">
+                      <label>
+                        <input type="checkbox" class="checkbox" checked name="send_email" id="send-email"> ${_('Send email to user')}
+                      </label>
                     </div>
-                    <!-- #### CREATE A USER [END] #### -->
-                </div>
-            % endif
-            ## ADD A USER [END]
-
-
-            ## LIST OF USERS
-            <div class="row">
-                <div class="col-md-offset-3 col-md-8 t-spacer-above">
-                    % if result.user_nb<=0:
-                        ${TIM.NO_CONTENT_INFO(_('There are no workspace yet. Start by <a class="alert-link" data-toggle="collapse" data-target="#create-workspace-form">creating a workspace</a>.'))}
-                    % else:
-                        <table class="table table-striped table-hover">
-                            <thead>
-                                <tr>
-                                    <th></th>
-                                    <th>${_('User')}</th>
-                                    <th>${_('Email')}</th>
-                                    <th>${_('Can create workspaces')}</th>
-                                    <th>${_('Administrator')}</th>
-                                    <th>${_('Notes')}</th>
-                                </tr>
-                            </thead>
-                            % for user in result.users:
-                                <tr class="${('t-less-visible', '')[user.enabled]}">
-                                    % if user.enabled:
-                                        <td>
-                                            ${BUTTON.FA('fa-lightbulb-o fa-lg t-enabled-color', _('User enabled. Click to disable this user'), tg.url('/admin/users/{}/disable'.format(user.id)), fake_api.current_user, 3)}
-                                        </td>
-                                        <td><a href="${tg.url('/admin/users/{}'.format(user.id))}"><b>${user.name}</b></a></td>
-                                        <td><a href="mailto:${user.email}">${user.email}</a></td>
-                                        <td>
-                                            <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-enabled-color')[user.profile.id>=2] %>
-                                            <% linked_profile = ('tracim-profile-manager', 'tracim-profile-user')[user.profile.id>=2] %>
-                                            <% linked_text = (_('Click to allow workspace creation'), _('Click to disallow workspace creation'))[user.profile.id>=2] %>
-                                            ${BUTTON.FA(icon, linked_text, tg.url('/admin/users/{}/profile/switch?new_role={}'.format(user.id, linked_profile)), fake_api.current_user, 3)}
-                                        </td>
-                                        <td>
-                                            <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-enabled-color')[user.profile.id>=3] %>
-                                            <% linked_profile = ('tracim-profile-admin', 'tracim-profile-manager')[user.profile.id>=3] %>
-                                            <% linked_text = (_('Click to give super user privileges'), _('Click to remove super user privileges'))[user.profile.id>=3] %>
-                                            ${BUTTON.FA(icon, linked_text, tg.url('/admin/users/{}/profile/switch?new_role={}'.format(user.id, linked_profile)), fake_api.current_user, 3)}
-                                        </td>
-                                    % else:
-                                        <td>
-                                            ${BUTTON.FA('fa-lightbulb-o fa-lg t-disabled-color', _('User disabled. Click to enable this user'), tg.url('/admin/users/{}/enable'.format(user.id)), fake_api.current_user, 3)}
-                                        </td>
-                                        <td><a class="t-less-visible" href="${tg.url('/admin/users/{}'.format(user.id))}">${user.name}</a></td>
-                                        <td>${user.email}</td>
-                                        <td>
-                                            <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-disabled-color')[user.profile.id>=2] %>
-                                            ${ICON.FA(icon, _('User is disabled. No action allowed'))}
-                                        </td>
-                                        <td>
-                                            <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-disabled-color')[user.profile.id>=3] %>
-                                            <% linked_profile = ('tracim-profile-admin', 'tracim-profile-manager')[user.profile.id>=3] %>
-                                            ${ICON.FA(icon, _('User is disabled. No action allowed'))}
-                                        </td>
-                                    % endif
-                                    <td>
-                                        % if False==user.has_password:
-                                            ${ICON.FA_TOOLTIP('fa-key t-less-visible', _('This user has no password.'))}
-                                            <span class="t-less-visible">${_('No password defined.')}</span>
 
-                                        % endif
-                                    </td>
-                                </tr>
-                            % endfor
-                        </table>
-                    % endif
-                </div>
+                    <span class="pull-right" style="margin-top: 0.5em;">
+                        <button type="submit" class="btn btn-small btn-success" title="Add first comment"><i class=" fa fa-check"></i> ${_('Validate')}</button>
+                    </span>
+                    <script>
+                        $(document).ready(function() {
+                            $('#is-tracim-manager').change(function() {
+                                if($('#is-tracim-manager').prop('checked')==true) {
+                                    console.log('now manager is checked');
+                                    $('#is-tracim-admin').removeAttr('disabled');
+                                    $('#is-tracim-admin').parent().parent().removeClass('disabled');
+                                } else {
+                                    console.log('now manager is unchecked');
+                                    $('#is-tracim-admin').prop('checked', false);
+                                    $('#is-tracim-admin').attr('disabled', 'disabled');
+                                    $('#is-tracim-admin').parent().parent().addClass('disabled');
+                                }
+                            });
+                        });
+                    </script>
+                </form>
+                <div style="clear: both;"></div>
             </div>
-            ## LIST OF USERS [END]
         </div>
+        <!-- #### CREATE A USER [END] #### -->
+    % endif
+    ## ADD A USER [END]
+
+
+    ## LIST OF USERS
+    <div class="t-spacer-above">
+        % if result.user_nb<=0:
+            ${TIM.NO_CONTENT_INFO(_('There are no workspace yet. Start by <a class="alert-link" data-toggle="collapse" data-target="#create-workspace-form">creating a workspace</a>.'))}
+        % else:
+            <table class="table table-striped table-hover">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>${_('User')}</th>
+                        <th>${_('Email')}</th>
+                        <th>${_('Can create workspaces')}</th>
+                        <th>${_('Administrator')}</th>
+                        <th>${_('Notes')}</th>
+                    </tr>
+                </thead>
+                % for user in result.users:
+                    <tr class="${('t-less-visible', '')[user.enabled]}">
+                        % if user.enabled:
+                            <td>
+                                ${BUTTON.FA('fa-lightbulb-o fa-lg t-enabled-color', _('User enabled. Click to disable this user'), tg.url('/admin/users/{}/disable'.format(user.id)), fake_api.current_user, 3)}
+                            </td>
+                            <td><a href="${tg.url('/admin/users/{}'.format(user.id))}"><b>${user.name}</b></a></td>
+                            <td><a href="mailto:${user.email}">${user.email}</a></td>
+                            <td>
+                                <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-enabled-color')[user.profile.id>=2] %>
+                                <% linked_profile = ('tracim-profile-manager', 'tracim-profile-user')[user.profile.id>=2] %>
+                                <% linked_text = (_('Click to allow workspace creation'), _('Click to disallow workspace creation'))[user.profile.id>=2] %>
+                                ${BUTTON.FA(icon, linked_text, tg.url('/admin/users/{}/profile/switch?new_role={}'.format(user.id, linked_profile)), fake_api.current_user, 3)}
+                            </td>
+                            <td>
+                                <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-enabled-color')[user.profile.id>=3] %>
+                                <% linked_profile = ('tracim-profile-admin', 'tracim-profile-manager')[user.profile.id>=3] %>
+                                <% linked_text = (_('Click to give super user privileges'), _('Click to remove super user privileges'))[user.profile.id>=3] %>
+                                ${BUTTON.FA(icon, linked_text, tg.url('/admin/users/{}/profile/switch?new_role={}'.format(user.id, linked_profile)), fake_api.current_user, 3)}
+                            </td>
+                        % else:
+                            <td>
+                                ${BUTTON.FA('fa-lightbulb-o fa-lg t-disabled-color', _('User disabled. Click to enable this user'), tg.url('/admin/users/{}/enable'.format(user.id)), fake_api.current_user, 3)}
+                            </td>
+                            <td><a class="t-less-visible" href="${tg.url('/admin/users/{}'.format(user.id))}">${user.name}</a></td>
+                            <td>${user.email}</td>
+                            <td>
+                                <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-disabled-color')[user.profile.id>=2] %>
+                                ${ICON.FA(icon, _('User is disabled. No action allowed'))}
+                            </td>
+                            <td>
+                                <% icon = ('fa-square-o fa-lg t-disabled-color', 'fa-check-square-o fa-lg t-disabled-color')[user.profile.id>=3] %>
+                                <% linked_profile = ('tracim-profile-admin', 'tracim-profile-manager')[user.profile.id>=3] %>
+                                ${ICON.FA(icon, _('User is disabled. No action allowed'))}
+                            </td>
+                        % endif
+                        <td>
+                            % if False==user.has_password:
+                                ${ICON.FA_TOOLTIP('fa-key t-less-visible', _('This user has no password.'))}
+                                <span class="t-less-visible">${_('No password defined.')}</span>
+
+                            % endif
+                        </td>
+                    </tr>
+                % endfor
+            </table>
+        % endif
     </div>
+    ## LIST OF USERS [END]
 </div>
 
 

tracim/tracim/templates/admin/user_getone.mak

@@ -21,76 +21,68 @@
 </%def>
 
 <%def name="TITLE_ROW()">
-    <div class="row-fluid">
-        <div>
-            <%
-                if result.user.profile.id>=3:
-                    subtitle = _('This user is an administrator.')
-                elif result.user.profile.id>=2:
-                    subtitle = _('This user can create workspaces.')
-                else:
-                    subtitle = _('This user a standard user.')
-            %>
-            ${ROW.TITLE_ROW(result.user.name, 'fa-user', 'col-md-offset-3 col-md-7', 't-user-color', subtitle)}
-        </div>
+    <div>
+        <%
+            if result.user.profile.id>=3:
+                subtitle = _('This user is an administrator.')
+            elif result.user.profile.id>=2:
+                subtitle = _('This user can create workspaces.')
+            else:
+                subtitle = _('This user a standard user.')
+        %>
+        ${ROW.TITLE_ROW(result.user.name, 'fa-user', '', 't-user-color', subtitle)}
     </div>
 </%def>
 
-<div class="container-fluid">
-    <div class="row-fluid">
+<div class="adminuser__detail">
+    <div class="" id='user-profile-global-info'>
         <div>
-            <div class="row">
-                <div class="col-md-offset-3 col-sm-7" id='user-profile-global-info'>
-                    <div>
-                        % if not result.user.enabled:
-                            <div class="alert alert-warning" style="margin-top: 1em;">
-                                <i class="fa fa-lg fa-warning"></i> ${_('This user is disabled')}
-                            </div>
-                        % endif
-                        ## TODO - D.A. - 2015-05-14
-                        ## Add extra information like skype, phone, website...
-                        <h3 style="margin-top: 1em;">
-                            ${ICON.FA('fa-user t-less-visible')}
-                            ${_('Contact')}
-                        </h3>
-                        ${P.USER_CONTACT(result.user)}
-                    </div>
-                    <div style="margin-top: 4em;">
-                        <h3>
-                            ${ICON.FA('fa-bar-chart t-less-visible')}
-                            ${_('Global profile')}
-                        </h3>
-                        ${P.USER_PROFILE(fake_api.current_user, result.user)}
-                    </div>
-                    <div style="margin-top: 4em;">
-                        <h3>
-                            ${ICON.FA('fa-group t-less-visible')}
-                            ${_('Roles')}
-                        </h3>
-                        % if len(result.user.roles)<=0:
-                            ${WIDGETS.EMPTY_CONTENT(_('This user is not member of any workspace.'))}
-                        % else:
-                            <table class="table">
-                                <thead>
-                                    <tr>
-                                        <th>#</th>
-                                        <th>${_('Workspace')}</th>
-                                        <th>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</th>
-                                        <th>${_('Notifications')}</th>
-                                    </tr>
-                                </thead>
-                                % for role in result.user.roles:
-<%
-    enable_link = '/admin/users/{user}/workspaces/{workspace}/enable_notifications?next_url=/admin/users/{user}'
-    disable_link = '/admin/users/{user}/workspaces/{workspace}/disable_notifications?next_url=/admin/users/{user}'
-%>
-                                    ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=True, enable_link=enable_link, disable_link=disable_link)}
-                                % endfor
-                            </table>
-                        % endif
-                    </div>
+            % if not result.user.enabled:
+                <div class="alert alert-warning" style="margin-top: 1em;">
+                    <i class="fa fa-lg fa-warning"></i> ${_('This user is disabled')}
                 </div>
-            </div>
+            % endif
+            ## TODO - D.A. - 2015-05-14
+            ## Add extra information like skype, phone, website...
+            <h3 style="margin-top: 1em;">
+                ${ICON.FA('fa-user t-less-visible')}
+                ${_('Contact')}
+            </h3>
+            ${P.USER_CONTACT(result.user)}
+        </div>
+        <div style="margin-top: 4em;">
+            <h3>
+                ${ICON.FA('fa-bar-chart t-less-visible')}
+                ${_('Global profile')}
+            </h3>
+            ${P.USER_PROFILE(fake_api.current_user, result.user)}
+        </div>
+        <div style="margin-top: 4em;">
+            <h3>
+                ${ICON.FA('fa-group t-less-visible')}
+                ${_('Roles')}
+            </h3>
+            % if len(result.user.roles)<=0:
+                ${WIDGETS.EMPTY_CONTENT(_('This user is not member of any workspace.'))}
+            % else:
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>${_('Workspace')}</th>
+                            <th>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</th>
+                            <th>${_('Notifications')}</th>
+                        </tr>
+                    </thead>
+                    % for role in result.user.roles:
+                        <%
+                            enable_link = '/admin/users/{user}/workspaces/{workspace}/enable_notifications?next_url=/admin/users/{user}'
+                            disable_link = '/admin/users/{user}/workspaces/{workspace}/disable_notifications?next_url=/admin/users/{user}'
+                        %>
+                        ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=True, enable_link=enable_link, disable_link=disable_link)}
+                    % endfor
+                </table>
+            % endif
         </div>
     </div>
 </div>

tracim/tracim/templates/admin/workspace_getall.mak

@@ -14,100 +14,86 @@
 </%def>
 
 <%def name="TITLE_ROW()">
-    <div class="row-fluid">
-        <div>
-            ${ROW.TITLE_ROW(_('Workspaces'), 'fa-bank', 'col-md-offset-3 col-md-8', 't-user-color', _('manage workspaces and subscribed users'))}
-        </div>
-    </div>
+    ${ROW.TITLE_ROW(_('Workspaces'), 'fa-bank', '', 't-user-color', _('manage workspaces and subscribed users'))}
 </%def>
 
-<div class="container-fluid">
-    <div class="row-fluid">
-        <div>
-            ## ADD A WORKSPACE
-            % if fake_api.current_user.profile.id>=2:
-                ## In this case the user is a pod manager, so he is allowed to create workspaces (and to delete them)
-                <div class="row">
-                    <!-- #### CREATE A WORKSPACE #### -->
-                    <div class="col-md-offset-3 col-md-12">
-                        <p class="t-spacer-above">
-                            <a class="btn btn-success" data-toggle="collapse" data-target="#create-workspace-form"><b>${_('Create a workspace...')}</b></a>
-                        </p>
-                        <div id="create-workspace-form" class="collapse">
-                            <div class="pod-inline-form col-sm-6" >
-                                <form role="form" method="POST" action="${tg.url('/admin/workspaces')}">
-                                    <div class="form-group">
-                                        <label for="workspace-name1">${_('Name')}</label>
-                                        <input name="name" type="text" class="form-control" id="workspace-name" placeholder="${_('Name')}">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="workspaceDescription">${_('Description')}</label>
-                                        <textarea name="description" class="form-control" id="workspaceDescription" placeholder="${_('You may add a description of the workspace')}"></textarea>
-                                    </div>
-                                    <div class="checkbox form-group">
-                                        <label for="workspaceCalendarEnabled">
-                                            <input id="workspaceCalendarEnabled" name="calendar_enabled" type="checkbox" checked >
-                                            <b>${_('Activate associated calendar')}</b>
-                                        </label>
-                                    </div>
+<div class="workspace__wrapper">
+## ADD A WORKSPACE
+% if fake_api.current_user.profile.id>=2:
+    ## In this case the user is a pod manager, so he is allowed to create workspaces (and to delete them)
+    <div class="workspace__create">
+        <!-- #### CREATE A WORKSPACE #### -->
+        <p class="t-spacer-above">
+            <a class="btn btn-success" data-toggle="collapse" data-target="#create-workspace-form"><b>${_('Create a workspace...')}</b></a>
+        </p>
+        <div id="create-workspace-form" class="collapse">
+            <div class="pod-inline-form" >
+                <form role="form" method="POST" action="${tg.url('/admin/workspaces')}">
+                    <div class="form-group">
+                        <label for="workspace-name1">${_('Name')}</label>
+                        <input name="name" type="text" class="form-control" id="workspace-name" placeholder="${_('Name')}">
+                    </div>
+                    <div class="form-group">
+                        <label for="workspaceDescription">${_('Description')}</label>
+                        <textarea name="description" class="form-control" id="workspaceDescription" placeholder="${_('You may add a description of the workspace')}"></textarea>
+                    </div>
+                    <div class="checkbox form-group">
+                        <label for="workspaceCalendarEnabled">
+                            <input id="workspaceCalendarEnabled" name="calendar_enabled" type="checkbox" checked >
+                            <b>${_('Activate associated calendar')}</b>
+                        </label>
+                    </div>
 
-                                    <div class="form-group">
-                                        <p class="form-control-static">${_('<u>Note</u>: members will be added during next step.')|n}</p>
-                                    </div>
-                                        
-                                    <span class="pull-right" style="margin-top: 0.5em;">
-                                        <button type="submit" class="btn btn-small btn-success" title="${_('Validate')}"><i class=" fa fa-check"></i> ${_('Validate')}</button>
-                                    </span>
-                                        
-                                </form>
-                                <div style="clear: both;"></div>
-                            </div>
-                        </div>
+                    <div class="form-group">
+                        <p class="form-control-static">${_('<u>Note</u>: members will be added during next step.')|n}</p>
                     </div>
-                    <!-- #### CREATE A WORKSPACE [END] #### -->
-                </div>
-            % endif
-            ## ADD A WORKSPACE [END]
 
-            ## LIST OF WORKSPACES
-            <div class="row">
-                <div class="col-md-offset-3 col-md-8 t-spacer-above">
-                    % if result.workspace_nb<=0:
-                        ${TIM.NO_CONTENT_INFO(_('There are no workspace yet. Start by <a class="alert-link" data-toggle="collapse" data-target="#create-workspace-form">creating a workspace</a>.'))}
-                    % else:
-                        <table class="table table-striped table-hover">
-                            <thead>
-                                <tr>
-                                    <th>#</th>
-                                    <th>${_('Workspace')}</th>
-                                    <th>${_('Description')}</th>
-                                    <th>${_('User Nb')}</th>
-                                    <th>${_('Calendar')}</th>
-                                </tr>
-                            </thead>
-                            % for workspace in result.workspaces:
-                                <tr>
-                                    <td>${workspace.id}</td>
-                                    <td><a href="${tg.url('/admin/workspaces/{}'.format(workspace.id))}">${workspace.label}</a></td>
-                                    <td>${workspace.description}</td>
-                                    <td>${workspace.member_nb}</td>
-                                    <td class="text-center">
-                                        % if workspace.calendar_enabled:
-                                            ${ICON.FA('fa-check-square-o fa-lg t-enabled-color')}
-                                        % else:
-                                            ${ICON.FA('fa-square-o fa-lg t-disabled-color')}
-                                        % endif
+                    <span class="pull-right" style="margin-top: 0.5em;">
+                        <button type="submit" class="btn btn-small btn-success" title="${_('Validate')}"><i class=" fa fa-check"></i> ${_('Validate')}</button>
+                    </span>
 
-                                    </td>
-                                </tr>
-                            % endfor
-                        </table>
-                    % endif
-                </div>
+                </form>
+                <div style="clear: both;"></div>
             </div>
-            ## LIST OF WORKSPACES [END]
         </div>
+        <!-- #### CREATE A WORKSPACE [END] #### -->
     </div>
-</div>
+% endif
+## ADD A WORKSPACE [END]
 
+## LIST OF WORKSPACES
+    <div class="workspace__list t-spacer-above">
+        % if result.workspace_nb<=0:
+            ${TIM.NO_CONTENT_INFO(_('There are no workspace yet. Start by <a class="alert-link" data-toggle="collapse" data-target="#create-workspace-form">creating a workspace</a>.'))}
+        % else:
+            <table class="table table-striped table-hover">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>${_('Workspace')}</th>
+                        <th>${_('Description')}</th>
+                        <th>${_('User Nb')}</th>
+                        <th>${_('Calendar')}</th>
+                    </tr>
+                </thead>
+                % for workspace in result.workspaces:
+                    <tr>
+                        <td>${workspace.id}</td>
+                        <td><a href="${tg.url('/admin/workspaces/{}'.format(workspace.id))}">${workspace.label}</a></td>
+                        <td>${workspace.description}</td>
+                        <td>${workspace.member_nb}</td>
+                        <td class="text-center">
+                            % if workspace.calendar_enabled:
+                                ${ICON.FA('fa-check-square-o fa-lg t-enabled-color')}
+                            % else:
+                                ${ICON.FA('fa-square-o fa-lg t-disabled-color')}
+                            % endif
 
+                        </td>
+                    </tr>
+                % endfor
+            </table>
+        % endif
+    </div>
+## LIST OF WORKSPACES [END]
+</div> <!-- end workspace__wrapper -->

tracim/tracim/templates/admin/workspace_getone.mak

@@ -22,119 +22,100 @@
 </%def>
 
 <%def name="TITLE_ROW()">
-    <div class="row-fluid">
-        <div>
-            <% created_localized = h.get_with_timezone(result.workspace.created) %>
-            <% subtitle = _('workspace created on {date} at {time}').format(date=h.date(created_localized), time=h.time(created_localized)) %>
-            ${ROW.TITLE_ROW(_('Workspace {}').format(result.workspace.label), 'fa-bank', 'col-md-offset-3 col-md-7', 't-user-color', subtitle)}
-        </div>
-    </div>
+    <% created_localized = h.get_with_timezone(result.workspace.created) %>
+    <% subtitle = _('workspace created on {date} at {time}').format(date=h.date(created_localized), time=h.time(created_localized)) %>
+    ${ROW.TITLE_ROW(_('Workspace {}').format(result.workspace.label), 'fa-bank', '', 't-user-color', subtitle)}
 </%def>
 
-<div class="container-fluid">
-    <div class="row-fluid">
-        <div>
-            <div class="row">
-                <div class="col-sm-7 col-md-offset-3">
-                    ${TITLE.H3(_('Detail'), 'fa-align-justify', 'workspace-members')}
-                    % if result.workspace.description:
-                        <p>${result.workspace.description}</p>
-                    % else:
-                        <p class="t-less-visible">${_('No description available')}</p>
-                    % endif
-                </div>
-            </div>
+<div class="workspace__detail__wrapper">
+    <div class="workspace__detail__detail-descr">
+        ${TITLE.H3(_('Detail'), 'fa-align-justify', 'workspace-members')}
+        % if result.workspace.description:
+            <p>${result.workspace.description}</p>
+        % else:
+            <p class="t-less-visible">${_('No description available')}</p>
+        % endif
+    </div>
 
-            <div class="row">
-                % if not result.workspace.calendar_enabled:
-                    <div class="col-sm-7 col-md-offset-3">
-                        ${_('The calendar is disabled.')}
-                    </div>
-                % else:
-                    <div class="col-sm-7 col-md-offset-3">
-                        ${TITLE.H3(_('Calendar'), 'fa-calendar', 'workspace-members')}
-                        <p>${_('This workspace offers a calendar that you can configure in your software: Outlook, Thunderbird, etc.')}</p>
-                        <p>${_('The url to configure is the following one:')}</p>
-                        <p class="form-control">${result.workspace.calendar_url}</p>
-
-                    </div>
-                % endif
-            </div>
+    <div class="workspace__detail__calendar">
+        % if not result.workspace.calendar_enabled:
+            ${_('The calendar is disabled.')}
+        % else:
+            ${TITLE.H3(_('Calendar'), 'fa-calendar', 'workspace-members')}
+            <p>${_('This workspace offers a calendar that you can configure in your software: Outlook, Thunderbird, etc.')}</p>
+            <p>${_('The url to configure is the following one:')}</p>
+            <p class="form-control">${result.workspace.calendar_url}</p>
+        % endif
+    </div>
 
-            <div class="row">
-                <div class="col-sm-7 col-md-offset-3">
-                    <div>
-                        <% potential_new_user_nb = sum(1 for user in fake_api.users if user.id not in (user.id for user in result.workspace.members)) %>
-                        % if potential_new_user_nb<=0:
-                            ${TITLE.H3(_('Members'), 'fa-user', 'workspace-members')}
-                        % else:
-                            ${TITLE.H3_WITH_BUTTON(fake_api.current_user, result.workspace, 'workspace-members', _('Members'), 'add-role-from-existing-user-form', _('add one...'), 'fa-user')}
-
-                            <div id="add-role-from-existing-user-form" class="collapse col-sm-9">
-                                <div class="pod-inline-form">
-                                    <form role="form" method="POST" action="${tg.url('/admin/workspaces/{}/roles'.format(result.workspace.id))}">
-                                        <div class="form-group">
-                                            <label for="user_id">${_('User')}</label>
-                                            <select name="user_id" id="user_id" class="form-control" style="width:100%">
-                                                % for user in fake_api.users:
-                                                    % if user.id not in (user.id for user in result.workspace.members):
-                                                        <option value="${user.id}">${user.name}</option>
-                                                    % endif
-                                                % endfor
-                                            </select>
-                                        </div>
-
-                                        <div class="form-group">
-                                            <label>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</label>
-                                            % for role in fake_api.role_types:
-                                            <div class="radio">
-                                              <label>
-                                                <% checked = ('', 'checked="checked"')[role.id==1]%>
-                                                <input type="radio" name="role_id" id="role-id-${role.id}" value="${role.id}" ${checked}>
-                                                <span style="${role.style}"><b>${role.label}</b></span>
-                                              </label>
-                                            </div>
-                                            % endfor
-                                        </div>
-
-                                        <div class="checkbox">
-                                            <label>
-                                                <input type="checkbox" id="with_notif" name="with_notif" checked="checked"/> ${_('Subscribe to mail notifications')}
-                                            </label>
-                                        </div>
-
-                                        <span class="pull-right" style="margin-top: 0.5em;">
-                                            <button id="current-document-add-comment-save-button" type="submit" class="btn btn-small btn-success" title="Add first comment"><i class=" fa fa-check"></i> ${_('Validate')}</button>
-                                        </span>
-                                    </form>
-                                    <div style="clear: both;"></div>
-                                </div>
-                            </div>
-                            ## END OF ADD MEMBER FORM
-                        % endif
-
-                        % if result.workspace.member_nb<=0:
-                            ${WIDGETS.EMPTY_CONTENT(_('There are no user associated to the current workspace. <a class="alert-link" data-toggle="collapse" data-target="#add-role-from-existing-user-form">Add one</a>.'))}
-                        % else:
-                            <table class="table">
-                                <thead>
-                                    <tr>
-                                        <th>#</th>
-                                        <th>${_('User')}</th>
-                                        <th>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</th>
-                                        <th>${_('Notifications')}</th>
-                                        <th></th>
-                                    </tr>
-                                </thead>
-                                % for member in result.workspace.members:
-                                    ${TABLE_ROW.SECURED_MEMBER_IN_WORKSPACE(fake_api.current_user, result.workspace, member, fake_api.role_types)}
+    <div class="workspace__detail__user">
+        <% potential_new_user_nb = sum(1 for user in fake_api.users if user.id not in (user.id for user in result.workspace.members)) %>
+        % if potential_new_user_nb<=0:
+            ${TITLE.H3(_('Members'), 'fa-user', 'workspace-members')}
+        % else:
+            ${TITLE.H3_WITH_BUTTON(fake_api.current_user, result.workspace, 'workspace-members', _('Members'), 'add-role-from-existing-user-form', _('add one...'), 'fa-user')}
+
+            <div id="add-role-from-existing-user-form" class="collapse col-sm-9">
+                <div class="pod-inline-form">
+                    <form role="form" method="POST" action="${tg.url('/admin/workspaces/{}/roles'.format(result.workspace.id))}">
+                        <div class="form-group">
+                            <label for="user_id">${_('User')}</label>
+                            <select name="user_id" id="user_id" class="form-control" style="width:100%">
+                                % for user in fake_api.users:
+                                    % if user.id not in (user.id for user in result.workspace.members):
+                                        <option value="${user.id}">${user.name}</option>
+                                    % endif
                                 % endfor
-                            </table>
-                        % endif
-                    </div>
+                            </select>
+                        </div>
+
+                        <div class="form-group">
+                            <label>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</label>
+                            % for role in fake_api.role_types:
+                            <div class="radio">
+                              <label>
+                                <% checked = ('', 'checked="checked"')[role.id==1]%>
+                                <input type="radio" name="role_id" id="role-id-${role.id}" value="${role.id}" ${checked}>
+                                <span style="${role.style}"><b>${role.label}</b></span>
+                              </label>
+                            </div>
+                            % endfor
+                        </div>
+
+                        <div class="checkbox">
+                            <label>
+                                <input type="checkbox" id="with_notif" name="with_notif" checked="checked"/> ${_('Subscribe to mail notifications')}
+                            </label>
+                        </div>
+
+                        <span class="pull-right" style="margin-top: 0.5em;">
+                            <button id="current-document-add-comment-save-button" type="submit" class="btn btn-small btn-success" title="Add first comment"><i class=" fa fa-check"></i> ${_('Validate')}</button>
+                        </span>
+                    </form>
+                    <div style="clear: both;"></div>
                 </div>
             </div>
-        </div>
+            ## END OF ADD MEMBER FORM
+        % endif
+
+        % if result.workspace.member_nb<=0:
+            ${WIDGETS.EMPTY_CONTENT(_('There are no user associated to the current workspace. <a class="alert-link" data-toggle="collapse" data-target="#add-role-from-existing-user-form">Add one</a>.'))}
+        % else:
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>${_('User')}</th>
+                        <th>${_('Role')} ${BUTTON.HELP_MODAL_DIALOG('user-role-definition', 'margin-left: 0.5em;')}</th>
+                        <th>${_('Notifications')}</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                % for member in result.workspace.members:
+                    ${TABLE_ROW.SECURED_MEMBER_IN_WORKSPACE(fake_api.current_user, result.workspace, member, fake_api.role_types)}
+                % endfor
+            </table>
+        % endif
     </div>
 </div>
 

tracim/tracim/templates/file/getone.mak

@@ -37,80 +37,71 @@
 ############################################################################
 
 <div class="content-container ${'not-editable' if not result.file.is_editable else ''} ${'archived' if result.file.is_archived else ''} ${'deleted' if result.file.is_deleted else ''}">
-<!--# TODO BS 20161213: Indent content-->
-
-<div class="row t-page-header-row">
-    <div class="col-sm-7 col-sm-offset-3 main">
-        <h1 class="page-header t-file-color-border">
-            <i class="fa fa-fw fa-lg fa-paperclip tracim-less-visible t-file-color"></i>
-            ${result.file.label}
-
-            <span class="pull-right">
-                ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_FILE(fake_api.current_user, result.file.workspace, result.file)}
-            </span>
-        </h1>
-
-        <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
-            <% created_localized = h.get_with_timezone(result.file.created) %>
-          <p>${_('file created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.file.owner.name)|n}</p>
+
+    <div class="t-page-header-row">
+        <div class="main">
+            <h1 class="page-header t-file-color-border">
+                <i class="fa fa-fw fa-lg fa-paperclip tracim-less-visible t-file-color"></i>
+                ${result.file.label}
+
+                <span class="pull-right">
+                    ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_FILE(fake_api.current_user, result.file.workspace, result.file)}
+                </span>
+            </h1>
+
+            <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
+                <% created_localized = h.get_with_timezone(result.file.created) %>
+              <p>${_('file created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.file.owner.name)|n}</p>
+            </div>
         </div>
     </div>
-</div>
 
-% if (result.file.is_archived) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % if (result.file.is_archived) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('Vous consultez <b>une version archivée</b> de la page courante.')|n}
         </p>
     </div>
-</div>
-% elif (result.file.is_deleted) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % elif (result.file.is_deleted) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('Vous consultez <b>une version supprimée</b> de la page courante.')|n}
         </p>
     </div>
-</div>
-% endif
-
-% if result.file.selected_revision!='latest':
-    <div class="row alert alert-warning" role="alert">
-        <div class="col-sm-7 col-sm-offset-3">
-            <p>
-                <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
-                ${_('You are reading <b>an old revision</b> of the current file. (the shown revision is r{}).').format(result.file.selected_revision)|n}
-            </p>
-            <a class="pull-right alert-link" href="${tg.url('/workspaces/{}/folders/{}/files/{}').format(result.file.workspace.id, result.file.parent.id, result.file.id)}">${_('Show latest revision')}</a>
-        </div>
+    % endif
+
+    % if result.file.selected_revision!='latest':
+    <div class="alert alert-warning" role="alert">
+        <p>
+            <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
+            ${_('You are reading <b>an old revision</b> of the current file. (the shown revision is r{}).').format(result.file.selected_revision)|n}
+        </p>
+        <a class="pull-right alert-link" href="${tg.url('/workspaces/{}/folders/{}/files/{}').format(result.file.workspace.id, result.file.parent.id, result.file.id)}">
+            ${_('Show latest revision')}
+        </a>
     </div>
-% endif
-
-% if result.file.status.id=='closed-deprecated':
-    <div class="row alert alert-warning" role="alert">
-        <div class="col-sm-7 col-sm-offset-3">
-            <p>
-                <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
-                ${_('<b>This file is deprecated</b>')|n}
-            </p>
-        </div>
+    % endif
+
+    % if result.file.status.id=='closed-deprecated':
+    <div class="alert alert-warning" role="alert">
+        <p>
+            <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
+            ${_('<b>This file is deprecated</b>')|n}
+        </p>
     </div>
-% endif
+    % endif
 
-<div class="row">
-    <% download_url = tg.url('/workspaces/{}/folders/{}/files/{}/download?revision_id={}'.format(result.file.workspace.id, result.file.parent.id,result.file.id,result.file.selected_revision)) %>
-    <div class="col-sm-1 col-sm-offset-3">
+    <div class="content__detail file">
+        <% download_url = tg.url('/workspaces/{}/folders/{}/files/{}/download?revision_id={}'.format(result.file.workspace.id, result.file.parent.id,result.file.id,result.file.selected_revision)) %>
         <div class="t-half-spacer-above download-file-button">
             <a style="" class="btn btn-default" tittle="${_('Download the file')}"
                 href="${download_url}" >
                 ${ICON.FA_FW('fa fa-download fa-2x')}
             </a>
         </div>
-    </div>
-    <div class="col-md-5">
+
         <div class="t-half-spacer-above">
             <table class="table table-hover table-condensed table-striped table-bordered">
                 <tr>
@@ -136,48 +127,36 @@
                 </tr>
             </table>
         </div>
-    </div>
-    <div class="col-md-1">
+
         <div class="t-half-spacer-above">
             % if result.file.status.id in ('closed-validated', 'closed-unvalidated'):
                 <span style="font-size: 1.5em;"><i class="pull-right fa fa-4x ${result.file.status.css} ${result.file.status.icon}"></i></span>
             % endif
         </div>
-    </div>
-</div>
 
-% if result.file.content.strip():  # only show desc if really a content
-    <div class="row">
-        <div class="col-md-7 col-sm-offset-3">
-            <div class="well">
-                ${result.file.content|n}
-            </div>
+    % if result.file.content.strip():  # only show desc if really a content
+        <div class="well">
+            ${result.file.content|n}
         </div>
-    </div>
-% endif
-
-<div class="row">
-    <div class="col-md-7 col-sm-offset-3">
-        % if result.file.status.id!='open':
-            <p class="tracim-less-visible">${_('<b>Note</b>: You need to change status in case you want to upload a new version')|n}</p>
+    % endif
+
+    % if result.file.status.id!='open':
+        <p class="tracim-less-visible">${_('<b>Note</b>: You need to change status in case you want to upload a new version')|n}</p>
+    % else:
+        % if h.user_role(fake_api.current_user, result.file.workspace)<=1: # User must be a contributor to be allowed to upload files
+            ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.file.workspace, 'file-revisions', _('File revisions'))}
+            <p>${_('This file contains {} revision(s)').format(sum(1 for revision in result.file.revisions if revision.action.id=='revision'))}</p>
         % else:
-            % if h.user_role(fake_api.current_user, result.file.workspace)<=1: # User must be a contributor to be allowed to upload files
-                ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.file.workspace, 'file-revisions', _('File revisions'))}
-                <p>${_('This file contains {} revision(s)').format(sum(1 for revision in result.file.revisions if revision.action.id=='revision'))}</p>
-            % else:
-                % if (h.user_role(fake_api.current_user, result.file.workspace)>1 and not result.file.is_archived and not result.file.is_deleted):
-                    ${BUTTON.DATA_TARGET_AS_TEXT('new-file-revision', _('upload a new revision and/or comment...'), 'btn btn-success t-spacer-below')}
-                    ${FORMS.NEW_FILE_REVISION_WITH_COMMENT_FORM('new-file-revision', result.file.workspace.id, result.file.parent.id, result.file.id)}
-                % endif
+            % if (h.user_role(fake_api.current_user, result.file.workspace)>1 and not result.file.is_archived and not result.file.is_deleted):
+                ${BUTTON.DATA_TARGET_AS_TEXT('new-file-revision', _('upload a new revision and/or comment...'), 'btn btn-success t-spacer-below')}
+                ${FORMS.NEW_FILE_REVISION_WITH_COMMENT_FORM('new-file-revision', result.file.workspace.id, result.file.parent.id, result.file.id)}
             % endif
         % endif
-    </div>
-</div>
+    % endif
 
-<div class="row t-page-metadata-row t-spacer-above">
-    <div class="col-sm-7 col-sm-offset-3">
+    <div class="t-page-metadata-row t-spacer-above">
         <div class="t-spacer-above">
-            <span id="associated-revisions" ></span>
+            <span id="associated-revisions"></span>
             <h4 class="anchored-title">${_('File history')}</h4>
             <div>
                 <table class="table table-striped table-hover">
@@ -187,7 +166,6 @@
                 </table>
             </div>
         </div>
-    </div>
-<div/>
+    <div/>
 
 </div>

tracim/tracim/templates/folder/getone.mak

@@ -40,45 +40,38 @@
 ############################################################################
 
 <div class="folder-container ${'not-editable' if not result.folder.is_editable else ''} ${'archived' if result.folder.is_archived else ''} ${'deleted' if result.folder.is_deleted else ''}">
-<!--# TODO BS 20161213: Indent content-->
-
-<div class="row t-page-header-row">
-    <div class="col-sm-7 col-sm-offset-3 main">
-        <h1 class="page-header t-folder-color-border">
-            <i class="fa fa-fw fa-lg fa-folder-open tracim-less-visible" style="color: #CCCC00"></i>
-            ${result.folder.label}
-        </h1>
-
-        <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
-            <% created_localized = h.get_with_timezone(result.folder.created) %>
-          <p>${_('folder created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.folder.owner.name)|n}</p>
+
+    <div class="t-page-header-row">
+        <div class=" main">
+            <h1 class="page-header t-folder-color-border">
+                <i class="fa fa-fw fa-lg fa-folder-open tracim-less-visible" style="color: #CCCC00"></i>
+                ${result.folder.label}
+            </h1>
+
+            <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
+                <% created_localized = h.get_with_timezone(result.folder.created) %>
+              <p>${_('folder created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.folder.owner.name)|n}</p>
+            </div>
         </div>
     </div>
-</div>
 
-% if (result.folder.is_archived) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % if (result.folder.is_archived) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('Vous consultez <b>une version archivée</b> de la page courante.')|n}
         </p>
     </div>
-</div>
-% elif (result.folder.is_deleted) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % elif (result.folder.is_deleted) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('Vous consultez <b>une version supprimée</b> de la page courante.')|n}
         </p>
     </div>
-</div>
-% endif
-
-<div class="row">
-    <div class="col-sm-7 col-sm-offset-3">
+    % endif
 
+    <div class="content__detail folder">
         <% user_role = h.user_role(fake_api.current_user, result.folder.workspace) %>
 
         <div class="t-spacer-above">
@@ -164,45 +157,44 @@
             % endif
         </div>
     </div>
-</div>
-<script>
-    $(document).ready(function() {
-        $("#current-folder-content-list").DataTable({
-            sDom: '',
-            pageLength: -1
+    <script>
+        $(document).ready(function() {
+            $("#current-folder-content-list").DataTable({
+                sDom: '',
+                pageLength: -1
+            });
         });
-    });
 
-    $(document).ready(function() {
-        $("#toggle-file-visibility").click(function() {
-            $('.t-table-row-file').toggle();
-            $('#toggle-file-visibility').toggleClass('t-active-color');
-            $('#toggle-file-visibility').toggleClass('t-inactive-color');
-        });
-        $("#toggle-thread-visibility").click(function() {
-            $('.t-table-row-thread').toggle();
-            $('#toggle-thread-visibility').toggleClass('t-active-color');
-            $('#toggle-thread-visibility').toggleClass('t-inactive-color');
-        });
-        $("#toggle-folder-visibility").click(function() {
-            $('.t-table-row-folder').toggle();
-            $('#toggle-folder-visibility').toggleClass('t-active-color');
-            $('#toggle-folder-visibility').toggleClass('t-inactive-color');
-        });
-        $("#toggle-page-visibility").click(function() {
-            $('.t-table-row-page').toggle();
-            $('#toggle-page-visibility').toggleClass('t-active-color');
-            $('#toggle-page-visibility').toggleClass('t-inactive-color');
+        $(document).ready(function() {
+            $("#toggle-file-visibility").click(function() {
+                $('.t-table-row-file').toggle();
+                $('#toggle-file-visibility').toggleClass('t-active-color');
+                $('#toggle-file-visibility').toggleClass('t-inactive-color');
+            });
+            $("#toggle-thread-visibility").click(function() {
+                $('.t-table-row-thread').toggle();
+                $('#toggle-thread-visibility').toggleClass('t-active-color');
+                $('#toggle-thread-visibility').toggleClass('t-inactive-color');
+            });
+            $("#toggle-folder-visibility").click(function() {
+                $('.t-table-row-folder').toggle();
+                $('#toggle-folder-visibility').toggleClass('t-active-color');
+                $('#toggle-folder-visibility').toggleClass('t-inactive-color');
+            });
+            $("#toggle-page-visibility").click(function() {
+                $('.t-table-row-page').toggle();
+                $('#toggle-page-visibility').toggleClass('t-active-color');
+                $('#toggle-page-visibility').toggleClass('t-inactive-color');
+            });
         });
-    });
 
-    $(document).ready(function() {
-        $("#filtering").on('keyup click', function() {
-            $("#current-folder-content-list").DataTable().search(
-                $("#filtering").val()
-            ).draw();
+        $(document).ready(function() {
+            $("#filtering").on('keyup click', function() {
+                $("#current-folder-content-list").DataTable().search(
+                    $("#filtering").val()
+                ).draw();
+            });
         });
-    });
-</script>
+    </script>
 
-</div>
+</div> <!-- end .folder-container -->

tracim/tracim/templates/home.mak

@@ -11,10 +11,8 @@
 </%def>
 
 <%def name="TITLE_ROW()">
-    <div class="row-fluid">
-        <div>
-            ${ROW.TITLE_ROW(_('My Dashboard'), 'fa-home', 'col-md-offset-3 col-md-7', 't-user-color', _('Welcome to your home, {username}.').format(username=fake_api.current_user.name))}
-        </div>
+    <div class="content__title">
+        ${ROW.TITLE_ROW(_('My Dashboard'), 'fa-home', '', 't-user-color', _('Welcome to your home, {username}.').format(username=fake_api.current_user.name))}
     </div>
 </%def>
 
@@ -33,116 +31,96 @@
     ${TIM.MODAL_DIALOG('user-edit-password-modal-dialog')}
 </%def>
 
-<div class="container-fluid">
-    <div class="row-fluid">
-        <div>
-            ## NOT READ
-            <div class="row" id="unread-content-panel">
-                <div class="col-md-offset-3 col-sm-7">
-                    <div class="row t-spacer-above">
-                        <div class="col-sm-12">
-                            <div class="t-half-spacer-above">
-                                <div class="panel panel-success">
-                                    <div class="panel-heading">
-                                        <h3 class="panel-title"><i class="fa fa-fw fa-eye-slash"></i> ${_('Not Read')}</h3>
-                                    </div>
-                                    <div class="panel-body">
-                                        % if fake_api.last_unread.nb <= 0:
-                                            ${P.EMPTY_CONTENT(_('No new content.'))}
-                                        % else:
-                                            <table class="table table-hover">
-                                                % for item in fake_api.last_unread.contents:
-                                                    <tr>
-                                                        <td>
-                                                            <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
-                                                            <a href="${item.url}">${item.label}</a>
-                                                            <br/>
-                                                            <span class="t-less-visible">${item.workspace.label}</span>
-                                                        </td>
-                                                        <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
-                                                            ${item.last_activity.delta}
-                                                        </td>
-                                                    </tr>
-                                                % endfor
-                                            </table>
-                                        % endif
-                                     </div>
-                                 </div>
-                            </div>
-                        </div>
-                    </div>
+<div class="content__home">
+    ## NOT READ
+    <div class="t-spacer-above" id="unread-content-panel">
+        <div class="t-half-spacer-above">
+            <div class="panel panel-success">
+                <div class="panel-heading">
+                    <h3 class="panel-title"><i class="fa fa-fw fa-eye-slash"></i> ${_('Not Read')}</h3>
                 </div>
-            </div>
+                <div class="panel-body">
+                    % if fake_api.last_unread.nb <= 0:
+                        ${P.EMPTY_CONTENT(_('No new content.'))}
+                    % else:
+                        <table class="table table-hover">
+                            % for item in fake_api.last_unread.contents:
+                                <tr>
+                                    <td>
+                                        <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
+                                        <a href="${item.url}">${item.label}</a>
+                                        <br/>
+                                        <span class="t-less-visible">${item.workspace.label}</span>
+                                    </td>
+                                    <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
+                                        ${item.last_activity.delta}
+                                    </td>
+                                </tr>
+                            % endfor
+                        </table>
+                    % endif
+                 </div>
+             </div>
+        </div>
+    </div>
 
-            ## RECENT ACTIVITY
-            <div class="row" id="recent-activity-panel">
-                <div class="col-md-offset-3 col-sm-7">
-                    <div class="row t-spacer-above">
-                        <div class="col-sm-12">
-                            <div class="t-half-spacer-above">
-                                <div class="panel panel-warning">
-                                    <div class="panel-heading">
-                                        <h3 class="panel-title"><i class="fa fa-fw fa-line-chart"></i> ${_('Recent Activity')}</h3>
-                                    </div>
-                                    <div class="panel-body">
-                                        % if fake_api.last_actives.nb <= 0:
-                                            ${P.EMPTY_CONTENT(_('There\'s no activity yet.'))}
-                                        % else:
-                                            <table class="table table-hover">
-                                                % for item in fake_api.last_actives.contents:
-                                                    <tr>
-                                                        <td>
-                                                            <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
-                                                            <a href="${item.url}">${item.label}</a>
-                                                            <br/>
-                                                            <span class="t-less-visible">${item.workspace.label}</span>
-                                                        </td>
-                                                        <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
-                                                            ${item.last_activity.delta}
-                                                        </td>
-                                                    </tr>
-                                                % endfor
-                                            </table>
-                                        % endif
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+    ## RECENT ACTIVITY
+    <div class="t-spacer-above" id="recent-activity-panel">
+        <div class="t-half-spacer-above">
+            <div class="panel panel-warning">
+                <div class="panel-heading">
+                    <h3 class="panel-title"><i class="fa fa-fw fa-line-chart"></i> ${_('Recent Activity')}</h3>
+                </div>
+                <div class="panel-body">
+                    % if fake_api.last_actives.nb <= 0:
+                        ${P.EMPTY_CONTENT(_('There\'s no activity yet.'))}
+                    % else:
+                        <table class="table table-hover">
+                            % for item in fake_api.last_actives.contents:
+                                <tr>
+                                    <td>
+                                        <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
+                                        <a href="${item.url}">${item.label}</a>
+                                        <br/>
+                                        <span class="t-less-visible">${item.workspace.label}</span>
+                                    </td>
+                                    <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
+                                        ${item.last_activity.delta}
+                                    </td>
+                                </tr>
+                            % endfor
+                        </table>
+                    % endif
                 </div>
             </div>
+        </div>
+    </div>
 
-            ## Workspace list and notifications
-            <div class="row t-half-spacer-above" id="workspaces-panel">
-                <div class="col-md-offset-3 col-sm-7">
-                    <div class="row t-spacer-above">
-                        <div class="col-sm-12">
-                            <div class="panel panel-info">
-                                <div class="panel-heading">
-                                    <h3 class="panel-title"><i class="fa fa-bank"></i> ${_('Workspaces')}</h3>
-                                </div>
-                                <div class="panel-body">
+    ## Workspace list and notifications
+    <div class="t-half-spacer-above" id="workspaces-panel">
+        <div class="t-spacer-above">
+            <div class="panel panel-info">
+                <div class="panel-heading">
+                    <h3 class="panel-title"><i class="fa fa-bank"></i> ${_('Workspaces')}</h3>
+                </div>
+                <div class="panel-body">
 
-                                    % if len(fake_api.current_user.roles)<=0:
-                                        ${P.EMPTY_CONTENT(_('I\'m not member of any workspace.'))}
-                                    % else:
-                                        <table class="table">
-                                            <thead>
-                                                <tr>
-                                                    <th>${_('Workspace')}</th>
-                                                    <th>${_('Role')}</th>
-                                                    <th>${_('Email Notifications')}</th>
-                                                </tr>
-                                            </thead>
-                                            % for role in fake_api.current_user.roles:
-                                                ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=False, enable_link='/user/me/workspaces/{workspace}/enable_notifications?next_url=/home', disable_link='/user/me/workspaces/{workspace}/disable_notifications?next_url=/home')}
-                                            % endfor
-                                        </table>
-                                    % endif
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    % if len(fake_api.current_user.roles)<=0:
+                        ${P.EMPTY_CONTENT(_('I\'m not member of any workspace.'))}
+                    % else:
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th>${_('Workspace')}</th>
+                                    <th>${_('Role')}</th>
+                                    <th>${_('Email Notifications')}</th>
+                                </tr>
+                            </thead>
+                            % for role in fake_api.current_user.roles:
+                                ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=False, enable_link='/user/me/workspaces/{workspace}/enable_notifications?next_url=/home', disable_link='/user/me/workspaces/{workspace}/disable_notifications?next_url=/home')}
+                            % endfor
+                        </table>
+                    % endif
                 </div>
             </div>
         </div>

tracim/tracim/templates/master_authenticated.mak

@@ -26,7 +26,7 @@
     <body class="${self.body_class()}">
         <script src="${tg.url('/assets/js/jquery.min.js')}"></script>
 
-        <div class="container-fluid ${container_classes()}">
+        <div class="${container_classes()}">
             ${self.main_menu()}
             ${self.content_wrapper()}
             <div id="tracim-footer-separator"></div>
@@ -74,7 +74,7 @@
 
 <%def name="main_menu()">
     <div class="navbar navbar-fixed-top" role="navigation">
-        ${TIM.FLASH_MSG('col-sm-7 col-sm-offset-3')}
+        ${TIM.FLASH_MSG('')}
 ##
 ##         <div class="row" id="flashgordon">
 ##             <div class="col-sm-7 col-sm-offset-3" style="z-index: 10001; padding: 0; position: absolute; top: 0;">
@@ -96,7 +96,7 @@
 
 
 
-        <div class="container-fluid">
+        <div class="">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                     <span class="sr-only">Toggle navigation</span>
@@ -110,16 +110,20 @@
                 </a>
             </div>
 
-            <div class="navbar-collapse collapse">
+            <div class="header__navbar navbar-collapse collapse">
                 % if request.identity:
-                    <ul class="nav navbar-nav navbar-left">
-                        <li class="active"><a href="${tg.url('/home')}">${TIM.FA('fa-home fa-lg')} ${_('My Home')}</a></li>
-                        <li class=""><a href="${tg.url('/calendar')}">${TIM.FA('fa-calendar')} ${_('Calendar')}</a></li>
+                    <ul class="header__navbar__list nav navbar-nav navbar-left">
+                        <li class="header__navbar__list__item active">
+                            <a href="${tg.url('/home')}">${TIM.FA('fa-home fa-lg')} ${_('My Home')}</a>
+                        </li>
+                        <li class="header__navbar__list__item">
+                            <a href="${tg.url('/calendar')}">${TIM.FA('fa-calendar')} ${_('Calendar')}</a>
+                        </li>
                         ${NAVBAR_MENU.ADMIN_ITEMS()}
                     </ul>
                 % endif
 
-                <ul class="nav navbar-nav navbar-right">
+                <ul class="header__navbar__right nav navbar-nav navbar-right">
 
                     % if request.identity:
 
@@ -186,6 +190,11 @@
 ##                        </ul>
 ##                    </li>
                 </ul>
+
+                <div class="header__navbar__switch-mode switch-read-mode">
+                    ${TIM.FA('fa-eye')} ${_('Read mode')}
+                </div>
+
             </div>
         </div>
     </div>

tracim/tracim/templates/master_authenticated_left_treeview.mak

@@ -9,7 +9,7 @@
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">
     ## This is the default right sidebar implementation
-    <div id="sidebar-right" class="col-sm-1 col-md-1 col-sm-offset-11 sidebar">
+    <div class="sidebar">
         <div class="btn-group btn-group-vertical">
         </div>
         <p></p>
@@ -19,29 +19,24 @@
 <%def name="FOOTER_CONTENT_LIKE_SCRIPTS_AND_CSS()"></%def>
 
 <%def name="content_wrapper()">
-    <div class="container-fluid">
-        <div class="row-fluid">
-
-            ## SIDEBAR LEFT
-            <div id="sidebar-left" class="fixed-width-sidebar col-sm-3 sidebar" >
-                <div class="btn-group" style="position: absolute; right: 2px; top: 4px; ">
-                    <button id="toggle-left-sidebar-width" type="button" class="btn btn-link"><i class="fa fa-angle-double-right"></i></button>
-                </div>
-                ${self.SIDEBAR_LEFT_CONTENT()}
-            </div>
-            ## SIDEBAR LEFT [END]
+    ## SIDEBAR LEFT
+    <div id="sidebar-left">
+        <div class="btn-group" style="position: absolute; right: 2px; top: 4px; ">
+            <button id="toggle-left-sidebar-width" type="button" class="btn btn-link"><i class="fa fa-angle-double-right"></i></button>
+        </div>
+        ${self.SIDEBAR_LEFT_CONTENT()}
+    </div>
+    ## SIDEBAR LEFT [END]
 
-            ## SIDEBAR RIGHT
-            <div id="sidebar-right" class="col-sm-1 col-md-1 col-sm-offset-11 sidebar">
-                ${self.SIDEBAR_RIGHT_CONTENT()}
-            </div> <!-- # End of side bar right -->
-            ## SIDEBAR RIGHT [END]
+    ## SIDEBAR RIGHT
+    <div id="sidebar-right" class="sidebar">
+        ${self.SIDEBAR_RIGHT_CONTENT()}
+    </div> <!-- # End of side bar right -->
+    ## SIDEBAR RIGHT [END]
 
-            <div>
-                ${self.TITLE_ROW()}
-                ${self.body()}
-            </div>
-        </div>
+    <div class="content__wrapper">
+        ${self.TITLE_ROW()}
+        ${self.body()}
     </div>
     ${self.REQUIRED_DIALOGS()}
 
@@ -53,30 +48,6 @@
     <script src="${tg.url('/assets/js/jquery.min.js')}"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="${tg.url('/assets/js/ie10-viewport-bug-workaround.js')}"></script>
-    <script>
-        $(function () {
-            $('#toggle-left-sidebar-width').click( function() {
-              sidebar = $('#sidebar-left');
-              buttonIcon = $('> i', this);
-              if (sidebar.hasClass('fixed-width-sidebar')) {
-                sidebar.removeClass('fixed-width-sidebar')
-                sidebar.removeClass('col-sm-3');
-
-                buttonIcon.removeClass('fa-angle-double-right');
-                buttonIcon.addClass('fa-angle-double-left');
-              } else {
-                sidebar.addClass('fixed-width-sidebar')
-                sidebar.addClass('col-sm-3');
-                buttonIcon.removeClass('fa-angle-double-left');
-                buttonIcon.addClass('fa-angle-double-right');
-              }
-            });
-
-            $('#current-page-breadcrumb-toggle-button').click( function() {
-              $('#current-page-breadcrumb').toggle();
-            });
-        });
-    </script>
     <!-- TinyMCE ================================================== -->
     <script src="${tg.url('/assets/tinymce/js/tinymce/tinymce.min.js')}"></script>
     ${TIM.TINYMCE_INIT_SCRIPT('.pod-rich-textarea')}

tracim/tracim/templates/master_authenticated_left_treeview_right_toolbar.mak

@@ -8,32 +8,27 @@
 <%def name="FOOTER_CONTENT_LIKE_SCRIPTS_AND_CSS()"></%def>
 
 <%def name="content_wrapper()">
-    <div class="container-fluid">
-        <div class="row-fluid">
-        
-            ## SIDEBAR LEFT
-            <div id="sidebar-left" class="fixed-width-sidebar col-sm-3 sidebar" >
-                <div class="btn-group" style="position: absolute; right: 2px; top: 4px; ">
-                    <button id="toggle-left-sidebar-width" type="button" class="btn btn-link"><i class="fa fa-angle-double-right"></i></button>
-                </div>
-                ${self.SIDEBAR_LEFT_CONTENT()}
-            </div>
-            ## SIDEBAR LEFT [END]
-
-            ## SIDEBAR RIGHT
-            <div id="sidebar-right" class="col-sm-2 col-md-2 col-sm-offset-10 sidebar">
-                ${self.SIDEBAR_RIGHT_CONTENT()}
-            </div> <!-- # End of side bar right -->
-            ## SIDEBAR RIGHT [END]
-            
-            <div>
-                ${self.TITLE_ROW()}
-                ${self.body()}
-            </div>
+    ## SIDEBAR LEFT
+    <div id="sidebar-left" class="sidebar">
+        <div class="btn-group" style="position: absolute; right: 2px; top: 4px; ">
+            <button id="toggle-left-sidebar-width" type="button" class="btn btn-link"><i class="fa fa-angle-double-right"></i></button>
         </div>
+        ${self.SIDEBAR_LEFT_CONTENT()}
+    </div>
+    ## SIDEBAR LEFT [END]
+
+    ## SIDEBAR RIGHT
+    <div id="sidebar-right" class="sidebar">
+        ${self.SIDEBAR_RIGHT_CONTENT()}
+    </div> <!-- # End of side bar right -->
+    ## SIDEBAR RIGHT [END]
+
+    <div class="content__wrapper">
+        ${self.TITLE_ROW()}
+        ${self.body()}
     </div>
     ${self.REQUIRED_DIALOGS()}
-    
+
     ###########################################
     ##
     ## GENERIC STUFF LIKE SCRIPTS
@@ -42,30 +37,6 @@
     <script src="${tg.url('/assets/js/jquery.min.js')}"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="${tg.url('/assets/js/ie10-viewport-bug-workaround.js')}"></script>
-    <script>
-        $(function () {
-            $('#toggle-left-sidebar-width').click( function() {
-              sidebar = $('#sidebar-left');
-              buttonIcon = $('> i', this);
-              if (sidebar.hasClass('fixed-width-sidebar')) {
-                sidebar.removeClass('fixed-width-sidebar')
-                sidebar.removeClass('col-sm-3');
-                
-                buttonIcon.removeClass('fa-angle-double-right');
-                buttonIcon.addClass('fa-angle-double-left');
-              } else {
-                sidebar.addClass('fixed-width-sidebar')
-                sidebar.addClass('col-sm-3');
-                buttonIcon.removeClass('fa-angle-double-left');
-                buttonIcon.addClass('fa-angle-double-right');
-              }
-            });
-
-            $('#current-page-breadcrumb-toggle-button').click( function() {
-              $('#current-page-breadcrumb').toggle();
-            });
-        });
-    </script>
     <!-- TinyMCE ================================================== -->
     <script src="${tg.url('/assets/tinymce/js/tinymce/tinymce.min.js')}"></script>
     ${TIM.TINYMCE_INIT_SCRIPT('.pod-rich-textarea')}

tracim/tracim/templates/page/getone.mak

@@ -35,102 +35,92 @@
 ############################################################################
 
 <div class="content-container ${'not-editable' if not result.page.is_editable else ''} ${'archived' if result.page.is_archived else ''} ${'deleted' if result.page.is_deleted else ''}">
-<!--# TODO BS 20161213: Indent content-->
-
-<div class="row t-page-header-row">
-    <div class="col-sm-7 col-sm-offset-3 main">
-        <h1 class="page-header t-page-color-border">
-            <i class="fa fa-fw fa-lg fa-file-text-o tracim-less-visible t-page-color"></i>
-            ${result.page.label}
-
-            <span class="pull-right">
-                ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_PAGE(fake_api.current_user, result.page.workspace, result.page)}
-            </span>
-        </h1>
-
-        <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
-            <% created_localized = h.get_with_timezone(result.page.created) %>
-          <p>${_('page created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.page.owner.name)|n}</p>
+
+    <div class="t-page-header-row">
+        <div class="main">
+            <h1 class="page-header t-page-color-border">
+                <i class="fa fa-fw fa-lg fa-file-text-o tracim-less-visible t-page-color"></i>
+                ${result.page.label}
+
+                <span class="pull-right">
+                    ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_PAGE(fake_api.current_user, result.page.workspace, result.page)}
+                </span>
+            </h1>
+
+            <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
+                <% created_localized = h.get_with_timezone(result.page.created) %>
+              <p>${_('page created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.page.owner.name)|n}</p>
+            </div>
         </div>
     </div>
-</div>
 
-% if (result.page.is_archived) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % if (result.page.is_archived) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('You are viewing <b>an archived version</b> of the current page.')|n}
         </p>
     </div>
-</div>
-% elif (result.page.is_deleted) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
+    % elif (result.page.is_deleted) :
+    <div class="alert alert-info" role="alert">
         <p>
             <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
             ${_('You are viewing <b>a deleted version</b> of the current page.')|n}
         </p>
     </div>
-</div>
-% endif
-
-% if result.page.selected_revision!='latest':
-    <div class="row alert alert-warning" role="alert">
-        <div class="col-sm-7 col-sm-offset-3">
-            <p>
-                <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
-                ${_('You are reading <b>an old revision</b> of the current page. (the shown revision is r{}).').format(result.page.selected_revision)|n}
-            </p>
-            <a class="pull-right alert-link" href="${tg.url('/workspaces/{}/folders/{}/pages/{}').format(result.page.workspace.id, result.page.parent.id, result.page.id)}">${_('Show latest revision')}</a>
-        </div>
-    </div>
-% endif
-
-% if result.page.status.id=='closed-deprecated':
-    <div class="row alert alert-warning" role="alert">
-        <div class="col-sm-7 col-sm-offset-3">
-            <p>
-                <span class="pull-left">${ICON.FA_FW_2X('fa-history')}</span>
-                ${_('<b>This information is deprecated</b>')|n}
-            </p>
-        </div>
-    </div>
-% endif
-
-<div class="row">
-    <div class="col-sm-7 col-sm-offset-3">
+    % endif
 
-## TODO - 2015-07-22 - D.A. - should we show a breadcrumb or not ?
-## <button id="current-page-breadcrumb-toggle-button" class="btn btn-link" title="${_('Show localisation')}"><i class="fa fa-map-marker"></i></button>
-## ${WIDGETS.BREADCRUMB('current-page-breadcrumb', fake_api.breadcrumb)}
+    % if result.page.selected_revision!='latest':
+    <div class="alert alert-warning" role="alert">
+        <p>
+            <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
+            ${_('You are reading <b>an old revision</b> of the current page. (the shown revision is r{}).').format(result.page.selected_revision)|n}
+        </p>
+        <a class="pull-right alert-link" href="${tg.url('/workspaces/{}/folders/{}/pages/{}').format(result.page.workspace.id, result.page.parent.id, result.page.id)}">
+            ${_('Show latest revision')}
+        </a>
+    </div>
+    % endif
 
-        % if not result.page.content.strip():
-            <div class="t-spacer-above t-less-visible">
-                ${_('This page is empty')}
-            </div>
-        % else:
-            <div class="t-spacer-above">
-                ${result.page.content|n}
-            </div>
-        % endif
+    % if result.page.status.id=='closed-deprecated':
+    <div class="alert alert-warning" role="alert">
+        <p>
+            <span class="pull-left">${ICON.FA_FW_2X('fa-history')}</span>
+            ${_('<b>This information is deprecated</b>')|n}
+        </p>
     </div>
-</div>
+    % endif
+
+    <div class="content__detail page">
+        <div class="">
+            ## TODO - 2015-07-22 - D.A. - should we show a breadcrumb or not ?
+            ## <button id="current-page-breadcrumb-toggle-button" class="btn btn-link" title="${_('Show localisation')}"><i class="fa fa-map-marker"></i></button>
+            ## ${WIDGETS.BREADCRUMB('current-page-breadcrumb', fake_api.breadcrumb)}
+
+            % if not result.page.content.strip():
+                <div class="t-spacer-above t-less-visible">
+                    ${_('This page is empty')}
+                </div>
+            % else:
+                <div class="t-spacer-above">
+                    ${result.page.content|n}
+                </div>
+            % endif
+        </div>
 
-<div class="row t-page-metadata-row t-spacer-above">
-    <div class="col-sm-7 col-sm-offset-3">
-        <div class="t-spacer-above">
-            <span id="associated-revisions" ></span>
-            <h4 class="anchored-title">${_('Page history')}</h4>
-            <div>
-                <table class="table table-striped table-hover">
-                    % for event in result.page.history:
-                        ${WIDGETS.SECURED_HISTORY_VIRTUAL_EVENT_AS_TABLE_ROW(fake_api.current_user, event, result.page.selected_revision)}
-                    % endfor
-                </table>
+        <div class="t-page-metadata-row t-spacer-above">
+            <div class="t-spacer-above">
+                <span id="associated-revisions" ></span>
+                <h4 class="anchored-title">${_('Page history')}</h4>
+                <div>
+                    <table class="table table-striped table-hover">
+                        % for event in result.page.history:
+                            ${WIDGETS.SECURED_HISTORY_VIRTUAL_EVENT_AS_TABLE_ROW(fake_api.current_user, event, result.page.selected_revision)}
+                        % endfor
+                    </table>
+                </div>
             </div>
-        </div>
+        <div/>
     </div>
-<div/>
 
 </div>

tracim/tracim/templates/pod.mak

@@ -116,8 +116,8 @@
 <%def name="FLASH_MSG(css_class='')">
     <% flash=tg.flash_obj.render('flash', use_js=False) %>
     % if flash:
-        <div class="row" id="flash-message-to-fade-out">
-            <div id="t-full-app-alert-message-id" class="${css_class}">
+        <div class="" id="flash-message-to-fade-out">
+            <div id="t-full-app-alert-message-id" class="flashmsg__data ${css_class}">
                 ${flash|n}
             </div>
         </div>

tracim/tracim/templates/thread/getone.mak

@@ -37,77 +37,72 @@
 ############################################################################
 
 <div class="content-container ${'not-editable' if not result.thread.is_editable else ''} ${'archived' if result.thread.is_archived else ''} ${'deleted' if result.thread.is_deleted else ''}">
-<!--# TODO BS 20161213: Indent content-->
-
-<div class="row t-page-header-row">
-    <div class="col-sm-7 col-sm-offset-3 main">
-        <h1 class="page-header t-thread-color-border">
-            <i class="fa fa-fw fa-lg fa-comments-o tracim-less-visible t-thread-color"></i>
-            ${result.thread.label}
-
-            <span class="pull-right">
-                ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_THREAD(fake_api.current_user, result.thread.workspace, result.thread)}
-            </span>
-        </h1>
-
-        <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
-            <% created_localized = h.get_with_timezone(result.thread.created) %>
-          <p>${_('page created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.thread.owner.name)|n}</p>
+
+    <div class="t-page-header-row">
+        <div class="main">
+            <h1 class="page-header t-thread-color-border">
+                <i class="fa fa-fw fa-lg fa-comments-o tracim-less-visible t-thread-color"></i>
+                ${result.thread.label}
+
+                <span class="pull-right">
+                    ${WIDGETS.SECURED_SHOW_CHANGE_STATUS_FOR_THREAD(fake_api.current_user, result.thread.workspace, result.thread)}
+                </span>
+            </h1>
+
+            <div style="margin: -1.5em auto -1.5em auto;" class="tracim-less-visible">
+                <% created_localized = h.get_with_timezone(result.thread.created) %>
+              <p>${_('page created on {date} at {time} by <b>{author}</b>').format(date=h.date(created_localized), time=h.time(created_localized), author=result.thread.owner.name)|n}</p>
+            </div>
         </div>
     </div>
-</div>
 
-% if (result.thread.is_archived) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
-        <p>
-            <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
-            ${_('Vous consultez <b>une version archivée</b> de la page courante.')|n}
-        </p>
+    % if (result.thread.is_archived) :
+    <div class="alert alert-info" role="alert">
+        <div class="">
+            <p>
+                <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
+                ${_('Vous consultez <b>une version archivée</b> de la page courante.')|n}
+            </p>
+        </div>
     </div>
-</div>
-% elif (result.thread.is_deleted) :
-<div class="row alert alert-info" role="alert">
-    <div class="col-sm-7 col-sm-offset-3">
-        <p>
-            <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
-            ${_('Vous consultez <b>une version supprimée</b> de la page courante.')|n}
-        </p>
+    % elif (result.thread.is_deleted) :
+    <div class="alert alert-info" role="alert">
+        <div class="">
+            <p>
+                <span class="pull-left"><i class="fa fa-fw fa-2x fa-warning" alt="" title=""></i></span>
+                ${_('Vous consultez <b>une version supprimée</b> de la page courante.')|n}
+            </p>
+        </div>
     </div>
-</div>
-% endif
+    % endif
 
-% if result.thread.status.id=='closed-deprecated':
-    <div class="row alert alert-warning" role="alert">
-        <div class="col-sm-7 col-sm-offset-3">
+    % if result.thread.status.id=='closed-deprecated':
+    <div class="alert alert-warning" role="alert">
+        <div class="">
             <p>
                 <span class="pull-left">${ICON.FA_FW_2X('fa-warning')}</span>
                 ${_('<b>This information is deprecated</b>')|n}
             </p>
         </div>
     </div>
-% endif
-
-% if result.thread.content:
-    <div class="row">
-        <div class="col-sm-7 col-sm-offset-3">
+    % endif
 
-    ## TODO - 2015-07-22 - D.A. - should we show a breadcrumb or not ?
-    ## <button id="current-page-breadcrumb-toggle-button" class="btn btn-link" title="${_('Show localisation')}"><i class="fa fa-map-marker"></i></button>
-    ## ${WIDGETS.BREADCRUMB('current-page-breadcrumb', fake_api.breadcrumb)}
+    % if result.thread.content:
+    <div class="">
+        ## TODO - 2015-07-22 - D.A. - should we show a breadcrumb or not ?
+        ## <button id="current-page-breadcrumb-toggle-button" class="btn btn-link" title="${_('Show localisation')}"><i class="fa fa-map-marker"></i></button>
+        ## ${WIDGETS.BREADCRUMB('current-page-breadcrumb', fake_api.breadcrumb)}
 
-            <div class="well t-half-spacer-above">
-                % if result.thread.status.id in ('closed-validated', 'closed-unvalidated'):
-                    <span style="font-size: 1.5em;"><i class="pull-right fa fa-4x ${result.thread.status.css} ${result.thread.status.icon}"></i></span>
-                % endif
-                ${result.thread.content|n}
-            </div>
+        <div class="well t-half-spacer-above">
+            % if result.thread.status.id in ('closed-validated', 'closed-unvalidated'):
+                <span style="font-size: 1.5em;"><i class="pull-right fa fa-4x ${result.thread.status.css} ${result.thread.status.icon}"></i></span>
+            % endif
+            ${result.thread.content|n}
         </div>
     </div>
-% endif
+    % endif
 
-<div class="row">
-    <div class="col-sm-7 col-sm-offset-3">
+    <div class="content__detail thread">
         <div class="threads-history-reverse">
         % if inverted:
             <a href="${tg.url('/workspaces/{}/folders/{}/threads/{}'.format(result.thread.workspace.id, result.thread.parent.id, result.thread.id))}">
@@ -134,19 +129,19 @@
                 % endif
             % endif
         % endif
-    </div>
-</div>
 
-<!-- % for event in reversed(result.thread.history): -->
-% for event in result.thread.history:
-    ## TODO - D.A. - 2015-08-20
-    ## Allow to show full history (with status change and archive/unarchive)
-    ${WIDGETS.SECURED_HISTORY_VIRTUAL_EVENT(fake_api.current_user, event)}
-% endfor
+        <!-- % for event in reversed(result.thread.history): -->
+        % for event in result.thread.history:
+            ## TODO - D.A. - 2015-08-20
+            ## Allow to show full history (with status change and archive/unarchive)
+            ${WIDGETS.SECURED_HISTORY_VIRTUAL_EVENT(fake_api.current_user, event)}
+        % endfor
 
-## % for comment in result.thread.comments:
-##     ${WIDGETS.SECURED_TIMELINE_ITEM(fake_api.current_user, comment)}
-## % endfor
-##
+        ## % for comment in result.thread.comments:
+        ##     ${WIDGETS.SECURED_TIMELINE_ITEM(fake_api.current_user, comment)}
+        ## % endfor
+        ##
+
+    </div>
 
 </div>

tracim/tracim/templates/user_workspace_widgets.mak

@@ -22,11 +22,11 @@
     <h4 id="${dom_id}">
         ${TIM.ICO(icon_size, icon_path) if icon_path else ''}
         ${label}
-        
+
         ## Button is shown for contributors (or more), not for readers
-        % if h.user_role(user, workspace)>1: 
+        % if h.user_role(user, workspace)>1:
             % if action_dom_id and action_label:
-                <small style="margin-left: 1em;"> ${DATA_TARGET_BUTTON(action_dom_id, action_label)}</small>    
+                <small style="margin-left: 1em;"> ${DATA_TARGET_BUTTON(action_dom_id, action_label)}</small>
             % endif
         % endif
     </h4>
@@ -47,7 +47,7 @@
                             % if folder.folder_nb.all>=1:
                                 ${_('{nb_total} subfolder(s)').format(nb_total=folder.folder_nb.all)|n}
                             % endif
-                            
+
                             % if folder.thread_nb.all>=1:
                                 ${_('{nb_total} thread(s) &mdash; {nb_open} open').format(nb_total=folder.thread_nb.all, nb_open=folder.thread_nb.open)|n}
                                 <br/>
@@ -214,7 +214,7 @@
 
                 ##
                 ## INFO - D.A. - 2014-10-17
-                ## Look comment at top of this function in order to get information about the next if/then/else 
+                ## Look comment at top of this function in order to get information about the next if/then/else
                 ##
                 % if mode=='link_to_document':
                     $('#${dom_id}-treeview').on("select_node.jstree", function (e, data) {
@@ -223,7 +223,7 @@
                         url = $('#'+data.selected[0]+' > a').attr('href');
                         location.href = url;
                     });
-                % else:              
+                % else:
                     $('#${dom_id}-treeview').on("select_node.jstree", function (e, data) {
                         // on click, the form hidden field is updated
                         ## FIXME - REMOVE alert('about to update value of field '+'#${dom_id}-treeview-hidden-field');
@@ -236,7 +236,7 @@
                         % endif
                     });
                 % endif
-                
+
                 $('#${dom_id}-treeview').on("loaded.jstree", function () {
                     nodes = $('#${dom_id}-treeview .jstree-node');
                     console.log("nodes = "+nodes.length);
@@ -340,8 +340,8 @@
     <% created_localized = h.get_with_timezone(event.created) %>
     <% is_new_css_class = 't-is-new-content' if event.is_new else '' %>
 
-    <div class="row t-odd-or-even t-hacky-thread-comment-border-top ${is_new_css_class}">
-        <div class="col-sm-7 col-sm-offset-3">
+    <div class="t-odd-or-even t-hacky-thread-comment-border-top ${is_new_css_class}">
+        <div class="">
             <div class="t-timeline-item">
 ##                <i class="fa fa-fw fa-3x fa-comment-o t-less-visible" style="margin-left: -1.5em; float:left;"></i>
 
@@ -407,4 +407,4 @@
             </td>
         % endif
     </tr>
-</%def>
+</%def>

tracim/tracim/templates/widgets/row.mak

@@ -1,5 +1,5 @@
 <%def name="TITLE_ROW(label, icon, width_classes, color_classes, subtitle)">
-    <div class="row" style="background-color: #F5F5F5; border-bottom: 1px solid #CCC;">
+    <div class="" style="background-color: #F5F5F5; border-bottom: 1px solid #CCC;">
         <div class="${width_classes} main">
             <h1 class="page-header ${color_classes}">
                 <i class="fa fa-fw fa-lg ${icon} ${color_classes}"></i>

tracim/tracim/templates/widgets/table_row.mak

@@ -5,7 +5,7 @@
 <%def name="USER_ROLE_IN_WORKSPACE(current_user, role, show_id=True, enable_link=None, disable_link=None, role_types=None)">
     <tr>
         % if show_id:
-            <td class="text-right">${role.workspace.id}</td>
+            <td>${role.workspace.id}</td>
         % endif
         <td><a href="${tg.url('/admin/workspaces/{}').format(role.workspace.id)}">${role.workspace.name}</a></td>
 
@@ -33,8 +33,8 @@
 
 <%def name="SECURED_MEMBER_IN_WORKSPACE(current_user, workspace, member, role_types)">
     <tr>
-        <td class="text-right">${member.id}</td>
-        <td ><a href="${tg.url('/admin/users/{}'.format(member.id))}">${member.name}</a></td>
+        <td>${member.id}</td>
+        <td><a href="${tg.url('/admin/users/{}'.format(member.id))}">${member.name}</a></td>
         <td>${BUTTON.SECURED_ROLE_SELECTOR(fake_api.current_user, result.workspace, member, fake_api.role_types)}</td>
         <%
             user_is_himself = current_user.id == member.id

tracim/tracim/templates/workspace/getone.mak

@@ -37,8 +37,8 @@
 ##
 ############################################################################
 
-<div class="row t-page-header-row">
-    <div class="col-sm-7 col-sm-offset-3 main">
+<div class="t-page-header-row">
+    <div class="main">
         <h1 class="page-header t-less-visible-border">
             <i class="fa fa-fw fa-lg fa-bank t-less-visible"></i>
             ${result.workspace.label}
@@ -53,90 +53,80 @@
 
 
 
-<div class="row">
-    <div class="col-sm-7 col-md-offset-3">
-        ${TITLE.H3(_('Detail'), 'fa-align-justify', 'workspace-members')}
-        % if result.workspace.description:
-            <p>${result.workspace.description}</p>
-        % else:
-            <p class="t-less-visible">${_('No description available')}</p>
-        % endif
+<div class="workspace__detail__wrapper">
+    ${TITLE.H3(_('Detail'), 'fa-align-justify', 'workspace-members')}
+    % if result.workspace.description:
+        <p>${result.workspace.description}</p>
+    % else:
+        <p class="t-less-visible">${_('No description available')}</p>
+    % endif
 
-        <% member_nb = len(result.workspace.members) %>
-        <% viewable_members = h.get_viewable_members_for_role(fake_api.current_user_workspace_role, result.workspace.members) %>
-        <% viewable_member_nb = len(viewable_members) %>
-        % if member_nb<=0:
-            ${P.EMPTY_CONTENT(_('There are no members in this workspace'))}
-        % else:
-            <p>
-                % if member_nb == 1:
-                    ${_('This workspace has {a_open}one member{a_close}').format(a_open='<a data-toggle="collapse" href="#memberList" aria-expanded="false" aria-controls="memberList">', a_close='</a>')|n}
-                % else:
-                    ${_('This workspace has {a_open}{member_nb} members{a_close}').format(a_open='<a data-toggle="collapse" href="#memberList" aria-expanded="false" aria-controls="memberList">', member_nb=member_nb, a_close='</a>')|n}
-                    % if viewable_member_nb != member_nb:
-                        <span id="members-whose" style="display: none;">${ _('whose') }:</span>
-                    % endif
+    <% member_nb = len(result.workspace.members) %>
+    <% viewable_members = h.get_viewable_members_for_role(fake_api.current_user_workspace_role, result.workspace.members) %>
+    <% viewable_member_nb = len(viewable_members) %>
+    % if member_nb<=0:
+        ${P.EMPTY_CONTENT(_('There are no members in this workspace'))}
+    % else:
+        <p>
+            % if member_nb == 1:
+                ${_('This workspace has {a_open}one member{a_close}').format(a_open='<a data-toggle="collapse" href="#memberList" aria-expanded="false" aria-controls="memberList">', a_close='</a>')|n}
+            % else:
+                ${_('This workspace has {a_open}{member_nb} members{a_close}').format(a_open='<a data-toggle="collapse" href="#memberList" aria-expanded="false" aria-controls="memberList">', member_nb=member_nb, a_close='</a>')|n}
+                % if viewable_member_nb != member_nb:
+                    <span id="members-whose" style="display: none;">${ _('whose') }:</span>
                 % endif
-            </p>
-            <div class="collapse" id="memberList">
-                <table class="table">
-                    % for member in viewable_members:
-                        <tr>
-                            <td><strong>${member.name}</strong></td>
-                            <td>
-                                ${TIM.ICO_FA_BADGED('fa fa-fw fa-flag', member.role_description, member.style)}
-                                ${member.role_description}
-                            </td>
-                        </tr>
-                    % endfor
-                </table>
-            </div>
-            <script>
-                $(document).ready(function(){
-                    $('#memberList').on('show.bs.collapse', function() {
-                        $('#members-whose').show();
-                    });
-                    $('#memberList').on('hide.bs.collapse', function() {
-                        $('#members-whose').hide();
-                    });
+            % endif
+        </p>
+        <div class="collapse" id="memberList">
+            <table class="table">
+                % for member in viewable_members:
+                    <tr>
+                        <td><strong>${member.name}</strong></td>
+                        <td>
+                            ${TIM.ICO_FA_BADGED('fa fa-fw fa-flag', member.role_description, member.style)}
+                            ${member.role_description}
+                        </td>
+                    </tr>
+                % endfor
+            </table>
+        </div>
+        <script>
+            $(document).ready(function(){
+                $('#memberList').on('show.bs.collapse', function() {
+                    $('#members-whose').show();
                 });
-            </script>
-        % endif
-
-        % if result.workspace.calendar_enabled:
-            <p>
-                ${_('This workspace has {a_open}an associated calendar{a_close}').format(a_open='<a data-toggle="collapse" href="#calendarConfig" aria-expanded="false" aria-controls="calendarConfig">', a_close='</a>')|n}
-            </p>
-            <div class="collapse" id="calendarConfig">
-                <p>${_('You can access the calendar using your own software: Outlook, Thunderbird, etc.')}</p>
-                <p>${_('The url to setup is the following one:')}</p>
-                <p class="form-control">${result.workspace.calendar_url}</p>
-            </div>
-        % endif
-
-            <p>
-                ${_('This workspace is {a_open}accessible with webdav{a_close}').format(a_open='<a data-toggle="collapse" href="#webdavConfig" aria-expanded="false" aria-controls="webdavConfig">', a_close='</a>')|n}
-            </p>
-            <div class="collapse" id="webdavConfig">
-                <p>${_('Adress to connect to webdav with:')}</p>
-                <p>Linux : </p>
-                <p class="form-control">dav://${webdav_url}</p>
-                <p>Windows : </p>
-                <p class="form-control">http://${webdav_url}</p>
-            </div>
+                $('#memberList').on('hide.bs.collapse', function() {
+                    $('#members-whose').hide();
+                });
+            });
+        </script>
+    % endif
 
-    </div>
-</div>
+    % if result.workspace.calendar_enabled:
+        <p>
+            ${_('This workspace has {a_open}an associated calendar{a_close}').format(a_open='<a data-toggle="collapse" href="#calendarConfig" aria-expanded="false" aria-controls="calendarConfig">', a_close='</a>')|n}
+        </p>
+        <div class="collapse" id="calendarConfig">
+            <p>${_('You can access the calendar using your own software: Outlook, Thunderbird, etc.')}</p>
+            <p>${_('The url to setup is the following one:')}</p>
+            <p class="form-control">${result.workspace.calendar_url}</p>
+        </div>
+    % endif
 
-<div class="row">
-    <div class="col-sm-7 col-sm-offset-3">
-        <div class="t-half-spacer-above t-less-visible">
+        <p>
+            ${_('This workspace is {a_open}accessible with webdav{a_close}').format(a_open='<a data-toggle="collapse" href="#webdavConfig" aria-expanded="false" aria-controls="webdavConfig">', a_close='</a>')|n}
+        </p>
+        <div class="collapse" id="webdavConfig">
+            <p>${_('Adress to connect to webdav with:')}</p>
+            <p>Linux : </p>
+            <p class="form-control">dav://${webdav_url}</p>
+            <p>Windows : </p>
+            <p class="form-control">http://${webdav_url}</p>
         </div>
-    </div>
-</div>
 
-<div class="row">
-    <div class="col-sm-7 col-sm-offset-3">
+    <div class="t-half-spacer-above t-less-visible"></div>
+
+    <div class="">
         <div class="t-half-spacer-above">
             <% user_role = h.user_role(fake_api.current_user, result.workspace) %>
 
@@ -160,17 +150,17 @@
                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
                             % else:
                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT('', _('You are not allowed to create content'), '', 't-less-visible fa fa-ban')}</li>
-## Show new content entries in the menu is currently not available at root of a workspace
-## TODO - D.A. - 2015-08-20 - Allow to put content at root (and show related entry in the menu
-##                             % if user_role == 2:
-##                                 ## Only show 'new folder' to content managers
-##                                 <%
-##                                     new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
-##                                     modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
-##                                     icon_classes = content_type.icon+' '+content_type.color
-##                                 %>
-##                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
-##                             % endif
+    ## Show new content entries in the menu is currently not available at root of a workspace
+    ## TODO - D.A. - 2015-08-20 - Allow to put content at root (and show related entry in the menu
+    ##                             % if user_role == 2:
+    ##                                 ## Only show 'new folder' to content managers
+    ##                                 <%
+    ##                                     new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
+    ##                                     modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
+    ##                                     icon_classes = content_type.icon+' '+content_type.color
+    ##                                 %>
+    ##                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
+    ##                             % endif
                             % endif
                         % endfor
                     </ul>
@@ -218,24 +208,24 @@
                 </table>
             % endif
 
-##             % if h.user_role(fake_api.current_user, result.workspace)<=2: # User must be a content manager to be allowed to create folders
-##                 ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.workspace, 'sub-folders', _('Folders'))}
-##             % else:
-##                 ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.workspace, 'sub-folders', _('Folders'), 'folder-new', _('Add a folder...'))}
-##                 {FORMS.NEW_FOLDER_FORM('folder-new', result.workspace.id)}
-##             % endif
-##
-##             <p>
-##                 ${WIDGETS.FOLDER_LIST('subfolder-list', result.workspace.id, fake_api.current_workspace_folders)}
-##             </p>
-##             % if len(fake_api.current_workspace_folders)<=0 and fake_api.current_user:
-##                 % if h.user_role(fake_api.current_user, result.workspace)>2: # User must be a content manager to be allowed to create folders
-##                     <p>
-##                         ${_('You need folders to organize your content.')}
-##                         <a class="btn btn-small btn-primary" data-toggle="collapse" data-target="#folder-new"><i class="fa fa-check"></i> <b>${_('Create a folder now')}</b></a>
-##                     </p>
-##                 % endif
-##             % endif
+    ##             % if h.user_role(fake_api.current_user, result.workspace)<=2: # User must be a content manager to be allowed to create folders
+    ##                 ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.workspace, 'sub-folders', _('Folders'))}
+    ##             % else:
+    ##                 ${WIDGETS.SECURED_SECTION_TITLE(fake_api.current_user, result.workspace, 'sub-folders', _('Folders'), 'folder-new', _('Add a folder...'))}
+    ##                 {FORMS.NEW_FOLDER_FORM('folder-new', result.workspace.id)}
+    ##             % endif
+    ##
+    ##             <p>
+    ##                 ${WIDGETS.FOLDER_LIST('subfolder-list', result.workspace.id, fake_api.current_workspace_folders)}
+    ##             </p>
+    ##             % if len(fake_api.current_workspace_folders)<=0 and fake_api.current_user:
+    ##                 % if h.user_role(fake_api.current_user, result.workspace)>2: # User must be a content manager to be allowed to create folders
+    ##                     <p>
+    ##                         ${_('You need folders to organize your content.')}
+    ##                         <a class="btn btn-small btn-primary" data-toggle="collapse" data-target="#folder-new"><i class="fa fa-check"></i> <b>${_('Create a folder now')}</b></a>
+    ##                     </p>
+    ##                 % endif
+    ##             % endif
         </div>
     </div>
 </div>