Skip to content

Commit 152cdaf

Browse files
dylansheilsdylansheils
authored
Searchbar (#170)
* Add files via upload Search bar created from HTML with CSS styling addition. Search bar takes the search request and redirects to the existing search page with the query. An attempt was made to match the style of the website. For this commit, time was spent learning basic HTML, CSS,-albeit ultimately unsuccessful-PHP, Django, and Wagtail. Additions to this feature are being actively considered. * Add files via upload Search bar created from HTML with CSS styling addition. Search bar takes the search request and redirects to the existing search page with the query. An attempt was made to match the style of the website. For this commit, time was spent learning basic HTML, CSS,-albeit ultimately unsuccessful-PHP, Django, and Wagtail. Additions to this feature are being actively considered. * Add files via upload Added to support mobile devices. Searchbar is hidden in favor for search icon for displays that do not have the real-estate to render it well. * Add files via upload Added to support mobile devices. Searchbar is hidden in favor for search icon for displays that do not have the real-estate to render it well. * Add files via upload Test of Using JQuery autofill feature. Note: Attempted to use HTML's list for autocomplete, but I found that it is less flexible than JQuery. * Add files via upload Test of Using JQuery autofill feature. Note: Attempted to use HTML's list for autocomplete, but I found that it is less flexible than JQuery. * Add files via upload Changes: Fixed URL redirect, fixed bug with it breaking WebKit, and completed JQuery Searchbar Autofill supporting multiple entries which references a custom made array storing commonly searched terms. Final Update before pull request. * Add files via upload * Update to Readme: Ubuntu Updated instructions such that user only needs to follow them exactly to get pipeline up and running on their Ubuntu system.
1 parent 46a811d commit 152cdaf

File tree

3 files changed

+261
-13
lines changed

3 files changed

+261
-13
lines changed

‎README.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ You can change Pipeline's settings to use SQLite instead of Postgres, but this i
1919

2020
## Getting started
2121

22-
Pipeline is written in Python. It uses Sass and PostCSS on the frontend with webpack to glue them together.
22+
Pipeline is written in Python. It uses Sass and PostCSS on the frontend with webpack to glue them together. For new users working within a virtual machine, it is strongly recommended to use Ubuntu.
2323

2424
#### Note about Postgres
2525

@@ -31,7 +31,7 @@ brew services start postgresql
3131
createdb pipeline
3232
```
3333

34-
To setup Postgres on [Arch Linux](https://www.archlinux.org/), the instructions are similar:
34+
To setup Postgres on [Arch Linux](https://www.archlinux.org/):
3535

3636
```
3737
sudo pacman -Syu # Optional, to refresh and update packages
@@ -40,6 +40,25 @@ sudo -u postgres initdb --locale en_US.UTF-8 -D /var/lib/postgres/data
4040
sudo systemctl start postgresql
4141
```
4242

43+
To setup Postgres on [Ubuntu](https://ubuntu.com/):
44+
45+
```
46+
// Install
47+
sudo apt-get update
48+
sudo apt-get -y install postgresql postgresql-contrib
49+
// Setup
50+
sudo -i -u postgres
51+
psql
52+
CREATE USER postgres WITH PASSWORD 'postgres'
53+
\q
54+
*reopen terminal*
55+
sudo -u postgres psql
56+
\password postgres // Enter 'postgres' twice
57+
\q
58+
*reopen terminal*
59+
sudo systemctl start postgresql
60+
```
61+
4362
The default dev database, defined in `settings/dev.py` uses the following postgres url: `postgresql://postgres:[email protected]:5432/pipeline` make sure that your database is configured to these settings. The pipeline database must exist, and the user `postgres` must exist with password `postgres`. Read more about postgres urls [here](https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING).
4463

4564
Read about creating a user [here](https://www.postgresql.org/docs/10/role-attributes.html). You will probably want postgres to be a superuser.
@@ -55,6 +74,18 @@ pipenv install --dev
5574
pipenv run python manage.py createcachetable
5675
```
5776

77+
On Ubuntu:
78+
```
79+
git clone [email protected]:thepoly/pipeline.git
80+
cd pipeline
81+
sudo apt install npm
82+
npx webpack --config webpack.development.config.js // Type "yes" when prompted
83+
npm audit fix
84+
sudo apt install pipenv
85+
pipenv install --dev
86+
pipenv run python manage.py createcachetable
87+
```
88+
5889
### Running
5990

6091
```

‎home/templates/home/home_page.html

Lines changed: 117 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,128 @@
99

1010
{% block body_class %}template-homepage{% endblock %}
1111

12+
<style>
13+
@media only screen and (max-width: 750px) {
14+
#largeDisplay {
15+
display: none;
16+
}
17+
#smallDisplay {
18+
display: block;
19+
}
20+
}
21+
@media only screen and (min-width: 750px) {
22+
#largeDisplay {
23+
border-color: transparent;
24+
display: block;
25+
}
26+
#smallDisplay {
27+
display: none;
28+
}
29+
}
30+
</style>
31+
32+
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
33+
<link rel="stylesheet" href="/resources/demos/style.css">
34+
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
35+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
36+
<script>
37+
$( function() {
38+
var availableTags = [
39+
"Polytechnic",
40+
"Student Activity Board",
41+
"Student Union",
42+
"Commons",
43+
"Polytechnic",
44+
"Rennslaer",
45+
"Arch",
46+
"COVID",
47+
"GM Week",
48+
"Student Senate",
49+
"Top Hat",
50+
"Rensselaer Union",
51+
"Joint Top Hat",
52+
"Derby",
53+
"Editorial",
54+
"Notebook",
55+
"Executive",
56+
"Board",
57+
"Town Hall",
58+
"EBoard",
59+
"Recommendations",
60+
"Academics",
61+
"On-Campus Event",
62+
"EMPAC",
63+
"Interview",
64+
"Clubs",
65+
"Sports",
66+
"Basketball",
67+
"Engineers",
68+
"Hockey",
69+
"Football",
70+
"E-Sports",
71+
"Racquetball",
72+
"Lacrosse",
73+
"Swimming",
74+
"Student Rights",
75+
"Student Handbook",
76+
"Job"
77+
];
78+
79+
$( "#tags" )
80+
.on( "keydown", function( event ) {
81+
if ( event.keyCode === $.ui.keyCode.TAB &&
82+
$( this ).autocomplete( "instance" ).menu.active ) {
83+
event.preventDefault();
84+
}
85+
})
86+
.autocomplete({
87+
minLength: 0,
88+
source: function( request, response ) {
89+
response( $.ui.autocomplete.filter(
90+
availableTags, (request.term.split(" ")).pop() ) );
91+
},
92+
focus: function() {
93+
return false;
94+
},
95+
select: function( event, ui ) {
96+
var terms = this.value.split(" ");
97+
terms.pop();
98+
terms.push( ui.item.value );
99+
terms.push( "" );
100+
this.value = terms.join( " " );
101+
return false;
102+
}
103+
});
104+
} );
105+
</script>
106+
12107
{% block header_block %}
13108
<header class="pb-4 pb-md-5 pt-2 pt-md-3 bg-gradient-primary">
14109
<div class="container">
15110
<div class="flex-row no-gutters align-items-center">
16111
<div class="col text-right mb-3 mb-md-0">
17-
<a class="text-light search" href="{% url 'search' %}">
18-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
19-
</a>
20-
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/">Subscribe</a>
112+
<div class="ui-widget hide-mobile col text-right" id="largeDisplay">
113+
<form action="{% url 'search' %}">
114+
<input type="text" name="query" id="tags" placeholder="Search..." style="border-radius: 5px; size: 10; position: relative; top:1px; resize: none;">
115+
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/" style="resize: none; top: 5px">Subscribe</a>
116+
</form>
117+
</div>
118+
<div class="hide-desktop col text-right" id="smallDisplay">
119+
<div class="ui-widget hide-mobile col text-right" id="largeDisplay">
120+
<form action="{% url 'search' %}">
121+
<input type="text" name="query" id="tags" placeholder="Search..." style="border-radius: 5px; size: 10; position: relative; top:10px; resize: none;">
122+
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/" style="resize: none; top: 5px">Subscribe</a>
123+
</form>
124+
</div>
125+
<div class="hide-desktop col text-right" id="smallDisplay">
126+
<div class="col text-right mb-3 mb-md-0">
127+
<a class="text-light search" href="{% url 'search' %}">
128+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
129+
</a>
130+
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/">Subscribe</a>
131+
</div>
132+
</div>
133+
</div>
21134
</div>
22135
<div class="col-12 text-center">
23136
<a class="header-logo" href="{% pageurl request.site.root_page %}">

‎pipeline/templates/base.html

Lines changed: 111 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,105 @@
4444
{% endblock %}
4545
</head>
4646

47+
<style>
48+
@media only screen and (max-width: 750px) {
49+
#largeDisplay {
50+
display: none;
51+
}
52+
#smallDisplay {
53+
display: block;
54+
}
55+
}
56+
@media only screen and (min-width: 750px) {
57+
#largeDisplay {
58+
display: block;
59+
}
60+
#smallDisplay {
61+
display: none;
62+
}
63+
}
64+
</style>
65+
66+
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
67+
<link rel="stylesheet" href="/resources/demos/style.css">
68+
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
69+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
70+
<script>
71+
$( function() {
72+
var availableTags = [
73+
"Polytechnic",
74+
"Student Activity Board",
75+
"Student Union",
76+
"Commons",
77+
"Polytechnic",
78+
"Rennslaer",
79+
"Arch",
80+
"COVID",
81+
"GM Week",
82+
"Student Senate",
83+
"Top Hat",
84+
"Rensselaer Union",
85+
"Joint Top Hat",
86+
"Derby",
87+
"Editorial",
88+
"Notebook",
89+
"Executive",
90+
"Board",
91+
"Town Hall",
92+
"EBoard",
93+
"Recommendations",
94+
"Academics",
95+
"On-Campus Event",
96+
"EMPAC",
97+
"Interview",
98+
"Clubs",
99+
"Sports",
100+
"Basketball",
101+
"Engineers",
102+
"Hockey",
103+
"Football",
104+
"E-Sports",
105+
"Racquetball",
106+
"Lacrosse",
107+
"Swimming",
108+
"Student Rights",
109+
"Student Handbook",
110+
"Job"
111+
];
112+
113+
$( "#tags" )
114+
.on( "keydown", function( event ) {
115+
if ( event.keyCode === $.ui.keyCode.TAB &&
116+
$( this ).autocomplete( "instance" ).menu.active ) {
117+
event.preventDefault();
118+
}
119+
})
120+
.autocomplete({
121+
minLength: 0,
122+
source: function( request, response ) {
123+
response( $.ui.autocomplete.filter(
124+
availableTags, (request.term.split(" ")).pop() ) );
125+
},
126+
focus: function() {
127+
return false;
128+
},
129+
select: function( event, ui ) {
130+
var terms = this.value.split(" ");
131+
terms.pop();
132+
terms.push( ui.item.value );
133+
terms.push( "" );
134+
this.value = terms.join( " " );
135+
return false;
136+
}
137+
});
138+
} );
139+
</script>
140+
141+
47142
<body class="bg-light {% block body_class %}{% endblock %}">
48143
{% wagtailuserbar %}
49-
50144
{% block header_block %}
145+
51146
<header class="py-2 bg-gradient-primary">
52147
<div class="container">
53148
<div class="row no-gutters flex-nowrap justify-content-between align-items-center">
@@ -56,11 +151,20 @@
56151
<img src="{% static 'images/logo_minimal.png' %}" alt="The Polytechnic">
57152
</a>
58153
</div>
59-
<div class="col text-right">
60-
<a class="text-light search" href="{% url 'search' %}">
61-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
62-
</a>
63-
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/">Subscribe</a>
154+
155+
<div class="ui-widget hide-mobile col text-right" id="largeDisplay">
156+
<form action="{% url 'search' %}">
157+
<input type="text" name="query" id="tags" placeholder="Search..." style="border-radius: 5px; size: 10; position: relative; top:1px; resize: none;" multiple>
158+
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/" style="resize: none; top: 5px">Subscribe</a>
159+
</form>
160+
</div>
161+
<div class="hide-desktop col text-right" id="smallDisplay">
162+
<div class="col text-right mb-3 mb-md-0">
163+
<a class="text-light search" href="{% url 'search' %}">
164+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
165+
</a>
166+
<a class="btn btn-sm btn-outline-light" href="{% pageurl request.site.root_page %}subscribe/">Subscribe</a>
167+
</div>
64168
</div>
65169
</div>
66170
</div>
@@ -96,4 +200,4 @@
96200
{# Override this in templates to add extra JavaScript #}
97201
{% endblock %}
98202
</body>
99-
</html>
203+
</html>

0 commit comments

Comments
 (0)