From c5507f3357df6a22bdf55d14db2117a02c2b69ef Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Wed, 18 Dec 2024 12:38:28 +0100 Subject: [PATCH] Added Datahub Search and record view --- .github/workflows/deploy.yml | 1 - apps/geoadmin-demo/src/index.html | 141 ++++++++++++++++++++---------- apps/geoadmin-demo/src/styles.css | 140 +++++++++++++++++++++++------ 3 files changed, 208 insertions(+), 74 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index c02a59d7c..df94b77a6 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -11,7 +11,6 @@ on: - geocat-gpf jobs: - gh-pages: name: Deploy geoadmin demo runs-on: ubuntu-latest diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html index 7f230b875..203dea46c 100644 --- a/apps/geoadmin-demo/src/index.html +++ b/apps/geoadmin-demo/src/index.html @@ -2,57 +2,108 @@ - Geoadmin + Geocat integration demo - + Geoadmin + Geocat Search - - - - - - - - - - +
+
+ +
    +
    + +
    diff --git a/apps/geoadmin-demo/src/styles.css b/apps/geoadmin-demo/src/styles.css index bcc021bda..2ef289ba1 100644 --- a/apps/geoadmin-demo/src/styles.css +++ b/apps/geoadmin-demo/src/styles.css @@ -1,45 +1,129 @@ -/* You can add global styles to this file, and also import other style files */ -html, -body { +body, +html { + margin: 0; + padding: 0; height: 100%; + font-family: Arial, sans-serif; } -body { - margin: 0; +.map-container { position: relative; -} - -#geoadmin-root { width: 100%; - height: calc(100% - 4px); - border: 0; + height: 100vh; } - -.search-input { +.search-container { position: absolute; + top: 60px; left: 20px; - top: 55px; - width: 40%; + width: 300px; + z-index: 10; +} +#search { + width: 100%; + padding: 10px; + margin-bottom: 0; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +#results { background: white; + border: 1px solid #ddd; + border-radius: 8px; + list-style: none; + padding: 0; + margin: 0; + max-height: 400px; + overflow-y: auto; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; } -gn-results-list { - position: absolute; - left: 20px; - top: 125px; - bottom: 20px; - width: 40%; - padding: 8px; - background: white; - overflow: auto; +#results li { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + border-bottom: 1px solid #eee; + transition: background-color 0.2s; + gap: 10px; +} + +#results li div { + flex: 1; + overflow-wrap: break-word; +} + +#results li:hover { + background-color: #f0f8ff; + transform: scale(1.02); +} + +#results li:last-child { + border-bottom: none; +} + +.result-title { + font-size: 14px; + font-weight: bold; + color: #333; + margin-bottom: 5px; + line-height: 1.2; +} + +.open-btn { + flex-shrink: 0; + background-color: #0f4395; + color: white; + border: none; + padding: 5px 10px; + border-radius: 3px; + cursor: pointer; + transition: background-color 0.3s; } -gn-record-view { +.open-btn:hover { + background-color: #0e3d84; +} + +#geoadmin-root { + width: 100%; + height: 100vh; + border: none; +} +.gn-record-view-container { position: absolute; - right: 20px; - top: 125px; - bottom: 20px; + right: 55px; + top: 40px; + bottom: 40px; width: 40%; - padding: 8px; background: white; + padding: 20px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + border-radius: 8px; overflow: auto; + z-index: 100; +} + +.close-btn { + position: sticky; + top: 0; + margin-left: auto; + margin-right: 8px; + background: #050505; + color: white; + border: none; + border-radius: 50%; + width: 30px; + height: 30px; + font-size: 16px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 10; +} + +.close-btn:hover { + background: #d32f2f; }