Skip to content
Snippets Groups Projects
Commit e76c3cad authored by Spencer McCoy's avatar Spencer McCoy
Browse files

applying styling edits to calendar view.

parent c4de2176
No related branches found
No related tags found
1 merge request!1Ui updates
......@@ -9,29 +9,43 @@ end %>
</h3>
</div>
<div style="margin-bottom: 16px;">
<!-- <div style="margin-bottom: 16px;">
<h4 style="text-align: center; margin: 0;">
<%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
</h4>
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date-7.days).strftime('%Y-%m-%d') %>" class="wdn-button wdn-button-triad" id="prev-week">&lt; PREV</a>
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date+7.days).strftime('%Y-%m-%d') %>" class="wdn-button wdn-button-triad" style="float: right;" id="next-week">NEXT &gt;</a>
</div>
</div> -->
<div class="calendar">
<div class="calendar-header">
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date-7.days).strftime('%Y-%m-%d') %><%= defined?(kiosk_mode) && kiosk_mode == 'true' ? '&kiosk_mode=true' : ''%>" id="prev-week" class="schedulericon-angle-circled-left"><span class="wdn-text-hidden">Previous Week</span></a>
<a href="/<%= @space.url_name %>/calendar/?date=<%= (date+7.days).strftime('%Y-%m-%d') %><%= defined?(kiosk_mode) && kiosk_mode == 'true' ? '&kiosk_mode=true' : ''%>" id="next-week" class="schedulericon-angle-circled-right"><span class="wdn-text-hidden">next week</span></a>
<h4 class="wdn-sans-serif">
<%= month = sunday.strftime('%B %Y') %><%= (month2 = (sunday+6.days).strftime('%B %Y')) == month ? '' : " - #{month2}" %>
</h4>
</div>
<div class="day-label-container">
<% (1..5).each do |i| %>
<% day = (sunday + i.days + 1.hour).midnight %>
<label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
<% end %>
</div>
<div class="calendar-container">
<div class="time-labels">
<div class="time-chart">
<% (12..47).each do |j| %>
<% (12..39).each do |j| %>
<div class="calendar-half-hour">
<label><%= "#{(j / 2) % 12 + (j==24?12:0)} #{j>=24?'PM':'AM'}" if j % 2 == 0 %></label>
</div>
<% end %>
</div>
</div>
<% (0..6).each do |i| %>
<% (1..5).each do |i| %>
<% day = (sunday + i.days + 1.hour).midnight %>
<% slots = [0] * 36 %>
<div class="calendar-day" data-day="<%= day.strftime("%Y/%m/%d") %>">
<label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
<!-- <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label> -->
<div class="day-chart" title="Open">
<% if week_hours.has_key?(i) %>
<% # figure out where the closed divs need to be
......@@ -42,7 +56,7 @@ end %>
ends = week_hours[i].hours.map{|record| record[:end]}
%> <%
closeds = []
(360..1439).each do |j|
(360..1199).each do |j|
if starts.include?(j)
closed_end = j
closeds << [closed_start, closed_end]
......@@ -53,7 +67,7 @@ end %>
closed_start = j
end
end
closed_end = 1440
closed_end = 1200
closeds << [closed_start, closed_end]
closeds.each do |closed|
......@@ -105,9 +119,9 @@ end %>
<% day_events = events_groups[day.strftime("%Y/%m/%d")] %>
<% unless day_events.nil? %>
<% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |event| %>
<% start_slot = [(((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 0].max
end_slot = [(((event.end_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 35].min
<% day_events.sort{|a, b| a.start_time <=> b.start_time}.each do |res| %>
<% start_slot = [(((res.start_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 0].max
end_slot = [(((res.end_time.in_time_zone - day.midnight) / 60 - 360) / 30).floor, 35].min
if end_slot < 0
next
end
......@@ -116,8 +130,8 @@ end %>
over = slots[k] if slots[k] > over
end
over = [over,3].min
top = (((event.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 20
height = event.length * 20 / 30
top = (((res.start_time.in_time_zone - day.midnight) / 60 - 360) / 30) * 28
height = res.length * 28 / 30
top_overflow = false
bottom_overflow = false
if top < 0
......@@ -129,17 +143,26 @@ end %>
height = 720 - top
bottom_overflow = true
events_groups[(day + 1.day).strftime("%Y/%m/%d")] ||= []
events_groups[(day + 1.day).strftime("%Y/%m/%d")] << event
events_groups[(day + 1.day).strftime("%Y/%m/%d")] << res
end
%>
<div class="event <%= event.type.description.downcase.split(' ').join('-') %> <%= 'top-overflow' if top_overflow %> <%= 'bottom-overflow' if bottom_overflow %>"
style="top: <%= top %>px; height: <%= height %>px; left: <%=over*8%>px">
<% if event.info_link %>
<a href="<%= event.info_link %>"><%= event.title %></a>
<% else %>
<%= event.title %>
<div class="event-container" style="top: <%= top %>px;">
<div id="event<%=res.id %>" data-start="<%= res.start_time.in_time_zone %>" data-end="<%= res.start_time.in_time_zone + (res.length * 60) %>" class="event <%= 'top-overflow' if top_overflow %> <%= 'bottom-overflow' if bottom_overflow %>" style="height: <%= height %>px;">
<p><strong><%= res.title ? (res.title.empty? ? 'Reserved' : res.title) : 'Reserved' %></strong></p>
<% if height >= 42 %>
<p class="eventicon-clock"><%= res.start_time.in_time_zone.strftime('%I:%M %p') %> - <%= res.end_time.in_time_zone.strftime('%I:%M %p') %></p>
<% end %>
</div>
<div class="tooltip <%= top >= 50 ? "hang-above" : "hang-below" %> <%= day.strftime("%^a") == "FRI" ? "hang-left" : "hang-right" %>">
<div>
<h6 style="margin-top: 0px; margin-bottom: .25em;"><%= res.title ? (res.title.empty? ? 'Reserved' : res.title) : 'Reserved' %></h6>
<p class="eventicon-clock"><%= res.start_time.in_time_zone.strftime('%I:%M %p') %> - <%= res.end_time.in_time_zone.strftime('%I:%M %p') %></p>
<p>Reserved by: <span class="italic"><%= res.user.full_name rescue nil %></span></p>
<div class="close"><a href="#">&times;</a></div>
</div>
</div>
</div>
<% (start_slot..end_slot).each do |k| %>
<% slots[k] = slots[k] + 1 %>
<% end %>
......@@ -147,7 +170,7 @@ end %>
<% end %>
<div>
<% (12..47).each do |j| %>
<% (12..39).each do |j| %>
<div class="calendar-half-hour">
&nbsp;
</div>
......@@ -157,15 +180,82 @@ end %>
</div>
<% end %>
</div>
</div>
<script type="text/javascript">
require(['jquery'], function ($) {
var max_z = 5;
require(['jquery', '/js/functions.js', '/js/jquery.mousewheel.min.js', '/js/jquery.mCustomScrollbar.js'], function ($, functions) {
var openZ = 5;
var closedZ = 3;
$(document).ready(function () {
$('.event').click(function (click) {
$(this).css('z-index', max_z);
max_z += 1;
$('.event').click(function (e) {
e.stopPropagation();
var $eventContainer = $(this).parent();
$eventContainer.css('z-index', openZ);
var $tooltip = $(this).next(".tooltip");
$tooltip.show();
if($tooltip.hasClass("hang-below")){
$tooltip.css("margin-bottom", ($tooltip.find("div").height()+35)*-1);
}
$(document).one("click",function(){
$tooltip.show().hide();
$eventContainer.css('z-index', closedZ);
})
});
$('.tooltip div.close a').click(function (click) {
click.preventDefault();
$(this).closest('.tooltip').hide();
});
$(window).on("load",function(){
$(".calendar-container").mCustomScrollbar(
{
mouseWheel:{ enable: true },
theme:"rounded-dots-dark",
callbacks:{
},
setTop: "95px"
}
);
});
function tick(){
var dateTime = functions.getDateTime();
$(".calendar-day").each(function(){
if(dateTime.date == $(this).data("day")){
var top = (dateTime.hour-6) * 2 * 28;
top += dateTime.minute / 60 * 2 * 28;
if($(this).children(".day-chart").children("#nowArrow").length){
$(this).children(".day-chart").children("#nowArrow").css({top:top})
$(this).children(".day-chart").children("#nowLine").css({top:top})
}else{
$("#nowArrow").remove();
$("#nowLine").remove();
$(this).children(".day-chart").append($("<div id='nowArrow'>"));
$(this).children(".day-chart").children("#nowArrow").css({top:top})
$(this).children(".day-chart").append($("<div id='nowLine'>"));
$(this).children(".day-chart").children("#nowLine").css({top:top})
}
}
});
$(".event").each(function(){
var eventEnd = new Date($(this).data("end").replace(" -0500", "")).getTime();
var now = new Date();
now = now.getTime();
if (eventEnd < now) {
$(this).addClass("past");
}
});
};
tick();
setInterval(tick, 60000);
});
});
</script>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment