Skip to content

GSIP 213

Jump to bottom
Jody Garnett edited this page Oct 10, 2022 · 15 revisions

GSIP 213 GUI CSS Cleanup

Overview

This proposal cleans up DOM structure for page layout along with clear classnames for css styling (removing hardcoded styles).

Proposed By

Michel, Jody

Assigned to Release

This proposal initially proposed for GeoServer 2.22 series, being held back for 2.23 series.

State

  • Under Discussion
  • In Progress
  • Completed
  • Rejected
  • Deferred

Motivation

Our html templates use li elements for page layouts along with the occasional hardcoded styles to try and make things look okay. The list of css glitches is long and varied and represents an opportunity for improvement.

  • clean dom structure
  • modernize css styles
  • remove hardcoded styles

Proposal

  1. Review each html template and simplify, clean up, use classes for css styling.

  2. We have the following css styles:

    • blueprint.css base colors and buttons and so on
    • geoserver.css geoserver customizes blueprint above

    Change to:

    • blueprint.css - base colors and buttons and so on
    • geoserver.css - modernize styling (same visual appearance)
    • bootstrap-utilities.css - added (see below)

  3. The introduction of bootstrap-utilities.css for common constructs such as spacing (padding,margin,...).

    This is used to replace the hardcoded margins found in our html templates.

    <fieldset style="margin-top: 1em;">

    Using bootstrap-utilities.css:

    <fieldset class="mb-1">

  4. Update unit tests that rely on dom structure as required.

    Optional: Safer to introduce proper ids for use by unit testing.

  5. Add a QA check to ensure html files do not include style= to prevent regression after this improvement is made.

Backwards Compatibility

Custom themes making use of deeply nested dom structure paths may need to be updated.

Community modules with unit tests that rely on the existing dom structure may need to be updated.

Feedback

Voting

Project Steering Committee:

  • Alessio Fabiani:
  • Andrea Aime:
  • Ian Turton:
  • Jody Garnett:
  • Jukka Rahkonen:
  • Kevin Smith:
  • Simone Giannecchini:
  • Torben Barsballe:
  • Nuno Oliveira:

Links

Example

The about page is a good example with excellent use of <fieldset> and <legend>.

Before

about.html before illustrating use of <ul> and <li> to establish visual page structure:

<html>
  <body>
    <wicket:extend>
    <div>
     <form>
     <ul>
       <li>
         <fieldset style="margin-top: 1em;">
           <legend>
             <span><wicket:message key="buildInformation">Build Information</wicket:message></span>
           </legend>
           <ul>
             <li>
               <label for="version"><wicket:message key="geoserverVersion">Version</wicket:message></label>
               <span id="version"><wicket:message key="version"></wicket:message></span>
             </li>
             <li>
               <label for="buildRevision"><wicket:message key="gitRevision">Git Revision</wicket:message></label>
               <span id="buildRevision"><wicket:message key="build.revision"></wicket:message></span>
             </li>
             <li>
               <label for="buildDate"><wicket:message key="buildDate">Build Date</wicket:message></label>
               <span id="buildDate"><wicket:message key="build.date"></wicket:message></span>
             </li>
             <li>
               <label for="geotoolsInfo"><wicket:message key="geotoolsVersion">GeoTools Version</wicket:message></label>
               <span id="geotoolsInfo">
                 <span wicket:id="geotoolsVersion"></span> (rev <span wicket:id="geotoolsRevision"></span>)
               </span>
             </li>
             <li>
               <label for="geowebcacheInfo"><wicket:message key="geowebcacheVersion">GeoWebCache Version</wicket:message></label>
               <span id="geotoolsInfo">
                 <span wicket:id="geowebcacheVersion"></span> (rev <span wicket:id="geowebcacheRevision"></span>)
               </span>
             </li>
           </ul>
         </fieldset>
       </li>
       <li>
         <fieldset>
           <legend><span><wicket:message key="moreInformation">More Information</wicket:message></span></legend>
           <p style="margin-top: 1em;">
             <wicket:message key="introduction"></wicket:message>
           </p>
           <p>
             <wicket:message key="information"></wicket:message>           
             <ul>
               <li><wicket:message key="informationAbout"></wicket:message></li>
               <li><wicket:message key="informationData"></wicket:message></li>
               <li><wicket:message key="informationService"></wicket:message></li>
               <li><wicket:message key="informationSettings"></wicket:message></li>
               <li><wicket:message key="informationTile"></wicket:message></li>
               <li><wicket:message key="informationSecurity"></wicket:message></li>
               <li><wicket:message key="informationDemos"></wicket:message></li>
             </ul>
           </p>
           <p>
             <wicket:message key="usefulLinks"></wicket:message>
           </p>
             <ul style="margin-left: 2em;">
              <li>
                <a href="http://docs.geoserver.org"><wicket:message key="documentation">Documentation</wicket:message></a>
              </li>
              <li>
                <a href="https://github.com/geoserver/geoserver/wiki"><wicket:message key="wiki">Wiki</wicket:message></a>
              </li>
              <li>
                <a href="https://osgeo-org.atlassian.net/projects/GEOS"><wicket:message key="bugTracker">Bug Tracker</wicket:message></a>
              </li>
              <!-- The user map is not there, uncomment when we have some 
              <li>
                <a href="http://users.geoserver.org/"><wicket:message key="userMap">User Map</wicket:message></a>
              </li>
               -->
            </ul>
         </fieldset>
       </li>
     </ul>
     </form>
    </div>
    </wicket:extend>
  </body>
