-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#729 Create a lightweight PWA - 1st POC (1-st version)
- Loading branch information
1 parent
9516475
commit 6642cbe
Showing
26 changed files
with
8,884 additions
and
1,226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,288 @@ | ||
| @media only screen and (min-device-width: 480px) and (max-device-width: 3000px) { | ||
| body { | ||
| padding: 0; | ||
| max-width: 414px; | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| background-image: url("./../images/background.jpg"); | ||
| background-repeat: no-repeat; | ||
| background-position: center center; | ||
| background-size: cover; | ||
| } | ||
|
|
||
| .page-header { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| .page-content .title { | ||
| font-size: 2.5rem; | ||
| font-weight: 700; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .page-content .welcome-text { | ||
| margin-top: 8px; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .page-content .wizard-steps { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| font-size: 1rem; | ||
| margin-top: 97px; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| .scan-button { | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .scan-button button { | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 270px; | ||
| position: relative; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| background: #02272F;; | ||
| border-radius: 40px; | ||
| text-transform: capitalize; | ||
| padding: 12px; | ||
| font-size: 1rem; | ||
| color: #fff; | ||
| line-height: 40px; | ||
| } | ||
|
|
||
| .scan-image { | ||
| margin-right: 20px; | ||
| margin-top: 7px; | ||
| width: 25px; | ||
| } | ||
|
|
||
| #leaflet-content { | ||
| text-align: start; | ||
| margin: 25px 0px; | ||
| font-size: 0.7rem; | ||
| } | ||
|
|
||
| #leaflet-content h5 { | ||
| font-size: 1.3rem; | ||
| } | ||
|
|
||
| #leaflet-content table { | ||
| display: block; | ||
| overflow-x: auto; | ||
| } | ||
|
|
||
| #leaflet-content img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .leaflet-link { | ||
| color: #4f4edf;; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-device-width: 480px) { | ||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .page-header { | ||
| font-size: 4rem; | ||
| } | ||
|
|
||
| .page-content .title { | ||
| font-size: 5rem; | ||
| font-weight: 700; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .page-content .welcome-text { | ||
| margin-top: 8px; | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| .page-content .wizard-steps { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| font-size: 2rem; | ||
| margin-top: 97px; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| .scan-button { | ||
| margin-bottom: 100px; | ||
| } | ||
|
|
||
| .scan-button button { | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 60%; | ||
| position: relative; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| background: #02272F;; | ||
| border-radius: 65px; | ||
| text-transform: capitalize; | ||
| padding: 20px; | ||
| font-size: 3rem; | ||
| color: #fff; | ||
| line-height: 100px; | ||
| } | ||
|
|
||
| .scan-image { | ||
| margin-right: 20px; | ||
| margin-top: 20px; | ||
| width: 55px; | ||
| } | ||
|
|
||
| #leaflet-content { | ||
| text-align: start; | ||
| margin: 25px; | ||
| font-size: 0.7rem; | ||
| } | ||
|
|
||
| #leaflet-content h5 { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| #leaflet-content table { | ||
| display: block; | ||
| overflow-x: auto; | ||
| } | ||
|
|
||
| #leaflet-content img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .leaflet-link { | ||
| color: #4f4edf;; | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| body { | ||
| font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | ||
| font-size: 1rem; | ||
| padding: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .mobile-container { | ||
| margin: 0 auto; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); | ||
| background: #02272F; | ||
| } | ||
|
|
||
| .page-header { | ||
| background: #02272F; | ||
| color: white; | ||
| min-height: 97px; | ||
| display: flex; | ||
| justify-content: center; | ||
| height: 10%; | ||
| } | ||
|
|
||
| .page-header span { | ||
| align-self: center; | ||
| } | ||
|
|
||
| .page-content { | ||
| background: #FAFAFA; | ||
| height: 90%; | ||
| border-top-right-radius: 40px; | ||
| border-top-left-radius: 40px; | ||
| position: relative; | ||
| text-align: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| overflow-y: auto; | ||
| padding: 0px 25px; | ||
| } | ||
|
|
||
| .page-content.scan-page { | ||
| background: none; | ||
| overflow-y: hidden; | ||
| padding: 0px; | ||
| } | ||
|
|
||
| .welcome-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 1; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .page-content .app-image { | ||
| content: url("./../images/app_icon.svg"); | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| .page-content .wizard-steps .step-item { | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-width: 30%; | ||
| } | ||
|
|
||
| .page-content .wizard-steps .step-item .step-title { | ||
| font-weight: 700; | ||
| margin-top: 8px; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .wizard-steps .step1 .step-icon { | ||
| content: url("./../images/wizard_step1.svg"); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .wizard-steps .step2 .step-icon { | ||
| content: url("./../images/wizard_step2.svg"); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .wizard-steps .step3 .step-icon { | ||
| content: url("./../images/wizard_step3.svg"); | ||
| width: 100%; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| .leaflet-accordion-item-content { | ||
| visibility: hidden; | ||
| margin-right: 5px; | ||
| font-size: 1rem; | ||
| height: fit-content; | ||
| } | ||
|
|
||
| .leaflet-accordion-item-content.active { | ||
| height: fit-content; | ||
| visibility: visible; | ||
| max-height: 100%; | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .leaflet-accordion-item-content:before { | ||
| content: "\002b"; | ||
| font-weight: 900; | ||
| margin-right: 5px; | ||
| visibility: visible; | ||
| right: 0px; | ||
| position: relative; | ||
| top: -38px; | ||
| float: right; | ||
| font-size: 35px; | ||
| } | ||
|
|
||
| .leaflet-accordion-item-content.active:before { | ||
| content: '\2212'; | ||
| visibility: visible; | ||
| font-size: 35px; | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export default { | ||
| "epiDomain": "epi", | ||
| "leafletWebApiUrl": "http://localhost:8080/leaflets" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Error !!!! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <head> | ||
| <link href="../css/main.css" rel="stylesheet"> | ||
| <script src="../js/controllers/MainController.js" type="module"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="page-container"> | ||
| <div class="mobile-container"> | ||
| <div class="page-header"> | ||
| <span>Pharmaledger</span> | ||
| </div> | ||
| <div class="page-content"> | ||
| <div class="welcome-container"> | ||
| <div class="app-image"></div> | ||
| <div class="title">Welcome to Pharmaledger</div> | ||
| <div class="welcome-text"> | ||
| An app created to help you inquire about new or prescribed medications | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="wizard-steps"> | ||
| <div class="step1 step-item"> | ||
| <div class="step-icon"></div> | ||
| <span class="step-title">STEP 1</span> | ||
| <span>Locate data matrix code.</span> | ||
| </div> | ||
| <div class="step2 step-item"> | ||
| <div class="step-icon"></div> | ||
| <span class="step-title">STEP 2</span> | ||
| <span>Scan data matrix code.</span> | ||
| </div> | ||
| <div class="step3 step-item"> | ||
| <div class="step-icon"></div> | ||
| <span class="step-title">STEP 3</span> | ||
| <span>Track your medicine info.</span> | ||
| </div> | ||
| </div> | ||
| <div class="scan-button scan-button-text"> | ||
| <button onclick="mainController.scanHandler()"> | ||
| <img class="scan-image" slot="start" src="../images/scan_icon.svg"/> | ||
| <span class="scan-button-text">Scan Now</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <head> | ||
| <link href="../css/main.css" rel="stylesheet"> | ||
| <script src="../js/controllers/LeafletController.js" type="module"></script> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <div class="page-container"> | ||
| <div class="mobile-container"> | ||
| <div class="page-header"> | ||
| <span>Pharmaledger</span> | ||
| </div> | ||
| <div class="page-content"> | ||
| <div id="leaflet-content"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <head> | ||
| <link href="../css/main.css" rel="stylesheet"> | ||
| <script src="../js/controllers/ScanController.js" type="module"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="page-container"> | ||
| <div class="mobile-container"> | ||
| <div class="page-header"> | ||
| <span>Pharmaledger</span> | ||
| </div> | ||
| <div class="page-content scan-page"> | ||
|
|
||
| <div id="scanner-placeholder"> | ||
| <!-- injected automatically --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.