Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This is an example of enabling future booking in Astro room screen:

Image Modified

The stylesheet to be changed will be the same as theĀ associated room profile. Reference to the diagram above will indicate which class or ID needs to be altered to achieve the desired effect.

  1. Locate the 'gldp-default' class in the stylesheet content. If '.gldp-default' is not found, then one can be created at the end of the existing content:

    Code Block
    languagecss
    .gldp-default { 
    	display: none !important 
    }

...


  1. Image Added
  2. Future booking can be enabled by commenting out the 'display: none !important':

    Code Block
    languagecss
    .gldp-default { 
    	/* display: none !important */
    }
  3. Tapping the date will now show the date selector.
    Image Modified

...

Adding Next/Previous Day Arrows

In RX SaaS v1.5 a new feature has been added to allow quick navigation to next and previous day bookings, this can be actioned using the arrows found on the left and right of the screen, see example image below.
Image Modified

These buttons are available by default if using version 4 of the Astro Stylesheet if you are using a previous version or a custom stylesheet and would like to add these navigational buttons this can be achieved by modifying

...

your existing stylesheet by adding the below CSS.

Code Block
languagecss

...

/* next & previous day navigation */
#dayBack,
#dayForward {
	z-index: 10;
	position: absolute;
	top: calc(50% - 30px);
}
#dayForward {
	position: absolute;
	right: 0;
}
/* button style */
.time-machine {
	width: 60px;
	height: 60px;
	margin: 0 10px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.time-machine:active {
	background: rgba(255,255,255,0.3);
}
.arrow {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
.right {
	margin-left: 7px;
	border-left: 20px solid #fff;
}
.left {
	margin-right: 7px;
	border-right: 20px solid #fff;
}

This will add simple white triangle arrows to the centre-left and centre-right of the screen, the CSS can be modified to better suit any custom styles if you require assistance with these changes contact our support at helpdesk@qedas.com

Info

If you would like to remove these navigational buttons from any Stylesheet, simply remove the above CSS from the Stylesheet.