Content Comparison

Map

The maps section is the largest view, this is where the floor plan graphic will be rendered, this section allows for users to pan up, down, left and right, as well as zoom in and out.

Select the image to view a larger version.
Below is a list of the IDs and classes that can be used to modify this section

• #map .today/.future_day (contains map & view controls, class dependant on day selected)

  • #mapid.leaflet-container

    • .leaflet-map-pane

      • .leaflet-pane .leaflet-overlay-pane

        • img .leaflet-image-layer (this is the map image)

      • .leaflet-pane .leaflet-marker-pane

        • .leaflet-marker-icon marker

          • .today_marker/.future_marker .pin .custom-space .free/.busy/.CheckIn/.CheckOut (Marker icon, use status class to customise colour for different states)

• .leaflet-control-container

  • .leaflet-top .leaflet-left

    • .leaflet-control-zoom .leaflet-bar .leaflet-control

      • .leaflet-control-zoom-in (zoom in button)

      • .leaflet-control-zoom-out (zoom out button)

• .floor-button-layer .closed/.open (class depends if #panel is open or closed)

  • .floor-buttons

    • .button .selected (each floor navigation button, selected indicates selected floor)

• #panel .closed/.open (class depends if #panel is open or closed)

  • see Panel section below for more information

Banner

The banner is found across the top of the map, this displays information such as the location displayed, the current time and date as well as any filters that are being applied.

Select the image to view a larger version.
Below is a list of the IDs and classes that can be used to modify this section

• #banner-menu .filterbar (filterbar class indicates if the filter bar is showing)

  • #bannerTopRow

    • .banner-left

      • #menuButton

      • .header

        • .banner-text .building (displays the selected building name)

        • .banner-text .floor (displays the selected floor name)

    • .banner-right

      • .banner-text .current-time

        • .hour

        • .minute

        • .ampm

      • .banner-text .current-date

  • .filtertags

    • .tag (the tag icon element, used to shape and position)

      • .icon-close (the x icon shown to remove the filter)

      • .tag-icon .icon-desk/.icon-room (if relevant will display an icon for the filter tag)

      • .text (text value of the filter tag)

Menu

The menu is the leftside slide-out element, this contains the location navigation options as well as filter options.

• #menu .open/.closed

  • #container-country .location-list

    • #country .list-item (dropdown header section)

      • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

      • .menu-item (displayed text value)

      • .dot-box

        • .dot .country .dot-active (dot-active used when location selected)

    • .droplist .open/.closed (list of available locations)

      • .list-item

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

  • #container-city .location-list

    • matches country structure (replace country with city)

  • #container-site .location-list

    • matches country structure (replace country with site)

  • #container-building .location-list

    • matches country structure (replace country with building)

  • .spacer (separater line for menu sections)

  • #date .list-item (date header section)

  • .selected-date (date display & picker button)

    • .list-item .adv-list-action

      • .icon .icon-events (icon displayed to the left)

      • .menu-item .datepicker (displayed text for date)

  • #filter .list-item (filter header section)

  • .filter

    • #free .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #In_progress .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #checkin .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #checkout .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #rooms .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #desks .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

    • #parking .list-item .adv-list-action

      • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

      • .menu-item (displayed text value)

  • #container-tags .tags-list

    • #tags .list-item (dropdown header section)

      • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

      • .menu-item (displayed text value)

      • .dot-box

        • .dot .dot-active (dot-active used when a tag is selected)

    • .droplist .open/.closed (list of available locations)

      • .list-item

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

  • #container-equipment .equipment-list

    • .list-item (dropdown header section)

      • .arrow .icon-right_arrow .open/.closed (open down-arrow, closed right-arrow)

      • .menu-item (displayed text value)

      • .dot-box

        • .dot .dot-active (dot-active used when equipment is selected)

    • .droplist .open/.closed (list of available locations)

      • .list-item

        • .checkbox .icon-chcek/.icon-uncheck (tickbox for each item listed)

        • .menu-item (displayed text value)

Custom Marker icons

In this example, you’ll be shown how to modify the Maps Stylesheet to achieve customised marker icon.
The full CSS can be found at the bottom of this section if you would rather copy and paste this full customisation.

Default markers

Custom markers

Firstly, we will modify the .marker .pin element, this is controlling the drop shape of the marker.

.marker .pin {
  border-radius: 50% 50% 50% 50%; /* sets border to complete circle */
}

Next, we will need to adjust the position of the marker, as we no longer have the point, we’ll move the marker down slightly, this will need to be adjusted for both the current day view as well as future if being used.

.today .marker { /* markers displayed on current day view */
  margin-left: -13px !important; /* adjusts position along the x axis */
  margin-top: -24px !important; /* adjusts position along the y axis */
}
.future_day .marker { /* markers displayed on future day view */
  margin-left: -19px !important; /* adjusts position along the x axis */
  margin-top: -30px !important; /* adjusts position along the y axis */
}

The next step is to remove the white background in the centre and to change the icon colour to allow it to be seen against the colour background.

.marker .pin .dot { /* white inner section of marker */
  color: #fff !important; /* sets font/icon colour to white */
  background: none !important; /* removes the background white colour */
}

The final step is to adjust the position of the text popup that appears above the marker icon.

.today .leaflet-popup {
  margin-bottom: 0 !important; /* removes additional spacers */
  bottom: 38px !important; /* sets position of popup from bottom of marker */
  left: -33px !important; /* sets position on the x axis relative to marker */
}

Below is the full CSS for customising the marker icons, this can be copied into the existing Maps Stylesheet.

/* -- custom marker drops -- */
.marker .pin {
  border-radius: 50% 50% 50% 50%;
}
.today .marker {
  margin-left: -13px !important;
  margin-top: -24px !important;
}
.future_day .marker {
  margin-left: -22.5px !important;
  margin-top: -22.5px !important;
}
.marker .pin .dot {
  color: #fff !important;
  background: none !important;
}
.today .leaflet-popup {
  margin-bottom: 0 !important;
  bottom: 38px !important;
  left: -33px !important;
}

Custom Text Changes

With Maps some of the text values can be changed using the Stylesheet.
These changes will require modifying the default values in the Stylesheet found above this line.

/** LINE REQUIRED - CSS BELOW **/

Below is an example of the default value found in the Stylesheet.

{
  "nobookings" : "There are currently no bookings",
  "allow_future": true,
  "buttons" : {
    "bookings" : "Bookings",
    "info" : "Info",
    "book" : "Book",
    "extend" : "Extend",
    "checkin" : "Check-in",
    "checkout" : "Check-out"
  },
  "book" : {
    "where": "Where",
    "title" : "Title",
    "date": "Date",
    "quickbook": "Quickbook",
    "start": "Start",
    "end": "End"
  },
  "alerts" : {
    "book" : {
      "title" : "Creating booking",
      "fail_title" : "Booking failed!",
      "success_title" : "Booking created"
    },
    "extend" : {
      "title" : "Extending booking",
      "fail_title" : "Extend failed!",
      "success_title" : "Extend successful"
    }
  }
}
/** LINE REQUIRED - CSS BELOW **/

In this example we will modify the Booking screen text values, as shown below.

Image Added Default Text Values

Image Added Custom Text Values

The section that we’ll need to modify is “book” this controls the values for the booking popup screen.

  "book" : {
    "where": "Where",
    "title" : "Title",
    "date": "Date",
    "quickbook": "Quickbook",
    "start": "Start",
    "end": "End"
  },

Below is the modified JSON, this section can be copied and pasted in replacement of the existing “book” values, if this section does not currently exist in the Stylesheet it can be added.

  "book" : {
    "where": "Location",
    "title" : "Subject",
    "date": "Booking Date",
    "quickbook": "Book Now",
    "start": "Booking start time",
    "end": "Booking end time"
  },