diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index a5067a1e8b1a..276ffcdc3367 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -254,6 +254,7 @@ GEM PLATFORMS x86_64-darwin-20 + x86_64-darwin-21 DEPENDENCIES github-pages diff --git a/docs/README.md b/docs/README.md index b9b234ae74e8..c50c8234aae7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,14 +11,14 @@ Expensify Help is mainly composed of static HTML (`.html`) and Markdown (`.md`) - Install Jekyll locally by running: ``` gem install bundler -cd help +cd docs bundle install ``` ## Steps 1. Open the Terminal command line in macOS. -2. Navigate to the `help` folder in the command line. +2. Navigate to the `docs` folder in the command line. 3. Run `bundle exec jekyll serve --livereload`. - _Note: If you see an error like `Unable to load the EventMachine C Extension...`, try running `gem uninstall eventmachine && bundle install`. If that doesn't work just removing the `--livereload` flag should work._ 4. Open http://localhost:4000 in the browser to see the site running locally. @@ -26,8 +26,8 @@ bundle install # How the project is structured -The [help](https://github.com/Expensify/App/tree/e6cea38ef22f83ae4730a34a9281d8962388dff8/help) folder will contain the following main folders: -- *_layouts*: This contains HTML templates used by Jekyll to create pages in the static site. For now it has only one file ([default.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_layouts/default.html)) which will render the common HTML elements and the assets on every page. It also supports the use of the [liquid template language](https://shopify.github.io/liquid/). +The [docs](https://github.com/Expensify/App/tree/main/docs) folder will contain the following main folders: +- *_layouts*: This contains HTML templates used by Jekyll to create pages in the static site. For now it has only one file ([default.html](https://github.com/Expensify/App/blob/main/docs/_layouts/default.html)) which will render the common HTML elements and the assets on every page. It also supports the use of the [liquid template language](https://shopify.github.io/liquid/). - *_includes*: Contains HTML content that can be reused on different pages. For now, it contains various html elements that are used to populate the left-hand-nav (LHN). - *assets*: it will contain the three sub-folders css, images, and js. - The css folder can contain either .css or .sass files (where SASS files will be processed by Jekyll and it will generate a CSS file in an output folder also generated by Jekyll). @@ -43,7 +43,7 @@ More details about the Jekyll project structure can be found [here](https://jeky ## Add content -Copy the [template](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/TEMPLATE.md) file and rename it with the name of the article title, i.e. [SmartScan.md](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/request-money/request-money/SmartScan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page). +Copy the [template](https://github.com/Expensify/App/blob/main/docs/TEMPLATE.md) file and rename it with the name of the article title, i.e. [SmartScan.md](https://github.com/Expensify/App/blob/main/docs/articles/request-money/SmartScan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page). The sections of the article will be filled and nested automatically in the LHN, just ensure to use the [heading markdown tags](https://www.markdownguide.org/cheat-sheet/) correctly. @@ -58,25 +58,25 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt -
+
-
+
SmartScan
- +
-
+
Another Article
- +
@@ -101,7 +101,7 @@ Where `id` is an arbitrary value that will help us to anchor this title to the L If it's required, you can add a new row of Card buttons with the following HTML block: ```html -
+
``` @@ -110,15 +110,15 @@ If it's required, you can add a new row of Card buttons with the following HTML A card button is the box that contains the article title and the caret right icon `>`. It navigates to the article when it's pressed. -In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/send-money/index.html) or [request-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/articles/request-money/index.html)) just copy and pase the following Card element: +In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/send-money.html) or [request-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/request-money.html)) just copy and pase the following Card element: ```html -
+
SmartScan
- +
``` @@ -147,7 +147,7 @@ There are 2 main components in the LHN page associated with the hub you're addin ### Add a new Stage title anchor (optional) -Just add copy and paste the following HTML block in the corresponding navigation tree file (either for [Request Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_includes/request-money-navigation-tree.html) or [Send Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/docs/_includes/send-money-navigation-tree.html)): +Just add copy and paste the following HTML block in the corresponding navigation tree file (either for [Request Money](https://github.com/Expensify/App/blob/main/docs/_includes/request-money-lhn.html) or [Send Money](https://github.com/Expensify/App/blob/main/docs/_includes/send-money-lhn.html)): ```
  • Request Money diff --git a/docs/_includes/home-lhn.html b/docs/_includes/home-lhn.html new file mode 100644 index 000000000000..18da808f77be --- /dev/null +++ b/docs/_includes/home-lhn.html @@ -0,0 +1,17 @@ +
      +
    • + Home +
      • +
    • +
      + +
      Send money
      +
      +
      • +
    • +
      + +
      Request money
      +
      +
      • +
    diff --git a/docs/_includes/home-navigation-tree.html b/docs/_includes/home-navigation-tree.html deleted file mode 100644 index 969f93abfacc..000000000000 --- a/docs/_includes/home-navigation-tree.html +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/docs/_includes/request-money-lhn.html b/docs/_includes/request-money-lhn.html new file mode 100644 index 000000000000..aa5694af0df0 --- /dev/null +++ b/docs/_includes/request-money-lhn.html @@ -0,0 +1,34 @@ + diff --git a/docs/_includes/request-money-navigation-tree.html b/docs/_includes/request-money-navigation-tree.html deleted file mode 100644 index 297dcaa3b6dd..000000000000 --- a/docs/_includes/request-money-navigation-tree.html +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/docs/_includes/send-money-lhn.html b/docs/_includes/send-money-lhn.html new file mode 100644 index 000000000000..706ae25a31d2 --- /dev/null +++ b/docs/_includes/send-money-lhn.html @@ -0,0 +1,23 @@ + diff --git a/docs/_includes/send-money-navigation-tree.html b/docs/_includes/send-money-navigation-tree.html deleted file mode 100644 index 9b42705d6282..000000000000 --- a/docs/_includes/send-money-navigation-tree.html +++ /dev/null @@ -1,19 +0,0 @@ - diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 8cb6b378ef52..92f00bc6a119 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -7,33 +7,40 @@ - + + - + -
    - +
    + +
    +
    + + +
    + +
    -
    +
    {% case page.lhn_content %} {% when "homepage" %} - {% include home-navigation-tree.html %} + {% include home-lhn.html %} {% when "request-money" %} - {% include request-money-navigation-tree.html %} + {% include request-money-lhn.html %} {% when "send-money" %} - {% include send-money-navigation-tree.html %} + {% include send-money-lhn.html %} {% else %} -
    -
    - Back -
    +
    + +
    Back
    - In this article + In this article
    {% endcase %}
    @@ -45,17 +52,16 @@
    -
    +
    {% if page.lhn_content == nil %} -

    +

    {{ page.name | remove: '.md' | split: "-" | join: " " }}

    {% endif %}
    - {{ content }}
    diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index fa153e7f2480..7a74ad38f688 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -1,45 +1,41 @@ @import 'colors'; @import 'fonts'; -:root { - --spacing-default: 24px; -} - * { - margin: 0; - border: 0; - font: inherit; - font-size: 100%; - vertical-align: baseline; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } html { - line-height: 1; + line-height: 1; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } caption, th, td { - text-align: left; - font-weight: 400; - vertical-align: middle; + text-align: left; + font-weight: 400; + vertical-align: middle; } q, blockquote { - quotes: none; + quotes: none; - &:before, - &:after { - content: none; - } + &:before, + &:after { + content: none; + } } article, @@ -55,42 +51,41 @@ menu, nav, section, summary { - display: block; + display: block; } html, body { - height: 100%; - min-height: 100%; - background: $color-white; + height: 100%; + min-height: 100%; + background: $color-white; } hr { - background: $color-blue; - border: none; - display: inline-block; - width: 24px; - height: 2px; - margin: 0 0 15px; + background: $color-blue; + border: none; + display: inline-block; + width: 24px; + height: 2px; + margin: 0 0 15px; } strong { - font-weight: 700; - font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif; } em { - font-style: italic; + font-style: italic; } a { - color: $color-blue; - text-decoration: none; + color: $color-blue; + text-decoration: none; - &:hover { - color: $color-blueHover; - text-decoration: underline; - } + &:hover { + color: $color-blueHover; + text-decoration: underline; + } } h1, @@ -99,42 +94,23 @@ h3, h4, h5, h6 { - color: $color-dark; - font-family: "GTAmericaExp-Regular"; - font-weight: 400; - margin-bottom: 12px; - line-height: 1.33; + color: $color-dark; + font-family: "GTAmericaExp-Regular"; + font-weight: bold; + padding-bottom: 12px; + margin-top: 20px; } h1 { - font-size: 36px; - line-height: 1.2; + font-size: larger; } h2 { - font-size: 26px; -} - -h3 { - font-size: 20px; -} - -h5 { - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - color: $color-blue; - margin-bottom: 6px; -} - -h6 { - font-size: 11px; - text-transform: uppercase; - margin-bottom: 6px; + font-size: large; } p { - margin: 0 0 var(--spacing-default); + padding-bottom: 20px; } body, @@ -142,125 +118,255 @@ button, input, select, textarea { - line-height: 1.4; - font-weight: 400; - font-family: "GTAmericaExp-Regular", "Helvetica Neue", "Helvetica", Arial, sans-serif; - font-size: 16px; - color: $color-dark; + line-height: 1.4; + font-weight: 400; + font-family: "GTAmericaExp-Regular", "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-size: 16px; + color: $color-dark; } -.lhn { - height: 100%; - width: 375px; - position: fixed; - background-color: $color-gray1; - padding: 36px; - box-sizing: border-box; - border-right-color: $color-gray2; - border-right-width: 1px; - border-style: solid; - - .logo { - width: 150px; - } - - .lhn-content { - padding-top: 24px; - margin-left: 32px; - } - - ul, - li { - list-style: none; - } -} - -.content-area { - /* Same as the width of the lhn */ - margin-left: 375px; - padding: 48px; - box-sizing: border-box; -} +#lhn { + width: 420px; + height: 100%; + position: fixed; + background-color: $color-gray1; + box-sizing: border-box; + border-right-color: $color-gray2; + border-right-width: 1px; + border-style: solid; + + @media screen and (max-width: 1024px) { + width: 320px; + } -.main-navigation-tree { + @media screen and (max-width: 800px) { + width: 100%; + height: auto; - ul, - li { - margin-bottom: 12px; + &.expanded { + height: 100%; + } + } - /* Apply recursive style to add a margin to the nested items */ ul, li { - margin-top: 12px; - cursor: pointer; + list-style: none; } - } - .caret-icon { - left: 48px; - padding-top: 1px; - position: absolute; - color: $color-gray3; - font-size: larger; - } - .caret-icon-down { - left: 44px; - } + #lhn-content { + height: calc(100% - 150px); + padding-right: 24px; + padding-bottom: 44px; + padding-left: 44px; + overflow: auto; + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ + &::-webkit-scrollbar { + display: none; + } + + .in-this-article { + padding-top: 40px; + display: block; + } + + @media screen and (max-width: 800px) { + height: calc(100% - 100px); + padding-right: 24px; + padding-bottom: 24px; + padding-left: 24px; + display: none; + + &.expanded { + display: block; + } + } + + .article-toc { + margin-top: 20px; + } + } - .selected-hub { - font-weight: bold; - } + .lhn-header { + padding: 44px; + + @media screen and (max-width: 800px) { + padding: 24px; + } + + .header-button { + position: absolute; + display: none; + + @media screen and (max-width: 800px) { + display: block; + } + } + + .logo { + width: 210px; + + @media screen and (max-width: 800px) { + width: 160px; + align-content: center; + display: block; + margin-left: auto; + margin-right: auto; + } + } + } + + .icon-with-link { + display: grid; + grid-template-columns: 40px auto; + cursor: pointer; + + &.selected { + cursor: auto; + + span { + font-weight: bold; + color: $color-dark; + } + } + } + + .hide { + display: none; + position: fixed; + } +} + +#content-area { + + /* Same as the width of the lhn */ + margin-left: 420px; + padding: 52px 68px; + box-sizing: border-box; + + @media screen and (max-width: 1024px) { + margin-left: 320px; + } + + @media screen and (max-width: 800px) { + margin-left: 0; + padding-top: 80px; + padding-left: 24px; + padding-right: 24px; + padding-bottom: 24px; + } - .link { + ul, + ol { + margin-left: 24px; + padding-bottom: 20px; + } + + h1 { + &.title { + font-size: 2.25em; + } + } +} + +.link { + display: inline; color: $color-blue; cursor: pointer; &:hover { - color: $color-blueHover; - text-decoration: underline; + color: $color-blueHover; + text-decoration: underline; } - } } -.cards-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - row-gap: 10px; - column-gap: 20px; +.lhn-items { + + ol, + ul { + padding-left: 32px; + } + + ul, + li { + margin-bottom: 20px; + + /* Apply recursive style to add a margin to the nested items */ + ul, + li { + margin-top: 20px; + cursor: pointer; + } + } + + .nested-treeview { + margin-left: 40px; + } + + .selected-article { + font-weight: bold; + color: $color-dark; + } + + .home-link { + padding-left: 40px; + } } -.card { - display: flex; - flex-wrap: nowrap; - flex: 42%; - flex-grow: 0; - flex-shrink: 0; - border-radius: 15px; - border: 1px solid lightgray; - padding: 20px; - - .left-icon { - display: flex; - align-items: center; - padding-right: 15px; - } +.cards-group { + display: grid; + grid-template-columns: auto; + row-gap: 12px; + column-gap: 4%; + padding-bottom: 20px; - .right-icon { - display: flex; - align-items: center; - padding-left: 15px; - } + @media screen and (min-width: 800px) { + grid-template-columns: 48% 48%; + } +} - .body { +.card { display: flex; flex-wrap: nowrap; - flex-direction: column; - flex-grow: 2; - } + border-radius: 15px; + border: 1px solid $color-gray2; + padding: 28px; + font-weight: bold; + cursor: pointer; - .description { - margin-top: 15px; - } + .left-icon { + display: flex; + align-items: center; + padding-right: 15px; + } + + .right-icon { + display: flex; + align-items: center; + padding-left: 15px; + } + + .body { + display: flex; + flex-wrap: nowrap; + flex-direction: column; + flex-grow: 2; + } + + .description { + margin-top: 15px; + } } + +.icon { + color: $color-gray3; + font-size: larger; + display: inline; + + &.fa-angle-right { + padding-left: 4px; + } +} \ No newline at end of file diff --git a/docs/articles/request-money/SmartScan.md b/docs/articles/request-money/SmartScan.md index 685ab27eb9bb..542704cc62f3 100644 --- a/docs/articles/request-money/SmartScan.md +++ b/docs/articles/request-money/SmartScan.md @@ -7,7 +7,7 @@ SmartScan is the time-saving tool that every Expensify user needs. Using SmartSc ## What is SmartScan? SmartScan is simple on the outside and complex on the inside. When you SmartScan a receipt, we’ll read the **Merchant**, **Date** and **Amount** of the transaction, create an expense, and add it to your Expensify account automatically. If you have a credit card connected and you upload a receipt that matches a card expense, the SmartScanned receipt will automatically merge with the imported expense instead! -- Expensify accounts come with 25 free SmartScans per month. If you’re an individual user and you need access to unlimited SmartScans, check out the **[Monthly Subscription](https://community.expensify.com/discussion/5535/deep-dive-the-monthly-subscription-is-it-right-for-me)**! +- Expensify accounts come with 25 free SmartScans per month. If you’re an individual user and you need access to unlimited SmartScans, check out the [Monthly Subscription](https://community.expensify.com/discussion/5535/deep-dive-the-monthly-subscription-is-it-right-for-me)! - If your organization is already using Expensify and you belong to a company policy, you’ll have access to unlimited SmartScans by default. ### How SmartScan Works: diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 43aae4741908..acf7fa92a9f1 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -1,3 +1,39 @@ + +function navigateTo(path) { // eslint-disable-line no-unused-vars + window.location.href = path; +} + +function toggleHeaderMenu() { // eslint-disable-line no-unused-vars + const lhn = document.getElementById('lhn'); + const lhnContent = document.getElementById('lhn-content'); + const anguleUpIcon = document.getElementById('angle-up-icon'); + const barsIcon = document.getElementById('bars-icon'); + if (lhnContent.className === 'expanded') { + // Collapse the LHN in mobile + lhn.className = ''; + lhnContent.className = ''; + barsIcon.classList.remove('hide'); + anguleUpIcon.classList.add('hide'); + } else { + // Expand the LHN in mobile + lhn.className = 'expanded'; + lhnContent.className = 'expanded'; + barsIcon.classList.add('hide'); + anguleUpIcon.classList.remove('hide'); + } +} + +function navigateBack() { // eslint-disable-line no-unused-vars + if (window.location.pathname.includes('/request-money/')) { + window.location.href = '/hubs/request-money/'; + } else { + window.location.href = '/hubs/send-money/'; + } + + // Add a little delay to avoid showing the previous content in a fraction of a time + setTimeout(toggleHeaderMenu, 250); +} + if (window.tocbot) { window.tocbot.init({ // Where to render the table of contents. @@ -9,9 +45,27 @@ if (window.tocbot) { // Disable the collapsible functionality of the library by // setting the maximum number of heading levels (6) collapseDepth: 6, - }); -} -function openArticle(path) { // eslint-disable-line no-unused-vars - window.location.href = path; + // Main class to add to lists. + listClass: 'lhn-items', + + // Main class to add to links. + linkClass: 'link', + + // Class to add to active links, + // the link corresponding to the top most heading on the page. + activeLinkClass: 'selected-article', + + // Headings offset between the headings and the top of the document (requires scrollSmooth enabled) + headingsOffset: 80, + scrollSmoothOffset: -80, + scrollSmooth: true, + + // onclick function to apply to all links in toc. will be called with + // the event as the first parameter, and this can be used to stop, + // propagation, prevent default or perform action + onClick() { + toggleHeaderMenu(); + }, + }); } diff --git a/docs/hubs/request-money.html b/docs/hubs/request-money.html index 41f9163ab0b3..e08699537aaf 100644 --- a/docs/hubs/request-money.html +++ b/docs/hubs/request-money.html @@ -3,31 +3,33 @@ lhn_content: 'request-money' --- -

    - Request Money +

    + Request money

    - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. Nullam sed vestibulum purus, in auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas dolor metus, +

    + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. +

    - +

    Request Money

    - -
    + +
    -
    +
    SmartScan
    - +
    diff --git a/docs/hubs/send-money.html b/docs/hubs/send-money.html index 94079fe3b8ca..859cdd242fe1 100644 --- a/docs/hubs/send-money.html +++ b/docs/hubs/send-money.html @@ -3,11 +3,11 @@ lhn_content: 'send-money' --- -

    +

    Send Money page

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. Nullam sed vestibulum purus, in auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas dolor metus, - +