fix saving logos and small layout in certificate settings

Author: brunosmartin

core/static/js/certificate/controllers.js

@@ -52,18 +52,14 @@
 
             $scope.saveTemplate = function () {
                 $scope.ct.$update({'course' : $scope.course_id}, function(updated){
+                    saveImageData();
                     $scope.alert.success('Opções salvas com sucesso!');
+
                 })
             }
 
             $scope.images = {};
 
-            $scope.saveLogo = function() {
-                if(!$scope.images.cert_logo && !$scope.images.base_logo) return;
-                if ($scope.course_id) saveImageData();
-//                $scope.alert.success('Imagem salva com sucesso!');
-            };
-
             var saveImageData = function(){
                 var fu = new FormUpload();
                 if($scope.images.cert_logo){
@@ -75,10 +71,8 @@
                 fu.addField('course', $scope.course_id);
                 // return a new promise that file will be uploaded
 
-                return fu.sendTo('/api/certificate_template_images/' + $scope.course_id)
-                    .then(function(){
-                        $scope.alert.success('Imagem salva com sucesso!');
-                    });
+                return fu.sendTo('/api/certificate_template_images/' + $scope.course_id);
+
             }
 
         }

themes/default/static/css/less/pages/certificate.less

@@ -54,6 +54,8 @@
     .coordinator-name{
       padding-bottom: 0;
       margin-bottom: 0;
+      width: 200px;
+      margin: 0 auto;
     }
     .course-coordinator{
       border-top: 2px solid #39aba7;
@@ -121,3 +123,9 @@
       position: relative;
   }
 }
+
+.credits-receipt{
+  text-align: left;
+  font-size: 12px;
+  line-height: 1;
+}

themes/default/templates/_certificate-certificate.html

@@ -1,26 +1,22 @@
 <div class="container">
     <div class="certificate-container">
         <div class="institute-logo">
-            <img alt="Logo Instituto" src="">
+            <img alt="Logo Instituto" src="{{ cert_template.cert_logo_url }}>
         </div>
         <div class="text-center">
-            <!-- TODO colocar os dados corretos da instituição-->
-            <p><strong>Nome da Instituição</strong> confere a</p>
+            <p><strong>cert_template.organization_name</strong></p>
+            <p>confere a</p>
             <h2 class="top">{{ object.course_student.user.get_full_name }}</h2>
             <p>o comprovante de conclusão do curso online</p>
-            <h1>{{ object.course.name }}</h1>
+            <h1>{{ object.course_student.course.name }}</h1>
             <p>que possui carga horária de <span>40 horas</span>.</p>
         </div>
         <div class="row">
-            <!-- TODO fazer um for de instrutores -->
             <div class="col-xs-3">
-                <!-- TODO colocar a assinatura do instrutor -->
-                <img alt="Assinatura" src="" />
                 <hr />
-                <!-- TODO colocar o nome correto do instrutor e da instituição -->
                 <small>
-                    Nome do instrutor <br/>
-                    Nome da Instituição
+                    {{ cert_template.name }} <br/>
+                    {{ cert_template.role }}
                 </small>
             </div>
         </div>

themes/default/templates/_certificate-receipt.html

@@ -10,10 +10,9 @@
       <p class="course-coordinator">{{ cert_template.role }}</p>
     </section>
     <footer>
-      <div class="pull-left">Realizado em: {{ site.domain }}</div>
-      <br>
-      <div class="pull-left">
-          Código de validação: <a href="{% url 'certificate' object.link_hash %}">{{ object.link_hash }}</a>
+      <div class="pull-left credits-receipt">
+        <p>Realizado em: {{ site.domain }}</p>
+        <p>URL de validação: <a href="{% url 'certificate' object.link_hash %}">{{ object.link_hash }}</a></p>
       </div>
       <div class="pull-right logo">
         {% if cert_template.cert_logo_url %}

themes/default/templates/administration/certificate-settings.html

@@ -77,13 +77,11 @@ <h1>{% trans "Certificate Settings" %}</h1>
                       </div>
                       <div class="institute-logo">
                         {% verbatim %}
-                        <img alt="Logo Instituto" preview-image ng-model="images.logo" ng-src="/media/{{ ct.logo_url }}" class="img-responsive" />
+                        <img id="cert-logo" alt="Logo Instituto" preview-image ng-model="images.cert_logo" ng-src="{{ ct.cert_logo_url }}" class="img-responsive" />
                         {% endverbatim %}
-                        <file ng-model="images.logo" name="logo"></file>
-                        <button class="btn btn-primary" ng-click="saveLogo()">
-                            <i class="fa fa-floppy-o"></i> {% trans 'Save image' %}
-                        </button>
+                        <file ng-model="images.cert_logo" name="logo"></file>
                       </div>
+
                       <div class="pull-left">Realizado em: {{ site.domain }}</div>
                     </footer>
                 </div>
@@ -107,19 +105,15 @@ <h1>{% trans "Certificate Settings" %}</h1>
                     </p>
                   </section>
                   <footer>
-                    <div class="pull-left">Realizado em: {{ site.domain }}</div>
-                    <br>
-                    <div class="pull-left">
-                        URL de validação: <a href="">{{ site.domain }}/(código)</a>
+                    <div class="pull-left credits-receipt">
+                      <p>Realizado em: {{ site.domain }}</p>
+                      <p>URL de validação: <a href="">{{ site.domain }}/(código)</a></p>
                     </div>
                     <div class="pull-right logo">
                       {% verbatim %}
-                        <img alt="Logo Instituto" preview-image ng-model="images.logo" ng-src="/media/{{ ct.logo_url }}" class="img-responsive" />
+                        <img id="base-logo" alt="Logo Instituto" preview-image ng-model="images.base_logo" ng-src="{{ ct.base_logo_url }}" class="img-responsive" />
                       {% endverbatim %}
-                      <file ng-model="images.logo" name="logo"></file>
-                      <button class="btn btn-primary" ng-click="saveLogo()">
-                          <i class="fa fa-floppy-o"></i> {% trans 'Save image' %}
-                      </button>
+                      <file ng-model="images.base_logo" name="logo"></file>
                     </div>
                   </footer>
                 </div>

themes/ifs-colors/templates/administration/certificate-settings.html

@@ -37,9 +37,6 @@
                      class="img-responsive">
                 {% endverbatim %}
                 <file ng-model="images.cert_logo" name="cert_logo"></file>
-                <button class="btn btn-primary" ng-click="saveLogo()">
-                    <i class="fa fa-floppy-o"></i> {% trans 'Save image' %}
-                </button>
             </div>
             <div class="text-center certificate-info">
                 <p>