Patch M

gistfile1.diff

diff --git a/pontoon/teams/static/css/team.css b/pontoon/teams/static/css/team.css
index b7ece35..456ab36 100644
--- a/pontoon/teams/static/css/team.css
+++ b/pontoon/teams/static/css/team.css
@@ -123,25 +123,37 @@
   color: #7BC876;
 }
 
-.info {
-  text-align: center;
+#info-wrapper .edit-info {
+  float: right;
 }
 
-.edit-info {
-  float: right;
+#info-wrapper .edit-info .fa {
+  padding-right: 5px;
 }
 
-.editing-info {
+#info-wrapper .read-write-info textarea {
+  background: #333941;
+  border: 1px solid #4D5967;
+  border-radius: 3px;
+  color: #FFFFFF;
+  font-weight: 300;
+  margin-bottom: 20px;
+  padding: 5px;
   width: 100%;
-  margin: 20px 0;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.controls {
+#info-wrapper .controls {
+  margin: 0;
   text-align: right;
 }
 
-.controls .cancel {
+#info-wrapper .controls .cancel {
+  color: #7BC876;
   margin: 9px;
+  text-transform: uppercase;
 }
 
 #permissions-form .selector-wrapper {
diff --git a/pontoon/teams/static/js/info.js b/pontoon/teams/static/js/info.js
index 716a126..c778454 100644
--- a/pontoon/teams/static/js/info.js
+++ b/pontoon/teams/static/js/info.js
@@ -6,10 +6,10 @@ $(function() {
     e.preventDefault();
     var infobox = $(".info");
     var content = infobox.html();
-    var text_area = $(".editable-info textarea").val($.trim(content));
+    var text_area = $(".read-write-info textarea").val($.trim(content));
     $(".edit-info").hide();
     $(".read-only-info").hide();
-    $(".editable-info").toggleClass("hidden");
+    $(".read-write-info").toggleClass("hidden");
     text_area.focus();
     return false;
   });
@@ -17,11 +17,11 @@ $(function() {
     e.preventDefault();
     $(".edit-info").show();
     $(".read-only-info").show();
-    $(".editable-info").toggleClass("hidden");
+    $(".read-write-info").toggleClass("hidden");
     return false;
   });
   container.on('click', '.save', function(e) {
-    var text_area = $(".editable-info textarea");
+    var text_area = $(".read-write-info textarea");
     var content = text_area.val().replace(/(?:\r\n|\r|\n)/g, '<br>\n');
     $.ajax({
       url: text_area.parent().data('url'),
@@ -32,13 +32,13 @@ $(function() {
       },
       success: function(data) {
         $(".info").html(data) ;
-        $(".editable-info").toggleClass("hidden");
+        $(".read-write-info").toggleClass("hidden");
         $(".edit-info").show();
         $(".read-only-info").show();
         Pontoon.endLoader('Team info saved!');
       },
       error: function(request) {
-        $(".editable-info textarea").val(request.responseText);
+        $(".read-write-info textarea").val(request.responseText);
         Pontoon.endLoader(request.responseText, 'error');
       }
     })
diff --git a/pontoon/teams/templates/teams/includes/info.html b/pontoon/teams/templates/teams/includes/info.html
index b4673e4..c888215 100644
--- a/pontoon/teams/templates/teams/includes/info.html
+++ b/pontoon/teams/templates/teams/includes/info.html
@@ -1,25 +1,29 @@
-{% if request.user.has_perm('base.can_manage_locale', locale) %}
-<a class="edit-info" href=""><i class="fa fa-edit"></i></a>
-{% endif %}
-<div class="read-only-info">
-  <div class="info">
-    {% if locale.team_description %}
-      {{ locale.team_description|safe }}
-    {% else %}
-      <p>No team info available.</p>
-    {% endif %}
+<div id="info-wrapper">
+  {% if request.user.has_perm('base.can_manage_locale', locale) %}
+  <div class="controls">
+    <a class="edit-info button" href="#"><span class="fa fa-pencil"></span>Edit</a>
   </div>
-</div>
-{% if request.user.has_perm('base.can_manage_locale', locale) %}
-<div class="editable-info hidden"
-     data-url="{{ url('pontoon.teams.ajax.update-info', locale.code) }}"
-     {% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}>
+  {% endif %}
 
-  <textarea class="editing-info" rows="20"/>
-  <div class="controls clearfix">
-    <a href="" class="cancel">Cancel</a>
-    <button class="button active save">Save</button>
+  <div class="read-only-info">
+  {% if locale.team_description %}
+    <div class="info">{{ locale.team_description|safe }}</div>
+  {% else %}
+    <p class="no-results">No team info available.</p>
+  {% endif %}
   </div>
 
+  {% if request.user.has_perm('base.can_manage_locale', locale) %}
+  <div class="read-write-info hidden"
+       data-url="{{ url('pontoon.teams.ajax.update-info', locale.code) }}"
+       {% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}>
+
+    <textarea rows="10" />
+
+    <div class="controls clearfix">
+      <a href="#" class="cancel">Cancel</a>
+      <button class="button active save">Save</button>
+    </div>
+  </div>
+  {% endif %}
 </div>
-{% endif %}