LMS dashboard styles (#466)

* feat: Sdaia theme design implementations * feat: LMS dashboard styles
edly-io · Dec 6, 2023 · 003b0a7 · 003b0a7
1 parent bd7ef76
commit 003b0a7
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/lms/static/sass/features/_leaderboard.scss b/lms/static/sass/features/_leaderboard.scss
@@ -1,42 +1,41 @@
 .leaderboard {
-    margin: 20px;
+    margin: 0;
     background-color: #fff;
-    border-radius: 8px;
-    padding: 10px;
-    border: 1px solid #D9D9D9;
-
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
 
     .avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       overflow: hidden;
-    }
-
-    .avatar img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
 
     .leaderboard-header {
-        font-size: 1.1em;
-        padding: 10px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #D9D9D9;
+      font-size: 1.1rem;
+      padding: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid $border-color;
 
-        .star-icon {
-          width: 25%;
-        }
+      .star-icon {
+        width: 25%;
+        max-width: 104px;
+      }
     }
 
     .header {
       list-style: none;
       overflow-y: auto;
-      padding: 0px 10px 0px 10px;
-      margin: 0px;
+      padding: 0 10px;
+      margin: 0;
 
       .header-item {
         display: flex;
@@ -49,13 +48,13 @@
         }
       }
     }
-    
+
     .user-list {
         list-style: none;
         max-height: 300px; /* Set your desired maximum height */
         overflow-y: auto;
-        padding: 0px 10px 0px 10px;
-        margin: 0px;
+        padding: 0 10px;
+        margin: 0;
 
         .user-item {
           display: flex;
@@ -71,14 +70,13 @@
 
           .user-name {
             font-weight: 600;
-            color: #1C355E;
+            color: $primary;
           }
-        
+
           .user-score {
-            color: #EA6852;
+            color: $secondary;
             font-size: 1em; /* Adjust font size if necessary */
           }
-
         }
     }
 }
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
@@ -12,7 +12,7 @@
 
   // Contains main course card listings
   .main-container {
-    @include padding($baseline*2, $baseline, $baseline, $baseline*2);
+    @include padding($baseline*2, $baseline*2, $baseline, 0);
 
     flex-grow: 8;
     order: 1;

diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
@@ -284,7 +284,7 @@ <h3>${course_dir}</h3>
             <form class="search-form">
               <label for="dashboard-search-input">${_('Search Your Courses')}</label>
               <div class="search-field-wrapper">
-                <input id="dashboard-search-input" type="text" class="search-field"/>
+                <input id="dashboard-search-input" type="text" class="search-field" placeholder="${_('Search Your Courses')}"/>
                 <button type="submit" class="search-button" title="${_('Search')}">
                   <span class="icon fa fa-search" aria-hidden="true"></span>
                 </button>
@@ -315,7 +315,7 @@ <h3>${course_dir}</h3>
           <ul class="user-list" id="userList">
           </ul>
         </div>
-        
+
         <%block name="skip_links">
           % if settings.FEATURES.get('ENABLE_ANNOUNCEMENTS'):
             <a id="announcements-skip" class="nav-skip sr-only sr-only-focusable" href="#announcements">${_("Skip to list of announcements")}</a>

diff --git a/lms/templates/header/header.html b/lms/templates/header/header.html
@@ -51,13 +51,13 @@
         )}
     % endif
     <div class="main-header">
-        <%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
         <div class="hamburger-menu" role="button" aria-label=${_("Options Menu")} aria-expanded="false" aria-controls="mobile-menu" tabindex="0">
             <span class="line"></span>
             <span class="line"></span>
             <span class="line"></span>
             <span class="line"></span>
         </div>
+        <%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
         % if user.is_authenticated:
             <%include file="navbar-authenticated.html" args="online_help_token=online_help_token"/>
         % else:

diff --git a/lms/templates/header/user_dropdown.html b/lms/templates/header/user_dropdown.html
@@ -32,9 +32,11 @@
 
 <div class="nav-item hidden-mobile">
     <a href="${reverse('dashboard')}" class="menu-title">
-        <img data-hj-suppress class="user-image-frame" src="${profile_image_url}" alt="">
-        <span class="sr-only">${_("Dashboard for:")}</span>
-        <span data-hj-suppress class="username">${displayname}</span>
+      <span class="user-image-frame">
+        <img data-hj-suppress src="${profile_image_url}" alt="${displayname}">
+      </span>
+      <span class="sr-only">${_("Dashboard for:")}</span>
+      <span data-hj-suppress class="username">${displayname}</span>
     </a>
 </div>
 <div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
@@ -43,16 +45,16 @@
     </div>
     <div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1">
         % if not enterprise_customer_portal:
-            <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div>
+            <div class="mobile-nav-item dropdown-item nav-dashboard dropdown-nav-item"><a href="${reverse('dashboard')}" class="nav-dashboard" role="menuitem">${_("Dashboard")}</a></div>
         % else:
-            <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${settings.ENTERPRISE_LEARNER_PORTAL_BASE_URL}/${enterprise_customer_portal.get('slug')}" role="menuitem">${_("Dashboard")}</a></div>
+            <div class="mobile-nav-item dropdown-item nav-dashboard dropdown-nav-item"><a href="${settings.ENTERPRISE_LEARNER_PORTAL_BASE_URL}/${enterprise_customer_portal.get('slug')}" role="menuitem">${_("Dashboard")}</a></div>
         % endif
 
-        <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('learner_profile', kwargs={'username': username})}" role="menuitem">${_("Profile")}</a></div>
-        <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div>
+        <div class="mobile-nav-item dropdown-item nav-profile dropdown-nav-item"><a href="${reverse('learner_profile', kwargs={'username': username})}" role="menuitem">${_("Profile")}</a></div>
+        <div class="mobile-nav-item dropdown-item nav-account dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div>
         % if should_show_order_history:
             <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${order_history_mfe_url}" role="menuitem">${_("Order History")}</a></div>
         % endif
-        <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div>
+        <div class="mobile-nav-item dropdown-item nav-logout dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div>
     </div>
 </div>