fixed tooltips
This commit is contained in:
Frank Dillon
parent
bec299d698
commit
9afcc21ac4
1 changed files with 396 additions and 0 deletions
396
docs/upgrades/templates-7.3.5/calendar_month.tmpl
Normal file
396
docs/upgrades/templates-7.3.5/calendar_month.tmpl
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
#CalendarMonth000000001
|
||||
<tmpl_if admin>
|
||||
<p><tmpl_var adminControls></p>
|
||||
</tmpl_if>
|
||||
|
||||
<tmpl_if displayTitle>
|
||||
<h1><tmpl_var title></h1>
|
||||
</tmpl_if>
|
||||
|
||||
<tmpl_if description>
|
||||
<tmpl_var description>
|
||||
</tmpl_if>
|
||||
|
||||
|
||||
<table cellspacing="0" cellpadding="0" width="630" id="mCAL">
|
||||
<tr>
|
||||
<td style="text-align:right">
|
||||
<a class="tab" href="<tmpl_var urlDay>">Day</a>
|
||||
<a class="tab" href="<tmpl_var urlWeek>">Week</a>
|
||||
<a class="tab" href="<tmpl_var urlMonth>">Month</a>
|
||||
<a class="tab" href="<tmpl_var urlSearch>">Search</a>
|
||||
|
||||
<div class="controls"><tmpl_if editor><a href="<tmpl_var urlAdd>">Add Event</a></tmpl_if> • <a href="<tmpl_var urlPrint>">Print</a>
|
||||
<!--• <a href="#">Subscribe</a>-->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="months">
|
||||
<div style="padding:3px 0px;">
|
||||
<a href="<tmpl_var pagePrevUrl>" style="font-weight:bold;margin-right:8px;">« <tmpl_var pagePrevYear></a>•
|
||||
<tmpl_loop months>
|
||||
<a style="margin-right:4px;" href="<tmpl_var monthUrl>" class="monthLink<tmpl_if monthCurrent> current</tmpl_if>"><tmpl_var monthAbbr></a>
|
||||
</tmpl_loop>
|
||||
•
|
||||
<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px"><tmpl_var pageNextYear> »</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="curMonth">
|
||||
<tmpl_var monthName> <tmpl_var year>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width:100%">
|
||||
|
||||
<!-- the calendar table -->
|
||||
<table id="month" width="100%" cellspacing="2" cellpadding="0">
|
||||
<!-- day names -->
|
||||
<tr><tmpl_loop dayNames>
|
||||
<th><tmpl_var dayName></th>
|
||||
</tmpl_loop></tr>
|
||||
|
||||
<!-- the grid -->
|
||||
<tmpl_loop weeks><tr>
|
||||
<tmpl_loop days><td><div class="<tmpl_if dayMonth>active</tmpl_if><tmpl_if dayCurrent> current</tmpl_if>">
|
||||
<tmpl_if dayMonth>
|
||||
<a class="number" href="<tmpl_var dayUrl>"><tmpl_var dayMonth></a>
|
||||
<tmpl_if events>
|
||||
<ul class="events">
|
||||
<tmpl_loop events>
|
||||
<li><a href="<tmpl_var eventUrl>">
|
||||
<tmpl_var eventMenuTitle>
|
||||
</a>
|
||||
</li>
|
||||
</tmpl_loop>
|
||||
</ul>
|
||||
|
||||
<a href="#" id="event_<tmpl_var dayMonth>" class="moreButton" onmouseover="return showEvents('overlay<tmpl_var dayMonth>');">
|
||||
<img src="<tmpl_var extrasUrl>/wobject/Calendar/images/more.gif" />
|
||||
</a>
|
||||
|
||||
</tmpl_if> <!--/events-->
|
||||
</tmpl_if> <!--/day-->
|
||||
</div></td></tmpl_loop> <!--/days-->
|
||||
</tr></tmpl_loop>
|
||||
</table>
|
||||
</tr>
|
||||
</table>
|
||||
<tmpl_loop weeks><tmpl_loop days><tmpl_if events>
|
||||
<div id="overlay<tmpl_var dayMonth>" class="moreDisplay">
|
||||
<div>
|
||||
<ul>
|
||||
<tmpl_loop events>
|
||||
<li><a href="<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/></li>
|
||||
</tmpl_loop>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</tmpl_if></tmpl_loop></tmpl_loop>
|
||||
|
||||
~~~
|
||||
|
||||
<style type="text/css">
|
||||
#mCAL * {
|
||||
margin:0px;
|
||||
}
|
||||
#mCAL td {
|
||||
font-size:10px;
|
||||
font-family:arial;
|
||||
}
|
||||
#mCAL .tab {
|
||||
|
||||
border-bottom-style: none;
|
||||
font-weight: bold;
|
||||
padding: 2px 15px 0px 15px;
|
||||
text-align: center;
|
||||
background-color: #E9ECF3;
|
||||
-moz-border-radius-topLeft: 10px;
|
||||
-moz-border-radius-topRight: 10px;
|
||||
color: #7588B5;
|
||||
text-decoration: none;
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#mCAL .tab:hover {
|
||||
color:black;
|
||||
}
|
||||
#mCAL .active {
|
||||
background-color:#DFE3EE;
|
||||
color:#404F77;
|
||||
border-bottom:solid #DFE3EE 1px;
|
||||
}
|
||||
#mCAL .controls {
|
||||
float:right;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
#mCAL a {
|
||||
font-size:11px;
|
||||
color:#517AC8;
|
||||
}
|
||||
#mCAL .months {
|
||||
text-align:center;
|
||||
background-color:#DFE3EE;
|
||||
}
|
||||
#mCAL .months a {
|
||||
color:#517AC8;
|
||||
text-decoration:none;
|
||||
}
|
||||
#mCAL .months .monthLink {
|
||||
text-decoration:none;
|
||||
padding-left:5px;
|
||||
padding-right:5px;
|
||||
color:#AAB8D5;
|
||||
font-size:12px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#mCAL .months .current, #mCAL .months .monthLink:hover {
|
||||
font-weight:bold;
|
||||
color:#517AC8;
|
||||
background-color:#fff;
|
||||
-moz-border-radius:5px;
|
||||
}
|
||||
#mCAL .curMonth {
|
||||
text-align:center;
|
||||
margin: 2px 0px;
|
||||
background-color:#517AC8;
|
||||
color:white;
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**** Month view ****/
|
||||
/* Table */
|
||||
#mCAL table#month
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
#mCAL table#month *
|
||||
{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#mCAL table#month a
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#mCAL table#month th
|
||||
{
|
||||
-moz-box-sizing:border-box;
|
||||
width: 85px;
|
||||
background-color: #517AC8;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#mCAL table#month div
|
||||
{
|
||||
position: relative;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
margin: 0px;
|
||||
background-color: #E9ECF3;
|
||||
}
|
||||
|
||||
#mCAL table#month ul
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#mCAL table#month .active
|
||||
{
|
||||
-moz-border-radius-topLeft: 8px;
|
||||
-moz-border-radius-bottomLeft: 8px;
|
||||
-moz-border-radius-bottomRight: 8px;
|
||||
vertical-align: top;
|
||||
background-color: #CCD2E3;
|
||||
border: solid #CCD2E3 1px;
|
||||
}
|
||||
|
||||
#mCAL table#month .current
|
||||
{
|
||||
background-color: #FFE4B3;
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
#mCAL table#month .number
|
||||
{
|
||||
-moz-border-radius-bottomLeft:5px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #516BA4;
|
||||
color: white;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0px 3px 2px 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mCAL table#month .current .number
|
||||
{
|
||||
background-color: orange;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#mCAL table#month .events
|
||||
{
|
||||
padding: 3px;
|
||||
padding-top: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mCAL table#month .events a
|
||||
{
|
||||
color: #4F4F4F;
|
||||
text-decoration: none;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
#mCAL table#month .moreButton
|
||||
{
|
||||
border-style: none;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 9px;
|
||||
background-color: #517AC8;
|
||||
font-size: 5px;
|
||||
text-align: center;
|
||||
-moz-border-radius-bottomLeft: 8px;
|
||||
-moz-border-radius-bottomRight: 8px;
|
||||
}
|
||||
|
||||
#mCAL table#month .moreButton img
|
||||
{
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
/* MORE STYLES */
|
||||
|
||||
.moreDisplay
|
||||
{
|
||||
position: absolute;
|
||||
border: solid orange 1px;
|
||||
border-top: solid orange 2px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
padding: 2px;
|
||||
background-color: #FFD3A8;
|
||||
color: black;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.moreDisplay a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
* html body table#month td { position: relative; z-index: 1; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src='^Extras;yui/build/yahoo/yahoo.js'></script>
|
||||
<script type="text/javascript" src='^Extras;yui/build/event/event.js' ></script>
|
||||
|
||||
<script>
|
||||
<!--
|
||||
//<![CDATA[
|
||||
|
||||
//-----------------------------------------------------------------------------------
|
||||
function isSelfOrChildOf(parent,node) {
|
||||
if(parent == node) return true;
|
||||
if(parent == null || node == null) return false;
|
||||
var childLen = parent.childNodes.length;
|
||||
for (var i = 0; i < childLen; i++) {
|
||||
var child = parent.childNodes[i];
|
||||
if(child.nodeType != 1) continue; //Skip text and attribute nodes
|
||||
if(isSelfOrChildOf (child,node)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------
|
||||
function findParentNodeFromChild (node,tagName) {
|
||||
if(node == null) return node;
|
||||
var parent = node.parentNode;
|
||||
if(parent == null) return node;
|
||||
if(parent.tagName == tagName) {
|
||||
return parent;
|
||||
}
|
||||
return findParentNodeFromChild (parent,tagName);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------
|
||||
function showEvents(eventId) {
|
||||
var evt = YAHOO.util.Event.getEvent();
|
||||
var targ = YAHOO.util.Event.getTarget(evt);
|
||||
|
||||
var elem = document.getElementById(eventId);
|
||||
var cDiv = findParentNodeFromChild(targ,"DIV");
|
||||
|
||||
var pPagex = cDiv.offsetTop;
|
||||
var pPagey = cDiv.offsetLeft;
|
||||
|
||||
var td = findParentNodeFromChild(cDiv,"TD");
|
||||
var tdHeight = td.offsetHeight;
|
||||
|
||||
var eventX = tdHeight + pPagex;
|
||||
var eventY = pPagey;
|
||||
|
||||
elem.style.top = eventX + 'px';
|
||||
elem.style.left = eventY + 'px';
|
||||
elem.style.display = "block";
|
||||
|
||||
//Register listener
|
||||
YAHOO.util.Event.addListener(document.body,"mousemove",hideEvents,{ "targ":targ, "elem": elem, "td": td })
|
||||
return false;
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------------
|
||||
function hideEvents(e, el) {
|
||||
if(!e || !el) return;
|
||||
|
||||
var elem = el.elem;
|
||||
var td = el.td;
|
||||
var targ = el.targ;
|
||||
|
||||
var evtTarg = YAHOO.util.Event.getTarget(e);
|
||||
|
||||
var inDiv = isSelfOrChildOf(elem,evtTarg);
|
||||
var inTd = isSelfOrChildOf(td,evtTarg);
|
||||
var inTarget = isSelfOrChildOf(targ,evtTarg);
|
||||
|
||||
if(inDiv || inTd || inTarget) {
|
||||
//do nothing
|
||||
} else {
|
||||
elem.style.display = "none";
|
||||
YAHOO.util.Event.removeListener (document.body,"mousemove",hideEvents);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//]]>
|
||||
-->
|
||||
</script>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue