summaryrefslogtreecommitdiff
path: root/pages/docs/platform/services
diff options
context:
space:
mode:
Diffstat (limited to 'pages/docs/platform/services')
-rw-r--r--pages/docs/platform/services/webapp.md136
1 files changed, 135 insertions, 1 deletions
diff --git a/pages/docs/platform/services/webapp.md b/pages/docs/platform/services/webapp.md
index d5c8eaa..38b1825 100644
--- a/pages/docs/platform/services/webapp.md
+++ b/pages/docs/platform/services/webapp.md
@@ -82,11 +82,145 @@ For example:
To interactively develop your customizations before you deploy them, you have two options:
-1. Edit a `webapp` node. This approach involves directly modifying the contents of the directory `/srv/leap/webapp/config/customization` on a deployed `webapp` node. This can, and probably should be, a "local" node. When doing this, you may need to restart leap_web in order for changes to take effect (`touch /srv/leap/webapp/tmp/restart.txt`). Sometimes a `rake tmp:clear` and a rails restart is required to pick up a new stylesheet.
+1. Edit a `webapp` node. This approach involves directly modifying the contents of the directory `/srv/leap/webapp/config/customization` on a deployed `webapp` node. This can, and probably should be, a "local" node. When doing this, you may need to restart leap_web in order for changes to take effect (`touch /srv/leap/webapp/tmp/restart.txt`).
2. Alternately, you can install leap_web to run on your computer and edit files in `config/customization` locally. This approach does not require a provider or a `webapp` node. For more information, see the [leap_web README](https://github.com/leapcode/leap_web).
+NOTE: If you add a `tails.scss` or `head.scss` file, then you usually need to run `rake tmp:clear` and restart rails in order for the new stylesheet to get recognized. You should only need to do this once.
+
Once you have what you want, then copy these files to the local provider directory `files/webapp` so that they will be installed each time you deploy.
+Customization tutorial
+----------------------------
+
+This mini-tutorial will walk you through creating a custom "branding" of the leap_web application. We will be creating a provider called "Prehistoric Computer."
+
+Here are the files we are going to create:
+
+ leap_web/config/customization
+ ├── locales
+ │   ├── en.yml
+ │   └── es.yml
+ ├── public
+ │   ├── favicon.ico
+ │   └── img
+ │   └── masthead.png
+ ├── stylesheets
+ │   └── tail.scss
+ └── views
+ └── pages
+ ├── privacy-policy.en.md
+ └── privacy-policy.es.md
+
+All these files are available in the source code in the [[customization.example => https://github.com/leapcode/leap_web/tree/develop/config/customization.example]] directory.
+
+Remember, these files may live different places:
+
+* `user@localmachine$ leap_web/config/customization`: This will be the path if you have checked out a local copy of leap_web.git and are running `rails server` locally in order to test your customizations.
+* `user@localmachine$ PROVIDER/files/webapp`: This is the local provider directory where the files should be put so that they get correctly deployed to webapp nodes.
+* `root@webappnode# /srv/leap/webapp/config/customization`: This is where the files in the local provider directory `PROVIDER/files/webapp` get copied to after a `leap deploy` to a live webapp nodes.
+
+### Override translations
+
+You can add additional locale files in order to change the text used in the existing application and to add translations for string that you added to the application.
+
+In this example, we will be altering the default text for the "login_info" string. In `config/locales/en/home.en.yml` there is this entry:
+
+ en:
+ login_info: "Log in to change your account settings, create support tickets, and manage payments."
+
+We are going to override this with some custom text in English and Spanish:
+
+`leap_web/config/customization/locale/en.yml`:
+
+ en:
+ login_info: Authenticate to change your "Prehistoric Computer" settings.
+
+`leap_web/config/customization/locale/es.yml`:
+
+ es:
+ login_info: Autenticar a cambiar la configuración de "Computer Prehistoria."
+
+Now, the home page of leap_web will use these new strings instead of the default. Remember that you must restart rails in order for new locale files to take effect.
+
+### Override static pages
+
+You can also override any of the static files included with leap_web, such as the privacy policy or terms of service.
+
+Here is how we would create a custom privacy policy in English and Spanish:
+
+`leap_web/config/customization/views/pages/privacy-policy.en.md`:
+
+ # Custom Privacy Policy
+ This is our privacy policy.
+
+`leap_web/config/customization/views/pages/privacy-policy.es.md`:
+
+ # Custom Política de Privacidad
+ Esta es nuestra política de privacidad.
+
+### Add a custom header
+
+Now we will add a custom header to every page. First, we add the images:
+
+ leap_web/config/customization
+ ├── public
+ ├── favicon.ico
+ └── img
+ └── masthead.png
+
+You can create your own, or use the example files in https://github.com/leapcode/leap_web/tree/develop/config/customization.example
+
+Now, we add some custom CSS so that we can style the masthead:
+
+`leap_web/config/customization/stylesheets/tail.scss`
+
+ $custom-color: #66bbaa;
+
+ a {
+ color: $custom-color;
+ }
+
+ //
+ // MASTHEAD
+ //
+
+ #masthead {
+ background-color: $custom-color;
+ border-bottom: none;
+
+ // make the masthead clickable by replacing the
+ // site name link with the masthead image:
+ .title {
+ padding: 0px;
+ .sitename a {
+ display: block;
+ background: url(/img/masthead.png) 0 0 no-repeat;
+ font-size: 0px;
+ height: 100px;
+ background-size: auto 100px;
+ }
+ }
+ }
+
+ // make the home page masthead slightly larger
+ body.home #masthead {
+ .sitename a {
+ height: 150px;
+ background-size: auto 150px;
+ }
+ }
+
+ //
+ // FOOTER
+ //
+
+ #footer .links {
+ background-color: $custom-color;
+ }
+
+NOTE: If you add a `tails.scss` or `head.scss` file, then you usually need to run `rake tmp:clear` and restart rails in order for the new stylesheet to get recognized. You should only need to do this once.
+
+
Custom Fork
----------------------------