Add some margin to the events, so that users can still click next to them to create...

diff --git a/kronolith/js/kronolith.js b/kronolith/js/kronolith.js
index bcce5d6..09806c3 100644 (file)
--- a/kronolith/js/kronolith.js
+++ b/kronolith/js/kronolith.js
@@ -1558,6 +1558,7 @@ KronolithCore = {
         case 'week':
             var storage = view + 'Sizes',
                 div = _createElement(event),
+                margin = view == 'day' ? 5 : 10,
                 style = { backgroundColor: Kronolith.conf.calendars[calendar[0]][calendar[1]].bg,
                           color: Kronolith.conf.calendars[calendar[0]][calendar[1]].fg };
 
@@ -1595,7 +1596,7 @@ KronolithCore = {
 
             div.setStyle({
                 top: (Math.round(midnight.getElapsed(event.value.start) / 60000) * this[storage].height / 60 | 0) + 'px',
-                width: '100%'
+                width: 100 - margin + '%'
             })
                 .insert(innerDiv.setStyle(style));
             if (draggerTop) {
@@ -1794,7 +1795,7 @@ KronolithCore = {
             width = 100 / columns;
             this.dayGroups[pos].each(function(ev) {
                 ev.columns = columns;
-                $(ev.nodeId).setStyle({ width: width + '%', left: (width * (ev.column - 1)) + '%' });
+                $(ev.nodeId).setStyle({ width: width - margin + '%', left: (width * (ev.column - 1)) + '%' });
             });
             this.dayEvents.push(event.value);
 

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index cc97121..c53955b 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -1378,11 +1378,14 @@ div.kronolithEvent {
 #kronolithViewDay .kronolithAllDay div.kronolithEvent {
     float: left;
 }
+#kronolithViewWeek .kronolithAllDay div.kronolithEvent {
+    margin-right: 10%;
+}
 div.kronolithEvent .kronolithDragger {
     position: absolute;
     visibility: hidden;
     left: 0;
-    right: 3px;
+    right: 0;
     height: 12px;
 }
 div.kronolithEvent.kronolithEditable {
@@ -1430,15 +1433,11 @@ div.kronolithEvent .kronolithEventInfo {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
-    right: 3px;
+    right: 0;
     left: 0;
     padding: 5px;
     overflow: hidden;
 }
-#kronolithEventsWeek div.kronolithEvent .kronolithEventInfo,
-#kronolithEventsWeek div.kronolithEvent .kronolithDragger {
-    right: 4px;
-}
 div.kronolithEditable:hover .kronolithEventInfo,
 div.kronolithEvent.kronolithSelected .kronolithEventInfo {
     top: 7px;