diff --git a/apps/geoadmin-demo/src/index.html b/apps/geoadmin-demo/src/index.html index 7f230b875..362747f24 100644 --- a/apps/geoadmin-demo/src/index.html +++ b/apps/geoadmin-demo/src/index.html @@ -1,58 +1,103 @@ - - - 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..426b8e0db 100644 --- a/apps/geoadmin-demo/src/styles.css +++ b/apps/geoadmin-demo/src/styles.css @@ -1,45 +1,127 @@ -/* 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 { + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #eee; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +#results li div { + flex: 1; + margin-right: 15px; +} + +#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; +} + +.open-btn { + background-color: #0f4395; + color: white; + border: none; + padding: 5px 15px; + border-radius: 5px; + cursor: pointer; + font-size: 12px; + transition: background-color 0.3s ease, transform 0.1s ease; } -gn-record-view { +.open-btn:hover { + background-color: #0e3d84; + transform: translateY(-2px); +} + +#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; /* Stick to the container */ + top: 0; /* Stick to the top inside the container */ + margin-left: auto; /* Push the button to the right */ + margin-right: 8px; /* Add some spacing from the right edge */ + 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; /* Ensures the button remains above the scrollable content */ +} + +.close-btn:hover { + background: #d32f2f; }