</html>

This is supported by use of geosever.css styling:

legend span { 
position: absolute;
width: 29.2em;
top: -1.5em;
left: 0;
}

legend a {
position: absolute;
top: -1.5em;
right: 1px;
}

After

about.html after (note the use of <li> is maintained when actually representing a list):

<html>
  <body>
    <wicket:extend>
      <form>
       <fieldset class="mb-1">
         <legend>
           <wicket:message key="buildInformation">Build Information</wicket:message>
         </legend>
         <ul>
           <li>
             <label for="version"><wicket:message key="geoserverVersion">Version</wicket:message></label>
             <span id="version"><wicket:message key="version"></wicket:message></span>
           </li>
           <li>
             <label for="buildRevision"><wicket:message key="gitRevision">Git Revision</wicket:message></label>
             <span id="buildRevision"><wicket:message key="build.revision"></wicket:message></span>
           </li>
           <li>
             <label for="buildDate"><wicket:message key="buildDate">Build Date</wicket:message></label>
             <span id="buildDate"><wicket:message key="build.date"></wicket:message></span>
           </li>
           <li>
             <label for="geotoolsInfo"><wicket:message key="geotoolsVersion">GeoTools Version</wicket:message></label>
             <span id="geotoolsInfo">
               <span wicket:id="geotoolsVersion"></span> (rev <span wicket:id="geotoolsRevision"></span>)
             </span>
           </li>
           <li>
             <label for="geowebcacheInfo"><wicket:message key="geowebcacheVersion">GeoWebCache Version</wicket:message></label>
             <span id="geotoolsInfo">
               <span wicket:id="geowebcacheVersion"></span> (rev <span wicket:id="geowebcacheRevision"></span>)
             </span>
           </li>
         </ul>
       </fieldset>
       <fieldset>
           <legend><wicket:message key="moreInformation">More Information</wicket:message></legend>
           <p>
             <wicket:message key="introduction"></wicket:message>
           </p>
           <p>
             <wicket:message key="information"></wicket:message>
             <ul>
               <li><wicket:message key="informationAbout"></wicket:message></li>
               <li><wicket:message key="informationData"></wicket:message></li>
               <li><wicket:message key="informationService"></wicket:message></li>
               <li><wicket:message key="informationSettings"></wicket:message></li>
               <li><wicket:message key="informationTile"></wicket:message></li>
               <li><wicket:message key="informationSecurity"></wicket:message></li>
               <li><wicket:message key="informationDemos"></wicket:message></li>
             </ul>
           </p>
           <p>
             <wicket:message key="usefulLinks"></wicket:message>
           </p>
             <ul>
              <li>
                <a href="http://docs.geoserver.org"><wicket:message key="documentation">Documentation</wicket:message></a>
              </li>
              <li>
                <a href="https://github.com/geoserver/geoserver/wiki"><wicket:message key="wiki">Wiki</wicket:message></a>
              </li>
              <li>
                <a href="https://osgeo-org.atlassian.net/projects/GEOS"><wicket:message key="bugTracker">Bug Tracker</wicket:message></a>
              </li>
            </ul>
         </fieldset>
      </form>
    </wicket:extend>
  </body>
</html>

Using bootstrap-utilities.css:

.mb-1 {
  margin-bottom: 0.25rem !important;
}

And geoserver.css changed to.

legend {
  width: 100%;
  border-bottom: 1px solid #c6e09b;
}

©2022 Open Source Geospatial Foundation

Home
Proposals
Release Schedule
Maintenance & Roadmap
Sponsor

Clone this wiki locally