refactored solution toggling (#146)

devilry · Feb 23, 2024 · 915a86f · 915a86f
1 parent 9b19c9f
commit 915a86f
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 24 deletions.
diff --git a/trix/trix_student/static/trix_student/dist/css/styles.css b/trix/trix_student/static/trix_student/dist/css/styles.css
@@ -10417,6 +10417,9 @@ fieldset[disabled] .btn-trix-admin.active {
   margin-top: 5px;
   border: 1px solid #eee;
 }
+.trix-assignment .trix-assignmentsolution .trix-solution-invisible {
+  display: none;
+}
 .trix-assignment-hidden {
   background: repeating-linear-gradient(-45deg, #ccc, #ccc 1px, transparent 1px, transparent 60px);
 }

diff --git a/trix/trix_student/static/trix_student/dist/js/trix_student.js b/trix/trix_student/static/trix_student/dist/js/trix_student.js
@@ -64,11 +64,6 @@
         return $window.location.href = currentUrl.toString();
       };
     }
-  ]).controller('SolutionCtrl', [
-    '$scope',
-    function($scope) {
-      return $scope.isVisible = false;
-    }
   ]).controller('MenuCtrl', [
     '$scope',
     function($scope) {

diff --git a/trix/trix_student/static/trix_student/dist/js/trix_student.min.js b/trix/trix_student/static/trix_student/dist/js/trix_student.min.js
diff --git a/trix/trix_student/static/trix_student/dist/vendor/js/_hyperscript-v0.9.12.min.js b/trix/trix_student/static/trix_student/dist/vendor/js/_hyperscript-v0.9.12.min.js
diff --git a/trix/trix_student/static/trix_student/src/app/assignments/controllers.coffee b/trix/trix_student/static/trix_student/src/app/assignments/controllers.coffee
@@ -35,12 +35,6 @@ angular.module('trixStudent.assignments.controllers', ['ngRoute'])
       $window.location.href = currentUrl.toString()
 ])
 
-.controller('SolutionCtrl', [
-  '$scope',
-  ($scope) ->
-    $scope.isVisible = false
-])
-
 .controller('MenuCtrl', [
   '$scope',
   ($scope) ->

diff --git a/trix/trix_student/static/trix_student/src/less/assignments.less b/trix/trix_student/static/trix_student/src/less/assignments.less
@@ -74,6 +74,8 @@
             margin-top: 5px;
             border: 1px solid #eee;
         }
+        .trix-solution-invisible {
+            display: none;
     }
 }
 

diff --git a/trix/trix_student/templates/trix_student/base.django.html b/trix/trix_student/templates/trix_student/base.django.html
@@ -14,14 +14,14 @@
         {% block css %}
             <link href='{% static "trix_student/dist/css/styles.css" %}' rel="stylesheet">
         {% endblock %}
-
         <script src="{% static 'trix_student/dist/vendor/js/jquery.slim.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/angular.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/angular-cookies.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/angular-route.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/ui-bootstrap.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/alert.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/vendor/js/url.min.js' %}" type="text/javascript"></script>
+        <script src="{% static 'trix_student/dist/vendor/js/_hyperscript-v0.9.12.min.js' %}" type="text/javascript"></script>
         <script src="{% static 'trix_student/dist/js/trix_student.min.js' %}" type="text/javascript"></script>
     </head>
     <body>

diff --git a/trix/trix_student/templates/trix_student/include/assignment.django.html b/trix/trix_student/templates/trix_student/include/assignment.django.html
@@ -79,18 +79,14 @@ <h2 id="assignment-{{ assignment.id }}">
         </div>
     {% endif %}
     {% if assignment.solution %}
-        <section class="trix-assignmentsolution" ng-cloak
-                ng-controller="SolutionCtrl">
-            <button ng-click="isVisible = !isVisible"
-                    class="btn btn-link trix-assignmentsolutionexpander"
-                    ng-class="{'active': isVisible}">
+        <section class="trix-assignmentsolution">
+            <button class="btn btn-link trix-assignmentsolutionexpander"
+                _="on click toggle .trix-solution-invisible on the next .trix-markdownarticle
+                      then toggle between .fa-angle-right and .fa-angle-down on .fa in me">
                 {% trans "See solution" %}
-                <span class="fa trix-no-print" ng-class="{
-                    'fa-angle-right': !isVisible,
-                    'fa-angle-down': isVisible
-                }"></span>
+                <span class="fa trix-no-print fa-angle-right"></span>
             </button>
-            <section class="trix-markdownarticle" ng-class="{'collapse': !isVisible}">
+            <section class="trix-markdownarticle trix-solution-invisible">
                 {% trix_assignment_markdown assignment.solution %}
             </section>
         </section>