i18n and rtl fixes

TNL-3125

common/static/common/templates/components/system-feedback.underscore

@@ -15,8 +15,8 @@
     <% } %>
 
     <div class="copy">
-      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%= title %></h2>
-      <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%= message %></p><% } %>
+      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%- title %></h2>
+      <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%- message %></p><% } %>
     </div>
 
     <% if(obj.actions) { %>
@@ -24,13 +24,13 @@
       <ul>
         <% if(actions.primary) { %>
         <li class="nav-item">
-          <button class="action-primary <%= actions.primary.class %>"><%= actions.primary.text %></button>
+          <button class="action-primary <%= actions.primary.class %>"><%- actions.primary.text %></button>
         </li>
         <% } %>
         <% if(actions.secondary) {
              _.each(actions.secondary, function(secondary) { %>
         <li class="nav-item">
-          <button class="action-secondary <%= secondary.class %>"><%= secondary.text %></button>
+          <button class="action-secondary <%= secondary.class %>"><%- secondary.text %></button>
         </li>
         <%   });
            } %>

lms/djangoapps/teams/static/teams/js/views/edit_team.js

@@ -35,11 +35,11 @@
                     if (this.action === 'create') {
                         this.teamModel = new TeamModel({});
                         this.teamModel.url = this.teamsUrl;
-                        this.primaryButtonTitle = 'Create';
+                        this.primaryButtonTitle = gettext("Create");
                     } else if(this.action === 'edit' ) {
                         this.teamModel = options.model;
                         this.teamModel.url = this.teamsDetailUrl.replace('team_id', options.model.get('id')) + '?expand=user';
-                        this.primaryButtonTitle = 'Update';
+                        this.primaryButtonTitle = gettext("Update");
                     }
 
                     this.teamNameField = new FieldViews.TextFieldView({

lms/djangoapps/teams/static/teams/templates/edit-team.underscore

@@ -27,6 +27,7 @@
 <div class="team-edit-fields">
     <div class="team-required-fields">
     </div>
+    <div class="vertical-line"></div>
     <div class="team-optional-fields">
         <fieldset>
             <div class="u-field u-field-optional_description">
@@ -43,25 +44,20 @@
 
 <div class="create-team form-actions">
     <button class="action action-primary">
-        <%=
-            interpolate_text(
-                _.escape(gettext("{primaryButtonTitle} {span_start}a team{span_end}")),
-                {
-                    'primaryButtonTitle': primaryButtonTitle, 'span_start': '<span class="sr">', 'span_end': '</span>'
-                }
-            )
-        %>
+        <span aria-hidden="true"><%- primaryButtonTitle %></span>
+        <% if (action === 'create') { %>
+            <span class="sr"><%- gettext("Create team.") %></span>
+        <% } else if (action === 'edit') { %>
+            <span class="sr"><%- gettext("Update team.") %></span>
+        <% } %>
     </button>
     <button class="action action-cancel">
-        <%=
-            interpolate_text(
-                _.escape(gettext("Cancel {span_start} {action} team {span_end}")),
-                {
-                    'span_start': '<span class="sr">', 'span_end': '</span>',
-                    'action': action === 'create' ? 'creating' : 'updating'
-                }
-            )
-        %>
+        <span aria-hidden="true"><%- gettext("Cancel") %></span>
+        <% if (action === 'create') { %>
+            <span class="sr"><%- gettext("Cancel team creating.") %></span>
+        <% } else if (action === 'edit') { %>
+            <span class="sr"><%- gettext("Cancel team updating.") %></span>
+        <% } %>
     </button>
 </div>
 </form>

lms/djangoapps/teams/static/teams/templates/team-profile.underscore

@@ -5,7 +5,7 @@
                 data-user-create-comment="<%= !readOnly %>"
                 data-user-create-subcomment="<%= !readOnly %>">
             <% if ( !readOnly) { %>
-                <button type="button" class="btn new-post-btn"><i class="icon fa fa-edit new-post-icon" aria-hidden="true"></i><%= gettext("New Post") %></button>
+                <button type="button" class="btn new-post-btn"><i class="icon fa fa-edit new-post-icon" aria-hidden="true"></i><%- gettext("New Post") %></button>
             <% } %>
         </div>
     </div>

lms/djangoapps/teams/views.py

@@ -120,7 +120,7 @@ class TeamsDashboardView(View):
             "teams_detail_url": reverse('teams_detail', args=['team_id']),
             "team_memberships_url": reverse('team_membership_list', request=request),
             "team_membership_detail_url": reverse('team_membership_detail', args=['team_id', user.username]),
-            "languages": settings.ALL_LANGUAGES,
+            "languages": [[lang[0], _(lang[1])] for lang in settings.ALL_LANGUAGES],  # pylint: disable=translation-of-non-string
             "countries": list(countries),
             "disable_courseware_js": True,
             "teams_base_url": reverse('teams_dashboard', request=request, kwargs={'course_id': course_id}),

lms/static/sass/views/_teams.scss

@@ -579,19 +579,24 @@
   .teams-main {
 
     .team-edit-fields {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
       @include clearfix();
 
     .team-required-fields {
       @include float(left);
       width: 55%;
-      border-right: 2px solid $gray-l4;;
+
+      .u-field {
+        @include margin-right($baseline*2);
+      }
 
       .u-field.u-field-name {
         padding-bottom: $baseline;
 
         .u-field-value {
-          display: block;
-          width: 90%;
+          width: 100%;
 
           input {
             border-radius: ($baseline/5);
@@ -609,36 +614,38 @@
       .u-field.u-field-description {
 
         .u-field-value {
-          display: block;
           width: 100%;
 
           textarea {
+            width: 100%;
             height: ($baseline*5);
-            width: 90%;
             border-radius: ($baseline/5)
           }
         }
 
-        .u-field-message {
-          display: block;
-          @extend %t-copy-sub1;
-          @include padding-left(0);
-          margin-top: ($baseline/4);
-          color: $gray-l1;
-          width: 90%;
+        .u-field-footer {
+
+          .u-field-message {
+            display: block;
+            @extend %t-copy-sub1;
+            @include padding-left(0);
+            margin-top: ($baseline/4);
+            color: $gray-l1;
+            width: 100%;
+          }
         }
       }
 
       .u-field-title {
         padding-bottom: ($baseline/4);
         color: $base-font-color;
-        width: 40%;
+        width: 100%;
       }
     }
 
     .team-optional-fields {
       @include float(left);
-      @include margin-left($baseline);
+      @include margin-left($baseline*2);
       width: 40%;
 
       .u-field.u-field-optional_description {
@@ -648,7 +655,6 @@
           color: $base-font-color;
           font-weight: $font-semibold;
           margin-bottom: ($baseline/5);
-          width: 100%;
         }
 
         .u-field-value {
@@ -664,19 +670,16 @@
         display: none;
       }
 
-      .u-field-value {
-        width: 90%;
-      }
-
       .u-field-title {
-        display: block;
         color: $base-font-color;
-        width: 35%;
       }
 
       .u-field-message {
         @include padding-left(0);
-        width: 95%;
+      }
+
+      .u-field-title, .u-field-value, .u-field-message {
+        width: 100%;
       }
     }
 
@@ -702,6 +705,14 @@
   }
 }
 
+// vertical line between required and optional fields
+.vertical-line:after {
+    height: 100%;
+    border-left: 2px solid $gray-l4;
+    content: "";
+    position: absolute;
+}
+
 .form-instructions {
   margin: ($baseline/2) 0 $baseline 0;
 }