Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LMS dashboard styles #466

Merged
merged 2 commits into from
Dec 6, 2023
Merged

LMS dashboard styles #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d14dd9a
feat: Sdaia theme design implementations
Dec 4, 2023
f279bb5
feat: LMS dashboard styles
Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 27 additions & 29 deletions lms/static/sass/features/_leaderboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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 */
}

}
}
}
2 changes: 1 addition & 1 deletion lms/static/sass/multicourse/_dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions lms/templates/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion lms/templates/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
18 changes: 10 additions & 8 deletions lms/templates/header/user_dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Loading