diff --git a/codershq/search/urls.py b/codershq/search/urls.py new file mode 100644 index 00000000..912f6a19 --- /dev/null +++ b/codershq/search/urls.py @@ -0,0 +1,8 @@ +from django.urls import path + +from . import views + +app_name = "search" +urlpatterns = [ + path("", views.search, name="search"), +] diff --git a/codershq/search/views.py b/codershq/search/views.py new file mode 100644 index 00000000..d456f7d2 --- /dev/null +++ b/codershq/search/views.py @@ -0,0 +1,105 @@ +from django.shortcuts import render +from django.http import HttpRequest, HttpResponse +from django.db.models import QuerySet + +from codershq.users.models import User +from codershq.events.models import Event + +def search(request: HttpRequest) -> HttpResponse: + if 'search' in request.GET: + # get the search and search category queries + search = request.GET.get('search') + search_category = request.GET.get('search_select') + + # define the context that will be rendered + context = { + 'search': search, + 'search_select': search_category, + 'contributors_queryset': '', + 'events_queryset': '', + 'skills': [], + } + + #### Contributors Category #### + if search_category == "Contributors": + ''' + Find contributors based on name AND username of registered Users. + TODO: Filter as per contributor role when integrated with User model. + ''' + print("INFO: CONTRIBUTORS CATEGORY CHOSEN") + + # get skills query + skills = request.GET.getlist('skill') + print("INFO: skills query list received: ", skills) + + # add skills to context + context['skills'] = skills + + + contributors_qs = filter_contributors(search_query=search) + print("INFO: users queryset received: ", contributors_qs) + + # add users queryset to context + context['contributors_queryset'] = contributors_qs + + + #### Events Category #### + # elif search_category == "Events": + # print("INFO: EVENTS CATEGORY CHOSEN") + + # events_qs = filter_events(search_query=search) + # print("INFO: events queryset received: ", events_qs) + + # # add users queryset to context + # context['events_queryset'] = events_qs + + #### All Category #### + else: + ''' + TODO: display suggestions if no results found + ''' + print("INFO: ALL CATEGORY CHOSEN") + + # get filtered querysets based on search query + contributors_qs = filter_contributors(search_query=search) + # events_qs = filter_events(search_query=search) + + # add all querysets to context + context['contributors_queryset'] = contributors_qs + # context['events_queryset'] = events_qs + + + print("INFO: Context sent: ", context) + return render(request, 'pages/search.html', context) + else: + return render(request, 'pages/search.html', {}) + + +def filter_contributors(search_query: str) -> QuerySet: + # find all registered users + users_qs = User.objects.all() + print("INFO: USERS FOUND: ", users_qs) + + # filter found users as per name attribute + users_qs_name = users_qs.filter(name__icontains=search_query) + print("INFO: Users filtered as per name: ", users_qs_name) + + # filter found users as per username attribute + users_qs_username = users_qs.filter(username__icontains=search_query) + print("INFO: Users filtered as per username: ", users_qs_username) + + # combine the filtered results above + users_qs = users_qs_name.union(users_qs_username) + + return users_qs + +def filter_events(search_query: str) -> QuerySet: + # find all registered events + events_qs = Event.objects.all() + print("INFO: EVENTS FOUND: ", events_qs) + + # filter found events as per title attribute + events_qs = events_qs.filter(title__icontains=search_query) + print("INFO: Events filtered as per title: ", events_qs) + + return events_qs diff --git a/codershq/searchBar/urls.py b/codershq/searchBar/urls.py new file mode 100644 index 00000000..2e2a18a4 --- /dev/null +++ b/codershq/searchBar/urls.py @@ -0,0 +1,8 @@ +from django.urls import path + +from . import views + +app_name = "searchBar" +urlpatterns = [ + path("", views.searchBar, name="searchBar"), +] diff --git a/codershq/searchBar/views.py b/codershq/searchBar/views.py new file mode 100644 index 00000000..f0ceb8c8 --- /dev/null +++ b/codershq/searchBar/views.py @@ -0,0 +1,4 @@ +from django.shortcuts import render + +def searchBar(request): + return render(request, 'pages/searchBar.html', {}) diff --git a/codershq/static/images/avatar.jpg b/codershq/static/images/avatar.jpg new file mode 100644 index 00000000..61037cb3 Binary files /dev/null and b/codershq/static/images/avatar.jpg differ diff --git a/codershq/static/images/searchicon.webp b/codershq/static/images/searchicon.webp new file mode 100644 index 00000000..7f485406 Binary files /dev/null and b/codershq/static/images/searchicon.webp differ diff --git a/codershq/static/images/svgs/events1.svg b/codershq/static/images/svgs/events1.svg new file mode 100644 index 00000000..cef18885 --- /dev/null +++ b/codershq/static/images/svgs/events1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/codershq/static/sass/project.scss b/codershq/static/sass/project.scss index 16bacb61..0b03ebbb 100644 --- a/codershq/static/sass/project.scss +++ b/codershq/static/sass/project.scss @@ -4,6 +4,208 @@ @import "_dashboard"; // project specific CSS goes here +.overflow-x-scroll { + overflow-x: scroll; +} + +.myInput:focus { + outline: none !important; + border-color: gray !important; + --tw-ring-color: gray !important; + +} + +.grid-cols-2-search { + grid-template-columns: 12% 88%; +} + +// .grid-cols-6-contributors { +// grid-template-columns: 376px 376px 376px 376px 376px 376px; +// } + +.grid-row-2 { + grid-template-rows: repeat(2, 185px); +} + +.grid-auto-flow-column { + grid-auto-flow: column; + grid-auto-columns: min-content; + +} + +.card { + /* Add shadows to create the "card" effect */ + transition: 0.3s; +} + +/* On mouse-over, add a deeper shadow */ +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +.myInput { + outline: none; +} + +.lg\:gap-7 { + gap: 1.75rem; +} + +/* Dropdown Button */ +.dropbtn { + font-size: 16px; + cursor: pointer; + border: 1px solid #B0B0B0; + box-sizing: border-box; +} + +/* Dropdown button on hover & focus */ +.dropbtn:hover { + background: #e8fffd; + border: 1px solid rgba(44, 185, 187, 0.8); + box-sizing: border-box; + box-shadow: 0px 0px 4px rgba(92, 205, 206, 0.62); +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + right: 0; + margin-top: 4px; + display: none; + position: absolute; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Dropdown Button */ +.dropbtn2 { + font-size: 16px; + cursor: pointer; + border: 1px solid #B0B0B0; + box-sizing: border-box; +} + +/* Dropdown button on hover */ +.dropbtn2:hover { + background: #e8fffd; + border: 1px solid rgba(44, 185, 187, 0.8); + box-sizing: border-box; + box-shadow: 0px 0px 4px rgba(92, 205, 206, 0.62); +} + +/* The container
- needed to position the dropdown content */ +.dropdown2 { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content2 { + left: 0; + margin-top: 4px; + display: none; + position: absolute; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ +.show {display:block;} + +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + margin-bottom: 2px; + margin-left: 2px; +} + +.down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); +} + +/* The container */ +.checkbox-container { + display: block; + position: relative; + padding-left: 30px; + margin-top: 12px; + cursor: pointer; + /* font-size: 22px; */ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Hide the browser's default checkbox */ +.checkbox-container input { + position: absolute; + top: 0; + left: 0; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +/* Create a custom checkbox */ +.checkmark { + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + border-radius: 3px; + border: 1px solid #4F4F4F; +} + +/* On mouse-over, add a grey background color */ +.checkbox-container:hover input ~ .checkmark { + background: #F5FFFE; + border: 1px solid #00AFB1; +} + +/* When the checkbox is checked, add a blue background */ +.checkbox-container input:checked ~ .checkmark { + background: #F5FFFE; + border: 1px solid #00AFB1; +} + +/* Create the checkmark/indicator (hidden when not checked) */ +.checkmark::after { + content: ""; + position: absolute; + display: none; +} + +/* Show the checkmark when checked */ +.checkbox-container input:checked ~ .checkmark::after { + display: block; +} + +/* Style the checkmark/indicator */ +.checkbox-container .checkmark::after { + left: 7px; + top: 3px; + width: 5px; + height: 10px; + border: solid #00AFB1; + border-width: 0 2px 2px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} //////////////////////////////// //Variables// //////////////////////////////// diff --git a/codershq/templates/pages/search.html b/codershq/templates/pages/search.html new file mode 100644 index 00000000..02c5595d --- /dev/null +++ b/codershq/templates/pages/search.html @@ -0,0 +1,659 @@ +{% extends "base.html" %} + +{% block content %} + + +
+
+
+ + +
+
+ {% if search_select == 'Contributors' %} +
+
+ + +
+
+ {% endif %} +
+ +
+
+
+ {% if search %} + {% if search_select == 'Contributors' %} +
+

Contributors

+ {% if contributors_queryset %} +
+ {% for contributor in contributors_queryset %} + + Avatar +
+

{{contributor.name}}

+ Django Developer +
+ + + + + Dubai, United Arab Emirates +
+ + + + +
+ + {% endfor %} +
+ {% else %} +

No results found.

+ {% endif %} +
+ {% elif search_select == 'Events' %} +
+

Events

+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+
+ {% else %} +
+

Contributors

+ {% if contributors_queryset %} +
+ {% for contributor in contributors_queryset %} + + Avatar +
+

{{contributor.name}}

+ Django Developer +
+ + + + + Dubai, United Arab Emirates +
+ + + + +
+ + {% endfor %} +
+ {% else %} +

No results found.

+ {% endif %} +
+
+

Events

+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+ Event +
+

SA Cryptocurrency Defi Summit

+

Thursday, April 5th | 6:30PM - 9:30PM

+ By Solana Hacker House +
+ + + + + Dubai, United Arab Emirates +
+ +
+
+
+
+ {% endif %} + {% else %} +

No results found.

+ {% endif %} +
+
+ + + + +{% endblock %} diff --git a/codershq/templates/pages/searchBar.html b/codershq/templates/pages/searchBar.html new file mode 100644 index 00000000..3e049843 --- /dev/null +++ b/codershq/templates/pages/searchBar.html @@ -0,0 +1,433 @@ +{% extends "base.html" %} + +{% block content %} + + +
+
+
+ + +
+
+ {% if search_select == 'Contributors' %} +
+
+ + +
+
+ {% endif %} +
+ +
+
+
+ + + + +{% endblock %} diff --git a/codershq/templates/portfolio/portfolio.html b/codershq/templates/portfolio/portfolio.html index 103ab960..7db451e9 100644 --- a/codershq/templates/portfolio/portfolio.html +++ b/codershq/templates/portfolio/portfolio.html @@ -3,28 +3,18 @@ {% block content %} -
-
-
-
- - - {% if user.profile_image %} - - {% else %} - - {% endif %} - +
+
+
+
-
+
- - + + {% if user.name %} {{user.name}} {% else %} @@ -32,8 +22,8 @@ {% endif %} Designer | Coder - -
+ +
-
+
-
+
-
+
@@ -72,7 +62,7 @@
-
+
@@ -106,7 +96,7 @@ - user_email@gmail.com + saraal@gmail.com @@ -123,7 +113,7 @@ - www.userwebsite.com + saraal.com @@ -148,7 +138,7 @@ src="https://tethys.pnnl.gov/sites/default/files/styles/captioned_400xauto/public/taxonomy-images/Khalifa_university_logo.png?itok=91JBke00">

{{education.school}}

- Current +

{{education.degree}}

Abu Dhabi, United Arab Emirates

@@ -185,7 +175,7 @@

{{education.school}}

{{experience.job_title}}

{% if experience.is_current %} - Current + {% endif %}

Google - Full Time

{{experience.start_date}} - {{experience.end_date}}

@@ -271,4 +261,4 @@

{{award.name}}

-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/config/urls.py b/config/urls.py index d4051b16..98703ce3 100644 --- a/config/urls.py +++ b/config/urls.py @@ -44,6 +44,8 @@ path("events/", include("codershq.events.urls", namespace="events")), path("api/", include("codershq.api.urls", namespace="api")), path("portfolio/", include("codershq.portfolio.urls", namespace="portfolio")), + path("search/", include("codershq.search.urls", namespace="search")), + path("searchBar/", include("codershq.searchBar.urls", namespace="searchBar")), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)