├── .gitignore ├── .idea └── jsLibraryMappings.xml ├── LICENSE ├── README.md ├── backend ├── README.md ├── config │ ├── app_dev.json │ ├── app_prod.json │ ├── app_stag.json │ ├── app_test.json │ └── index.js ├── index.js ├── knexfile.js ├── package.json ├── server.js ├── src │ ├── controllers │ │ ├── AuthController.js │ │ ├── OrganisationController.js │ │ ├── ProjectController.js │ │ ├── ProjectRevisionController.js │ │ ├── UserController.js │ │ └── UserSessionController.js │ ├── db │ │ ├── index.js │ │ ├── migrations │ │ │ └── 20150920121341_initial.js │ │ ├── models │ │ │ ├── Organisation.js │ │ │ ├── OrganisationUser.js │ │ │ ├── Project.js │ │ │ ├── ProjectEnvInfo.js │ │ │ ├── ProjectFile.js │ │ │ ├── ProjectRevision.js │ │ │ ├── ProjectRole.js │ │ │ ├── ProjectTeam.js │ │ │ ├── ProjectUser.js │ │ │ ├── Team.js │ │ │ ├── TeamRole.js │ │ │ ├── TeamUser.js │ │ │ ├── User.js │ │ │ └── UserSession.js │ │ ├── schemas │ │ │ └── schema.js │ │ ├── seeds │ │ │ ├── data.json │ │ │ ├── data_team.json │ │ │ └── init.js │ │ └── utils │ │ │ └── dbUtil.js │ ├── plugins │ │ └── .gitkeep │ ├── routes │ │ └── v1 │ │ │ ├── auth.js │ │ │ ├── organisations.js │ │ │ ├── projects.js │ │ │ └── users.js │ └── services │ │ ├── AuthService.js │ │ ├── OrganisationService.js │ │ └── ProjectService.js └── test │ ├── .gitkeep │ ├── integration │ └── controllers │ │ ├── auth.js │ │ ├── organisation.js │ │ ├── project.js │ │ └── user.js │ └── unit │ └── services │ ├── organisation.js │ └── project.js ├── design ├── builder │ ├── Gruntfile.js │ ├── README.md │ ├── app │ │ ├── builder-step-1.html │ │ ├── builder-step-2.html │ │ ├── builder-step-3.html │ │ ├── builder-step-4.html │ │ ├── builder-step-5.html │ │ ├── builder-step-6.html │ │ ├── builder-step-7.html │ │ ├── dashboard-company.html │ │ ├── dashboard-individual.html │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── after.png │ │ │ ├── avatar.png │ │ │ ├── before.png │ │ │ ├── header.jpg │ │ │ ├── logo.png │ │ │ ├── option-dropdown.png │ │ │ ├── screenshot-background.jpg │ │ │ ├── screenshot.png │ │ │ └── screenshot@2x.png │ │ ├── index.html │ │ ├── login.html │ │ ├── register-company.html │ │ ├── register-individual.html │ │ ├── register.html │ │ └── styles │ │ │ ├── components │ │ │ ├── button.scss │ │ │ ├── comparison.scss │ │ │ ├── content.scss │ │ │ ├── flexbox.scss │ │ │ ├── footer.scss │ │ │ ├── form.scss │ │ │ ├── header.scss │ │ │ ├── icon-block.scss │ │ │ ├── image-builder.scss │ │ │ ├── list.scss │ │ │ ├── menu.scss │ │ │ ├── page-title.scss │ │ │ ├── plan.scss │ │ │ ├── responsive.scss │ │ │ ├── screenshot.scss │ │ │ ├── section.scss │ │ │ ├── spacer.scss │ │ │ ├── sub-content.scss │ │ │ ├── sub-menu.scss │ │ │ └── wrapper.scss │ │ │ ├── config.scss │ │ │ ├── general │ │ │ ├── base.scss │ │ │ ├── reset.scss │ │ │ └── typography.scss │ │ │ ├── lib │ │ │ └── bootstrap-grid.scss │ │ │ ├── main.scss │ │ │ └── mixins │ │ │ ├── responsive.scss │ │ │ └── transition.scss │ ├── bower.json │ ├── dist │ │ ├── builder-step-1.html │ │ ├── builder-step-2.html │ │ ├── builder-step-3.html │ │ ├── builder-step-4.html │ │ ├── builder-step-5.html │ │ ├── builder-step-6.html │ │ ├── builder-step-7.html │ │ ├── dashboard-company.html │ │ ├── dashboard-individual.html │ │ ├── favicon.9c8b2c34.ico │ │ ├── images │ │ │ ├── after.05b33e94.png │ │ │ ├── avatar.d75d42ca.png │ │ │ ├── before.62605ac2.png │ │ │ ├── header.ab829a6e.jpg │ │ │ ├── logo.363f07b8.png │ │ │ ├── option-dropdown.a34aaed1.png │ │ │ ├── screenshot-background.3c42b64a.jpg │ │ │ ├── screenshot.5761ec41.png │ │ │ └── screenshot@2x.9b390fb5.png │ │ ├── index.html │ │ ├── login.html │ │ ├── register-company.html │ │ ├── register-individual.html │ │ ├── register.html │ │ └── scripts │ │ │ └── vendor │ │ │ └── modernizr.1cb556bb.js │ ├── package.json │ └── test │ │ ├── index.html │ │ └── spec │ │ └── test.js ├── frontpage │ ├── Gruntfile.js │ ├── app │ │ ├── builder-step-1.html │ │ ├── builder-step-2.html │ │ ├── builder-step-3.html │ │ ├── builder-step-4.html │ │ ├── builder-step-5.html │ │ ├── builder-step-6.html │ │ ├── builder-step-7.html │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── after.png │ │ │ ├── avatar.png │ │ │ ├── before.png │ │ │ ├── header.jpg │ │ │ ├── logo.png │ │ │ ├── option-dropdown.png │ │ │ ├── screenshot-background.jpg │ │ │ ├── screenshot.png │ │ │ └── screenshot@2x.png │ │ ├── index.html │ │ ├── login.html │ │ └── styles │ │ │ ├── components │ │ │ ├── button.scss │ │ │ ├── comparison.scss │ │ │ ├── content.scss │ │ │ ├── flexbox.scss │ │ │ ├── footer.scss │ │ │ ├── header.scss │ │ │ ├── icon-block.scss │ │ │ ├── image-builder.scss │ │ │ ├── list.scss │ │ │ ├── menu.scss │ │ │ ├── page-title.scss │ │ │ ├── plan.scss │ │ │ ├── screenshot.scss │ │ │ ├── section.scss │ │ │ ├── spacer.scss │ │ │ ├── sub-content.scss │ │ │ ├── sub-menu.scss │ │ │ └── wrapper.scss │ │ │ ├── config.scss │ │ │ ├── general │ │ │ ├── base.scss │ │ │ ├── reset.scss │ │ │ └── typography.scss │ │ │ ├── lib │ │ │ └── bootstrap-grid.scss │ │ │ ├── main.scss │ │ │ ├── mixins │ │ │ ├── responsive.scss │ │ │ └── transition.scss │ │ │ └── style.css │ ├── bower.json │ ├── dist │ │ ├── builder-step-1.html │ │ ├── builder-step-2.html │ │ ├── builder-step-3.html │ │ ├── builder-step-4.html │ │ ├── builder-step-5.html │ │ ├── builder-step-6.html │ │ ├── builder-step-7.html │ │ ├── favicon.ba8ce5ed.ico │ │ ├── images │ │ │ ├── after.05b33e94.png │ │ │ ├── avatar.d75d42ca.png │ │ │ ├── before.62605ac2.png │ │ │ ├── header.ab829a6e.jpg │ │ │ ├── logo.df56c44c.png │ │ │ ├── option-dropdown.a34aaed1.png │ │ │ ├── screenshot-background.3c42b64a.jpg │ │ │ ├── screenshot.5761ec41.png │ │ │ └── screenshot@2x.9b390fb5.png │ │ ├── index.html │ │ ├── login.html │ │ └── scripts │ │ │ └── vendor │ │ │ └── modernizr.1cb556bb.js │ ├── package.json │ └── test │ │ ├── index.html │ │ └── spec │ │ └── test.js └── launch-page │ ├── favicon.ico │ ├── images │ ├── after.png │ ├── avatar.png │ ├── before.png │ ├── brewr.png │ ├── header.jpg │ ├── logo.png │ ├── option-dropdown.png │ ├── screenshot-background.jpg │ ├── screenshot.png │ └── screenshot@2x.png │ ├── index.html │ └── styles │ ├── components │ ├── button.scss │ ├── comparison.scss │ ├── content.scss │ ├── flexbox.scss │ ├── footer.scss │ ├── header.scss │ ├── icon-block.scss │ ├── image-builder.scss │ ├── list.scss │ ├── menu.scss │ ├── page-title.scss │ ├── plan.scss │ ├── screenshot.scss │ ├── section.scss │ ├── spacer.scss │ ├── sub-content.scss │ ├── sub-menu.scss │ └── wrapper.scss │ ├── config.scss │ ├── general │ ├── base.scss │ ├── reset.scss │ └── typography.scss │ ├── lib │ └── bootstrap-grid.scss │ ├── main.css │ ├── main.scss │ ├── mixins │ ├── responsive.scss │ └── transition.scss │ └── prepros.cfg ├── frontend ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── README.md ├── bower.json ├── package.json ├── server.js ├── src │ ├── actions │ │ ├── AuthActions.js │ │ ├── AuthServerActions.js │ │ ├── BuilderActions.js │ │ ├── DockerHubActions.js │ │ ├── OrganisationActions.js │ │ ├── OrganisationServerActions.js │ │ ├── ProjectActions.js │ │ └── ProjectServerActions.js │ ├── components │ │ ├── App │ │ │ ├── App.js │ │ │ ├── App.scss │ │ │ └── package.json │ │ ├── BaseComponent.js │ │ ├── elements │ │ │ ├── AssignableMemberList │ │ │ │ ├── AssignableMemberList.js │ │ │ │ ├── AssignableMemberList.scss │ │ │ │ └── avatar.png │ │ │ ├── Builder │ │ │ │ ├── Builder.js │ │ │ │ ├── Builder.scss │ │ │ │ ├── option-dropdown-accent.png │ │ │ │ ├── option-dropdown-success.png │ │ │ │ ├── option-dropdown.png │ │ │ │ ├── package.json │ │ │ │ ├── step1.js │ │ │ │ ├── step2.js │ │ │ │ ├── step3.js │ │ │ │ ├── step4.js │ │ │ │ ├── step5.js │ │ │ │ └── step6.js │ │ │ ├── Button │ │ │ │ ├── Button.js │ │ │ │ ├── Button.scss │ │ │ │ └── package.json │ │ │ ├── CRUDList │ │ │ │ ├── CRUDList.js │ │ │ │ ├── CRUDList.scss │ │ │ │ └── package.json │ │ │ ├── DistributionPicker │ │ │ │ ├── DistributionItem.js │ │ │ │ ├── DistributionPicker.js │ │ │ │ ├── DistributionPicker.scss │ │ │ │ └── package.json │ │ │ ├── Divider │ │ │ │ ├── Divider.js │ │ │ │ ├── Divider.scss │ │ │ │ └── package.json │ │ │ ├── DockerHubSearch │ │ │ │ ├── DockerHubSearch.js │ │ │ │ ├── DockerHubSearch.scss │ │ │ │ └── package.json │ │ │ ├── DockerfileViewer │ │ │ │ ├── DockerfileViewer.js │ │ │ │ ├── DockerfileViewer.scss │ │ │ │ └── package.json │ │ │ ├── Dropdown │ │ │ │ ├── Dropdown.js │ │ │ │ ├── Dropdown.scss │ │ │ │ ├── option-dropdown-accent.png │ │ │ │ ├── option-dropdown-success.png │ │ │ │ ├── option-dropdown.png │ │ │ │ └── package.json │ │ │ ├── DropdownMenu │ │ │ │ ├── DropdownMenu.js │ │ │ │ ├── DropdownMenu.scss │ │ │ │ ├── DropdownMenuItem.js │ │ │ │ ├── caret_down.png │ │ │ │ └── package.json │ │ │ ├── FlexContainer │ │ │ │ ├── FlexContainer.js │ │ │ │ ├── FlexContainer.scss │ │ │ │ └── package.json │ │ │ ├── Footer │ │ │ │ ├── Footer.js │ │ │ │ ├── Footer.scss │ │ │ │ └── package.json │ │ │ ├── Form │ │ │ │ ├── Form.js │ │ │ │ ├── Form.scss │ │ │ │ └── package.json │ │ │ ├── HeaderSmall │ │ │ │ ├── HeaderSmall.js │ │ │ │ ├── HeaderSmall.scss │ │ │ │ └── package.json │ │ │ ├── Image │ │ │ │ ├── Image.js │ │ │ │ ├── Image.scss │ │ │ │ └── package.json │ │ │ ├── InlineContainer │ │ │ │ ├── InlineContainer.js │ │ │ │ ├── InlineContainer.scss │ │ │ │ └── package.json │ │ │ ├── Input │ │ │ │ ├── Input.js │ │ │ │ ├── Input.scss │ │ │ │ └── package.json │ │ │ ├── List │ │ │ │ ├── List.js │ │ │ │ ├── List.scss │ │ │ │ └── package.json │ │ │ ├── ListItem │ │ │ │ ├── Constants.js │ │ │ │ ├── ListItem.js │ │ │ │ ├── ListItem.scss │ │ │ │ └── package.json │ │ │ ├── ListItemMove │ │ │ │ ├── Constants.js │ │ │ │ ├── ListItemMove.js │ │ │ │ ├── ListItemMove.scss │ │ │ │ └── package.json │ │ │ ├── Logo │ │ │ │ ├── Logo.js │ │ │ │ ├── Logo.scss │ │ │ │ ├── logo.png │ │ │ │ └── package.json │ │ │ ├── MemberList │ │ │ │ ├── MemberList.js │ │ │ │ ├── MemberList.scss │ │ │ │ └── avatar.png │ │ │ ├── Panel │ │ │ │ ├── Panel.js │ │ │ │ ├── Panel.scss │ │ │ │ └── package.json │ │ │ ├── ProjectFileTable │ │ │ │ └── ProjectFileTable.js │ │ │ ├── ProjectRevisionTable │ │ │ │ └── ProjectRevisionTable.js │ │ │ ├── SideMenu │ │ │ │ ├── SideMenu.js │ │ │ │ ├── SideMenu.scss │ │ │ │ ├── SideMenuContainer.js │ │ │ │ ├── SideMenuItem.js │ │ │ │ └── package.json │ │ │ ├── TabContainer │ │ │ │ ├── TabContainer.js │ │ │ │ ├── TabContainer.scss │ │ │ │ ├── TabItem.js │ │ │ │ └── package.json │ │ │ ├── Table │ │ │ │ ├── Table.js │ │ │ │ ├── Table.scss │ │ │ │ ├── TableButtons.js │ │ │ │ ├── TableButtons.scss │ │ │ │ ├── index.js │ │ │ │ └── package.json │ │ │ ├── TextBox │ │ │ │ ├── TextBox.js │ │ │ │ ├── TextBox.scss │ │ │ │ └── package.json │ │ │ ├── Tooltip │ │ │ │ ├── Tooltip.js │ │ │ │ ├── Tooltip.scss │ │ │ │ └── package.json │ │ │ ├── ValidateInput │ │ │ │ └── ValidateInput.js │ │ │ └── Wizard │ │ │ │ ├── Wizard.js │ │ │ │ ├── Wizard.scss │ │ │ │ ├── WizardItem.js │ │ │ │ └── package.json │ │ ├── layouts │ │ │ ├── DashboardLayout │ │ │ │ ├── DashboardLayout.js │ │ │ │ ├── DashboardLayout.scss │ │ │ │ └── package.json │ │ │ └── MainLayout │ │ │ │ ├── MainLayout.js │ │ │ │ ├── MainLayout.scss │ │ │ │ └── package.json │ │ ├── pages │ │ │ ├── Builder │ │ │ │ ├── Builder.js │ │ │ │ ├── Builder.scss │ │ │ │ └── package.json │ │ │ ├── Dashboard │ │ │ │ ├── Dashboard.js │ │ │ │ ├── Dashboard.scss │ │ │ │ └── package.json │ │ │ ├── Home │ │ │ │ ├── Home.js │ │ │ │ ├── Home.scss │ │ │ │ ├── after.png │ │ │ │ ├── before.png │ │ │ │ ├── header.jpg │ │ │ │ ├── logo.png │ │ │ │ ├── option-dropdown.png │ │ │ │ ├── package.json │ │ │ │ ├── screenshot-background.jpg │ │ │ │ ├── screenshot.png │ │ │ │ └── screenshot@2x.png │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── Login.scss │ │ │ │ └── package.json │ │ │ ├── Logout │ │ │ │ ├── Logout.js │ │ │ │ └── package.json │ │ │ ├── Members │ │ │ │ ├── Members.js │ │ │ │ └── package.json │ │ │ ├── NotFound │ │ │ │ ├── NotFound.js │ │ │ │ └── package.json │ │ │ ├── Project │ │ │ │ ├── Project.js │ │ │ │ ├── Project.scss │ │ │ │ ├── avatar.png │ │ │ │ └── package.json │ │ │ ├── ProjectEditImage │ │ │ │ ├── ProjectEditImage.js │ │ │ │ ├── ProjectEditImage.scss │ │ │ │ └── package.json │ │ │ └── Register │ │ │ │ ├── Register.js │ │ │ │ ├── Register.scss │ │ │ │ └── package.json │ │ └── variables.css │ ├── constants │ │ ├── ActionTypes.js │ │ ├── DockerHubConstants.js │ │ ├── LoginConstants.js │ │ ├── ProjectConstants.js │ │ └── RegisterConstants.js │ ├── css │ │ ├── colors.js │ │ ├── colors.scss │ │ └── dimensions.scss │ ├── dispatchers │ │ └── AppDispatcher.js │ ├── index.js │ ├── index.tpl.html │ ├── routes.js │ ├── services │ │ ├── DockerHubService.js │ │ ├── ProjectService.js │ │ ├── RouterContainer.js │ │ └── TeamService.js │ ├── stores │ │ ├── AuthStore.js │ │ ├── BaseStore.js │ │ ├── DashboardStore.js │ │ ├── DockerHubStore.js │ │ ├── OrganisationStore.js │ │ ├── ProjectEditImageStore.js │ │ └── ProjectStore.js │ ├── utils │ │ ├── AuthAPIUtils.js │ │ ├── OrganisationAPIUtils.js │ │ └── ProjectAPIUtils.js │ └── validators │ │ ├── Validator.js │ │ └── constraints │ │ ├── ConfirmConstraint.js │ │ ├── Constraint.js │ │ ├── EmailConstraint.js │ │ ├── IsRequiredConstraint.js │ │ └── LengthConstraint.js ├── webpack.config.js └── webpack.production.config.js └── project ├── .editorconfig ├── .gitignore ├── .sailsrc ├── Gruntfile.js ├── README.md ├── api ├── controllers │ ├── .gitkeep │ ├── AuthController.js │ ├── OrganisationController.js │ ├── ProjectController.js │ ├── ProjectRevisionController.js │ ├── UserController.js │ └── UserSessionController.js ├── models │ ├── .gitkeep │ ├── Organisation.js │ ├── OrganisationUser.js │ ├── Project.js │ ├── ProjectEnvInfo.js │ ├── ProjectFile.js │ ├── ProjectRevision.js │ ├── ProjectUser.js │ ├── User.js │ └── UserSession.js ├── policies │ └── isAuthenticated.js ├── responses │ ├── badRequest.js │ ├── created.js │ ├── forbidden.js │ ├── notFound.js │ ├── ok.js │ ├── serverError.js │ └── unauthorized.js └── services │ ├── .gitkeep │ └── AuthService.js ├── app.js ├── assets ├── favicon.ico ├── images │ └── .gitkeep ├── js │ └── dependencies │ │ └── sails.io.js ├── robots.txt ├── styles │ └── importer.less └── templates │ └── .gitkeep ├── config ├── blueprints.js ├── bootstrap.js ├── connections.js ├── cors.js ├── csrf.js ├── env │ ├── development.js │ └── production.js ├── globals.js ├── http.js ├── i18n.js ├── locales │ ├── _README.md │ ├── de.json │ ├── en.json │ ├── es.json │ └── fr.json ├── log.js ├── models.js ├── passport.js ├── policies.js ├── routes.js ├── session.js ├── sockets.js └── views.js ├── package.json ├── tasks ├── README.md ├── config │ ├── clean.js │ ├── coffee.js │ ├── concat.js │ ├── copy.js │ ├── cssmin.js │ ├── jst.js │ ├── less.js │ ├── sails-linker.js │ ├── sync.js │ ├── uglify.js │ └── watch.js ├── pipeline.js └── register │ ├── build.js │ ├── buildProd.js │ ├── compileAssets.js │ ├── default.js │ ├── linkAssets.js │ ├── linkAssetsBuild.js │ ├── linkAssetsBuildProd.js │ ├── prod.js │ └── syncAssets.js ├── test └── fixtures │ ├── organisation.json │ ├── organisationuser.json │ ├── project.json │ ├── projectuser.json │ └── user.json └── views ├── 403.ejs ├── 404.ejs ├── 500.ejs ├── homepage.ejs └── layout.ejs /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Stupid temp dir 30 | .tmp 31 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | Brewr was designed as a tool to automatically manage your development environment. The vision was that a company would be able to sign-up and generate their "local development environments" through an easy to use GUI editor. Once that was done companies could then add developers to the project so that they could download and use the environment on their computer through the push of a button. 3 | 4 | Once updates were available for a certain image, the app should then download them and automatically install them without any downtime on the developer his/her pc. 5 | 6 | # Why it was halted 7 | The project was halted because of the lack of time, the idea together with the dashboard was developed and coded by [Xavier Geerinck (@XavierGeerinck)](https://twitter.com/XavierGeerinck), most of the design work was done by [Jesper Lindström](https://twitter.com/jesperlindstrom). After a few months my brother came along to help [Maxim Geerinck](https://twitter.com/c4d3r). 8 | 9 | I am sad to disband this project because I think it still has a lot of potential, but I hope that someone else willl pick it up and eventually transform it in a startup. I however do hope that once this happens I will get to see credits towards me for the initial idea. 10 | -------------------------------------------------------------------------------- /backend/config/app_dev.json: -------------------------------------------------------------------------------- 1 | { 2 | "database": { 3 | "client": "postgresql", 4 | "connection": { 5 | "database": "brewr", 6 | "user": "postgres", 7 | "password": "root", 8 | "port": 5432, 9 | "host": "localhost" 10 | }, 11 | "pool": { 12 | "min": 2, 13 | "max": 10 14 | }, 15 | "migrations": { 16 | "tableName": "knex_migrations", 17 | "directory": "./src/db/migrations" 18 | }, 19 | "seeds": { 20 | "directory": "./src/db/seeds" 21 | } 22 | }, 23 | "server": { 24 | "ip": "0.0.0.0", 25 | "port": 8000, 26 | "cors_client_origins": [ "*" ], 27 | "cors_headers": [ "Authorization", "Content-Type", "If-None-Match", "Bearer", "x-http-method-override" ], 28 | "cors_methods": [ "GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS" ], 29 | "cors_credentials": true, 30 | "is_debug": true, 31 | "enable_docs": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /backend/config/app_prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "database": { 3 | "client": "postgresql", 4 | "connection": { 5 | "database": "brewr", 6 | "user": "postgres", 7 | "password": "root", 8 | "port": 5432, 9 | "host": "localhost" 10 | }, 11 | "pool": { 12 | "min": 2, 13 | "max": 10 14 | }, 15 | "migrations": { 16 | "tableName": "knex_migrations", 17 | "directory": "./src/db/migrations" 18 | }, 19 | "seeds": { 20 | "directory": "./src/db/seeds" 21 | } 22 | }, 23 | "server": { 24 | "ip": "0.0.0.0", 25 | "port": 8000, 26 | "cors_client_origins": [ "*" ], 27 | "cors_headers": [ "Authorization", "Content-Type", "If-None-Match", "Bearer", "x-http-method-override" ], 28 | "cors_methods": [ "GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS" ], 29 | "cors_credentials": true, 30 | "is_debug": true, 31 | "enable_docs": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /backend/config/app_stag.json: -------------------------------------------------------------------------------- 1 | { 2 | "database": { 3 | "client": "postgresql", 4 | "connection": { 5 | "database": "brewr", 6 | "user": "postgres", 7 | "password": "root", 8 | "port": 5432, 9 | "host": "localhost" 10 | }, 11 | "pool": { 12 | "min": 2, 13 | "max": 10 14 | }, 15 | "migrations": { 16 | "tableName": "knex_migrations", 17 | "directory": "./src/db/migrations" 18 | }, 19 | "seeds": { 20 | "directory": "./src/db/seeds" 21 | } 22 | }, 23 | "server": { 24 | "ip": "0.0.0.0", 25 | "port": 8000, 26 | "cors_client_origins": [ "*" ], 27 | "cors_headers": [ "Authorization", "Content-Type", "If-None-Match", "Bearer", "x-http-method-override" ], 28 | "cors_methods": [ "GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS" ], 29 | "cors_credentials": true, 30 | "is_debug": true, 31 | "enable_docs": false 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /backend/config/app_test.json: -------------------------------------------------------------------------------- 1 | { 2 | "database": { 3 | "client": "postgresql", 4 | "connection": { 5 | "database": "brewr", 6 | "user": "postgres", 7 | "password": "root", 8 | "port": 5432, 9 | "host": "localhost" 10 | }, 11 | "pool": { 12 | "min": 2, 13 | "max": 10 14 | }, 15 | "migrations": { 16 | "tableName": "knex_migrations", 17 | "directory": "./src/db/migrations" 18 | }, 19 | "seeds": { 20 | "directory": "./src/db/seeds" 21 | } 22 | }, 23 | "server": { 24 | "ip": "0.0.0.0", 25 | "port": 8000, 26 | "cors_client_origins": [ "*" ], 27 | "cors_headers": [ "Authorization", "Content-Type", "If-None-Match", "Bearer", "x-http-method-override" ], 28 | "cors_methods": [ "GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS" ], 29 | "cors_credentials": true, 30 | "is_debug": false, 31 | "enable_docs": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /backend/config/index.js: -------------------------------------------------------------------------------- 1 | var defaultenv = 'dev'; 2 | var allowed = ['dev', 'stag', 'prod', 'test']; 3 | 4 | var config; 5 | 6 | if ((allowed.indexOf(process.argv[2]) === -1) && !process.env.NODE_ENV) { 7 | config = require(process.cwd() + '/config/app_dev'); 8 | } else { 9 | config = require(process.cwd() + '/config/app_' + (process.env.NODE_ENV || process.argv[2] || defaultenv)); 10 | } 11 | 12 | module.exports = config; 13 | -------------------------------------------------------------------------------- /backend/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Server require 4 | var server = require('./server'); 5 | var config = require('./config'); 6 | 7 | // Start 8 | server.start(function (err) { 9 | if (err) { 10 | throw err; 11 | } 12 | 13 | console.log('Server started on ' + config.server.ip + ':' + config.server.port); 14 | server.log(['info', 'server'], 'Server started on ' + config.server.ip + ':' + config.server.port); 15 | }); 16 | -------------------------------------------------------------------------------- /backend/knexfile.js: -------------------------------------------------------------------------------- 1 | var config = require('./config'); 2 | module.exports = config.database 3 | -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "./index.js", 3 | "name": "Brewr-Backend", 4 | "private": true, 5 | "version": "0.0.0", 6 | "dependencies": { 7 | "async": "^1.4.2", 8 | "bcrypt": "0.8.5", 9 | "bluebird": "^2.10.0", 10 | "bookshelf": "^0.8.2", 11 | "boom": "^2.8.0", 12 | "code": "^1.5.0", 13 | "dogwater": "^1.0.1", 14 | "hapi": "^10.0.0", 15 | "hapi-auth-bearer-simple": "^1.2.3", 16 | "inert": "^3.1.0", 17 | "joi": "^6.7.0", 18 | "knex": "^0.8.6", 19 | "lab": "^6.1.0", 20 | "lodash": "^3.10.1", 21 | "lout": "^7.2.0", 22 | "node-uuid": "^1.4.3", 23 | "pg": "^4.4.1", 24 | "require-all": "^1.1.0", 25 | "sails-postgresql": "^0.10.16", 26 | "underscore": "^1.8.3", 27 | "uuid": "^2.0.1", 28 | "vision": "^3.0.0" 29 | }, 30 | "scripts": { 31 | "test": "lab -a code -v -t 90 -m 6000" 32 | }, 33 | "devDependencies": { 34 | "code": "^1.5.0", 35 | "lab": "^5.18.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /backend/src/controllers/ProjectRevisionController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ProjectRevisionController 3 | * 4 | * @description :: Server-side logic for managing projectrevisions 5 | * @help :: See http://sailsjs.org/#!/documentation/concepts/Controllers 6 | */ 7 | 8 | module.exports = { 9 | 10 | }; 11 | 12 | -------------------------------------------------------------------------------- /backend/src/controllers/UserSessionController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UserSessionController 3 | * 4 | * @description :: Server-side logic for managing usersessions 5 | * @help :: See http://sailsjs.org/#!/documentation/concepts/Controllers 6 | */ 7 | 8 | exports.getCurrent = function (request, reply) { 9 | // TODO 10 | }; 11 | 12 | exports.getAll = function (request, reply) { 13 | // TODO 14 | }; 15 | 16 | exports.removeByToken = function (request, reply) { 17 | // TODO 18 | }; 19 | 20 | exports.removeAll = function (request, reply) { 21 | // TODO 22 | }; 23 | -------------------------------------------------------------------------------- /backend/src/db/index.js: -------------------------------------------------------------------------------- 1 | var config = require('../../config'); 2 | var knex = require('knex')(config.database); 3 | var bookshelf = require('bookshelf')(knex); 4 | 5 | // Load the visibility plugin so that we can hide fields with hidden: [] 6 | bookshelf.plugin('visibility'); 7 | 8 | // Load the registry plugin so that we register the models first 9 | bookshelf.plugin('registry'); 10 | 11 | bookshelf.plugin('virtuals'); 12 | 13 | module.exports = bookshelf; 14 | -------------------------------------------------------------------------------- /backend/src/db/models/Organisation.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var uuid = require('node-uuid'); 3 | var User = require('./User'); 4 | var OrganisationUser = require('./OrganisationUser'); 5 | var ProjectUser = require('./ProjectUser'); 6 | var Project = require('./Project'); 7 | 8 | var Organisation = Bookshelf.model('Organisation', { 9 | tableName: 'organisation', 10 | hasTimestamps: true, // Define that we update the created_at and updated_at on change 11 | hidden: [ ], 12 | 13 | // On creation, set uuid 14 | initialize: function(params) { 15 | this.on('saving', this._generateUUID); 16 | }, 17 | 18 | _generateUUID: function (model, attrs, options) { 19 | if (model.isNew()) { 20 | model.set('uuid', uuid.v4()); 21 | } 22 | }, 23 | 24 | owner: function () { 25 | return this.belongsTo('User'); 26 | }, 27 | created_by: function() { 28 | return this.belongsTo('User', 'created_by'); 29 | }, 30 | projects: function () { 31 | return this.hasMany('Project'); 32 | }, 33 | users: function () { 34 | return this.belongsToMany('User', 'organisation_user', 'organisation_id', 'user_id').withPivot('is_manager');; 35 | } 36 | }); 37 | 38 | module.exports = Organisation; 39 | -------------------------------------------------------------------------------- /backend/src/db/models/OrganisationUser.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var User = require('./User'); 3 | var Organisation = require('./Organisation'); 4 | 5 | var OrganisationUser = Bookshelf.model('OrganisationUser', { 6 | tableName: 'organisation_user', 7 | idAttribute: [ 'user_id', 'organisation_id' ], 8 | organisation: function () { 9 | return this.belongsTo('Organisation'); 10 | }, 11 | user: function() { 12 | return this.belongsTo('User'); 13 | } 14 | }); 15 | 16 | module.exports = OrganisationUser; 17 | -------------------------------------------------------------------------------- /backend/src/db/models/Project.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var User = require('./User'); 3 | var ProjectRevision = require('./ProjectRevision'); 4 | var Organisation = require('./Organisation'); 5 | 6 | var Project = Bookshelf.model('Project', { 7 | tableName: 'project', 8 | hasTimestamps: true, // Define that we update the created_at and updated_at on change 9 | hidden: [ 'users' ], 10 | virtuals: { 11 | members: function () { 12 | var members = this.related('users'); 13 | members.push(this.related('created_by')); 14 | return members; 15 | } 16 | }, 17 | owner: function () { 18 | return this.belongsTo('User'); 19 | }, 20 | created_by: function() { 21 | return this.belongsTo('User', 'created_by'); 22 | }, 23 | users: function () { 24 | return this.belongsToMany('User', 'project_user', 'project_id', 'user_id').withPivot('is_manager'); 25 | }, 26 | 27 | revisions: function () { 28 | return this.hasMany('ProjectRevision'); 29 | }, 30 | organisation: function () { 31 | return this.belongsTo('Organisation'); 32 | }, 33 | 34 | // many-to-many 35 | projectTeams: function() { 36 | return this.hasMany('ProjectTeam'); 37 | }, 38 | projectUsers: function () { 39 | return this.hasMany('ProjectUser'); 40 | }, 41 | }); 42 | 43 | module.exports = Project; 44 | -------------------------------------------------------------------------------- /backend/src/db/models/ProjectEnvInfo.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var ProjectRevision = require('./ProjectRevision'); 3 | 4 | var ProjectEnvInfo = Bookshelf.model('ProjectEnvInfo', { 5 | tableName: 'project_env_info', 6 | // A projectEnvInfo always belongs to one or more revisions (more if not changed) 7 | projectRevision: function () { 8 | return this.hasMany('ProjectRevision'); 9 | } 10 | }); 11 | 12 | module.exports = ProjectEnvInfo; 13 | -------------------------------------------------------------------------------- /backend/src/db/models/ProjectFile.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var User = require('./User'); 3 | var ProjectRevision = require('./ProjectRevision'); 4 | 5 | var ProjectFile = Bookshelf.model('ProjectFile', { 6 | tableName: 'project_file', 7 | projectRevisions: function () { 8 | // model jointable col1 col2 9 | return this.belongsToMany('ProjectRevision', 'project_revision_file', 'project_revision_id', 'project_file_id'); 10 | }, 11 | added_by: function () { 12 | return this.belongsTo('User'); 13 | } 14 | }); 15 | 16 | module.exports = ProjectFile; 17 | -------------------------------------------------------------------------------- /backend/src/db/models/ProjectRevision.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var Project = require('./Project'); 3 | var ProjectFile = require('./ProjectFile'); 4 | var ProjectUser = require('./ProjectUser'); 5 | 6 | var ProjectRevision = Bookshelf.model('ProjectRevision', { 7 | tableName: 'project_revision', 8 | hasTimestamps: true, // Define that we update the created_at and updated_at on change 9 | users: function () { 10 | return this.belongsToMany('ProjectUser'); 11 | }, 12 | project: function () { 13 | return this.belongsTo('Project'); 14 | }, 15 | // Many to many, a file can belong to multiple revs since we can reuse them if not changed 16 | projectFiles: function () { 17 | // model jointable col1 col2 18 | return this.belongsToMany('ProjectFile', 'project_revision_file', 'project_file_id', 'project_revision_id'); 19 | }, 20 | // A projectRevision always has an environmentInfo 21 | projectEnvInfo: function () { 22 | return this.belongsTo('ProjectEnvInfo'); 23 | } 24 | }); 25 | 26 | module.exports = ProjectRevision; 27 | -------------------------------------------------------------------------------- /backend/src/db/models/ProjectRole.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../') 2 | , User = require('./User') 3 | , Project = require('./Project'); 4 | 5 | var ProjectRole = Bookshelf.model('ProjectRole', { 6 | tableName: 'project_role', 7 | hasTimestamps: true, 8 | project: function() { 9 | return this.belongsTo('Project'); 10 | }, 11 | user: function() { 12 | return this.belongsTo('User'); 13 | } 14 | }); 15 | 16 | module.exports = ProjectRole; -------------------------------------------------------------------------------- /backend/src/db/models/ProjectTeam.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../') 2 | , User = require('./User') 3 | , Team = require('./Team'); 4 | 5 | var ProjectTeam = Bookshelf.model('ProjectTeam', { 6 | tableName: 'project_team', 7 | idAttribute: [ 'user_id', 'team_id' ], 8 | project: function () { 9 | return this.belongsTo('Project'); 10 | }, 11 | team: function() { 12 | return this.belongsTo('Team'); 13 | } 14 | }); 15 | 16 | module.exports = ProjectTeam; 17 | -------------------------------------------------------------------------------- /backend/src/db/models/ProjectUser.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var User = require('./User'); 3 | var Project = require('./Project'); 4 | 5 | var ProjectUser = Bookshelf.model('ProjectUser', { 6 | tableName: 'project_user', 7 | idAttribute: [ 'user_id', 'project_id' ], 8 | project: function () { 9 | return this.belongsTo('Project'); 10 | }, 11 | user: function() { 12 | return this.belongsTo('User'); 13 | } 14 | }); 15 | 16 | module.exports = ProjectUser; 17 | -------------------------------------------------------------------------------- /backend/src/db/models/Team.js: -------------------------------------------------------------------------------- 1 | var Bookschelf = require('../') 2 | , User = require('./User') 3 | , Organisation = require('./Organisation') 4 | , Project = require('./Project') 5 | , ProjectTeam = require('./ProjectTeam'); 6 | 7 | var Team = Bookschelf.model('Team', { 8 | 9 | tableName: 'team', 10 | hasTimestamps: true, 11 | team_leader: function() { 12 | return this.belongsTo('User'); 13 | }, 14 | organisation: function() { 15 | return this.belongsTo('Organisation'); 16 | }, 17 | created_by: function() { 18 | return this.belongsTo('User'); 19 | }, 20 | 21 | // many-to-many 22 | projectTeams: function() { 23 | return this.hasMany('ProjectTeam'); 24 | }, 25 | 26 | // one-to-many 27 | members: function(){ 28 | return this.belongsToMany('User'); 29 | }, 30 | projects: function() { 31 | return this.belongsToMany('Project'); 32 | } 33 | }); 34 | 35 | module.exports = Team; -------------------------------------------------------------------------------- /backend/src/db/models/TeamRole.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../') 2 | , User = require('./User') 3 | , Team = require('./Team'); 4 | 5 | var TeamRole = Bookshelf.model('TeamRole', { 6 | tableName: 'team_role', 7 | hasTimestamps: true, 8 | team: function() { 9 | return this.belongsTo('Team'); 10 | }, 11 | user: function() { 12 | return this.belongsTo('User'); 13 | } 14 | }); 15 | 16 | module.exports = TeamRole; -------------------------------------------------------------------------------- /backend/src/db/models/TeamUser.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../') 2 | , User = require('./User') 3 | , Team = require('./Team'); 4 | 5 | var TeamUser= Bookshelf.model('TeamUser', { 6 | tableName: 'team_user', 7 | 8 | // many-to-one 9 | team: function () { 10 | return this.belongsTo('Team'); 11 | }, 12 | user: function() { 13 | return this.belongsTo('User'); 14 | } 15 | }); 16 | 17 | module.exports = TeamUser; 18 | -------------------------------------------------------------------------------- /backend/src/db/models/UserSession.js: -------------------------------------------------------------------------------- 1 | var Bookshelf = require('../'); 2 | var User = require('./User'); 3 | 4 | var UserSession = Bookshelf.Model.extend({ 5 | tableName: 'user_session', 6 | hasTimestamps: true, // Define that we update the created_at and updated_at on change 7 | user: function () { 8 | return this.belongsTo('User'); 9 | } 10 | }); 11 | 12 | module.exports = Bookshelf.model('UserSession', UserSession); 13 | -------------------------------------------------------------------------------- /backend/src/db/seeds/init.js: -------------------------------------------------------------------------------- 1 | var data = require('./data.json'); 2 | var async = require('async'); 3 | var dbUtil = require('../utils/dbUtil'); 4 | 5 | exports.seed = function(knex, Promise) { 6 | return dbUtil.truncate().then(function() { return dbUtil.seed(); }); 7 | }; 8 | -------------------------------------------------------------------------------- /backend/src/plugins/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/backend/src/plugins/.gitkeep -------------------------------------------------------------------------------- /backend/test/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/backend/test/.gitkeep -------------------------------------------------------------------------------- /backend/test/unit/services/project.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // TEST SETUP 4 | var Code = require('Code'); 5 | var Lab = require('lab'); 6 | var Hapi = require('hapi'); 7 | 8 | var lab = exports.lab = Lab.script(); 9 | var it = lab.it; 10 | var expect = Code.expect; 11 | 12 | // Test specific 13 | var config = require(process.cwd() + '/config'); 14 | var dbUtil = require(process.cwd() + '/src/db/utils/dbUtil.js'); 15 | var server = require(process.cwd() + '/server'); 16 | var fixtures = require(process.cwd() + '/src/db/seeds/data.json'); 17 | 18 | var ProjectService = require(process.cwd() + '/src/services/ProjectService'); 19 | 20 | lab.experiment('[Services] Project', function() { 21 | lab.beforeEach(function (done) { 22 | return dbUtil.truncate().then(dbUtil.seed).then(function() { done(); }); 23 | }); 24 | 25 | lab.after(function (done) { 26 | return dbUtil.truncate().then(function() { done(); }); 27 | }); 28 | 29 | 30 | // ===================== 31 | // BASIC PROJECT 32 | // ===================== 33 | it('A new project should be created with a uuid', function (done) { 34 | done(); 35 | }); 36 | 37 | it('getting a project should return a uuid as it\'s id', function (done) { 38 | done(); 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /design/builder/README.md: -------------------------------------------------------------------------------- 1 | # Setup 2 | 1. `npm install` 3 | 2. `grunt serve --force` 4 | -------------------------------------------------------------------------------- /design/builder/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/favicon.ico -------------------------------------------------------------------------------- /design/builder/app/images/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/after.png -------------------------------------------------------------------------------- /design/builder/app/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/avatar.png -------------------------------------------------------------------------------- /design/builder/app/images/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/before.png -------------------------------------------------------------------------------- /design/builder/app/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/header.jpg -------------------------------------------------------------------------------- /design/builder/app/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/logo.png -------------------------------------------------------------------------------- /design/builder/app/images/option-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/option-dropdown.png -------------------------------------------------------------------------------- /design/builder/app/images/screenshot-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/screenshot-background.jpg -------------------------------------------------------------------------------- /design/builder/app/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/screenshot.png -------------------------------------------------------------------------------- /design/builder/app/images/screenshot@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/app/images/screenshot@2x.png -------------------------------------------------------------------------------- /design/builder/app/styles/components/comparison.scss: -------------------------------------------------------------------------------- 1 | #comparison { 2 | margin-top: $spacing; 3 | margin-left: auto; 4 | margin-right: auto; 5 | max-width: 800px; 6 | 7 | img { 8 | margin-top: $spacing; 9 | } 10 | 11 | h4 { 12 | font-weight: normal; 13 | font-size: 24px; 14 | margin-top: $spacing; 15 | margin-bottom: $spacing / 2; 16 | 17 | .success { 18 | color: $colorSuccess; 19 | } 20 | } 21 | 22 | p { 23 | line-height: 1.5; 24 | font-size: 18px; 25 | opacity: 0.7; 26 | } 27 | 28 | .line { 29 | width: 2px; 30 | background-color: #dedede; 31 | height: 110px; 32 | margin-right: auto; 33 | margin-left: auto; 34 | } 35 | 36 | .vs { 37 | padding: 20px; 38 | font-weight: bold; 39 | color: #999; 40 | } 41 | } -------------------------------------------------------------------------------- /design/builder/app/styles/components/content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | h1 { 3 | background-color: $colorPrimaryLightShade1; 4 | margin: 0; 5 | padding: 10px 20px; 6 | color: $colorTextHeader; 7 | display: block; 8 | text-transform: uppercase; 9 | color: $colorTextTitle; 10 | font-size: 20px; 11 | font-weight: normal; 12 | 13 | #step { 14 | float: right; 15 | font-size: 12px; 16 | line-height: 22px; 17 | } 18 | } 19 | } 20 | 21 | .content > .container { 22 | height: 100%; 23 | margin-left: 200px; 24 | position: relative; 25 | } 26 | 27 | @media screen and (max-width: 600px) { 28 | .content > .container { 29 | height: 100%; 30 | margin-left: 50px; 31 | position: relative; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/flexbox.scss: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | width: 100%; 3 | padding: 0; 4 | // margin: 0 30px 30px 30px; 5 | list-style: none; 6 | 7 | -ms-box-orient: horizontal; 8 | display: -webkit-box; 9 | display: -moz-box; 10 | display: -ms-flexbox; 11 | display: -moz-flex; 12 | display: -webkit-flex; 13 | display: flex; 14 | 15 | // Space between gives margin within boxes 16 | -webkit-justify-content: space-between; 17 | justify-content: space-between; 18 | 19 | align-items: center; 20 | flex-flow: wrap; 21 | } 22 | 23 | .flex-container > .container { 24 | padding-right: 0; 25 | width: 100%; 26 | } 27 | 28 | .flex-item { 29 | margin: 10px; 30 | 31 | color: white; 32 | font-weight: bold; 33 | font-size: 14px; 34 | text-align: center; 35 | 36 | flex-grow: 3; 37 | 38 | padding: 10px; 39 | } 40 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding: $spacing; 3 | background-color: $colorText; 4 | color: #fff; 5 | height: 120px; 6 | width: 100%; 7 | height: auto; 8 | bottom: 0; 9 | 10 | z-index: 1; 11 | position: absolute; 12 | 13 | .logo { 14 | background-image: url(../images/logo.png); 15 | background-size: 166px 40px; 16 | display: block; 17 | width: 166px; 18 | height: 40px; 19 | float: left; 20 | } 21 | 22 | .links { 23 | a { 24 | color: #fff; 25 | opacity: 0.5; 26 | padding: 12px; 27 | display: inline-block; 28 | text-decoration: none; 29 | 30 | &:hover { 31 | opacity: 1; 32 | } 33 | } 34 | 35 | .divider { 36 | height: 10px; 37 | width: 1px; 38 | background-color: #fff; 39 | opacity: 0.2; 40 | display: inline-block; 41 | } 42 | } 43 | 44 | .circle { 45 | color: #fff; 46 | width: 36px; 47 | height: 36px; 48 | border: 2px solid #fff; 49 | display: inline-block; 50 | text-align: center; 51 | border-radius: 50%; 52 | line-height: 34px; 53 | margin-left: 10px; 54 | margin-top: 3px; 55 | 56 | &:hover { 57 | background-color: #fff; 58 | color: $colorText; 59 | } 60 | } 61 | } 62 | 63 | #license { 64 | background-color: darken($colorText, 3%); 65 | padding: $spacing/2; 66 | text-align: center; 67 | color: #555; 68 | font-size: 12px; 69 | 70 | a { 71 | color: #555; 72 | text-decoration: none; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/form.scss: -------------------------------------------------------------------------------- 1 | input { 2 | width: 100%; 3 | padding: 10px 10px; 4 | font-weight: normal; 5 | color: $colorBlack; 6 | display: inline-block; 7 | box-sizing: border-box; 8 | border: 1px solid $colorBoxBorder; 9 | margin-bottom: 20px; 10 | } 11 | 12 | label { 13 | color: $colorBlack; 14 | text-align: left; 15 | font-weight: normal; 16 | margin-bottom: 10px; 17 | display: block; 18 | text-transform: uppercase; 19 | font-size: 16px; 20 | } 21 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/icon-block.scss: -------------------------------------------------------------------------------- 1 | .icon-block { 2 | .circle { 3 | font-size: 42px; 4 | border: 6px solid #000; 5 | display: inline-block; 6 | height: 120px; 7 | width: 120px; 8 | line-height: 112px; 9 | border-radius: 50%; 10 | 11 | 12 | &.accent { 13 | border-color: $colorAccent; 14 | color: $colorAccent; 15 | } 16 | 17 | &.success { 18 | border-color: $colorSuccess; 19 | color: $colorSuccess; 20 | } 21 | 22 | &.info { 23 | border-color: $colorInfo; 24 | color: $colorInfo; 25 | } 26 | } 27 | 28 | h3 { 29 | font-size: 24px; 30 | margin-top: $spacing/2; 31 | margin-bottom: $spacing/4; 32 | } 33 | 34 | p.subtitle { 35 | max-width: 320px; 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | 40 | // Crappy centering workarounds 41 | i.fa-play { 42 | margin-right: -10px; 43 | } 44 | } -------------------------------------------------------------------------------- /design/builder/app/styles/components/list.scss: -------------------------------------------------------------------------------- 1 | .sub-content li { 2 | background-color: white; 3 | font-size: 14px; 4 | border-top: 1px solid $colorBoxBorder; 5 | border-left: 1px solid $colorBoxBorder; 6 | border-right: 1px solid $colorBoxBorder; 7 | text-align: left; 8 | height: 35px; 9 | position: relative; 10 | line-height: 35px; 11 | padding-left: 10px; 12 | 13 | a { 14 | width: 35px; 15 | line-height: 35px; 16 | padding: 0; 17 | text-align: center; 18 | top: 0; 19 | } 20 | 21 | a:first-child { 22 | margin-left: -10px; // negate the padding-left 23 | border-right: 1px solid $colorBoxBorder; 24 | background-color: $colorLeftListPart; 25 | color: $colorLeftListPartText; 26 | left: 0; 27 | display: inline-block; 28 | position: initial; 29 | margin-right: 10px; 30 | } 31 | 32 | a:last-child { 33 | margin: 0; 34 | border-right: none; 35 | border-left: 1px solid $colorBoxBorder; 36 | right: 0; 37 | position: absolute; 38 | left: initial; 39 | } 40 | } 41 | 42 | .sub-content li:last-child { 43 | border-top: 1px solid $colorBoxBorder; 44 | border-bottom: 1px solid $colorBoxBorder; 45 | } 46 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/menu.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | //position: fixed; 3 | position: absolute; 4 | width: 100%; 5 | top: 0; 6 | padding-top: $spacing; 7 | padding-bottom: $spacing; 8 | 9 | .logo { 10 | background-image: url(../images/logo.png); 11 | background-size: 166px 40px; 12 | display: block; 13 | width: 166px; 14 | height: 40px; 15 | float: left; 16 | margin-left: 10px; 17 | } 18 | 19 | ul { 20 | float: right; 21 | 22 | li { 23 | list-style: none; 24 | display: inline-block; 25 | 26 | a { 27 | display: block; 28 | color: #fff; 29 | margin-left: $spacing/2; 30 | font-size: 16px; 31 | text-decoration: none; 32 | font-weight: bold; 33 | letter-spacing: 1px; 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/page-title.scss: -------------------------------------------------------------------------------- 1 | .page-title { 2 | h1 { 3 | background-color: $colorPrimaryLightShade2; 4 | margin: 0; 5 | padding: 10px 20px 10px 240px; 6 | display: block; 7 | color: $colorTextTitle; 8 | font-size: 20px; 9 | font-weight: normal; 10 | letter-spacing: 1px; 11 | 12 | #step { 13 | float: right; 14 | font-size: 12px; 15 | line-height: 22px; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/plan.scss: -------------------------------------------------------------------------------- 1 | .plan { 2 | background-color: #fff; 3 | width: 360px; 4 | text-align: center; 5 | display: inline-block; 6 | color: $colorText; 7 | border-radius: 3px; 8 | margin-left: 10px; 9 | margin-right: 10px; 10 | 11 | li { 12 | list-style: none; 13 | text-align: left; 14 | font-weight: bold; 15 | line-height: 2; 16 | 17 | &.disabled { 18 | color: #999; 19 | } 20 | 21 | i { 22 | margin-right: 10px; 23 | } 24 | } 25 | 26 | .title { 27 | font-size: 24px; 28 | font-weight: bold; 29 | margin-top: $spacing/2; 30 | } 31 | 32 | .subtitle { 33 | font-size: 18px; 34 | margin-top: 3px; 35 | margin-bottom: $spacing/2; 36 | } 37 | 38 | .price { 39 | background-color: $colorPrimaryHighlight; 40 | color: #fff; 41 | padding: $spacing/2; 42 | font-size: 22px; 43 | font-weight: bold; 44 | 45 | &.success { 46 | background-color: $colorSuccess; 47 | } 48 | 49 | small { 50 | font-size: 14px; 51 | } 52 | } 53 | 54 | .button { 55 | margin-bottom: $spacing / 2; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/screenshot.scss: -------------------------------------------------------------------------------- 1 | #screenshot { 2 | background-color: $colorPrimary; 3 | background-image: url(../images/screenshot-background.jpg); 4 | background-size: cover; 5 | background-position: center bottom; 6 | padding-top: $spacing * 2; 7 | color: #fff; 8 | overflow: hidden; 9 | 10 | p.subtitle { 11 | max-width: 520px; 12 | font-size: 18px; 13 | margin-right: auto; 14 | margin-left: auto; 15 | line-height: 1.5; 16 | opacity: 0.6; 17 | } 18 | } 19 | 20 | #screenshot-image { 21 | background-image: url(../images/screenshot.png); 22 | background-size: 770px 474px; 23 | width: 770px; 24 | height: 474px; 25 | margin-right: auto; 26 | margin-left: auto; 27 | margin-top: $spacing; 28 | 29 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 30 | background-image: url(../images/screenshot@2x.png); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/section.scss: -------------------------------------------------------------------------------- 1 | section { 2 | background-color: $colorBackground; 3 | 4 | &.padding { 5 | padding: $spacing; 6 | } 7 | 8 | &.padding-double { 9 | padding: $spacing * 2; 10 | } 11 | 12 | &.centered { 13 | text-align: center; 14 | } 15 | 16 | &.accent { 17 | background-color: $colorAccent; 18 | color: #fff; 19 | } 20 | 21 | &.dark { 22 | background-color: $colorSecondary; 23 | color: #fff; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/spacer.scss: -------------------------------------------------------------------------------- 1 | .spacer { 2 | height: $spacing; 3 | } 4 | 5 | .spacer-half { 6 | height: $spacing / 2; 7 | } 8 | 9 | .spacer-double { 10 | height: $spacing * 2; 11 | } 12 | 13 | .padding { 14 | padding: $spacing; 15 | } 16 | 17 | .padding-half { 18 | padding: $spacing / 2; 19 | } -------------------------------------------------------------------------------- /design/builder/app/styles/components/sub-content.scss: -------------------------------------------------------------------------------- 1 | .sub-content { 2 | margin: 0 auto; 3 | 4 | h1 { 5 | color: $colorText; 6 | background-color: transparent; 7 | font-size: 18px; 8 | text-transform: none; 9 | text-align: center; 10 | margin-bottom: 20px; 11 | width: 100%; 12 | } 13 | 14 | h2 { 15 | color: $colorBlack; 16 | text-align: left; 17 | font-weight: normal; 18 | margin-bottom: 10px; 19 | display: block; 20 | text-transform: uppercase; 21 | font-size: 16px; 22 | } 23 | 24 | ul { 25 | padding: 0; 26 | display: block; 27 | list-style: none; 28 | color: $colorText; 29 | font-weight: normal; 30 | font-size: 14px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/builder/app/styles/components/wrapper.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: relative; 3 | padding-bottom: 120px; // Footer 4 | padding-top: 100px; // Header 5 | min-height:100%; 6 | } 7 | 8 | .wrapper-no-header { 9 | position: relative; 10 | padding-bottom: 120px; // Footer 11 | min-height:100%; 12 | } 13 | -------------------------------------------------------------------------------- /design/builder/app/styles/config.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $colorWhite: #FFFFFF; 3 | $colorBlack: #000000; 4 | 5 | $colorHelpBox: #333333; 6 | $colorHelpIcon: #333333; 7 | $colorHelpIconHover: #999999; 8 | 9 | $colorBackground: #F5F5F5; 10 | 11 | $colorPrimaryLightShade1: #2a3c50; 12 | $colorPrimaryLightShade2: #32465d; 13 | $colorPrimaryLightShade3: #39506A; 14 | $colorPrimary: #233141; 15 | $colorPrimaryDarkShade1: #151E28; 16 | $colorPrimaryDarkShade2: #1D2835; 17 | 18 | $colorMenuItem: #d3d6d9; 19 | $colorMenuItemActive: #56789f; 20 | 21 | $colorBoxBorder: #cccccc; 22 | 23 | $colorButtonNext: #f15843; 24 | $colorButtonNextHover: #ff604b; 25 | $colorLeftListPart: #F7F7F7; 26 | $colorLeftListPartText: #6C6C6C; 27 | 28 | $colorSecondary: #1c2632; 29 | $colorAccent: #f15843; 30 | $colorSuccess: #41b222; 31 | $colorLight: #999999; 32 | $colorText: #101010; 33 | $colorTextHeader: #32465d; 34 | $colorTextTitle: #ffffff; 35 | $colorBlue: #227ab2; 36 | $colorSuccess: #41b222; 37 | $colorInfo: #227ab2; 38 | $colorPrimaryHighlight: #3a4856; 39 | $colorBgDropdown: #E9E9E9; 40 | 41 | // Generic 42 | $spacing: 40px; 43 | -------------------------------------------------------------------------------- /design/builder/app/styles/general/base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | font-size: 16px; 4 | color: $colorText; 5 | background-color: $colorBackground; 6 | } 7 | 8 | a { 9 | color: $colorAccent; 10 | } 11 | 12 | .accent a { 13 | color: #fff; 14 | } 15 | -------------------------------------------------------------------------------- /design/builder/app/styles/general/reset.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | .clearfix { 12 | clear: both; 13 | } 14 | 15 | *:focus { 16 | outline: none; 17 | } -------------------------------------------------------------------------------- /design/builder/app/styles/general/typography.scss: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-size: 36px; 3 | font-weight: normal; 4 | letter-spacing: 1px; 5 | margin-bottom: $spacing/2; 6 | 7 | &.smaller { 8 | font-size: 28px; 9 | } 10 | } 11 | 12 | body { 13 | font-family: "Open Sans", sans-serif; 14 | } 15 | 16 | h1 { 17 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | } 19 | 20 | .subtitle { 21 | font-size: 18px; 22 | opacity: 0.6; 23 | line-height: 1.5; 24 | } 25 | 26 | section .subtitle { 27 | max-width: 600px; 28 | margin-right: auto; 29 | margin-left: auto; 30 | } 31 | 32 | .bold { 33 | font-weight: bold; 34 | } 35 | 36 | .small { 37 | font-size: 14px; 38 | } 39 | 40 | .align-left { 41 | text-align: left; 42 | } 43 | 44 | .align-center { 45 | text-align: center; 46 | } 47 | 48 | .align-right { 49 | text-align: right; 50 | } 51 | 52 | .text-accent { 53 | color: $colorAccent; 54 | } 55 | 56 | .text-info { 57 | color: $colorInfo; 58 | } 59 | 60 | .text-success { 61 | color: $colorSuccess; 62 | } 63 | 64 | .text-disabled { 65 | color: #777; 66 | } 67 | -------------------------------------------------------------------------------- /design/builder/app/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Configuration 2 | @import 'config'; 3 | 4 | // Third party dependencies 5 | @import 'lib/bootstrap-grid'; 6 | 7 | // General 8 | @import 'general/reset'; 9 | @import 'general/base'; 10 | @import 'general/typography'; 11 | 12 | // Mixins 13 | @import 'mixins/transition'; 14 | @import 'mixins/responsive'; 15 | 16 | // UI components 17 | @import 'components/header'; 18 | @import 'components/menu'; 19 | @import 'components/button'; 20 | @import 'components/section'; 21 | @import 'components/icon-block'; 22 | @import 'components/screenshot'; 23 | @import 'components/spacer'; 24 | @import 'components/footer'; 25 | @import 'components/plan'; 26 | @import 'components/comparison'; 27 | @import 'components/flexbox'; 28 | @import 'components/image-builder'; 29 | @import 'components/sub-menu'; 30 | @import 'components/list'; 31 | @import 'components/content'; 32 | @import 'components/sub-content'; 33 | @import 'components/page-title'; 34 | @import 'components/wrapper'; 35 | @import 'components/form'; 36 | @import 'components/responsive'; 37 | -------------------------------------------------------------------------------- /design/builder/app/styles/mixins/responsive.scss: -------------------------------------------------------------------------------- 1 | // $xs: ~"screen and (max-width: 768px)"; 2 | // $sm: ~"screen and (max-width: 992px)"; 3 | // $md: ~"screen and (min-width: 992px)"; 4 | $xs: "(screen and (max-width: 768px))"; 5 | $sm: "(screen and (max-width: 992px))"; 6 | $md: "(screen and (min-width: 992px))"; 7 | -------------------------------------------------------------------------------- /design/builder/app/styles/mixins/transition.scss: -------------------------------------------------------------------------------- 1 | .transition { 2 | transition: 0.5 all linear; 3 | -webkit-transition: 0.5 all linear; 4 | -moz-transition: 0.5 all linear; 5 | -ms-transition: 0.5 all linear; 6 | -o-transition: 0.5 all linear; 7 | } 8 | -------------------------------------------------------------------------------- /design/builder/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brewr-builder", 3 | "private": true, 4 | "dependencies": { 5 | "modernizr": "~2.8.3" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /design/builder/dist/favicon.9c8b2c34.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/favicon.9c8b2c34.ico -------------------------------------------------------------------------------- /design/builder/dist/images/after.05b33e94.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/after.05b33e94.png -------------------------------------------------------------------------------- /design/builder/dist/images/avatar.d75d42ca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/avatar.d75d42ca.png -------------------------------------------------------------------------------- /design/builder/dist/images/before.62605ac2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/before.62605ac2.png -------------------------------------------------------------------------------- /design/builder/dist/images/header.ab829a6e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/header.ab829a6e.jpg -------------------------------------------------------------------------------- /design/builder/dist/images/logo.363f07b8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/logo.363f07b8.png -------------------------------------------------------------------------------- /design/builder/dist/images/option-dropdown.a34aaed1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/option-dropdown.a34aaed1.png -------------------------------------------------------------------------------- /design/builder/dist/images/screenshot-background.3c42b64a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/screenshot-background.3c42b64a.jpg -------------------------------------------------------------------------------- /design/builder/dist/images/screenshot.5761ec41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/screenshot.5761ec41.png -------------------------------------------------------------------------------- /design/builder/dist/images/screenshot@2x.9b390fb5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/builder/dist/images/screenshot@2x.9b390fb5.png -------------------------------------------------------------------------------- /design/builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "autoprefixer-core": "^5.2.1", 5 | "grunt": "^0.4.5", 6 | "grunt-babel": "^5.0.0", 7 | "grunt-browser-sync": "^2.1.2", 8 | "grunt-concurrent": "^1.0.0", 9 | "grunt-contrib-clean": "^0.6.0", 10 | "grunt-contrib-concat": "^0.5.1", 11 | "grunt-contrib-copy": "^0.8.0", 12 | "grunt-contrib-cssmin": "^0.12.2", 13 | "grunt-contrib-htmlmin": "^0.4.0", 14 | "grunt-contrib-imagemin": "^0.9.3", 15 | "grunt-contrib-uglify": "^0.8.0", 16 | "grunt-contrib-watch": "^0.6.1", 17 | "grunt-eslint": "^16.0.0", 18 | "grunt-filerev": "^2.2.0", 19 | "grunt-mocha": "^0.4.12", 20 | "grunt-modernizr": "^0.6.0", 21 | "grunt-newer": "^1.1.0", 22 | "grunt-postcss": "^0.5.3", 23 | "grunt-sass": "^1.0.0", 24 | "grunt-svgmin": "^2.0.1", 25 | "grunt-usemin": "^3.0.0", 26 | "grunt-wiredep": "^2.0.0", 27 | "jit-grunt": "^0.9.1", 28 | "time-grunt": "^1.1.0" 29 | }, 30 | "engines": { 31 | "node": ">=0.10.0" 32 | }, 33 | "scripts": { 34 | "test": "grunt test" 35 | }, 36 | "eslintConfig": { 37 | "env": { 38 | "node": true, 39 | "browser": true, 40 | "mocha": true 41 | }, 42 | "rules": { 43 | "quotes": [ 44 | 2, 45 | "single" 46 | ] 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /design/builder/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mocha Spec Runner 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /design/builder/test/spec/test.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('Give it some context', function () { 5 | describe('maybe a bit more context here', function () { 6 | it('should run here few assertions', function () { 7 | 8 | }); 9 | }); 10 | }); 11 | })(); 12 | -------------------------------------------------------------------------------- /design/frontpage/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/favicon.ico -------------------------------------------------------------------------------- /design/frontpage/app/images/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/after.png -------------------------------------------------------------------------------- /design/frontpage/app/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/avatar.png -------------------------------------------------------------------------------- /design/frontpage/app/images/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/before.png -------------------------------------------------------------------------------- /design/frontpage/app/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/header.jpg -------------------------------------------------------------------------------- /design/frontpage/app/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/logo.png -------------------------------------------------------------------------------- /design/frontpage/app/images/option-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/option-dropdown.png -------------------------------------------------------------------------------- /design/frontpage/app/images/screenshot-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/screenshot-background.jpg -------------------------------------------------------------------------------- /design/frontpage/app/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/screenshot.png -------------------------------------------------------------------------------- /design/frontpage/app/images/screenshot@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/images/screenshot@2x.png -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/comparison.scss: -------------------------------------------------------------------------------- 1 | #comparison { 2 | margin-top: $spacing; 3 | margin-left: auto; 4 | margin-right: auto; 5 | max-width: 800px; 6 | 7 | img { 8 | margin-top: $spacing; 9 | } 10 | 11 | h4 { 12 | font-weight: normal; 13 | font-size: 24px; 14 | margin-top: $spacing; 15 | margin-bottom: $spacing / 2; 16 | 17 | .success { 18 | color: $colorSuccess; 19 | } 20 | } 21 | 22 | p { 23 | line-height: 1.5; 24 | font-size: 18px; 25 | opacity: 0.7; 26 | } 27 | 28 | .line { 29 | width: 2px; 30 | background-color: #dedede; 31 | height: 110px; 32 | margin-right: auto; 33 | margin-left: auto; 34 | } 35 | 36 | .vs { 37 | padding: 20px; 38 | font-weight: bold; 39 | color: #999; 40 | } 41 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | h1 { 3 | background-color: $colorPrimaryLightShade1; 4 | margin: 0; 5 | padding: 10px 20px; 6 | color: $colorTextHeader; 7 | display: block; 8 | text-transform: uppercase; 9 | color: $colorTextTitle; 10 | font-size: 20px; 11 | font-weight: normal; 12 | 13 | #step { 14 | float: right; 15 | font-size: 12px; 16 | line-height: 22px; 17 | } 18 | } 19 | } 20 | 21 | .content > .container { 22 | height: 100%; 23 | margin-left: 200px; 24 | position: relative; 25 | } 26 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/flexbox.scss: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | width: 100%; 3 | padding: 0; 4 | // margin: 0 30px 30px 30px; 5 | list-style: none; 6 | 7 | -ms-box-orient: horizontal; 8 | display: -webkit-box; 9 | display: -moz-box; 10 | display: -ms-flexbox; 11 | display: -moz-flex; 12 | display: -webkit-flex; 13 | display: flex; 14 | 15 | // Space between gives margin within boxes 16 | -webkit-justify-content: space-between; 17 | justify-content: space-between; 18 | 19 | align-items: center; 20 | flex-flow: wrap; 21 | } 22 | 23 | .flex-container > .container { 24 | padding-right: 0; 25 | width: 100%; 26 | } 27 | 28 | .flex-item { 29 | margin: 10px; 30 | 31 | color: white; 32 | font-weight: bold; 33 | font-size: 14px; 34 | text-align: center; 35 | 36 | flex-grow: 3; 37 | 38 | padding: 10px; 39 | 40 | input { 41 | width: 100%; 42 | padding: 10px 10px; 43 | font-weight: normal; 44 | color: $colorBlack; 45 | display: inline-block; 46 | box-sizing: border-box; 47 | border: 1px solid $colorBoxBorder; 48 | margin-bottom: 20px; 49 | } 50 | 51 | label { 52 | color: $colorBlack; 53 | text-align: left; 54 | font-weight: normal; 55 | margin-bottom: 10px; 56 | display: block; 57 | text-transform: uppercase; 58 | font-size: 16px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding: $spacing; 3 | background-color: $colorText; 4 | color: #fff; 5 | 6 | .logo { 7 | background-image: url(../images/logo.png); 8 | background-size: 166px 40px; 9 | display: block; 10 | width: 166px; 11 | height: 40px; 12 | float: left; 13 | } 14 | 15 | .links { 16 | a { 17 | color: #fff; 18 | opacity: 0.5; 19 | padding: 12px; 20 | display: inline-block; 21 | text-decoration: none; 22 | 23 | &:hover { 24 | opacity: 1; 25 | } 26 | } 27 | 28 | .divider { 29 | height: 10px; 30 | width: 1px; 31 | background-color: #fff; 32 | opacity: 0.2; 33 | display: inline-block; 34 | } 35 | } 36 | 37 | .circle { 38 | color: #fff; 39 | width: 36px; 40 | height: 36px; 41 | border: 2px solid #fff; 42 | display: inline-block; 43 | text-align: center; 44 | border-radius: 50%; 45 | line-height: 34px; 46 | margin-left: 10px; 47 | margin-top: 3px; 48 | 49 | &:hover { 50 | background-color: #fff; 51 | color: $colorText; 52 | } 53 | } 54 | } 55 | 56 | #license { 57 | background-color: darken($colorText, 3%); 58 | padding: $spacing/2; 59 | text-align: center; 60 | color: #555; 61 | font-size: 12px; 62 | 63 | a { 64 | color: #555; 65 | text-decoration: none; 66 | } 67 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/icon-block.scss: -------------------------------------------------------------------------------- 1 | .icon-block { 2 | .circle { 3 | font-size: 42px; 4 | border: 6px solid #000; 5 | display: inline-block; 6 | height: 120px; 7 | width: 120px; 8 | line-height: 112px; 9 | border-radius: 50%; 10 | 11 | 12 | &.accent { 13 | border-color: $colorAccent; 14 | color: $colorAccent; 15 | } 16 | 17 | &.success { 18 | border-color: $colorSuccess; 19 | color: $colorSuccess; 20 | } 21 | 22 | &.info { 23 | border-color: $colorInfo; 24 | color: $colorInfo; 25 | } 26 | } 27 | 28 | h3 { 29 | font-size: 24px; 30 | margin-top: $spacing/2; 31 | margin-bottom: $spacing/4; 32 | } 33 | 34 | p.subtitle { 35 | max-width: 320px; 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | 40 | // Crappy centering workarounds 41 | i.fa-play { 42 | margin-right: -10px; 43 | } 44 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/list.scss: -------------------------------------------------------------------------------- 1 | .sub-content li { 2 | background-color: white; 3 | font-size: 14px; 4 | border-top: 1px solid $colorBoxBorder; 5 | border-left: 1px solid $colorBoxBorder; 6 | border-right: 1px solid $colorBoxBorder; 7 | text-align: left; 8 | height: 35px; 9 | position: relative; 10 | line-height: 35px; 11 | padding-left: 10px; 12 | 13 | a { 14 | width: 35px; 15 | line-height: 35px; 16 | padding: 0; 17 | text-align: center; 18 | top: 0; 19 | } 20 | 21 | a:first-child { 22 | margin-left: -10px; // negate the padding-left 23 | border-right: 1px solid $colorBoxBorder; 24 | background-color: $colorLeftListPart; 25 | color: $colorLeftListPartText; 26 | left: 0; 27 | display: inline-block; 28 | position: initial; 29 | margin-right: 10px; 30 | } 31 | 32 | a:last-child { 33 | margin: 0; 34 | border-right: none; 35 | border-left: 1px solid $colorBoxBorder; 36 | right: 0; 37 | position: absolute; 38 | left: initial; 39 | } 40 | } 41 | 42 | .sub-content li:last-child { 43 | border-top: 1px solid $colorBoxBorder; 44 | border-bottom: 1px solid $colorBoxBorder; 45 | } 46 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/menu.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | //position: fixed; 3 | position: absolute; 4 | width: 100%; 5 | top: 0; 6 | padding-top: $spacing; 7 | padding-bottom: $spacing; 8 | 9 | .logo { 10 | background-image: url(../images/logo.png); 11 | background-size: 166px 40px; 12 | display: block; 13 | width: 166px; 14 | height: 40px; 15 | float: left; 16 | } 17 | 18 | ul { 19 | float: right; 20 | 21 | li { 22 | list-style: none; 23 | display: inline-block; 24 | 25 | a { 26 | display: block; 27 | color: #fff; 28 | margin-left: $spacing/2; 29 | font-size: 16px; 30 | text-decoration: none; 31 | font-weight: bold; 32 | letter-spacing: 1px; 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/page-title.scss: -------------------------------------------------------------------------------- 1 | .page-title { 2 | h1 { 3 | background-color: $colorPrimaryLightShade2; 4 | margin: 0; 5 | padding: 10px 20px 10px 240px; 6 | display: block; 7 | color: $colorTextTitle; 8 | font-size: 20px; 9 | font-weight: normal; 10 | letter-spacing: 1px; 11 | 12 | #step { 13 | float: right; 14 | font-size: 12px; 15 | line-height: 22px; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/plan.scss: -------------------------------------------------------------------------------- 1 | .plan { 2 | background-color: #fff; 3 | width: 280px; 4 | text-align: center; 5 | display: inline-block; 6 | color: $colorText; 7 | border-radius: 3px; 8 | margin-left: 10px; 9 | margin-right: 10px; 10 | 11 | li { 12 | list-style: none; 13 | text-align: left; 14 | font-weight: bold; 15 | line-height: 2; 16 | 17 | &.disabled { 18 | color: #999; 19 | } 20 | 21 | i { 22 | margin-right: 10px; 23 | } 24 | } 25 | 26 | .title { 27 | font-size: 24px; 28 | font-weight: bold; 29 | margin-top: $spacing/2; 30 | } 31 | 32 | .subtitle { 33 | font-size: 18px; 34 | margin-top: 3px; 35 | margin-bottom: $spacing/2; 36 | } 37 | 38 | .price { 39 | background-color: $colorPrimaryHighlight; 40 | color: #fff; 41 | padding: $spacing/2; 42 | font-size: 22px; 43 | font-weight: bold; 44 | 45 | &.success { 46 | background-color: $colorSuccess; 47 | } 48 | 49 | small { 50 | font-size: 14px; 51 | } 52 | } 53 | 54 | .button { 55 | margin-bottom: $spacing / 2; 56 | } 57 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/screenshot.scss: -------------------------------------------------------------------------------- 1 | #screenshot { 2 | background-color: $colorPrimary; 3 | background-image: url(../images/screenshot-background.jpg); 4 | background-size: cover; 5 | background-position: center bottom; 6 | padding-top: $spacing * 2; 7 | color: #fff; 8 | overflow: hidden; 9 | 10 | p.subtitle { 11 | max-width: 520px; 12 | font-size: 18px; 13 | margin-right: auto; 14 | margin-left: auto; 15 | line-height: 1.5; 16 | opacity: 0.6; 17 | } 18 | } 19 | 20 | #screenshot-image { 21 | background-image: url(../images/screenshot.png); 22 | background-size: 770px 474px; 23 | width: 770px; 24 | height: 474px; 25 | margin-right: auto; 26 | margin-left: auto; 27 | margin-top: $spacing; 28 | 29 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 30 | background-image: url(../images/screenshot@2x.png); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/section.scss: -------------------------------------------------------------------------------- 1 | section { 2 | background-color: $colorBackground; 3 | 4 | &.padding { 5 | padding: $spacing; 6 | } 7 | 8 | &.padding-double { 9 | padding: $spacing * 2; 10 | } 11 | 12 | &.centered { 13 | text-align: center; 14 | } 15 | 16 | &.accent { 17 | background-color: $colorAccent; 18 | color: #fff; 19 | } 20 | 21 | &.dark { 22 | background-color: $colorSecondary; 23 | color: #fff; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/spacer.scss: -------------------------------------------------------------------------------- 1 | .spacer { 2 | height: $spacing; 3 | } 4 | 5 | .spacer-half { 6 | height: $spacing / 2; 7 | } 8 | 9 | .spacer-double { 10 | height: $spacing * 2; 11 | } 12 | 13 | .padding { 14 | padding: $spacing; 15 | } 16 | 17 | .padding-half { 18 | padding: $spacing / 2; 19 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/sub-content.scss: -------------------------------------------------------------------------------- 1 | .sub-content { 2 | margin: 0 auto; 3 | 4 | h1 { 5 | color: $colorText; 6 | background-color: transparent; 7 | font-size: 18px; 8 | text-transform: none; 9 | text-align: center; 10 | margin-bottom: 20px; 11 | width: 100%; 12 | } 13 | 14 | h2 { 15 | color: $colorBlack; 16 | text-align: left; 17 | font-weight: normal; 18 | margin-bottom: 10px; 19 | display: block; 20 | text-transform: uppercase; 21 | font-size: 16px; 22 | } 23 | 24 | ul { 25 | padding: 0; 26 | display: block; 27 | list-style: none; 28 | color: $colorText; 29 | font-weight: normal; 30 | font-size: 14px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/components/wrapper.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: relative; 3 | } 4 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/config.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $colorWhite: #FFFFFF; 3 | $colorBlack: #000000; 4 | 5 | $colorHelpBox: #333333; 6 | $colorHelpIcon: #333333; 7 | $colorHelpIconHover: #999999; 8 | 9 | $colorBackground: #F5F5F5; 10 | 11 | $colorPrimaryLightShade1: #2a3c50; 12 | $colorPrimaryLightShade2: #32465d; 13 | $colorPrimaryLightShade3: #39506A; 14 | $colorPrimary: #233141; 15 | $colorPrimaryDarkShade1: #151E28; 16 | $colorPrimaryDarkShade2: #1D2835; 17 | 18 | $colorMenuItem: #d3d6d9; 19 | $colorMenuItemActive: #56789f; 20 | 21 | $colorBoxBorder: #cccccc; 22 | 23 | $colorButtonNext: #f15843; 24 | $colorButtonNextHover: #ff604b; 25 | $colorLeftListPart: #F7F7F7; 26 | $colorLeftListPartText: #6C6C6C; 27 | 28 | $colorSecondary: #1c2632; 29 | $colorAccent: #f15843; 30 | $colorSuccess: #41b222; 31 | $colorLight: #999999; 32 | $colorText: #101010; 33 | $colorTextHeader: #32465d; 34 | $colorTextTitle: #ffffff; 35 | $colorBlue: #227ab2; 36 | $colorSuccess: #41b222; 37 | $colorInfo: #227ab2; 38 | $colorPrimaryHighlight: #3a4856; 39 | 40 | // Generic 41 | $spacing: 40px; 42 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/general/base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | font-size: 16px; 4 | color: $colorText; 5 | background-color: darken($colorText, 3%); 6 | } 7 | 8 | a { 9 | color: $colorAccent; 10 | } 11 | 12 | .accent a { 13 | color: #fff; 14 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/general/reset.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | .clearfix { 12 | clear: both; 13 | } 14 | 15 | *:focus { 16 | outline: none; 17 | } -------------------------------------------------------------------------------- /design/frontpage/app/styles/general/typography.scss: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-size: 36px; 3 | font-weight: normal; 4 | letter-spacing: 1px; 5 | margin-bottom: $spacing/2; 6 | 7 | &.smaller { 8 | font-size: 28px; 9 | } 10 | } 11 | 12 | body { 13 | font-family: "Open Sans", sans-serif; 14 | } 15 | 16 | h1 { 17 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | } 19 | 20 | .subtitle { 21 | font-size: 18px; 22 | opacity: 0.6; 23 | line-height: 1.5; 24 | } 25 | 26 | section .subtitle { 27 | max-width: 600px; 28 | margin-right: auto; 29 | margin-left: auto; 30 | } 31 | 32 | .bold { 33 | font-weight: bold; 34 | } 35 | 36 | .small { 37 | font-size: 14px; 38 | } 39 | 40 | .align-left { 41 | text-align: left; 42 | } 43 | 44 | .align-center { 45 | text-align: center; 46 | } 47 | 48 | .align-right { 49 | text-align: right; 50 | } 51 | 52 | .text-accent { 53 | color: $colorAccent; 54 | } 55 | 56 | .text-info { 57 | color: $colorInfo; 58 | } 59 | 60 | .text-success { 61 | color: $colorSuccess; 62 | } 63 | 64 | .text-disabled { 65 | color: #777; 66 | } 67 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Configuration 2 | @import 'config'; 3 | 4 | // Third party dependencies 5 | @import 'lib/bootstrap-grid'; 6 | 7 | // General 8 | @import 'general/reset'; 9 | @import 'general/base'; 10 | @import 'general/typography'; 11 | 12 | // Mixins 13 | @import 'mixins/transition'; 14 | @import 'mixins/responsive'; 15 | 16 | // UI components 17 | @import 'components/header'; 18 | @import 'components/menu'; 19 | @import 'components/button'; 20 | @import 'components/section'; 21 | @import 'components/icon-block'; 22 | @import 'components/screenshot'; 23 | @import 'components/spacer'; 24 | @import 'components/footer'; 25 | @import 'components/plan'; 26 | @import 'components/comparison'; 27 | @import 'components/flexbox'; 28 | @import 'components/image-builder'; 29 | @import 'components/sub-menu'; 30 | @import 'components/list'; 31 | @import 'components/content'; 32 | @import 'components/sub-content'; 33 | @import 'components/page-title'; 34 | @import 'components/wrapper'; 35 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/mixins/responsive.scss: -------------------------------------------------------------------------------- 1 | // $xs: ~"screen and (max-width: 768px)"; 2 | // $sm: ~"screen and (max-width: 992px)"; 3 | // $md: ~"screen and (min-width: 992px)"; 4 | $xs: "(screen and (max-width: 768px))"; 5 | $sm: "(screen and (max-width: 992px))"; 6 | $md: "(screen and (min-width: 992px))"; 7 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/mixins/transition.scss: -------------------------------------------------------------------------------- 1 | .transition { 2 | transition: 0.5 all linear; 3 | -webkit-transition: 0.5 all linear; 4 | -moz-transition: 0.5 all linear; 5 | -ms-transition: 0.5 all linear; 6 | -o-transition: 0.5 all linear; 7 | } 8 | -------------------------------------------------------------------------------- /design/frontpage/app/styles/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/app/styles/style.css -------------------------------------------------------------------------------- /design/frontpage/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brewr-builder", 3 | "private": true, 4 | "dependencies": { 5 | "modernizr": "~2.8.3" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /design/frontpage/dist/favicon.ba8ce5ed.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/favicon.ba8ce5ed.ico -------------------------------------------------------------------------------- /design/frontpage/dist/images/after.05b33e94.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/after.05b33e94.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/avatar.d75d42ca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/avatar.d75d42ca.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/before.62605ac2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/before.62605ac2.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/header.ab829a6e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/header.ab829a6e.jpg -------------------------------------------------------------------------------- /design/frontpage/dist/images/logo.df56c44c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/logo.df56c44c.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/option-dropdown.a34aaed1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/option-dropdown.a34aaed1.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/screenshot-background.3c42b64a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/screenshot-background.3c42b64a.jpg -------------------------------------------------------------------------------- /design/frontpage/dist/images/screenshot.5761ec41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/screenshot.5761ec41.png -------------------------------------------------------------------------------- /design/frontpage/dist/images/screenshot@2x.9b390fb5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/frontpage/dist/images/screenshot@2x.9b390fb5.png -------------------------------------------------------------------------------- /design/frontpage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "devDependencies": { 4 | "autoprefixer-core": "^5.2.1", 5 | "grunt": "^0.4.5", 6 | "grunt-babel": "^5.0.0", 7 | "grunt-browser-sync": "^2.1.2", 8 | "grunt-concurrent": "^1.0.0", 9 | "grunt-contrib-clean": "^0.6.0", 10 | "grunt-contrib-concat": "^0.5.1", 11 | "grunt-contrib-copy": "^0.8.0", 12 | "grunt-contrib-cssmin": "^0.12.2", 13 | "grunt-contrib-htmlmin": "^0.4.0", 14 | "grunt-contrib-imagemin": "^0.9.3", 15 | "grunt-contrib-uglify": "^0.8.0", 16 | "grunt-contrib-watch": "^0.6.1", 17 | "grunt-eslint": "^16.0.0", 18 | "grunt-filerev": "^2.2.0", 19 | "grunt-mocha": "^0.4.12", 20 | "grunt-modernizr": "^0.6.0", 21 | "grunt-newer": "^1.1.0", 22 | "grunt-postcss": "^0.5.3", 23 | "grunt-sass": "^1.0.0", 24 | "grunt-svgmin": "^2.0.1", 25 | "grunt-usemin": "^3.0.0", 26 | "grunt-wiredep": "^2.0.0", 27 | "jit-grunt": "^0.9.1", 28 | "time-grunt": "^1.1.0" 29 | }, 30 | "engines": { 31 | "node": ">=0.10.0" 32 | }, 33 | "scripts": { 34 | "test": "grunt test" 35 | }, 36 | "eslintConfig": { 37 | "env": { 38 | "node": true, 39 | "browser": true, 40 | "mocha": true 41 | }, 42 | "rules": { 43 | "quotes": [ 44 | 2, 45 | "single" 46 | ] 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /design/frontpage/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mocha Spec Runner 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /design/frontpage/test/spec/test.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('Give it some context', function () { 5 | describe('maybe a bit more context here', function () { 6 | it('should run here few assertions', function () { 7 | 8 | }); 9 | }); 10 | }); 11 | })(); 12 | -------------------------------------------------------------------------------- /design/launch-page/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/favicon.ico -------------------------------------------------------------------------------- /design/launch-page/images/after.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/after.png -------------------------------------------------------------------------------- /design/launch-page/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/avatar.png -------------------------------------------------------------------------------- /design/launch-page/images/before.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/before.png -------------------------------------------------------------------------------- /design/launch-page/images/brewr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/brewr.png -------------------------------------------------------------------------------- /design/launch-page/images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/header.jpg -------------------------------------------------------------------------------- /design/launch-page/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/logo.png -------------------------------------------------------------------------------- /design/launch-page/images/option-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/option-dropdown.png -------------------------------------------------------------------------------- /design/launch-page/images/screenshot-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/screenshot-background.jpg -------------------------------------------------------------------------------- /design/launch-page/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/screenshot.png -------------------------------------------------------------------------------- /design/launch-page/images/screenshot@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/design/launch-page/images/screenshot@2x.png -------------------------------------------------------------------------------- /design/launch-page/styles/components/comparison.scss: -------------------------------------------------------------------------------- 1 | #comparison { 2 | margin-top: $spacing; 3 | margin-left: auto; 4 | margin-right: auto; 5 | max-width: 800px; 6 | 7 | img { 8 | margin-top: $spacing; 9 | } 10 | 11 | h4 { 12 | font-weight: normal; 13 | font-size: 24px; 14 | margin-top: $spacing; 15 | margin-bottom: $spacing / 2; 16 | 17 | .success { 18 | color: $colorSuccess; 19 | } 20 | } 21 | 22 | p { 23 | line-height: 1.5; 24 | font-size: 18px; 25 | opacity: 0.7; 26 | } 27 | 28 | .line { 29 | width: 2px; 30 | background-color: #dedede; 31 | height: 110px; 32 | margin-right: auto; 33 | margin-left: auto; 34 | } 35 | 36 | .vs { 37 | padding: 20px; 38 | font-weight: bold; 39 | color: #999; 40 | } 41 | } -------------------------------------------------------------------------------- /design/launch-page/styles/components/content.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | h1 { 3 | background-color: $colorPrimaryLightShade1; 4 | margin: 0; 5 | padding: 10px 20px; 6 | color: $colorTextHeader; 7 | display: block; 8 | text-transform: uppercase; 9 | color: $colorTextTitle; 10 | font-size: 20px; 11 | font-weight: normal; 12 | 13 | #step { 14 | float: right; 15 | font-size: 12px; 16 | line-height: 22px; 17 | } 18 | } 19 | } 20 | 21 | .content > .container { 22 | height: 100%; 23 | margin-left: 200px; 24 | position: relative; 25 | } 26 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/flexbox.scss: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | width: 100%; 3 | padding: 0; 4 | // margin: 0 30px 30px 30px; 5 | list-style: none; 6 | 7 | -ms-box-orient: horizontal; 8 | display: -webkit-box; 9 | display: -moz-box; 10 | display: -ms-flexbox; 11 | display: -moz-flex; 12 | display: -webkit-flex; 13 | display: flex; 14 | 15 | // Space between gives margin within boxes 16 | -webkit-justify-content: space-between; 17 | justify-content: space-between; 18 | 19 | align-items: center; 20 | flex-flow: wrap; 21 | } 22 | 23 | .flex-container > .container { 24 | padding-right: 0; 25 | width: 100%; 26 | } 27 | 28 | .flex-item { 29 | margin: 10px; 30 | 31 | color: white; 32 | font-weight: bold; 33 | font-size: 14px; 34 | text-align: center; 35 | 36 | flex-grow: 3; 37 | 38 | padding: 10px; 39 | 40 | input { 41 | width: 100%; 42 | padding: 10px 10px; 43 | font-weight: normal; 44 | color: $colorBlack; 45 | display: inline-block; 46 | box-sizing: border-box; 47 | border: 1px solid $colorBoxBorder; 48 | margin-bottom: 20px; 49 | } 50 | 51 | label { 52 | color: $colorBlack; 53 | text-align: left; 54 | font-weight: normal; 55 | margin-bottom: 10px; 56 | display: block; 57 | text-transform: uppercase; 58 | font-size: 16px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding: $spacing; 3 | background-color: $colorText; 4 | color: #fff; 5 | 6 | .logo { 7 | background-image: url(../images/logo.png); 8 | background-size: 166px 40px; 9 | display: block; 10 | width: 166px; 11 | height: 40px; 12 | float: left; 13 | } 14 | 15 | .links { 16 | a { 17 | color: #fff; 18 | opacity: 0.5; 19 | padding: 12px; 20 | display: inline-block; 21 | text-decoration: none; 22 | 23 | &:hover { 24 | opacity: 1; 25 | } 26 | } 27 | 28 | .divider { 29 | height: 10px; 30 | width: 1px; 31 | background-color: #fff; 32 | opacity: 0.2; 33 | display: inline-block; 34 | } 35 | } 36 | 37 | .circle { 38 | color: #fff; 39 | width: 36px; 40 | height: 36px; 41 | border: 2px solid #fff; 42 | display: inline-block; 43 | text-align: center; 44 | border-radius: 50%; 45 | line-height: 34px; 46 | margin-left: 10px; 47 | margin-top: 3px; 48 | 49 | &:hover { 50 | background-color: #fff; 51 | color: $colorText; 52 | } 53 | } 54 | } 55 | 56 | #license { 57 | background-color: darken($colorText, 3%); 58 | padding: $spacing/2; 59 | text-align: center; 60 | color: #555; 61 | font-size: 12px; 62 | 63 | a { 64 | color: #555; 65 | text-decoration: none; 66 | } 67 | } -------------------------------------------------------------------------------- /design/launch-page/styles/components/icon-block.scss: -------------------------------------------------------------------------------- 1 | .icon-block { 2 | .circle { 3 | font-size: 42px; 4 | border: 6px solid #000; 5 | display: inline-block; 6 | height: 120px; 7 | width: 120px; 8 | line-height: 112px; 9 | border-radius: 50%; 10 | 11 | 12 | &.accent { 13 | border-color: $colorAccent; 14 | color: $colorAccent; 15 | } 16 | 17 | &.success { 18 | border-color: $colorSuccess; 19 | color: $colorSuccess; 20 | } 21 | 22 | &.info { 23 | border-color: $colorInfo; 24 | color: $colorInfo; 25 | } 26 | } 27 | 28 | h3 { 29 | font-size: 24px; 30 | margin-top: $spacing/2; 31 | margin-bottom: $spacing/4; 32 | } 33 | 34 | p.subtitle { 35 | max-width: 320px; 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | 40 | // Crappy centering workarounds 41 | i.fa-play { 42 | margin-right: -10px; 43 | } 44 | } -------------------------------------------------------------------------------- /design/launch-page/styles/components/list.scss: -------------------------------------------------------------------------------- 1 | .sub-content li { 2 | background-color: white; 3 | font-size: 14px; 4 | border-top: 1px solid $colorBoxBorder; 5 | border-left: 1px solid $colorBoxBorder; 6 | border-right: 1px solid $colorBoxBorder; 7 | text-align: left; 8 | height: 35px; 9 | position: relative; 10 | line-height: 35px; 11 | padding-left: 10px; 12 | 13 | a { 14 | width: 35px; 15 | line-height: 35px; 16 | padding: 0; 17 | text-align: center; 18 | top: 0; 19 | } 20 | 21 | a:first-child { 22 | margin-left: -10px; // negate the padding-left 23 | border-right: 1px solid $colorBoxBorder; 24 | background-color: $colorLeftListPart; 25 | color: $colorLeftListPartText; 26 | left: 0; 27 | display: inline-block; 28 | position: initial; 29 | margin-right: 10px; 30 | } 31 | 32 | a:last-child { 33 | margin: 0; 34 | border-right: none; 35 | border-left: 1px solid $colorBoxBorder; 36 | right: 0; 37 | position: absolute; 38 | left: initial; 39 | } 40 | } 41 | 42 | .sub-content li:last-child { 43 | border-top: 1px solid $colorBoxBorder; 44 | border-bottom: 1px solid $colorBoxBorder; 45 | } 46 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/menu.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | //position: fixed; 3 | position: absolute; 4 | width: 100%; 5 | top: 0; 6 | padding-top: $spacing; 7 | padding-bottom: $spacing; 8 | 9 | .logo { 10 | background-image: url(../images/logo.png); 11 | background-size: 166px 40px; 12 | display: block; 13 | width: 166px; 14 | height: 40px; 15 | float: left; 16 | } 17 | 18 | ul { 19 | float: right; 20 | 21 | li { 22 | list-style: none; 23 | display: inline-block; 24 | 25 | a { 26 | display: block; 27 | color: #fff; 28 | margin-left: $spacing/2; 29 | font-size: 16px; 30 | text-decoration: none; 31 | font-weight: bold; 32 | letter-spacing: 1px; 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/page-title.scss: -------------------------------------------------------------------------------- 1 | .page-title { 2 | h1 { 3 | background-color: $colorPrimaryLightShade2; 4 | margin: 0; 5 | padding: 10px 20px 10px 240px; 6 | display: block; 7 | color: $colorTextTitle; 8 | font-size: 20px; 9 | font-weight: normal; 10 | letter-spacing: 1px; 11 | 12 | #step { 13 | float: right; 14 | font-size: 12px; 15 | line-height: 22px; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/plan.scss: -------------------------------------------------------------------------------- 1 | .plan { 2 | background-color: #fff; 3 | width: 280px; 4 | text-align: center; 5 | display: inline-block; 6 | color: $colorText; 7 | border-radius: 3px; 8 | margin-left: 10px; 9 | margin-right: 10px; 10 | 11 | li { 12 | list-style: none; 13 | text-align: left; 14 | font-weight: bold; 15 | line-height: 2; 16 | 17 | &.disabled { 18 | color: #999; 19 | } 20 | 21 | i { 22 | margin-right: 10px; 23 | } 24 | } 25 | 26 | .title { 27 | font-size: 24px; 28 | font-weight: bold; 29 | margin-top: $spacing/2; 30 | } 31 | 32 | .subtitle { 33 | font-size: 18px; 34 | margin-top: 3px; 35 | margin-bottom: $spacing/2; 36 | } 37 | 38 | .price { 39 | background-color: $colorPrimaryHighlight; 40 | color: #fff; 41 | padding: $spacing/2; 42 | font-size: 22px; 43 | font-weight: bold; 44 | 45 | &.success { 46 | background-color: $colorSuccess; 47 | } 48 | 49 | small { 50 | font-size: 14px; 51 | } 52 | } 53 | 54 | .button { 55 | margin-bottom: $spacing / 2; 56 | } 57 | } -------------------------------------------------------------------------------- /design/launch-page/styles/components/screenshot.scss: -------------------------------------------------------------------------------- 1 | #screenshot { 2 | background-color: $colorPrimary; 3 | background-image: url(../images/screenshot-background.jpg); 4 | background-size: cover; 5 | background-position: center bottom; 6 | padding-top: $spacing * 2; 7 | color: #fff; 8 | overflow: hidden; 9 | 10 | p.subtitle { 11 | max-width: 520px; 12 | font-size: 18px; 13 | margin-right: auto; 14 | margin-left: auto; 15 | line-height: 1.5; 16 | opacity: 0.6; 17 | } 18 | } 19 | 20 | #screenshot-image { 21 | background-image: url(../images/screenshot.png); 22 | background-size: 770px 474px; 23 | width: 770px; 24 | height: 474px; 25 | margin-right: auto; 26 | margin-left: auto; 27 | margin-top: $spacing; 28 | 29 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 30 | background-image: url(../images/screenshot@2x.png); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/section.scss: -------------------------------------------------------------------------------- 1 | section { 2 | background-color: $colorBackground; 3 | 4 | &.padding { 5 | padding: $spacing; 6 | } 7 | 8 | &.padding-double { 9 | padding: $spacing * 2; 10 | } 11 | 12 | &.centered { 13 | text-align: center; 14 | } 15 | 16 | &.accent { 17 | background-color: $colorAccent; 18 | color: #fff; 19 | } 20 | 21 | &.dark { 22 | background-color: $colorSecondary; 23 | color: #fff; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/spacer.scss: -------------------------------------------------------------------------------- 1 | .spacer { 2 | height: $spacing; 3 | } 4 | 5 | .spacer-half { 6 | height: $spacing / 2; 7 | } 8 | 9 | .spacer-double { 10 | height: $spacing * 2; 11 | } 12 | 13 | .padding { 14 | padding: $spacing; 15 | } 16 | 17 | .padding-half { 18 | padding: $spacing / 2; 19 | } -------------------------------------------------------------------------------- /design/launch-page/styles/components/sub-content.scss: -------------------------------------------------------------------------------- 1 | .sub-content { 2 | margin: 0 auto; 3 | 4 | h1 { 5 | color: $colorText; 6 | background-color: transparent; 7 | font-size: 18px; 8 | text-transform: none; 9 | text-align: center; 10 | margin-bottom: 20px; 11 | width: 100%; 12 | } 13 | 14 | h2 { 15 | color: $colorBlack; 16 | text-align: left; 17 | font-weight: normal; 18 | margin-bottom: 10px; 19 | display: block; 20 | text-transform: uppercase; 21 | font-size: 16px; 22 | } 23 | 24 | ul { 25 | padding: 0; 26 | display: block; 27 | list-style: none; 28 | color: $colorText; 29 | font-weight: normal; 30 | font-size: 14px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /design/launch-page/styles/components/wrapper.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | position: relative; 3 | } 4 | -------------------------------------------------------------------------------- /design/launch-page/styles/config.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $colorWhite: #FFFFFF; 3 | $colorBlack: #000000; 4 | 5 | $colorHelpBox: #333333; 6 | $colorHelpIcon: #333333; 7 | $colorHelpIconHover: #999999; 8 | 9 | $colorBackground: #F5F5F5; 10 | 11 | $colorPrimaryLightShade1: #2a3c50; 12 | $colorPrimaryLightShade2: #32465d; 13 | $colorPrimaryLightShade3: #39506A; 14 | $colorPrimary: #233141; 15 | $colorPrimaryDarkShade1: #151E28; 16 | $colorPrimaryDarkShade2: #1D2835; 17 | 18 | $colorMenuItem: #d3d6d9; 19 | $colorMenuItemActive: #56789f; 20 | 21 | $colorBoxBorder: #cccccc; 22 | 23 | $colorButtonNext: #f15843; 24 | $colorButtonNextHover: #ff604b; 25 | $colorLeftListPart: #F7F7F7; 26 | $colorLeftListPartText: #6C6C6C; 27 | 28 | $colorSecondary: #1c2632; 29 | $colorAccent: #f15843; 30 | $colorSuccess: #41b222; 31 | $colorLight: #999999; 32 | $colorText: #101010; 33 | $colorTextHeader: #32465d; 34 | $colorTextTitle: #ffffff; 35 | $colorBlue: #227ab2; 36 | $colorSuccess: #41b222; 37 | $colorInfo: #227ab2; 38 | $colorPrimaryHighlight: #3a4856; 39 | 40 | // Generic 41 | $spacing: 40px; 42 | -------------------------------------------------------------------------------- /design/launch-page/styles/general/base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | font-size: 16px; 4 | color: $colorText; 5 | background-color: darken($colorText, 3%); 6 | } 7 | 8 | a { 9 | color: $colorAccent; 10 | } 11 | 12 | .accent a { 13 | color: #fff; 14 | } -------------------------------------------------------------------------------- /design/launch-page/styles/general/reset.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | .clearfix { 12 | clear: both; 13 | } 14 | 15 | *:focus { 16 | outline: none; 17 | } -------------------------------------------------------------------------------- /design/launch-page/styles/general/typography.scss: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-size: 36px; 3 | font-weight: normal; 4 | letter-spacing: 1px; 5 | margin-bottom: $spacing/2; 6 | 7 | &.smaller { 8 | font-size: 28px; 9 | } 10 | } 11 | 12 | body { 13 | font-family: "Open Sans", sans-serif; 14 | } 15 | 16 | h1 { 17 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | } 19 | 20 | .subtitle { 21 | font-size: 18px; 22 | opacity: 0.6; 23 | line-height: 1.5; 24 | } 25 | 26 | section .subtitle { 27 | max-width: 600px; 28 | margin-right: auto; 29 | margin-left: auto; 30 | } 31 | 32 | .bold { 33 | font-weight: bold; 34 | } 35 | 36 | .small { 37 | font-size: 14px; 38 | } 39 | 40 | .align-left { 41 | text-align: left; 42 | } 43 | 44 | .align-center { 45 | text-align: center; 46 | } 47 | 48 | .align-right { 49 | text-align: right; 50 | } 51 | 52 | .text-accent { 53 | color: $colorAccent; 54 | } 55 | 56 | .text-info { 57 | color: $colorInfo; 58 | } 59 | 60 | .text-success { 61 | color: $colorSuccess; 62 | } 63 | 64 | .text-disabled { 65 | color: #777; 66 | } 67 | -------------------------------------------------------------------------------- /design/launch-page/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Configuration 2 | @import 'config'; 3 | 4 | // Third party dependencies 5 | @import 'lib/bootstrap-grid'; 6 | 7 | // General 8 | @import 'general/reset'; 9 | @import 'general/base'; 10 | @import 'general/typography'; 11 | 12 | // Mixins 13 | @import 'mixins/transition'; 14 | @import 'mixins/responsive'; 15 | 16 | // UI components 17 | @import 'components/header'; 18 | @import 'components/menu'; 19 | @import 'components/button'; 20 | @import 'components/section'; 21 | @import 'components/icon-block'; 22 | @import 'components/screenshot'; 23 | @import 'components/spacer'; 24 | @import 'components/footer'; 25 | @import 'components/plan'; 26 | @import 'components/comparison'; 27 | @import 'components/flexbox'; 28 | @import 'components/image-builder'; 29 | @import 'components/sub-menu'; 30 | @import 'components/list'; 31 | @import 'components/content'; 32 | @import 'components/sub-content'; 33 | @import 'components/page-title'; 34 | @import 'components/wrapper'; 35 | -------------------------------------------------------------------------------- /design/launch-page/styles/mixins/responsive.scss: -------------------------------------------------------------------------------- 1 | // $xs: ~"screen and (max-width: 768px)"; 2 | // $sm: ~"screen and (max-width: 992px)"; 3 | // $md: ~"screen and (min-width: 992px)"; 4 | $xs: "(screen and (max-width: 768px))"; 5 | $sm: "(screen and (max-width: 992px))"; 6 | $md: "(screen and (min-width: 992px))"; 7 | -------------------------------------------------------------------------------- /design/launch-page/styles/mixins/transition.scss: -------------------------------------------------------------------------------- 1 | .transition { 2 | transition: 0.5 all linear; 3 | -webkit-transition: 0.5 all linear; 4 | -moz-transition: 0.5 all linear; 5 | -ms-transition: 0.5 all linear; 6 | -o-transition: 0.5 all linear; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 2, 3 | "env": { 4 | "development": { 5 | "plugins": ["react-transform"], 6 | "extra": { 7 | "react-transform": { 8 | "transforms": [ 9 | { 10 | "transform": "react-transform-hmr", 11 | "imports": ["react"], 12 | "locals": ["module"] 13 | } 14 | ] 15 | } 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /frontend/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components/ 2 | /dist/ 3 | /node_modules/ 4 | -------------------------------------------------------------------------------- /frontend/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "dependencies": {} 5 | } 6 | 7 | -------------------------------------------------------------------------------- /frontend/src/actions/BuilderActions.js: -------------------------------------------------------------------------------- 1 | import AppDispatcher from '../dispatchers/AppDispatcher.js'; 2 | import * as actionTypes from '../constants/ActionTypes'; 3 | import * as ProjectAPIUtils from '../utils/ProjectAPIUtils'; 4 | 5 | class BuilderActions { 6 | static saveProject(token, organisationUUID, project) { 7 | // Dispatch the login event on the view 8 | AppDispatcher.handleViewAction({ 9 | type: actionTypes.REQUEST_BUILDER_SAVE_PROJECT, 10 | project: project, 11 | organisationUUID: organisationUUID 12 | }); 13 | 14 | // login the user 15 | ProjectAPIUtils.create(token, organisationUUID, project.meta, project.files, project.envInfo); 16 | } 17 | } 18 | 19 | export default BuilderActions; 20 | -------------------------------------------------------------------------------- /frontend/src/actions/DockerHubActions.js: -------------------------------------------------------------------------------- 1 | import AppDispatcher from '../dispatchers/AppDispatcher.js'; 2 | import * as types from '../constants/ActionTypes'; 3 | 4 | export function setRepositories(repositories) { 5 | AppDispatcher.handleViewAction({ 6 | type: types.DOCKER_HUB_FETCH_REPOSITORIES, 7 | repositories: repositories 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /frontend/src/actions/OrganisationServerActions.js: -------------------------------------------------------------------------------- 1 | import AppDispatcher from '../dispatchers/AppDispatcher'; 2 | import * as actionTypes from '../constants/ActionTypes'; 3 | 4 | // Normal Responses 5 | export function receiveGetOrganisationMembersResponse(response) { 6 | AppDispatcher.handleServerAction({ 7 | type: actionTypes.RESPONSE_ORGANISATION_MEMBERS, 8 | response: response 9 | }); 10 | } 11 | 12 | export function receiveGetOrganisationMembersErrorResponse(err) { 13 | AppDispatcher.handleServerAction({ 14 | type: actionTypes.RESPONSE_ORGANISATION_MEMBERS_ERROR, 15 | error: err 16 | }); 17 | } 18 | -------------------------------------------------------------------------------- /frontend/src/actions/ProjectServerActions.js: -------------------------------------------------------------------------------- 1 | import AppDispatcher from '../dispatchers/AppDispatcher'; 2 | import * as actionTypes from '../constants/ActionTypes'; 3 | import * as ProjectConstants from '../constants/ProjectConstants'; 4 | 5 | // Normal Responses 6 | export function receiveProjectResponse(response) { 7 | AppDispatcher.handleServerAction({ 8 | type: actionTypes.RESPONSE_PROJECT, 9 | response: response 10 | }); 11 | } 12 | 13 | export function receiveProjectImageResponse(response) { 14 | AppDispatcher.handleServerAction({ 15 | type: actionTypes.RESPONSE_PROJECT_IMAGE, 16 | response: response 17 | }); 18 | } 19 | 20 | // Errors 21 | export function receiveProjectErrorResponse(err) { 22 | AppDispatcher.handleServerAction({ 23 | type: actionTypes.RESPONSE_PROJECT_ERROR, 24 | error: err 25 | }); 26 | } 27 | 28 | export function assignMemberResponse(response) { 29 | AppDispatcher.handleServerAction({ 30 | type: ProjectConstants.PROJECT_ASSIGN_MEMBER, 31 | response: response 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /frontend/src/components/App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./App.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/BaseComponent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Maxim on 17/08/2015. 3 | */ 4 | import React from 'react'; 5 | 6 | 7 | export default class BaseComponent extends React.Component { 8 | 9 | // bind functions to it's component by using this._bind('functionName', 'functionName2', ...) on extending 10 | // With React.createClass, every non-lifecycle method is auto bound to component instance, not with ES6! 11 | _bind(...methods) { 12 | methods.forEach((method) => this[method] = this[method].bind(this)); 13 | } 14 | } -------------------------------------------------------------------------------- /frontend/src/components/elements/AssignableMemberList/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/AssignableMemberList/avatar.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Builder/Builder.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .BuilderStep1Page Button { 4 | margin: 20px 0 10px 0; 5 | float: right; 6 | } 7 | 8 | .BuilderPage-HelpIcon { 9 | font-size: 13px; 10 | position: absolute; 11 | margin-left: 5px; 12 | font-weight: bold; 13 | } 14 | 15 | .BuilderPage-HelpIcon:hover { 16 | cursor: pointer; 17 | } 18 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Builder/option-dropdown-accent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Builder/option-dropdown-accent.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Builder/option-dropdown-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Builder/option-dropdown-success.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Builder/option-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Builder/option-dropdown.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Builder", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Builder.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Button/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Button { 4 | border-radius: 4px; 5 | border: 2px solid $color-primary; 6 | background-color: $color-primary; 7 | color: $color-primary; 8 | display: inline-block; 9 | text-decoration: none; 10 | padding: 9px 15px; 11 | font-size: 16px; 12 | font-weight: bold; 13 | cursor: pointer; 14 | } 15 | 16 | .Button-Form { 17 | border-radius: 0px; 18 | padding: 5px 10px; 19 | font-size: 14px; 20 | } 21 | 22 | .Button-Color-Orange { 23 | background-color: $color-accent; 24 | color: $color-white; 25 | border-color: $color-accent-shade-darker-1; 26 | } 27 | 28 | .Button-Color-Orange:hover { 29 | background-color: $color-accent-shade-lighter-1; 30 | color: $color-white; 31 | border-color: $color-accent; 32 | } 33 | 34 | .Button-Color-White { 35 | background-color: $color-white; 36 | color: $color-primary; 37 | border-color: $color-white; 38 | } 39 | 40 | .Button-Inline { 41 | display: inline-block; 42 | } 43 | 44 | .Button-DragIcon { 45 | cursor: move; 46 | } 47 | 48 | .Button-Align-Right { 49 | float: right; 50 | } 51 | 52 | .Button-Align-Left { 53 | float: left; 54 | } 55 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Button", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Button.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/CRUDList/CRUDList.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .CRUDList h1 { 4 | font-size: 14px; 5 | letter-spacing: 1px; 6 | } 7 | 8 | /*.CRUDList form .Input { 9 | width: calc(100% - 80px); 10 | }*/ 11 | 12 | .CRUDList form .Button { 13 | width: 80px; 14 | border: 1px solid rgba(0, 0, 0, 0.07); 15 | } 16 | -------------------------------------------------------------------------------- /frontend/src/components/elements/CRUDList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CRUDList", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./CRUDList.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DistributionPicker/DistributionPicker.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .DistributionPicker-FlexContainer { 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | .DistributionPicker-PickDistribution:hover { 9 | cursor: pointer; 10 | } 11 | 12 | .DistributionPicker-PickDistribution { 13 | background-color: #FFFFFF; 14 | border: 1px solid #cccccc; 15 | 16 | margin: 20px; 17 | font-weight: bold; 18 | font-size: 14px; 19 | text-align: center; 20 | padding: 10px; 21 | flex-grow: 3; 22 | border-radius: 3px; 23 | } 24 | 25 | .DistributionPicker-PickDistribution h1 { 26 | font-size: 24px; 27 | margin: 0 0 5px 0; 28 | } 29 | 30 | .DistributionPicker-PickDistribution img { 31 | height: 64px; 32 | max-width: 150px; 33 | margin: 0 auto; 34 | padding: 10px 0 10px 0; 35 | display: block; 36 | } 37 | 38 | .DistributionPicker-PickDistribution-Selected { 39 | border: 1px solid $color-success; 40 | color: $color-success; 41 | } 42 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DistributionPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DistributionPicker", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./DistributionPicker.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Divider/Divider.js: -------------------------------------------------------------------------------- 1 | import styles from './Divider.scss'; 2 | 3 | import React, { PropTypes } from 'react'; 4 | import cx from 'classnames'; 5 | 6 | class Divider extends React.Component { 7 | render() { 8 | var className = cx( 9 | styles['Divider'], 10 | this.props.align === 'horizontal' ? styles['Divider-Horizontal'] : null, 11 | this.props.align === 'vertical' ? styles['Divider-Vertical'] : null, 12 | ); 13 | 14 | return ( 15 |
16 | { 17 | this.props.text ? 18 | {this.props.text} 19 | : undefined 20 | } 21 |
22 | ); 23 | } 24 | }; 25 | 26 | Divider.propTypes = { 27 | text: PropTypes.string, 28 | align: PropTypes.string 29 | }; 30 | 31 | Divider.defaultProps = { 32 | text: '', 33 | align: 'horizontal' 34 | }; 35 | 36 | export default Divider; 37 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Divider/Divider.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Divider { 4 | text-align: center; 5 | } 6 | 7 | .Divider span { 8 | background: #FFF; 9 | text-transform: uppercase; 10 | font-weight: bold; 11 | } 12 | 13 | .Divider { 14 | text-align: center; 15 | } 16 | 17 | .Divider-Horizontal { 18 | border-bottom: 1px solid $colorBorder; 19 | width: 100%; 20 | line-height: 0.1em; 21 | margin: 20px 0; 22 | } 23 | 24 | .Divider-Vertical { 25 | border-right: 1px solid $colorBorder; 26 | width: 1px; 27 | height: 20px; 28 | display: inline-block; 29 | float: left; 30 | margin-top: 25px; 31 | } 32 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Divider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Divider", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Divider" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DockerHubSearch/DockerHubSearch.js: -------------------------------------------------------------------------------- 1 | import styles from './DockerHubSearch.scss'; 2 | 3 | import React, { PropTypes } from 'react'; 4 | import DockerHubService from '../../../services/DockerHubService'; 5 | 6 | export default class DockerHubSearch extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | repositories: [] 12 | }; 13 | } 14 | 15 | handleChange(e) { 16 | console.log(e.target.value); 17 | DockerHubService.fetchRepositories(e.target.value) 18 | .catch(function(err) { 19 | console.log('error fetching repositories'); 20 | }); 21 | } 22 | 23 | render() { 24 | return ( 25 |
26 | 27 |
28 | ); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DockerHubSearch/DockerHubSearch.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .DockerHubSearch { 4 | margin: 0 auto; 5 | width: 30%; 6 | } 7 | 8 | .DockerHubSearch input { 9 | width: 100%; 10 | padding: 10px 10px; 11 | font-weight: normal; 12 | color: $color-black; 13 | display: inline-block; 14 | box-sizing: border-box; 15 | border: 1px solid #cccccc; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DockerHubSearch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DockerHubSearch", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./DockerHubSearch" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DockerfileViewer/DockerfileViewer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .DockerfileViewer-Dockerfile { 4 | background-color: $color-terminal; 5 | min-height: 100px; 6 | border-radius: 3px; 7 | padding: 10px 15px; 8 | color: $color-terminal-text; 9 | text-shadow: 0 0 1px $color-terminal-text-shadow; 10 | overflow-x: scroll; 11 | } 12 | 13 | .DockerfileViewer-Dockerfile > div { 14 | margin-bottom: 10px; 15 | } 16 | 17 | .DockerfileViewer-Dockerfile > div:last-child { 18 | margin-bottom: 0px; 19 | } 20 | 21 | .DockerfileViewer-StartupParams { 22 | background-color: $color-terminal; 23 | min-height: 100px; 24 | border-radius: 3px; 25 | padding: 10px 15px; 26 | color: $color-terminal-text; 27 | text-shadow: 0 0 1px $color-terminal-text-shadow; 28 | } 29 | 30 | .DockerfileViewer-StartupParams > div { 31 | margin-bottom: 10px; 32 | } 33 | 34 | .DockerfileViewer-StartupParams > div:last-child { 35 | margin-bottom: 0px; 36 | } 37 | 38 | .DockerfileViewer-StartupScript { 39 | background-color: $color-terminal; 40 | min-height: 100px; 41 | border-radius: 3px; 42 | padding: 10px 15px; 43 | color: $color-terminal-text; 44 | text-shadow: 0 0 1px $color-terminal-text-shadow; 45 | } 46 | 47 | .DockerfileViewer-StartupScript > div { 48 | margin-bottom: 10px; 49 | } 50 | 51 | .DockerfileViewer-StartupScript > div:last-child { 52 | margin-bottom: 0px; 53 | } 54 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DockerfileViewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DockerfileViewer", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./DockerfileViewer.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/Dropdown.js: -------------------------------------------------------------------------------- 1 | import fa from 'font-awesome/css/font-awesome.css'; 2 | import styles from './Dropdown.scss'; 3 | 4 | import React, {PropTypes } from 'react'; 5 | import cx from 'classnames'; 6 | 7 | class Dropdown extends React.Component { 8 | handleChange (el) { 9 | this.props.onChange(this.refs.dropdownOption.getDOMNode().value); 10 | } 11 | 12 | render() { 13 | var self = this; 14 | var options = []; 15 | 16 | this.props.items.forEach((item, index) => { 17 | options.push(); 18 | }); 19 | 20 | var className = cx( 21 | styles['Dropdown'], 22 | this.props.isSelected ? 'Dropdown-Selected' : null 23 | ); 24 | 25 | return ( 26 |
27 | 30 |
31 | ); 32 | } 33 | }; 34 | 35 | Dropdown.propTypes = { 36 | items: PropTypes.array, 37 | isSelected: PropTypes.bool, // Is the current selectdown box selected (different color) 38 | onChange: PropTypes.func 39 | }; 40 | 41 | Dropdown.defaultProps = { 42 | items: [], 43 | isSelected: false 44 | }; 45 | 46 | export default Dropdown; 47 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/Dropdown.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Dropdown select { 4 | margin: 0; 5 | width: 90%; 6 | background: url("./option-dropdown.png") no-repeat right #FFF; 7 | color: $color-black; 8 | border: 0; 9 | border-radius: 0; 10 | -webkit-appearance: none; 11 | height: 34px; 12 | line-height: 1; 13 | font-size: 12px; 14 | font-weight: normal; 15 | padding: 5px 25px 5px 10px; 16 | } 17 | 18 | .Dropdown-Selected { 19 | color: $color-success !important; 20 | } 21 | 22 | .Dropdown-Selected select { 23 | background: url("./option-dropdown-success.png") no-repeat right #FFF !important; 24 | color: $color-success !important; 25 | text-align: center; 26 | } 27 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/option-dropdown-accent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Dropdown/option-dropdown-accent.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/option-dropdown-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Dropdown/option-dropdown-success.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/option-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Dropdown/option-dropdown.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dropdown", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Dropdown" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DropdownMenu/DropdownMenuItem.js: -------------------------------------------------------------------------------- 1 | import styles from './DropdownMenu.scss'; 2 | import React, { PropTypes } from 'react'; 3 | 4 | class DropdownMenuItem extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | _handleOnClick() { 10 | if (this.props.onClick) { 11 | this.props.onClick(this.props.children); 12 | } 13 | 14 | // perform a fake click so it closes the menu 15 | document.body.click(); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 | {this.props.children} 22 |
23 | ); 24 | } 25 | }; 26 | 27 | DropdownMenuItem.propTypes = { 28 | onClick: PropTypes.func 29 | }; 30 | 31 | DropdownMenuItem.defaultProps = { 32 | onClick: function () {} 33 | }; 34 | 35 | export default DropdownMenuItem; 36 | -------------------------------------------------------------------------------- /frontend/src/components/elements/DropdownMenu/caret_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/DropdownMenu/caret_down.png -------------------------------------------------------------------------------- /frontend/src/components/elements/DropdownMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DropdownMenu", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./DropdownMenu.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/FlexContainer/FlexContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from "./FlexContainer.scss"; 3 | 4 | export default class FlexContainer extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 |
12 | {this.props.children} 13 |
14 | ) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /frontend/src/components/elements/FlexContainer/FlexContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .FlexContainer { 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/FlexContainer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "FlexContainer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "main": "./FlexContainer.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Footer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Footer", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Footer.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Form/Form.js: -------------------------------------------------------------------------------- 1 | import styles from './Form.scss'; 2 | import React, { PropTypes } from 'react'; 3 | import cx from 'classnames'; 4 | 5 | class Form extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 |
13 | {this.props.children} 14 |
15 | ); 16 | } 17 | }; 18 | 19 | Form.propTypes = { 20 | 21 | }; 22 | 23 | Form.defaultProps = { 24 | 25 | }; 26 | 27 | export default Form; 28 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Form/Form.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Form/Form.scss -------------------------------------------------------------------------------- /frontend/src/components/elements/Form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Form", 3 | "main": "./Form.js", 4 | "private": true, 5 | "version": "0.0.0" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/HeaderSmall/HeaderSmall.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .HeaderSmall { 4 | background: $color-primary; 5 | color: #fff; 6 | } 7 | 8 | .container { 9 | margin: 0 auto; 10 | padding: 20px 40px; 11 | } 12 | 13 | .Navigation { 14 | float: right; 15 | margin-top: 10px; 16 | } 17 | 18 | .Navigation a { 19 | color: #fff; 20 | margin-left: 20px; 21 | font-size: 16px; 22 | font-weight: bold; 23 | letter-spacing: 1px; 24 | text-decoration: none; 25 | } 26 | 27 | .Logo { 28 | float: left; 29 | height: auto; 30 | } 31 | 32 | .clear { 33 | clear: both; 34 | } 35 | -------------------------------------------------------------------------------- /frontend/src/components/elements/HeaderSmall/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HeaderSmall", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./HeaderSmall.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Image/Image.js: -------------------------------------------------------------------------------- 1 | import styles from './Image.scss'; 2 | import React, { PropTypes } from 'react'; 3 | 4 | class Image extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | ) 15 | } 16 | } 17 | 18 | Image.defaultProps = { 19 | src: "", 20 | defaultSrc: "" 21 | }; 22 | 23 | Image.propTypes = { 24 | src: PropTypes.string, 25 | defaultSrc: PropTypes.string 26 | }; 27 | 28 | export default Image; 29 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Image/Image.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | height: 40px; 3 | width: 40px; 4 | } 5 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Image/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Image", 3 | "version": "0.0.0", 4 | "main": "./Image.js", 5 | "private": true 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/InlineContainer/InlineContainer.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import './InlineContainer.scss'; 3 | 4 | export default React.createClass({ 5 | propTypes: { 6 | }, 7 | 8 | getDefaultProps() { 9 | return { 10 | } 11 | }, 12 | 13 | render() { 14 | return
{this.props.children}
; 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /frontend/src/components/elements/InlineContainer/InlineContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Inline-Container > * { 4 | display: inline-block; 5 | } 6 | -------------------------------------------------------------------------------- /frontend/src/components/elements/InlineContainer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "InlineContainer", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./InlineContainer.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Input/Input.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Input label { 4 | display: block; 5 | font-size: 14px; 6 | font-weight: normal; 7 | letter-spacing: 1px; 8 | } 9 | 10 | .Input input { 11 | margin: 0 auto; 12 | padding: 7px 10px; 13 | width: 100%; 14 | margin: 2px 0 15px 0; 15 | border: 1px solid $colorBorder; 16 | } 17 | 18 | .validation-error { 19 | border: 1px solid red; 20 | color: red; 21 | } 22 | 23 | .validation-errors > li{ 24 | font-style: italic; 25 | color: red; 26 | } 27 | 28 | .Input-Inline { 29 | display: inline-block; 30 | } 31 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Input", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Input.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/List/List.js: -------------------------------------------------------------------------------- 1 | import styles from './List.scss'; 2 | 3 | import React, { PropTypes } from 'react'; 4 | 5 | class List extends React.Component { 6 | render() { 7 | return ( 8 | 11 | ); 12 | } 13 | }; 14 | 15 | export default List; 16 | -------------------------------------------------------------------------------- /frontend/src/components/elements/List/List.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .List { 4 | list-style: none; 5 | padding: 0; 6 | } 7 | 8 | .List li { 9 | border-bottom: none; 10 | position: relative; 11 | display: flex; 12 | align-items: stretch; 13 | background-color: $colorContainer; 14 | margin: 5px 0; 15 | border: 1px solid $colorBorder; 16 | border-radius: 5px; 17 | } 18 | 19 | .List li > span { 20 | padding: 7px 10px; 21 | align-self: center; 22 | } 23 | 24 | .List Button:first-child { 25 | color: $color-white-shade-darker-5; 26 | background-color: $colorContainer; 27 | border: none; 28 | } 29 | 30 | .List Button:last-child { 31 | margin-left: auto; 32 | } 33 | 34 | .List Button { 35 | text-align: center; 36 | width: 38px; 37 | } 38 | -------------------------------------------------------------------------------- /frontend/src/components/elements/List/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "List", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./List" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItem/Constants.js: -------------------------------------------------------------------------------- 1 | export default { 2 | LIST_ITEM: 'list_item' 3 | }; 4 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItem/ListItem.js: -------------------------------------------------------------------------------- 1 | import styles from './ListItem.scss'; 2 | import fa from 'font-awesome/css/font-awesome.css'; 3 | 4 | import React, { PropTypes } from 'react'; 5 | import Button from '../Button'; 6 | import { ItemTypes } from './Constants'; 7 | import cx from 'classnames'; 8 | 9 | const style = { 10 | 11 | }; 12 | 13 | const Types = { 14 | LIST_ITEM: 'list_item' 15 | }; 16 | 17 | class ListItem extends React.Component { 18 | constructor (props) { 19 | super(props); 20 | } 21 | 22 | handleRemove() { 23 | this.props.onClickRemove(this.props.id); 24 | } 25 | 26 | render() { 27 | const { value, canRemove } = this.props; 28 | 29 | return ( 30 |
  • 31 | {value} 32 | {this.props.children} 33 | {canRemove ?
    • 35 | ); 36 | } 37 | }; 38 | 39 | ListItem.propTypes = { 40 | value: PropTypes.string, 41 | canRemove: PropTypes.bool, 42 | id: PropTypes.number, 43 | onClickRemove: PropTypes.func 44 | }; 45 | 46 | ListItem.defaultProps = { 47 | value: '', 48 | canRemove: false, 49 | id: null, 50 | onClickRemove: function () {} 51 | }; 52 | 53 | export default ListItem; 54 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItem/ListItem.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ListItem", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./ListItem" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItemMove/Constants.js: -------------------------------------------------------------------------------- 1 | export default { 2 | LIST_ITEM: 'list_item' 3 | }; 4 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItemMove/ListItemMove.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ListItemMove/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ListItemMove", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./ListItemMove" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Logo/Logo.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import cx from 'classnames'; 3 | import styles from './Logo.scss'; 4 | 5 | class Logo extends React.Component { 6 | render() { 7 | // var classes = cx({ 8 | // styles.Logo: true, 9 | // styles['Align-Right']: this.props.align === 'right', 10 | // styles['Align-Left']: this.props.align === 'left', 11 | // }); 12 | 13 | return ( 14 | 15 | Logo 16 | {this.props.name} 17 | 18 | ); 19 | } 20 | 21 | } 22 | 23 | Logo.defaultProps = { 24 | name: "Brewr", 25 | align: "" 26 | }; 27 | 28 | Logo.propTypes = { 29 | name: PropTypes.string, 30 | align: PropTypes.string 31 | }; 32 | 33 | export default Logo; 34 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Logo/Logo.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Logo { 4 | text-decoration: none; 5 | } 6 | 7 | .img { 8 | } 9 | 10 | .txt { 11 | text-align: center; 12 | vertical-align: middle; 13 | margin-left: 10px; 14 | color: $color-white; 15 | font-size: 32px; 16 | letter-spacing: 1px; 17 | font-weight: bold; 18 | float: right; 19 | } 20 | 21 | .Align-Left { 22 | float: left; 23 | } 24 | 25 | .Align-Right { 26 | float: right; 27 | } 28 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/Logo/logo.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Logo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Logo", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./Logo.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/MemberList/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/XavierGeerinck/Brewr-Site/ff4dae626e37ad84f7fde377b04618c5d706e66b/frontend/src/components/elements/MemberList/avatar.png -------------------------------------------------------------------------------- /frontend/src/components/elements/Panel/Panel.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .Panel { 4 | width: auto; 5 | display: block; 6 | padding: 20px 50px; 7 | flex-grow: 3; 8 | } 9 | 10 | .Panel h1 { 11 | font-size: 18px; 12 | letter-spacing: 2px; 13 | } 14 | 15 | .Panel-Half { 16 | min-width: 50%; 17 | } 18 | 19 | .Panel-A-Third { 20 | min-width: 33.3%; 21 | } 22 | 23 | .Panel-Full { 24 | min-width: 100%; 25 | } 26 | 27 | .Panel-HelpIcon { 28 | font-size: 14px; 29 | margin: 0 0 0 5px; 30 | position: absolute; 31 | } 32 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Panel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Panel", 3 | "private": true, 4 | "version": "0.0.0", 5 | "main": "./Panel.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ProjectFileTable/ProjectFileTable.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import BaseComponent from '../../BaseComponent'; 3 | 4 | export default class ProjectFileTable extends BaseComponent { 5 | 6 | //TODO: make project revision table component 7 | 8 | constructor() { 9 | super(); 10 | } 11 | 12 | render() { 13 | 14 | const { files } = this.props; 15 | 16 | return ( 17 | 18 | 19 | 20 | { files.map(r => { 21 | /*return ( 22 | 23 | 24 | 25 | 26 | );*/ 27 | })} 28 | 29 | 30 |
    {r.revision_number}{r.created_at}
    31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /frontend/src/components/elements/ProjectRevisionTable/ProjectRevisionTable.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import BaseComponent from '../../BaseComponent'; 3 | 4 | export default class ProjectRevisionTable extends BaseComponent { 5 | 6 | //TODO: make project revision table component 7 | 8 | constructor() { 9 | super(); 10 | } 11 | 12 | render() { 13 | 14 | const { revisions } = this.props; 15 | 16 | return ( 17 | 18 | 19 | { revisions.map(r => { 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | })} 28 | 29 |
    {r.revision_number}{r.created_at}
    30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /frontend/src/components/elements/SideMenu/SideMenu.js: -------------------------------------------------------------------------------- 1 | import styles from './SideMenu.scss'; 2 | import fa from 'font-awesome/css/font-awesome.css'; 3 | 4 | import React, { PropTypes } from 'react'; 5 | import { Link } from 'react-router'; 6 | import cx from 'classnames'; 7 | import SideMenuContainer from './SideMenuContainer'; 8 | import SideMenuItem from './SideMenuItem'; 9 | 10 | class SideMenu extends React.Component { 11 | constructor(props) { 12 | super(props); 13 | } 14 | 15 | render() { 16 | const { title } = this.props; 17 | 18 | return ( 19 |
    20 | { 21 | title ? 22 |

    23 | {title} 24 |

    25 | : undefined 26 | } 27 | 28 | 29 |
    30 | ); 31 | } 32 | }; 33 | 34 | SideMenu.propTypes = { 35 | title: PropTypes.string 36 | }; 37 | 38 | SideMenu.defaultProps = { 39 | title: "" 40 | }; 41 | 42 | SideMenu.SideMenuContainer = SideMenuContainer; 43 | SideMenu.SideMenuItem = SideMenuItem; 44 | 45 | export default SideMenu; 46 | -------------------------------------------------------------------------------- /frontend/src/components/elements/SideMenu/SideMenuItem.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import { Link } from 'react-router'; 3 | import cx from 'classnames'; 4 | 5 | class SideMenuItem extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | const { link, isStickBottom } = this.props; 12 | var className = cx({ 13 | 'SideMenuItem': true, 14 | 'SideMenuItem-Active': window.location && window.location.hash.indexOf(link) !== -1, 15 | 'SideMenuItem-StickBottom': isStickBottom 16 | }); 17 | 18 | return ( 19 |
  • 20 | { 21 | link ? 22 | {this.props.children} 23 | : this.props.children 24 | } 25 |
    • 26 | ); 27 | } 28 | }; 29 | 30 | SideMenuItem.propTypes = { 31 | link: PropTypes.string, 32 | isStickBottom: PropTypes.bool 33 | }; 34 | 35 | SideMenuItem.defaultProps = { 36 | link: null, 37 | isStickBottom: false 38 | }; 39 | 40 | export default SideMenuItem; 41 | -------------------------------------------------------------------------------- /frontend/src/components/elements/SideMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SideMenu", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./SideMenu.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/TabContainer/TabContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/colors'; 2 | 3 | .TabContainer { 4 | 5 | } 6 | 7 | .TabContainer-Tabs { 8 | list-style: none; 9 | margin: 0; 10 | padding: 0; 11 | border-bottom: 1px solid #ddd; 12 | margin-bottom: 15px; 13 | } 14 | 15 | .TabContainer-Tab-Selected { 16 | border: 1px solid #ddd; 17 | border-bottom-color: transparent !important; 18 | } 19 | 20 | .TabContainer-Tab-Selected a { 21 | color: $color-text-selected !important; 22 | } 23 | 24 | .TabContainer-Tabs li { 25 | display: inline-block; 26 | padding: 5px 10px; 27 | 28 | margin-bottom: -1px; /* Hack to remove the border */ 29 | } 30 | 31 | .TabContainer-Tabs li a { 32 | letter-spacing: 1px; 33 | color: $color-text; 34 | text-decoration: none; 35 | } 36 | 37 | .TabContainer-Tabs li:hover { 38 | color: $color-text-hover; 39 | cursor: pointer; 40 | } 41 | -------------------------------------------------------------------------------- /frontend/src/components/elements/TabContainer/TabItem.js: -------------------------------------------------------------------------------- 1 | import "./TabContainer.scss"; 2 | import React, { PropTypes } from 'react'; 3 | 4 | class TabItem extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | 9 | render() { 10 | return ( 11 |
    12 | {this.props.children} 13 |
    14 | ) 15 | } 16 | }; 17 | 18 | TabItem.propTypes = { 19 | title: PropTypes.string 20 | }; 21 | 22 | TabItem.defaultProps = { 23 | title: "" 24 | }; 25 | 26 | export default TabItem; 27 | -------------------------------------------------------------------------------- /frontend/src/components/elements/TabContainer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TabContainer", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "./TabContainer.js" 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/Table.js: -------------------------------------------------------------------------------- 1 | import styles from './Table.scss'; 2 | import React, { PropTypes } from 'react'; 3 | import cx from 'classnames'; 4 | 5 | class Table extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | {this.props.children} 14 |
    15 | ); 16 | } 17 | } 18 | 19 | Table.defaultProps = { 20 | }; 21 | 22 | Table.propTypes = { 23 | }; 24 | 25 | export default Table; 26 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/Table.scss: -------------------------------------------------------------------------------- 1 | @import '../../../css/dimensions'; 2 | @import '../../../css/colors'; 3 | 4 | .Table { 5 | width: 100%; 6 | height: 100%; 7 | border-radius: 3px; 8 | border: 1px solid rgba(0, 0, 0, 0.05); 9 | font-size: $dimensionTextSmaller; 10 | } 11 | 12 | .Table > thead { 13 | background-color: rgba(0, 0, 0, 0.05); 14 | text-weight: bold; 15 | } 16 | 17 | .Table tr { 18 | border: 1px solid rgba(0, 0, 0, 0.05); 19 | } 20 | 21 | .Table > thead td { 22 | padding: 10px 8px; 23 | } 24 | 25 | .Table > tbody td { 26 | padding: 10px 8px; 27 | } 28 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/TableButtons.js: -------------------------------------------------------------------------------- 1 | import styles from './TableButtons.scss'; 2 | import React, { PropTypes } from 'react'; 3 | import cx from 'classnames'; 4 | 5 | class TableButtons extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 |
    13 | {this.props.children} 14 |
    15 | ); 16 | } 17 | }; 18 | 19 | TableButtons.propTypes = { 20 | 21 | }; 22 | 23 | TableButtons.defaultProps = { 24 | 25 | }; 26 | 27 | export default TableButtons; 28 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/TableButtons.scss: -------------------------------------------------------------------------------- 1 | .TableButtons { 2 | padding: 10px 0; 3 | } 4 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './Table'; 2 | import TableButtons from './TableButtons'; 3 | 4 | export default { 5 | Table: Table, 6 | TableButtons: TableButtons 7 | } 8 | -------------------------------------------------------------------------------- /frontend/src/components/elements/Table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Table", 3 | "version": "0.0.0", 4 | "main": "./index.js", 5 | "private": true 6 | } 7 | -------------------------------------------------------------------------------- /frontend/src/components/elements/TextBox/TextBox.js: -------------------------------------------------------------------------------- 1 | import styles from './TextBox.scss'; 2 | import React, { PropTypes } from 'react'; 3 | 4 | class TextBox extends React.Component { 5 | render () { 6 | return ( 7 |
    8 | { 9 | this.props.maxLines > 1 ? 10 |