search

Esri / geoportal-server-catalog

Esri Geoportal Server is a next generation open-source metadata catalog and editor, based on elasticsearch.
https://www.esri.com/en-us/arcgis/products/geoportal-server/overview
Apache License 2.0
100 stars 62 forks source link

Mobile support #228

Closed valentinedwv closed 5 years ago

valentinedwv commented 5 years ago

Support for tablets, and possibly phones.

Note from a user. I tried datadiscoverystudio.org on an iPad and got the attached screen.

mhogeweg commented 5 years ago

could you expand on this use case? what would you do with the thing you found in a data portal when on a mobile device?

valentinedwv commented 5 years ago

We will work on one.

Many people run around with tablets, or phablets. So demonstrating the product at a conference without having to whip out a computer.

valentinedwv commented 5 years ago

Potrait on tablets may be the issue. Attaching a dev shot of rotated tablet from apple safari.

Is there a way to say, rotate your screen image

KathleenPate commented 5 years ago

I designed the portal to work on a tablet using the bootstrap CSS. We're not in production so I can't show you. portal-screencapt

valentinedwv commented 5 years ago

Would love to see those changes.

KathleenPate commented 5 years ago

The Sandbox site displays with the iPad simulator. I found, like you, that the menu expanded and the search results slipped underneath the left menu after I had made some modifications to the original code. I put the logo into its own row to simplify layout clashes with the menu. I used browser Inspectors to made sure the site had a @media designation. I made a few adjustments: I added to the navbar-nav, and modified the measurements for the .g-search-results class from pixels to relative measurement. Here is what I did. Double check calcite-bootstrap.css: line 3823 for the at media modifications. http://geoss.esri.com/geoportal2/lib/calcite-bootstrap/css/calcite-bootstrap.css @media (min-width: 768px) .navbar-nav {float:left} I added a phone modification in custom.css for the menu bar (phones rotated landscape work)

    @media (min-width: 768px) .navbar-nav {  margin: 5px; width: 70%; float: left;}
        .navbar-nav > li > a  {   display: inline; }

in main.css : 

.g-search-results {
  max-height: -webkit-calc(100vh - 16em);
  max-height:    -moz-calc(100vh - 16em); 
  max-height:         calc(100vh - 16em);
  overflow: auto;
}

portal-screencapt-phone

valentinedwv commented 5 years ago

Added some bootstrap grid layout. Seems to function better on small screens.

KathleenPate commented 5 years ago

Update: We've launched our Beta site where you can see the mobile accessibility. https://gda.alberta.ca/geoportal/