A front-end for the repositioned Mozillians, to display, edit and search for people's profiles.
To install all resources for this project, please make sure to have Node installed, then run:
npm install
This will install the dependencies the project requires. Then run:
npm run serve
This will start a local server.
Note that this does not give you data. To use the front-end with data, you must point the DP_K8S
variable to a URL that serves DinoPark data, for example using dino-park-dev-tools.
export DP_K8S=[url goes here]
Unit tests are in the tests
folder and ran with Jest.
To transfer profile data between front-end components and the back-end, we use Apollo, a client for GraphQL transactions.
The client is defined in main.js
, the queries are in the queries
folder and the components that trigger Apollo to get (‘query’) and change (‘mutate’) data can be anywhere in the application.
We use the <ApolloQuery>
and <ApolloMutation>
components for querying and mutating. They contain a <template>
with slot-scope
that has the data and error information in it. Within that template, data can be used as usual.
We use the <Modal>
component to describe the contents and behaviour of modal overlays.
To add a modal overlay, we need to parts: something that triggers it, and the overlay itself.
A trigger can be a button
that onclick
changes the isOpen
value of an overlay to true
(or a script that does that on whatever event required). The easiest is to link an overlay to its triggering button is to use refs, for example:
<button @click="$refs.myOverlay.isOpen = true">Change info</button>
<Modal ref="myOverlay">
<!-- content goes here -->
</Modal>
Notes:
z-index
if there are elements with a higher z-index.There is a <ShowMore>
component used anywhere you would show more content using a button.
Features:
<Popover>
is a component that is shared between tooltips, Contact Me and custom selects. In most cases, it is used as the toggled content of a ShowMore
component.
form
tag and submitting works (by pressing ENTER in an element, by firing form.submit()
, by pressing GO on iOS, etc)App.vue
file. Styles that only apply to a Profile view go to Profile.vue
, styles that only apply to tag commponents go to Tag.vue
..block
is a component.block--modifier
is a variation on the block component.block__element
is something inside the block componentThis application will automatically deploy to test/dev from the master
branch. To deploy to prod
cut a release tag following the pattern in releases
with the suffix -prod
.