added responsive CSS

This commit is contained in:
Francesco Mangiacrapa 2022-11-08 12:13:14 +01:00
parent 744aebcf2c
commit 79a040d0a3
2 changed files with 65 additions and 21 deletions

View File

@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
@ -25,7 +26,8 @@
<wb-module deploy-name="geoportal-data-viewer-app-3.0.0-SNAPSHOT">
@ -51,7 +53,8 @@
<wb-resource deploy-path="/" source-path="/target/m2e-wtp/web-resources"/>
@ -77,7 +80,8 @@
<wb-resource deploy-path="/" source-path="/src/main/webapp" tag="defaultRootSource"/>
@ -103,7 +107,8 @@
<wb-resource deploy-path="/WEB-INF/classes" source-path="/target/generated-sources/gwt"/>
@ -129,7 +134,8 @@
<wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
@ -158,7 +164,8 @@
<dependent-module archiveName="geoportal-data-common-2.0.0-SNAPSHOT.jar" deploy-path="/WEB-INF/lib" handle="module:/resource/geoportal-data-common/geoportal-data-common">
<dependency-type>uses</dependency-type>
</dependent-module>
@ -184,7 +191,8 @@
<property name="java-output-path" value="/geoportal-data-viewer-app/target/geoportal-data-viewer-app-0.0.1-SNAPSHOT/WEB-INF/classes"/>
@ -210,7 +218,8 @@
<property name="context-root" value="geoportal-data-viewer-app"/>
@ -236,7 +245,8 @@
</wb-module>

View File

@ -188,7 +188,7 @@ body {
/*margin-top: 30px;*/
overflow-y: auto;
transition: width 0.5s;
z-index: 100;
z-index: 999;
}
.overlay {
@ -592,16 +592,7 @@ body {
transform: translate(-50%);
}
@media all and (max-width: 1024px) {
#timeline-data {
width: 250px;
left: 125px;
bottom: 50px
}
}
.timeline-popup {
}
.timeline-popup-header {
@ -630,8 +621,51 @@ body {
color: white;
}
.timeline-popup-content {
padding: 5px;
max-height: 400px;
}
/*****
RESPONSIVE
***/
@media all and (max-width: 1919px) {
.details-panel {
width: 400px;
}
}
@media all and (max-width: 1919px) {
.inner-toolbar {
width: 100px;
}
}
@media all and (max-width: 2350px) {
#timeline-data {
width: 700px;
left: 550px;
}
}
@media all and (max-width: 1700px) {
#timeline-data {
width: 400px;
left: 210px;
bottom: 50px
}
}
@media all and (max-width: 1024px) {
#timeline-data {
width: 260px;
left: 140px;
bottom: 50px
}
.search-facility {
width: 250px;
max-width: 300px;
}
}