fix: create course button and search bar width

lms/public/css/style.css

@@ -935,11 +935,49 @@ pre {
   background-repeat: no-repeat;
   text-indent: 1.5rem;
   background-position: 1rem 0.7rem;
-  float: right;
+  width: 30%;
-  width: 25%;
   box-shadow: var(--shadow-sm);
 }
 
+.course-search-header {
+    float: right;
+    width: 80%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+@media (max-width: 1250px) {
+    .search {
+        width: 40%;
+    }
+}
+
+@media (max-width: 1000px) {
+    .search {
+        width: 55%;
+    }
+
+    .course-search-header {
+        width: 75%;
+    }
+}
+
+@media (max-width: 650px) {
+    .course-search-header {
+        width: 60%;
+    }
+}
+
+@media (max-width: 550px) {
+    .course-search-header {
+        float: none;
+        width: 100%;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+    }
+}
+
 .section-heading {
   font-size: var(--text-4xl);
 }
@@ -1069,6 +1107,7 @@ pre {
 
 .live-courses .course-home-headings {
   margin-bottom: 1.5rem;
+  width: fit-content;
 }
 
 @media (min-width: 768px) {
@@ -1515,7 +1554,7 @@ li {
 }
 
 .course-image-attachment {
-    margin-top: 1rem;
+    margin-top: 0.25rem;
     background-color: var(--bg-light-gray);
     border-radius: var(--border-radius);
     border: 1px dashed var(--gray-400);

lms/www/batch/learn.html

@@ -180,8 +180,8 @@
 </label>
 
 <div class="mt-4">
-    <a class="btn btn-secondary btn-md" href=""> {{ _("Back to Lesson") }} </a>
+    <button class="btn btn-primary btn-md btn-lesson pull-right ml-2"> {{ _("Save") }} </button>
-    <button class="btn btn-primary btn-md btn-lesson pull-right"> {{ _("Save") }} </button>
+    <button class="btn btn-secondary btn-md pull-right btn-back"> {{ _("Back to Lesson") }} </button>
 
     <div class="attachments-parent">
         <div class="attachment-controls">

lms/www/batch/learn.js

@@ -64,6 +64,10 @@ frappe.ready(() => {
         window.location.href = `${window.location.href}?edit=1`;
     });
 
+    $(".btn-back").click((e) => {
+        window.location.href = window.location.href.split("?")[0];
+    })
+
     $(document).on("click", ".copy-link", (e) => {
         frappe.utils.copy_to_clipboard($(e.currentTarget).data("link"));
         $(".attachments").collapse("hide");

lms/www/courses/course.html

@@ -91,7 +91,7 @@
     </div>
 
     {% if not course.image %}
-    <a class="btn btn-default btn-sm btn-attach mt-4 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
+    <a class="btn btn-default btn-sm btn-attach mt-1 {% if course.image %} hide {% endif %}"> {{ _("Attach Image") }} </a>
     {% endif %}
 {% endif %}
 

lms/www/courses/index.html

@@ -16,15 +16,19 @@
 
     {% else %}
 
-    {% include "lms/templates/search_course/search_course.html" %}
+    <div class="course-search-header">
+        {% include "lms/templates/search_course/search_course.html" %}
+        <a class="btn btn-secondary btn-md ml-2" href="/courses/new-course"> {{ _("Create a Course") }} </a>
+    </div>
+
     <div class="course-list">
       {% set courses = live_courses %}
-      {% set title = _("All Live Courses ({0})").format(courses | length) %}
+      {% set title = _("Live Courses ({0})").format(courses | length) %}
       {% set classes = "live-courses" %}
       {% include "lms/templates/course_list.html" %}
 
       {% set courses = upcoming_courses %}
-      {% set title = _("All Upcoming Courses ({0})").format(courses | length) %}
+      {% set title = _("Upcoming Courses ({0})").format(courses | length) %}
       {% set classes = "upcoming-courses mt-10" %}
       {% include "lms/templates/course_list.html" %}
     </div>