feat: Modernizing the exercises page (#388)

PythonFreeCourse · Apr 5, 2024 · e775a2b · e775a2b
1 parent 50b8734
commit e775a2b
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 48 deletions.
diff --git a/lms/lmsweb/translations/he/LC_MESSAGES/messages.po b/lms/lmsweb/translations/he/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version:  1.0\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-03-29 21:14+0300\n"
+"POT-Creation-Date: 2024-04-05 05:39+0300\n"
 "PO-Revision-Date: 2024-03-23 18:59+0300\n"
 "Last-Translator: Yam Mesicka\n"
 "Language: he\n"
@@ -184,19 +184,23 @@ msgstr "אימות סיסמה"
 msgid "Exercises"
 msgstr "תרגילים"
 
-#: lms/templates/exercises.html:26
+#: lms/templates/exercises.html:13
+msgid "Upload Solutions"
+msgstr "העלו פתרונות"
+
+#: lms/templates/exercises.html:32
 msgid "Send"
 msgstr "שלח"
 
-#: lms/templates/exercises.html:28
+#: lms/templates/exercises.html:34
 msgid "View"
 msgstr "הצצה"
 
-#: lms/templates/exercises.html:30
+#: lms/templates/exercises.html:36
 msgid "Check"
 msgstr "לבדיקה"
 
-#: lms/templates/exercises.html:44
+#: lms/templates/exercises.html:50
 msgid "All Exercises"
 msgstr "לכל התרגילים"
 
@@ -489,7 +493,7 @@ msgstr "סיום בדיקה"
 msgid "Automatic Checking"
 msgstr "בדיקות אוטומטיות"
 
-#: lms/templates/view.html:93
+#: lms/templates/view.html:94
 msgid "Test failed"
 msgstr "בדיקה נכשלה"
 
@@ -549,3 +553,4 @@ msgstr ""
 "שלום %(fullname)s. הסיסמה שלך באתר %(site_name)s שונתה.\n"
 "אם לא אתה שינית את הסיסמה, צור קשר עם הנהלת האתר.\n"
 "כתובת המייל שלך לפי רישומינו: %(site_mail)s"
+
diff --git a/lms/static/my.css b/lms/static/my.css
@@ -93,9 +93,15 @@ a {
   margin: 3rem 0;
 }
 
+#exercises-page-container {
+  display: flex;
+  justify-content: center;
+}
+
 #exercises-page {
   display: flex;
   flex-direction: column;
+  width: 720px;
 }
 
 #exercises-header {
@@ -135,6 +141,30 @@ a {
   padding: 0.75rem;
   text-align: center;
   border-inline: #00000000 8px solid;
+  transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.exercise-status-icon {
+  margin-inline: 0.5rem;
+  align-self: center;
+}
+
+.exercise:hover {
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
+  text-decoration: none;
+}
+
+.exercise-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  transition: all 0.3s ease;
+}
+
+.exercise-link:hover, .exercise-link:focus {
+  text-decoration: none;
+  color: inherit;
+  border-radius: 10px;
 }
 
 .centered {
@@ -162,12 +192,10 @@ a {
   overflow: hidden;
   text-align: center;
   font-size: 1.2rem;
-  margin-right: 1rem;
   color: #495057;
   padding: 0.25rem 0.75rem;
-  border-radius: 15px;
-  min-width: 4rem;
   justify-content: start;
+  min-width: 4rem;
 }
 
 .exercise-name {
@@ -295,6 +323,40 @@ button.our-button-narrow, a.our-button-narrow {
   justify-content: center;
 }
 
+#upload-solutions-button, #upload-solutions-button > a {
+  margin-inline-end: 0;
+}
+
+.our-cta-button {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  font-size: 1rem;
+  justify-content: center;
+  width: auto;
+  padding: 0.6rem 1rem;
+}
+
+.our-cta-button:hover {
+  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.our-cta-button:active {
+  background-color: #269abc;
+  animation: none;
+}
+
+.our-cta-button.active, .our-cta-button:checked {
+  background-color: #1e90ff;
+}
+
+.our-cta-button.active:hover, .our-cta-button:checked:hover {
+  background-color: #187adf;
+}
+
+.our-cta-button > .fa {
+  margin-inline-end: 0.5rem;
+}
+
 #filetree {
   display: flex;
   flex-basis: auto;
@@ -969,7 +1031,7 @@ code .grader-add .fa {
   align-items: center;
   align-self: center;
   display: flex;
-  margin-inline-end: 1rem;
+  margin-inline-end: 2rem;
 }
 
 .fa-book {

diff --git a/lms/templates/exercises.html b/lms/templates/exercises.html
@@ -1,49 +1,54 @@
 {%- extends 'base.html' -%}
 
 {%- block page_content -%}
-<div class="container">
+<div id="exercises-page-container" class="container">
   <div id="exercises-page" class="page {{ direction }}">
     <div id="exercises-header">
       <div id="main-title">
         <h1 id="exercises-head">{{ _('Exercises') }}</h1>
       </div>
+      <div id="upload-solutions-button">
+        <a href="{{ url_for('send_', course_id=current_user.last_course_viewed.id) }}" class="our-button our-cta-button">
+          <i class="fa fa-upload" aria-hidden="true"></i>
+          {{ _('Upload Solutions') }}
+        </a>
+      </div>
     </div>
     <div id="exercises">
       {%- for exercise in exercises %}
-      <div class="exercise" {%- if exercise.grade_color %} style="border-inline-start-color: {{ exercise.grade_color }};" {%- endif -%}>
-        <div class="right-side {{ direction }}-language">
-          <div class="exercise-number me-3">{{ exercise['exercise_number'] }}</div>
-          <div class="exercise-name"><div class="ex-title">{{ exercise['exercise_name'] | e }}</div></div>
-        </div>
-        <div class="left-side">
-          {%- if exercise['notebook'] %}
-          <div class="which-notebook">
-            <i class="fa fa-book" aria-hidden="true"></i>
-            {{ exercise['notebook'] }}
+      {%- if exercise.get('is_checked') is none %}
+        {% set details = {'page': 'send', 'icon': 'upload', 'text': _('Send'), 'css': 'send', 'page_id': exercise['course_id'] ~ '/' ~ exercise['exercise_id']} %}
+      {% elif not exercise.get('is_checked') %}
+        {% set details = {'page': 'view', 'icon': 'eye', 'text': _('View'), 'css': 'view', 'page_id': exercise['solution_id']} %}
+      {% else %}
+        {% set details = {'page': 'view', 'icon': 'check-circle-o', 'text': _('Check'), 'css': 'checked', 'page_id': exercise['solution_id']} %}
+      {% endif -%}
+      <a href="{{ details['page'] }}/{{ details['page_id'] }}" class="exercise-link">
+        <div class="exercise" {%- if exercise.grade_color %} style="border-inline-start-color: 8px solid {{ exercise.grade_color }};" {%- endif -%}>
+          <div class="right-side {{ direction }}-language">
+            <i class="fa fa-{{ details['icon'] }} exercise-status-icon" aria-hidden="true"></i>
+            <div class="exercise-number me-3">{{ exercise['exercise_number'] }}</div>
+            {%- if exercise['notebook'] %}
+            {%- endif %}
+            <div class="exercise-name"><div class="ex-title">{{ exercise['exercise_name'] | e }}</div></div>
+          </div>
+          <div class="left-side">
+            <div class="which-notebook">
+              <i class="fa fa-book" aria-hidden="true"></i>
+              {{ exercise['notebook'] }}
+            </div>
           </div>
-          {%- endif %}
-          {%- if exercise.get('is_checked') is none %}
-            {% set details = {'page': 'send', 'icon': 'upload', 'text': _('Send'), 'css': 'send', 'page_id': exercise['course_id'] ~ '/' ~ exercise['exercise_id']} %}
-          {% elif not exercise.get('is_checked') %}
-            {% set details = {'page': 'view', 'icon': 'eye', 'text': _('View'), 'css': 'view', 'page_id': exercise['solution_id']} %}
-          {% else %}
-            {% set details = {'page': 'view', 'icon': 'check-circle-o', 'text': _('Check'), 'css': 'checked', 'page_id': exercise['solution_id']} %}
-          {% endif -%}
-          {%- if not exercise.get('is_archived') or exercise.get('is_checked') is not none %}
-          <a class="our-button go-{{ details['css'] }}" href="{{ details['page'] }}/{{ details['page_id'] }}">
-            {{ details['text'] | e }}
-            <i class="fa fa-{{ details['icon'] }}" aria-hidden="true"></i>
-          </a>
-          {% endif -%}
         </div>
-      </div>
+      </a>
       {% endfor -%}
       {%- if not fetch_archived %}
-      <div class="exercise centered">
-        <div id="show-all-exercises-action" class="right-side">
-          <a href="?archived=1">{{ _('All Exercises') }}</a>
+      <a href="?archived=1">
+        <div class="exercise centered">
+          <div id="show-all-exercises-action" class="right-side">
+            {{ _('All Exercises') }}
+          </div>
         </div>
-      </div>
+      </a>
       {% endif -%}
     </div>
   </div>

diff --git a/lms/templates/navbar.html b/lms/templates/navbar.html
@@ -58,14 +58,6 @@
             {% endfor -%}
           </ul>
         </li>
-        {%- if current_user.last_course_viewed %}
-          <li class="nav-item">
-            <a href="{{ url_for('send_', course_id=current_user.last_course_viewed.id) }}" class="nav-link">
-              <i class="fa fa-upload" aria-hidden="true"></i>
-              {{ _('Upload Exercises') }}
-            </a>
-          </li>
-        {% endif -%}
         {%- if not exercises or fetch_archived %}
         <li class="nav-item">
           <a href="/exercises" class="nav-link">