com web/php: Add calendar styling: this isn't perfect, but it's a tonne better than what we had, which was nothing.: cal.php styles/calendar.css
| From: | Adam Harvey | Date: | Fri, 31 Aug 2012 09:56:36 +0000 |
| Subject: | com web/php: Add calendar styling: this isn't perfect, but it's a tonne better than what we had, which was nothing.: cal.php styles/calendar.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-14585@lists.php.net to get a copy of this message | ||
Commit: e61828f07a88607acc0400b15c53b70c556d6e4b
Author: Adam Harvey <aharvey@php.net> Fri, 31 Aug 2012 17:56:36 +0800
Parents: 4ae8b96a60814f9e53135aab01a6522e88481c35
Branches: master
Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=e61828f07a88607acc0400b15c53b70c556d6e4b
Log:
Add calendar styling: this isn't perfect, but it's a tonne better than what we
had, which was nothing.
Changed paths:
M cal.php
A styles/calendar.css
Diff:
diff --git a/cal.php b/cal.php
index 4414db0..983e425 100644
--- a/cal.php
+++ b/cal.php
@@ -3,6 +3,11 @@
$_SERVER['BASE_PAGE'] = 'cal.php';
include_once $_SERVER['DOCUMENT_ROOT'] . '/include/prepend.inc';
+$site_header_config = array(
+ "current" => "calendar",
+ "css" => array('calendar.css'),
+);
+
/*
This script serves three different forms of the calendar data:
a monthly view ($cm, $cy)
@@ -30,7 +35,7 @@ if ($cy != 0 && !valid_year($cy)) {
if ($id) {
// Try to load event by ID and display header and info for that event
if ($event = load_event($id)) {
- site_header("Event: " . stripslashes(htmlentities($event['sdesc'],
ENT_QUOTES | ENT_IGNORE, 'UTF-8')), array("current" => "FIXME"));
+ site_header("Event: " . stripslashes(htmlentities($event['sdesc'],
ENT_QUOTES | ENT_IGNORE, 'UTF-8')), $site_header_config);
display_event($event, 0);
$begun = TRUE;
}
@@ -51,7 +56,8 @@ elseif ($cy && $cm && $cd) {
// Try to load events for that day, and display them all
if ($events = load_events($date)) {
- site_header("Events: ".date("F j, Y", $date),
array("current" => "FIXME"));
+ $site_header_config = array('current' => 'calendar
calendar-day') + $site_header_config;
+ site_header("Events: ".date("F j, Y", $date), $site_header_config);
echo "<h2>", date("F j, Y", $date),
"</h2>\n";
foreach ($events as $event) {
display_event($event, 0);
@@ -87,7 +93,7 @@ if (!isset($cy) || $cy == 0) { $cy = date("Y"); }
$date = mktime(0, 0, 1, $cm, 1, $cy);
if (!$begun) {
- site_header("Events: ".date("F Y", $date), array("current" =>
"FIXME"));
+ site_header("Events: ".date("F Y", $date), $site_header_config);
?>
<div class="tip">
<p>
diff --git a/styles/calendar.css b/styles/calendar.css
new file mode 100644
index 0000000..faef364
--- /dev/null
+++ b/styles/calendar.css
@@ -0,0 +1,139 @@
+/* Calendar navigation styles. */
+#calnav {
+ border-bottom: solid 0.25em #666699;
+ margin-bottom: 1.2em;
+}
+
+#calnav td {
+ vertical-align: middle;
+}
+
+#calnav td:first-child a:before {
+ content: "\ab\20";
+}
+
+#calnav td a {
+ background: #ddd;
+ border: 0;
+ color: #333;
+ padding: 0.6em 1em;
+ display: inline-block;
+}
+
+#calnav td a:hover {
+ background: #eee;
+}
+
+#calnav td b {
+ font-size: 1.25em;
+ font-weight: normal;
+}
+
+#calnav td:last-child a:after {
+ content: "\20\bb";
+}
+
+/* The actual monthly calendar. */
+#cal {
+ border-collapse: collapse;
+}
+
+#cal td, #cal th {
+ border: solid 1px #ccc;
+ padding: 0.7em;
+}
+
+/* Drop the left and right borders to match the manual. */
+#cal td:first-child, #cal th:first-child {
+ border-left: 0;
+}
+
+#cal td:last-child, #cal th:last-child {
+ border-right: 0;
+}
+
+#cal th {
+ font-size: 1.125em;
+ font-weight: normal;
+}
+
+#cal .day {
+ border: 0;
+ background: white;
+ color: #333;
+ display: block;
+ float: right;
+ font-size: 1.6em;
+ font-weight: bold;
+ margin-left: 0.4375em;
+ margin-bottom: 0.4375em;
+ padding: 0.4em;
+ text-decoration: none;
+}
+
+#cal .event a {
+ display: block;
+ font-size: 0.8em;
+ padding: 0.4em 0;
+}
+
+#cal .event a:hover {
+ background: #ddd;
+}
+
+#cal .event:last-child a {
+ border-bottom: 0;
+}
+
+#cal .event:nth-child(2n) {
+ background: #efefef;
+}
+
+/* Event styling. */
+.vevent .url {
+ border: 0;
+ display: block;
+ color: #666;
+ font-size: 2em;
+ line-height: 1.5em;
+ margin-bottom: 0.8em;
+}
+
+.vevent .url b {
+ font-weight: normal;
+}
+
+/* Single day view: let's try putting the events into columns. */
+section.calendar-day .vevent {
+ float: left;
+ width: 33%;
+ margin-bottom: 1.5em;
+}
+
+section.calendar-day .vevent:nth-child(3n+2) {
+ clear: left;
+}
+
+section.calendar-day .vevent td {
+ background: #eee;
+ border-right: solid 2.5em white;
+ padding: 0.4em;
+}
+
+section.calendar-day .vevent .url {
+ border-bottom: solid 1px #99c;
+ color: #3f438d;
+ font-size: 1em;
+}
+
+section.calendar-day .vevent .url b {
+ font-weight: bold;
+}
+
+section.calendar-day .vevent tr.description td {
+ padding-top: 1.5em;
+}
+
+section.calendar-day > br {
+ display: none;
+}