A material design search page prototype. Based on the Polymer Starter Kit Light v1 and later upgraded to Polymer 3.
Or see it in action: https://jmanuel1.github.io/material-search/.
Tested in Opera, should work in Chrome.
Clone the repository.
> git clone https://github.com/jmanuel1/material-search.git
> cd material-search
Create a virtual Python environment under the env
directory and enter it.
> virtualenv env
(env) > . env/Scripts/activate # look up the correct command in virtualenv docs
Install the dependencies.
(env) > yarn
Start up a server in the project directory using Polymer CLI and navigate to
localhost:8081
in a browser.
(env) > polymer serve
# Go to localhost:8000 in a browser.
To create a development build of the project, run gulp build
. The build output
will be under the build/dev
directory.
In the main page, there's a header with tabs and the main content area. The main
content area contains a search bar--in particular, the paper-search-bar
element.
This is hooked up to three fake results that appear in a div
(id
search-results
) when something is typed into the search bar by the
_createItems
method on the app. _createItems
can be found in
scripts/app.js
.
This file contains all the imports, including those of elements, used in
index.html
. This is then loaded as a script module from index.html
.
This has most of material-search's styling. Much of it is from the Polymer Starter Kit v1, but converted to a module for Polymer 3.
Integration tests are under the test/
directory. Test scripts act on the
latest build of the website in the build/
directory, not the files at the
project root, so you must build the project before testing. Assuming you've
already set up your development environment, you can run the tests
using the following:
> . ./env/Scripts/activate # `source ./env/bin/activate` in posix
(env) > pip install -r requirements.txt
# make sure you're in the virtual environment and that there is a development
# build in ./build/dev
(env) > gulp test
Test are run on the development build.
The tests are written in Python using Selenium and pytest. Please use type annotations and check the code using mypy.
HTML, CSS, and JavaScript files are passed through
Prettier whenever they are committed. A Git hook for
this purpose should be set up for you after you run yarn
.
- Optimize site through a build process.