@equinor/echo-framework 0.14.0-test-0 → 0.14.0

package/README.md

@@ -1,11 +1,37 @@
 # EchoFramework
 
-This library was generated with [Nx](https://nx.dev).
+This publishable library was generated with [Nx](https://nx.dev).
 
 Framework provides all the necessary components to put the echo web client together. It also provides modules and components for EchoWeb, mainly utilizing EchoCore.
 
 Check the [docs for details](doc/echo-framework.md).
 
+## How to develop EchoFramework
+
+How to develop EchoFramework in the new, monorepo structure?
+
+-   Use the dev branch as base branch for your features
+    -   Development work can be done now together with echopediaWeb, since they're in the same repo!
+-   Open PR, ask for review as before
+-   Merge feature branch into dev once PR is approved
+-   Do not run npm install in `libs/echo-framework`
+    -   Do that in the root folder: NX uses every dependency from the root for all libraries
+-   Do not add anything to `package.json` found in `echo-framework` library
+    -   For `echo-framework` NX generates the `package.json` on build partly based on the local `package.json`
+    -   All dependencies used during development will be taken from the root folder, based on the `package.json` found there
+-   Note: some initial peerDependencies have been added to the base `echo-framework` package.json
+    -   That's because instead of a fixed version we would like to define a version range.
+    -   In case of react: `"react": ">= 17.0.2"`
+    -   When `echo-framework`'s package.json is generated, these pre-defined versions will be used
+
+## How to make new release of echoFramework?
+
+-   Bump version in the package.json for `echoFramework` in libs/echo-framework in your PR
+-   Draft new release via the gitHub UI
+    -   Use the label `echo-framework@X.Y.Z` (where X, Y, Z stands for the latest version number) for the release, so the dedicated github action can publish it for you
+-   Once the release is published, a github action will pick it up and publish `echoFramework` for you to npm
+    -   It knows what to publish based on the release's `echo-framework` label
+
 ## EchoFramework UI components and tools
 
 Framework houses multiple tools for UI bars, panels and menu functionality that can be used in Web and modules. See more in the [related docs](./doc/echo-framework-ui.md).
@@ -22,3 +48,8 @@ Run `npx nx run echo-framework:build` to create a build
 
 Last time framework was synced, new code moved from the original repo:
 7th of August, 2023
+
+## Old repository of echoFramework
+
+Keeping it for historical reasons.
+https://github.com/equinor/EchoFramework

package/index.css

@@ -369,28 +369,48 @@ input:after {
     height: 24px;
 }
 
-.layout-module_echoContentContainer__aiKkp {
-    height: 100%;
+.layout-module_echoContentContainer__aiKkp,
+.layout-module_echoContentContainerFullScreenMode__4ZF8W {
+    height: calc(100% - 64px);
     width: 100%;
     padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px)
         env(safe-area-inset-left, 20px);
 }
 
+.layout-module_echoContentContainerFullScreenMode__4ZF8W {
+    height: 100% !important;
+    padding: 0 !important;
+}
+
+.layout-module_deviceOrientation__b-F7k,
+.layout-module_deviceOrientationFullScreenMode__D7e4V {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100% !important;
+}
+
+.layout-module_deviceOrientationFullScreenMode__D7e4V {
+    height: 100% !important;
+    padding: 0 !important;
+}
+
 /* Mobile and small screens */
 @media screen and (max-width: 927px) and (orientation: landscape) {
     .layout-module_echoContentContainer__aiKkp {
         display: flex;
         flex-direction: row;
+        height: 100%;
     }
-
     .layout-module_deviceOrientation__b-F7k {
-        width: calc(100% - 48px) !important;
+        width: calc(100% - 48px);
+        height: 100% !important;
     }
 }
 
 @media screen and (max-width: 767px) and (orientation: portrait) {
     .layout-module_deviceOrientation__b-F7k {
-        height: calc(100% - 48px) !important;
+        height: calc(100% - 48px);
     }
 }
 
@@ -398,7 +418,7 @@ input:after {
 @media screen and (min-width: 928px) and (orientation: landscape) {
     .layout-module_echoContentContainer__aiKkp {
         display: flex;
-        height: calc(100% - 64px);
+        height: 100%;
     }
 }
 
@@ -452,11 +472,6 @@ input:after {
     max-height: 2.5rem;
 }
 
-.layout-module_fullBodyHeight__XSlEG {
-    min-height: calc(100vh - 75px) !important;
-    padding-bottom: 16px;
-}
-
 .layout-module_navbarBrand__dGCu2 {
     color: red;
 }
@@ -669,14 +684,6 @@ input:after {
     text-align: right;
 }
 
-.echoLogo-module_logoSubTitle__JLFcN {
-    display: block;
-    line-height: 0px;
-    font-size: 20px;
-    padding-bottom: 5px;
-    text-transform: none;
-}
-
 .notificationCardWithLogo-module_errorContainer__5mVew {
     display: flex;
     justify-content: center;
@@ -967,6 +974,24 @@ p.footer-module_footerDisclaimer__AkC9l {
     }
 }
 
+.fullScreenChip-module_fullScreenChip__464W- {
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: var(--white) !important;
+}
+
+.fullScreenChip-module_fullScreenChip__464W-:hover {
+    background: rgba(0, 0, 0, 0.9) !important;
+}
+
+.fullScreenChip-module_fullScreenChip__464W- svg {
+    fill: var(--white) !important;
+}
+
+.fullScreenChip-module_fullScreenChip__464W- svg:hover {
+    fill: var(--white) !important;
+    background: var(--black) !important;
+}
+
 .appLoadingIndicator-module_loadingContainer__2grwV {
     display: flex;
     flex-direction: column;
@@ -1215,20 +1240,48 @@ p.footer-module_footerDisclaimer__AkC9l {
     flex-direction: column;
 }
 
-.searchItemDetailsContainer-module_containerWithActiveLegend__F4Rea {
-    height: calc(100vh - 118px); /* extracting legend height */
+@media screen and (max-width: 927px) and (orientation: landscape) {
+    .searchItemDetailsContainer-module_searchItemDetailsContainer__AcyDx {
+        height: 100%; /* no legend */
+    }
 }
 
-.searchItemDetailsContainer-module_closeButton__m5C9A {
-    margin-right: var(--medium);
+@media screen and (max-width: 767px) and (orientation: portrait) {
+    .searchItemDetailsContainer-module_searchItemDetailsContainer__AcyDx {
+        height: 100%; /* no legend */
+    }
+}
+
+.searchItemDetailsContainer-module_containerWithActiveLegend__F4Rea {
+    height: calc(100% - 60px); /* extracting legend */
 }
 
 @media screen and (max-width: 927px) and (orientation: landscape) {
     .searchItemDetailsContainer-module_containerWithActiveLegend__F4Rea {
-        height: calc(100vh - 65px);
+        height: calc(100% - 45px) !important; /* extracting legend */
     }
 }
 
+@media screen and (max-width: 767px) and (orientation: portrait) {
+    .searchItemDetailsContainer-module_containerWithActiveLegend__F4Rea {
+        height: calc(100% - 52px) !important; /* extracting legend */
+    }
+}
+
+/* Used for the PWA
+https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode */
+@media (display-mode: standalone) {
+    @media screen and (max-width: 767px) and (orientation: portrait) {
+        .searchItemDetailsContainer-module_containerWithActiveLegend__F4Rea {
+            height: calc(100% - 72px) !important; /* extracting extra 20px safe-space */
+        }
+    }
+}
+
+.searchItemDetailsContainer-module_closeButton__m5C9A {
+    margin-right: var(--medium);
+}
+
 .corePanelLeft-module_wrapper__7rR84 {
     position: fixed;
     z-index: 2;