Merge pull request #55 from edly-io/tanveer/indigo

indigo v2.1
overhangio · Jan 27, 2024 · 188cb63 · 188cb63
2 parents 0bcc35d + dc6f500
commit 188cb63
Show file tree

Hide file tree

Showing 17 changed files with 284 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,11 @@ instructions, because git commits are used to generate release notes:
 
 <!-- scriv-insert-here -->
 
+<a id='changelog-17.2.0'></a>
+## v17.2.0 (2024-01-27)
+
+- 💥[Bugfix] Fixes: Minor Bug fixes with styling updates for discussion and learner-dashboard MFEs (by @hinakhadim and @TanveerAhmed)
+
 <a id='changelog-17.1.0'></a>
 ## v17.1.0 (2023-12-13)
 

diff --git a/tutorindigo/__about__.py b/tutorindigo/__about__.py
@@ -1 +1 @@
-__version__ = "17.1.0"
+__version__ = "17.2.0"
diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py
@@ -117,6 +117,23 @@ def _override_openedx_docker_image(
             "mfe-dockerfile-post-npm-install-authn",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0'
+""",
+        ),
+        # Tutor-Indigo v2.1 targets the styling updations in discussions and learner-dashboard MFE
+        # brand-openedx is related to styling updates while others are for header and footer updates
+        (
+            "mfe-dockerfile-post-npm-install-discussions",
+            """
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^1.0.0'
+RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^1.0.0'
+""",
+        ),
+        (
+            "mfe-dockerfile-post-npm-install-learner-dashboard",
+            """
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^1.0.0'
+RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^1.0.0'
 """,
         ),
     ]

diff --git a/tutorindigo/templates/indigo/cms/static/images/favicon.ico b/tutorindigo/templates/indigo/cms/static/images/favicon.ico
diff --git a/tutorindigo/templates/indigo/lms/static/images/no_course_image.png b/tutorindigo/templates/indigo/lms/static/images/no_course_image.png
diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_about.scss
@@ -76,8 +76,8 @@
                 border: none;
                 &:after {
                     position: absolute;
-                    left: -15px;
-                    top: -15px;
+                    left: -35px;
+                    top: -25px;
                     width: 100%;
                     height: 100%;
                     content: "";
@@ -104,7 +104,7 @@
             span {
                 display: inline-block;
                 vertical-align: top;
-                padding: 8px 14px;
+                padding: 7px 14px;
                 color: #374151;
                 border-radius: 6px;
                 background: #fff;
@@ -140,8 +140,20 @@
         }
     }
     .about-content {
-        overflow: hidden;
+        &:after {
+            display: block;
+            clear: both;
+            content: "";
+        }
         .details {
+            @include media-breakpoint-up(md) {
+                width: calc(100% - 32% - 35px);
+                margin-right: 57px;
+            }
+            @include media-breakpoint-up(lg) {
+                width: calc(100% - 32% - 57px);
+                margin-right: 57px;
+            }
             .wrap-instructor-info {
                 display: none;
             }
@@ -238,6 +250,16 @@
         background: $primary-light;
         padding: 24px;
         border-radius: 8px;
+        @include media-breakpoint-up(md) {
+            width: 32%;
+        }
+        h2 {
+            color:#111827;
+            font-size: 20px;
+            line-height: 28px;
+            font-weight: 700;
+            margin: 0 0 20px;
+        }
         header {
             padding: 0;
             margin: 0;
@@ -249,6 +271,14 @@
             .social-sharing {
                 height: auto;
                 text-align: left;
+                .sharing-message {
+                    background: white;
+                    border: none;
+                    border-top: 4px solid $primary;
+                    color: #000;
+                    font: 10px/15px $font-family-title;
+                    padding: 10px;
+                }
                 .share {
                     width: auto;
                     height: auto;

diff --git a/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss b/tutorindigo/templates/indigo/lms/static/sass/courseware/_discover.scss
@@ -4,7 +4,7 @@
     .courses-container {
         padding: 25px 0;
         @include media-breakpoint-up(md) {
-            padding: 100px 0;
+            padding: 30px 0;
         }
     }
     .course-holder {
@@ -40,10 +40,15 @@
                     background: #fff;
                     .course-image {
                         .cover-image {
-                            height: auto;
+                            height: 162px;
                             &:before {
                                 display: none;
                             }
+                            img{
+                                object-fit: cover;
+                                object-position: center;
+                                height: 100%;
+                            }
                         }
                     }
                     .course-info {
@@ -120,7 +125,7 @@
 .saerch-bar-discover {
     margin:  0 0 25px;
     @include media-breakpoint-up(md) {
-        margin:  0 0 50px;
+        margin:  0 0 30px;
     }
     &:after {
         display: block;

diff --git a/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss b/tutorindigo/templates/indigo/lms/static/sass/dashbord/_dashbord.scss
@@ -1,5 +1,5 @@
 // Include custom dashborad
-#content.content-wrapper {
+.window-wrap #content.content-wrapper {
     padding: 0 !important;
     margin: 0 !important;
     max-width: 100%;
@@ -60,7 +60,7 @@
     font-size: 14px;
     color: #6B7280;
     @include media-breakpoint-up(md) {
-        margin: 0 0 75px;
+        margin: 0 0 30px;
         font-size: 16px;
         line-height: 20px;
     }

diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss
@@ -53,7 +53,27 @@ header.global-header {
             margin: 0;
             position: relative;
             .toggle-user-dropdown {
-                padding: 9px;
+                padding: 9px 15px;
+                background: $primary-light;
+                color: $primary;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 20px;
+                border-radius: 6px;
+                margin: 12px 0;
+                &:after {
+                    margin: 4px 0 0 4px;
+                    border: 2px solid #15376D;
+                    border-width: 2px 2px 0 0;
+                    transform: rotate(135deg);
+                    content: "";
+                    height: 5px;
+                    position: relative;
+                    top: 2px;
+                    width: 5px;
+                    display: inline-block;
+                    vertical-align: top;
+                }
             }
             .dropdown-user-menu {
                 position: absolute;
@@ -73,7 +93,7 @@ header.global-header {
                     }
                     a {
                         box-sizing: border-box;
-                        padding: 16px;
+                        padding: 10px;
                         font-size: 14px;
                         line-height: 20px;
                         color: $light-drak;
@@ -130,4 +150,10 @@ header.global-header {
     margin: 0 auto;
     padding: 0 15px;
     max-width: 1090px;
+    box-sizing: border-box;
+    &:after {
+        display: block;
+        clear: both;
+        content: "";
+    }
 }
diff --git a/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss b/tutorindigo/templates/indigo/lms/static/sass/home/_home.scss
@@ -26,3 +26,108 @@ section.home {
         }
     }
 }
+#main .home.style-logout  {
+    header {
+        .outer-wrapper {
+            .title {
+                width: 100%;
+                float: none;
+                margin: 0;
+                padding: 30px 0 0;
+                min-height: 20px;
+                @include media-breakpoint-up(sm) {
+                    padding: 50px 0 0;
+                }
+                .heading-group {
+                    margin: 0 0 25px;
+                    text-align: left;
+                    padding: 0;
+                    @include media-breakpoint-up(sm) {
+                        margin: 0 0 45px;
+                    }
+                    h1 {
+                        color: #111827;
+                        font-size: 20px;
+                        font-weight: 700;
+                        line-height: 30px;
+                        margin: 0 0 8px;
+                        text-align: left;
+                        @include media-breakpoint-up(md) {
+                            font-size: 24px;
+                            font-weight: 700;
+                            margin: 0 0 12px;
+                        }
+                    }
+                    p {
+                        font-size: 16px;
+                        line-height: 20px;
+                        color: #6B7280;
+                        font-style: normal;
+                        margin: 0;
+                    }
+                }
+                .course-search {
+                    padding: 0;
+                    .search-field-wrapper {
+                        &:after {
+                            clear: both;
+                            content: "";
+                            display: block;
+                        }
+                        .button-holder {
+                            float: right;
+                            button {
+                                position: static;
+                                margin: 0 0 0 16px;
+                                min-width: 90px;
+                                color: #fff;
+                                font-size: 16px;
+                                font-weight: 500;
+                                line-height: 26px;
+                                text-align: center;
+                                padding: 6px;
+                                height: 38px;
+                                border-radius: 6px;
+                                background: $primary;
+                                font-family: $font-family-title;
+                                border: none;
+                                @include media-breakpoint-up(sm) {
+                                    min-width: 100px;
+                                }
+                                &:hover {
+                                    background: $primary;
+                                    opacity: .8;
+                                }
+                            }
+                        }
+                        .input-holder {
+                            overflow: hidden;
+                            border-radius: 6px;
+                            background: $primary-light;
+                            padding: 0 0 0 33px;
+                            position: relative;
+                            display: block;
+                            svg {
+                                position: absolute;
+                                left: 12px;
+                                font-size: 20px;
+                                top: 10px;
+                            }
+                            input {
+                                border: none;
+                                box-shadow: none;
+                                height: 38px;
+                                width: 100%;
+                                background: none;
+                                outline: none;
+                                font-size: 14px;
+                                line-height: 20px;
+                                padding: 9px 10px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss
@@ -245,6 +245,7 @@ nav.wrapper-preview-menu {
 @import '../../../dashbord/dashbord';
 @import '../../../courseware/discover';
 @import '../../../courseware/about';
+@import '../../../home/home';
 
 
 
diff --git a/tutorindigo/templates/indigo/lms/templates/course.html b/tutorindigo/templates/indigo/lms/templates/course.html
@@ -8,7 +8,7 @@
 <article class="course" id="${course.id}" role="region" aria-label="${course.display_name_with_default}">
     <header class="course-image">
       <div class="cover-image">
-        <img src="${course.course_image_url}" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
+        <img src="${course.course_image_url}" onerror="this.src='/static/indigo/images/no_course_image.png';" alt="${course.display_name_with_default} ${course.display_number_with_default}" />
       </div>
     </header>
     <div class="course-info" aria-hidden="true">

diff --git a/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html b/tutorindigo/templates/indigo/lms/templates/courseware/course_about.html
@@ -153,6 +153,7 @@ <h1>
 
     <div class="course-sidebar">
       <div class="course-summary">
+        <h2>Course Summary</h2>
         <%block name="course_about_important_dates">
         <ol class="important-dates">
           <li class="important-dates-item">

diff --git a/tutorindigo/templates/indigo/lms/templates/courseware/courses.html b/tutorindigo/templates/indigo/lms/templates/courseware/courses.html
@@ -96,10 +96,6 @@ <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
             %endfor
           </ul>
         </div>
-
-
-
-
       </section>
     </section>
 </main>
diff --git a/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore b/tutorindigo/templates/indigo/lms/templates/discovery/course_card.underscore
@@ -1,7 +1,7 @@
 <article class="course" role="region" aria-label="<%- content.display_name %>">
         <header class="course-image">
             <div class="cover-image">
-                <img src="<%- image_url %>" alt="<%- content.display_name %> <%- content.number %>" />
+                <img src="<%- image_url %>" onerror="this.src='/static/indigo/images/no_course_image.png';" alt="<%- content.display_name %> <%- content.number %>" />
             </div>
         </header>
         <section class="course-info" aria-hidden="true">

diff --git a/tutorindigo/templates/indigo/lms/templates/header/user_dropdown.html b/tutorindigo/templates/indigo/lms/templates/header/user_dropdown.html
@@ -30,7 +30,7 @@
 
 <div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
     <div class="toggle-user-dropdown" role="button" aria-label=${_("Options Menu")} aria-expanded="false" tabindex="0" aria-controls="user-menu">
-        <img src="${static.url('images/profile.svg')}" alt="profile icon" />
+        <span data-hj-suppress class="username">${displayname}</span>
     </div>
     <div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1">
         % if not enterprise_customer_portal: