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.

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

Qw #2

Closed
wants to merge 34 commits into from
Closed

Qw #2

Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
65faf93
site_name change
qwqtw Oct 16, 2023
e24847d
Revert "site_name change"
qwqtw Oct 16, 2023
ff9f6d8
Revert "Revert "site_name change""
qwqtw Oct 16, 2023
645ef95
Revert "Revert "Revert "site_name change"""
qwqtw Oct 16, 2023
e28eee6
add form to dashboard
qwqtw Oct 18, 2023
46db68d
Revert "add form to dashboard"
qwqtw Oct 18, 2023
866b585
Revert "Revert "Revert "Revert "site_name change""""
qwqtw Oct 18, 2023
045d061
Revert "Revert "Revert "Revert "Revert "site_name change"""""
qwqtw Oct 18, 2023
5379d7a
Update main.html
qwqtw Oct 18, 2023
2296af9
search_bar
qwqtw Oct 24, 2023
0f2eab1
index_change_search_bar
qwqtw Oct 25, 2023
bedb4f4
Revert "index_change_search_bar"
qwqtw Oct 25, 2023
d3df4a0
enable course discovery
qwqtw Oct 29, 2023
4db2f09
enable course discovery
qwqtw Oct 29, 2023
61c4a5a
change search bar in courses.html
qwqtw Oct 29, 2023
335e444
Update courses.html
qwqtw Oct 29, 2023
779e804
Update courses.html
qwqtw Oct 30, 2023
d16f9b1
Update courses.html
qwqtw Oct 30, 2023
6302e72
Update courses.html
qwqtw Oct 30, 2023
74a101a
Update courses.html
qwqtw Oct 30, 2023
59bfcbf
Update courses.html
qwqtw Oct 30, 2023
828be06
Update courses.html
qwqtw Oct 30, 2023
2f20127
Update courses.html
qwqtw Oct 30, 2023
e8ef45d
update search bar
qwqtw Oct 30, 2023
64a903c
Update courses.html
qwqtw Oct 30, 2023
7103ce1
Update courses.html
qwqtw Oct 30, 2023
8579faa
update courses
qwqtw Oct 30, 2023
db670a9
Update courses.html
qwqtw Oct 31, 2023
b56f2c0
Update views.py
qwqtw Nov 1, 2023
adee54c
Update courses.html
qwqtw Nov 1, 2023
4efda13
Update courses.html
qwqtw Nov 1, 2023
c7f1888
change search bar style
qwqtw Nov 1, 2023
a342ae8
Update courses.html
qwqtw Nov 2, 2023
a9a7076
Update courses.html
qwqtw Nov 2, 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
Prev Previous commit
Next Next commit
search_bar
  • Loading branch information
qwqtw committed Oct 24, 2023
commit 2296af909752d59fbbb7ea38bf4eef8463692f9b
Binary file added lms/templates/custom_components/filter_icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lms/templates/custom_components/magnifier.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
179 changes: 179 additions & 0 deletions lms/templates/custom_components/search_bar_filter.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter-Search-Sort Component</title>
<!-- Including the 'Inter' font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
body {
font-family: 'Inter', sans-serif;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 1320px;
}

/* Filter Box CSS */
.buttons {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 24px;
gap: 24px;
width: 167px;
height: 48px;
background: #FFFFFF;
border: 1px solid #FEEBEE;
}

.contents {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
gap: 12px;
width: 75px;
height: 48px;
}

.faders {
width: 24px;
height: 24px;
}

.filter-text {
width: 39px;
height: 48px;
font-weight: 600;
font-size: 16px;
line-height: 48px;
color: #1D2026;
}

/* Search Bar CSS */
.search-container {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 12px 18px;
gap: 10px;
width: 389px;
height: 48px;
background: #FFFFFF;
border: 1px solid #E9EAF0;
}

.search-info {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;
width: 105px;
height: 24px;
}

.magnifier-icon {
width: 24px;
height: 24px;
}

.search-input {
width: 69px;
height: 24px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #1D2026;
border: none;
padding-left: 10px;
background: #FFFFFF;
}

.search-input:focus {
outline: none;
}

.sort-by-label {
margin-right: 8px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #1D2026;
}

.sort-dropdown {

box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 16px;
gap: 83px;

width: 198px;
height: 48px;

/* Gray/White */
background: #FFFFFF;
/* Gray/100 */
border: 1px solid #E9EAF0;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}

.sort-section {
display: flex; /* Add flex display to horizontally align Sort By text and dropdown */
align-items: center; /* Vertically align the items in center */
}
</style>
</head>

<body>
<div class="container">
<!-- Filter Section -->
<div class="buttons">
<!-- Filter Box with Icon and Count -->
<img src="/Users/l/edx-platform/lms/templates/custom_components/filter_icon.png" alt="Filter Icon" class="faders">
<span class="filter-text">Filter</span>
<div style="background: #FEEBEE; padding: 4px 6px;">
<span style="font-weight: 600; font-size: 12px; color: #ED4338;">3</span>
</div>
</div>

<!-- Search Bar -->
<div class="search-container">
<div class="search-info">
<!-- Magnifier Icon -->
<img src="/Users/l/edx-platform/lms/templates/custom_components/magnifier.png" alt="Search Icon" class="magnifier-icon">
<!-- Search Input -->
<input type="text" class="search-input" placeholder="What do you want to learn...">
</div>
</div>

<!-- Sort By Dropdown -->
<div class="sort-section">
<span class="sort-by-label">Sort by:</span>
<select class="sort-dropdown">
<!-- Add options here -->
</select>
</div>
</div>
</body>

</html>