HAP 9.7 - Booking system... looks odd...why?

[TheFopp]

Hi all

 

Looking at getting the Booking system in HAP up and running so we can use it to book our 3 recording studios. Added the School periods, the resources (rooms) etc, but when I go to look at it I get this

 

Anyone figure what is happening on the left-hand side. There seem to be some toggles, but I don't know what they do, and the BOOK and CANCEL buttons are obscuring the text for Studio 3.

 

Ideally, I'd like to make all the columns narrower so that I can fit all the bookable periods on screen without having to scroll right. Is that possible? I couldn't find any CSS.

 

Any help would be appreciated.

Cheers

Adrian

[nickbro]

Clear your browser cache, looks like the basestyles.css file is out of date

[TheFopp]

Thanks Nick, I must have messed up some CSS at some point before using the Booking System. Put a fresh copy of the CSS back and it works fine.

 

I remember seeing somewhere in these forums 4 lines of code that showed Bookings with a red background and Free's with a Green background (and I think statics with a different colour as well - although i could have imagined that) but I've tried searching and I can't find it any where. Does anyone remember seeing it on the forums?

 

Also is there any way of making the Bookings smaller so I can fit more onto a screen without scrolling?

 

Cheers

Adrian

[TheFopp]

Found a reference to fitting more on screen in the forums with a post from you Nick saying to alter line 69 in the bookings default.aspx:

 

style="min-width: <%=(200 * (config.BookingSystem.Lessons.Count + 1)) + 2 %>px">

 

However, we have 10 booking periods, and altering the min-width does make the width smaller, but, for example, if I change the min-width to 100 then it looks how I want it but only shows 7 of the booking periods, if I leave it at 200 they are wider and need to be scrolled to see, but shows 9 of the booking periods. If I set it to 300 then I they are wider still, but with a lot of scrolling shows all 10 of the booking periods!

 

How can I get it so it is small width, but showing all 10 booking periods?

[TheFopp]

I've found the CSS for changing the background colours depending on whether it is booked or not:

 

#bookingday .body .col a.free { background-color: #58fa58 }

#bookingday .body .col a.booked { background-color: #fa5858 }

 

Just need to sort out the sizing of the bookings page now.

[nickbro]

Alter the top of ~/bookingsystem/default.aspx

        #bookingday #resources, .col a, .col .share, #bookingday .head h1 { width: <%=Math.Round(100.00 / (config.BookingSystem.Lessons.Count + 1), 1)%>%; }
       #bookingday #resources { min-height: <%=(60 * (rez.Count + 1)) - 2 %>px; }
       #bookingday .body .col, #bookingday #resources div { height: <%=Math.Round(100.00 / (rez.Count + 1), 1) %>%; }

and then bookingsystem.css:

#bookingday .body a, #bookingday .body .share, #bookingday h1 { display: block; position: relative; z-index: 10; margin: 2px 0 0 2px; float: left; font-size: 12px; min-width: 134px; padding: 10px 10px; min-height: 38px; height: 100%; background-color: #eee; text-decoration: none; color: #666; cursor: default; white-space: nowrap; text-overflow: ellipsis; }

[TheFopp]

Thanks Nick