upgrade to SilverStripe 3.2

titledk · Oct 21, 2015 · 7a35f5d · 7a35f5d
1 parent f5ae9e8
commit 7a35f5d
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 98 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/config.rb b/config.rb
diff --git a/css/.gitignore b/css/.gitignore
@@ -0,0 +1 @@
+*.scss
diff --git a/css/admin/CalendarEventGridFieldDetailForm.css b/css/admin/CalendarEventGridFieldDetailForm.css
@@ -1,21 +1,86 @@
-.CalendarEventGridfieldDetailForm .field { border: none; box-shadow: none; padding: 0px; }
-.CalendarEventGridfieldDetailForm input::-webkit-input-placeholder { color: #bfbfbf; font-style: italic; }
-.CalendarEventGridfieldDetailForm input:-moz-placeholder { color: #bfbfbf; font-style: italic; }
-.CalendarEventGridfieldDetailForm input:-ms-input-placeholder { color: #bfbfbf; font-style: italic; }
-.CalendarEventGridfieldDetailForm .middleColumn { margin-left: 100px; }
-.CalendarEventGridfieldDetailForm label.left { width: 85px; }
-.CalendarEventGridfieldDetailForm #AllDay, .CalendarEventGridfieldDetailForm #NoEnd { float: left; padding-left: 10px; padding-top: 5px; padding-bottom: 0px; }
-.CalendarEventGridfieldDetailForm #AllDay input, .CalendarEventGridfieldDetailForm #NoEnd input { min-height: 10px; }
-.CalendarEventGridfieldDetailForm #StartDateTime { float: left; clear: both; }
-.CalendarEventGridfieldDetailForm #StartDateTime .middleColumn, .CalendarEventGridfieldDetailForm #EndDateTime .middleColumn { width: auto; margin-right: 10px; }
-.CalendarEventGridfieldDetailForm #StartDateTime input, .CalendarEventGridfieldDetailForm #EndDateTime input { width: 110px; cursor: pointer; }
-.CalendarEventGridfieldDetailForm h5#Form_ItemEditForm_TimeFrameHeader { margin-bottom: 12px; clear: both; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup { overflow: hidden; *zoom: 1; margin: 0px; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup li { margin-bottom: 10px; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup li div.field { margin: 0px; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup li > label { width: auto; float: left; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup #Duration { overflow: hidden; *zoom: 1; margin-left: 100px; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup #Duration label.right { margin: 0px; margin-top: 1px; }
-.CalendarEventGridfieldDetailForm ul.selectiongroup #Duration input { width: 100px; }
-.CalendarEventGridfieldDetailForm .clear { clear: both; }
-.CalendarEventGridfieldDetailForm #CalendarID { margin-top: 15px; width: 350px; }
+.CalendarEventGridfieldDetailForm .field {
+  border: none;
+  box-shadow: none;
+  padding: 0px; }
+
+.CalendarEventGridfieldDetailForm input::-webkit-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+
+.CalendarEventGridfieldDetailForm input:-moz-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+
+.CalendarEventGridfieldDetailForm input:-ms-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+
+.CalendarEventGridfieldDetailForm .middleColumn {
+  margin-left: 100px; }
+
+.CalendarEventGridfieldDetailForm label.left {
+  width: 85px; }
+
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_AllDay_Holder,
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_NoEnd_Holder {
+  float: left;
+  padding-left: 10px;
+  padding-top: 5px;
+  padding-bottom: 0px; }
+  .CalendarEventGridfieldDetailForm #Form_ItemEditForm_AllDay_Holder input,
+  .CalendarEventGridfieldDetailForm #Form_ItemEditForm_NoEnd_Holder input {
+    min-height: 10px; }
+
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_StartDateTime_Holder {
+  float: left;
+  clear: both; }
+
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_StartDateTime_Holder .middleColumn,
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_EndDateTime_Holder .middleColumn {
+  width: auto;
+  margin-right: 10px; }
+
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_StartDateTime_Holder input,
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_EndDateTime_Holder input {
+  width: 110px;
+  cursor: pointer; }
+
+.CalendarEventGridfieldDetailForm h5#Form_ItemEditForm_TimeFrameHeader {
+  margin-bottom: 12px;
+  clear: both; }
+
+.CalendarEventGridfieldDetailForm ul.selectiongroup {
+  margin: 0px; }
+  .CalendarEventGridfieldDetailForm ul.selectiongroup:before,
+  .CalendarEventGridfieldDetailForm ul.selectiongroup:after {
+    content: "";
+    display: table; }
+  .CalendarEventGridfieldDetailForm ul.selectiongroup:after {
+    clear: both; }
+  .CalendarEventGridfieldDetailForm ul.selectiongroup li {
+    margin-bottom: 10px; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup li div.field {
+      margin: 0px; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup li > label {
+      width: auto;
+      float: left; }
+  .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder {
+    margin-left: 100px; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder:before,
+    .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder:after {
+      content: "";
+      display: table; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder:after {
+      clear: both; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder label.right {
+      margin: 0px;
+      margin-top: 1px; }
+    .CalendarEventGridfieldDetailForm ul.selectiongroup #Form_ItemEditForm_Duration_Holder input {
+      width: 100px; }
+
+.CalendarEventGridfieldDetailForm .clear {
+  clear: both; }
+
+.CalendarEventGridfieldDetailForm #Form_ItemEditForm_CalendarID_Holder {
+  margin-top: 15px;
+  width: 350px; }
diff --git a/css/modules.css b/css/modules.css
@@ -1,7 +1,30 @@
-.fatDate { float: left; width: 100px; }
-.fatDate .month { display: block; text-align: center; color: #333; font-size: 18px; line-height: 18px; }
-.fatDate .dayOfMonth { display: block; text-align: center; color: #777; font-size: 55px; }
+.fatDate {
+  float: left;
+  width: 100px; }
+  .fatDate .month {
+    display: block;
+    text-align: center;
+    color: #333;
+    font-size: 18px;
+    line-height: 18px; }
+  .fatDate .dayOfMonth {
+    display: block;
+    text-align: center;
+    color: #777;
+    font-size: 55px; }
 
-a.feed-checkbox { background-image: url('../images/feed.png?1389954816'); background-position: 3px 3px; background-repeat: no-repeat; border-radius: 5px 5px 5px 5px; display: inline-block; height: 16px; margin-left: 3px; margin-right: 5px; vertical-align: text-top; width: 16px; }
+a.feed-checkbox {
+  background-image: url("../images/feed.png");
+  background-position: 3px 3px;
+  background-repeat: no-repeat;
+  border-radius: 5px 5px 5px 5px;
+  display: inline-block;
+  height: 16px;
+  margin-left: 3px;
+  margin-right: 5px;
+  vertical-align: text-top;
+  width: 16px; }
 
-a.feed-checkbox-text { color: #666; text-decoration: none; }
+a.feed-checkbox-text {
+  color: #666;
+  text-decoration: none; }
diff --git a/css/pagetypes/CalendarPage.css b/css/pagetypes/CalendarPage.css
@@ -1,18 +1,49 @@
-.EventList .event { padding: 10px; }
-.EventList .event.odd { background: #efefef; }
+.EventList .event {
+  padding: 10px; }
+  .EventList .event.odd {
+    background: #efefef; }
 
-.event { overflow: hidden; *zoom: 1; }
-.event.row { margin-bottom: 20px; }
-.event .content { margin-left: 100px; }
-.event h4 { color: #333; letter-spacing: -1px; margin-top: 0; }
-.event .details { margin: 10px 0; overflow: hidden; }
-.event .details p { font-size: 12px; text-overflow: ellipsis; }
-.event .feedBox { width: 30px; position: absolute; }
+.event.row {
+  margin-bottom: 20px; }
 
-.EventRegistration h3 span { display: block; }
-.EventRegistration h3 span.first { color: #999; font-size: 80%; }
-.EventRegistration form { margin-top: 26px; }
+.event:before,
+.event:after {
+  content: "";
+  display: table; }
 
-.fc-event { cursor: pointer !important; }
+.event:after {
+  clear: both; }
 
-#FullcalendarCustomNav a.current { background-color: #e6e6e6; }
+.event .content {
+  margin-left: 100px; }
+
+.event h4 {
+  color: #333;
+  letter-spacing: -1px;
+  margin-top: 0; }
+
+.event .details {
+  margin: 10px 0;
+  overflow: hidden; }
+  .event .details p {
+    font-size: 12px;
+    text-overflow: ellipsis; }
+
+.event .feedBox {
+  width: 30px;
+  position: absolute; }
+
+.EventRegistration h3 span {
+  display: block; }
+  .EventRegistration h3 span.first {
+    color: #999;
+    font-size: 80%; }
+
+.EventRegistration form {
+  margin-top: 26px; }
+
+.fc-event {
+  cursor: pointer !important; }
+
+#FullcalendarCustomNav a.current {
+  background-color: #e6e6e6; }
diff --git a/docs/frontend.md b/docs/frontend.md
@@ -0,0 +1,17 @@
+# Frontend compilation
+
+Gulp is used for frontend compilation.
+
+_This has been ported from Compass so we're still working on the specifics._ 
+
+
+Install dependencies:
+
+	npm install
+	#not yet needed
+	#bower install
+
+
+Adding dependencice:
+
+	bower install blast-text --save
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,23 @@
+
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+
+
+gulp.task('build-css', function() {
+	gulp.src('./scss/**/*')
+		.pipe($.sass({
+			includePaths : ['./scss']
+		})
+			.on('error', $.sass.logError))
+		.pipe(gulp.dest('./css'));
+
+});
+
+gulp.task('watch', function() {
+	gulp.watch('./scss/**/*', ['build-css']);
+});
+
+gulp.task('default', [
+	'build-css',
+	'watch'
+]);
diff --git a/javascript/events/EventFields.js b/javascript/events/EventFields.js
@@ -6,16 +6,18 @@ var EventFields = function(form) {
 	var $this = this;
 
 	//Date inputs
-	var startDateInput = form.find('#StartDateTime input.date');
-	var endDateInput = form.find('#EndDateTime input.date');
+	var startDateInput = form.find("[name='StartDateTime[date]']");
+	var endDateInput = form.find("[name='EndDateTime[date]']");
 
 
 	//Time inputs
-	var startTimeInput = form.find('#StartDateTime input.time');
-	var endTimeInput = form.find('#EndDateTime input.time');
-	var startEndTimeInputs = form.find('#StartDateTime input.time, #EndDateTime input.time');
-	var durationTimeInput = form.find('#Duration input.time')
+	var startTimeInput = form.find("[name='StartDateTime[time]']");
+	var endTimeInput = form.find("[name='EndDateTime[time]']");
+	var startEndTimeInputs = form.find("[name='StartDateTime[time]'], [name='EndDateTime[time]']");
+	var durationTimeInput = form.find("[name='Duration']");
 
+	var titleInput = form.find("[name='Title']");
+	var allDayInput = form.find("[name='AllDay']");
 
 	this.init = function(){
 
@@ -29,7 +31,7 @@ var EventFields = function(form) {
 		$this.init_noendtoggling();
 		$this.init_sanitychecks();
 
-		if (form.find('#Title input').val().length == 0) {
+		if (titleInput.val().length == 0) {
 			$this.addform_init();
 		}
 
@@ -87,11 +89,11 @@ var EventFields = function(form) {
 	 * the calendar config
 	 */
 	this.init_alldaytoggling = function() {
-		var checkbox = form.find('#AllDay input.checkbox');
+		var checkbox = allDayInput;
 		if (checkbox.length) {
 			if (checkbox.is(':checked')) {
 				$this.allday_toggle(checkbox, 'hide');
-				form.find('#Title input').focus();
+				titleInput.focus();
 			}
 			checkbox.click(function() {
 				$this.allday_toggle(checkbox, 'fade');
@@ -104,11 +106,11 @@ var EventFields = function(form) {
 	 * checkbox is toggled
 	 */
 	this.allday_toggle = function(checkbox, effect){
-		var durationLi = form.find('#Duration').closest('li');
+		var durationLi = durationTimeInput.closest('li');
 
 		if (checkbox.is(':checked')) {
 			//selecting "DateTime" option
-			form.find('#EndDateTime').closest('li').find('.selector').trigger('click');
+			endTimeInput.closest('li').find('.selector').trigger('click');
 			//hiding "Duration" option
 
 			$this.do_toggle(durationLi,'hide', effect);
@@ -130,7 +132,7 @@ var EventFields = function(form) {
 	 * Note that this only applies if end dates are not enforced
 	 */
 	this.init_noendtoggling = function() {
-		var checkbox = form.find('#NoEnd input.checkbox');
+		var checkbox = form.find("[name='NoEnd']");
 		if (checkbox.length) {
 			if (checkbox.is(':checked')) {
 				//initial toggle
@@ -139,17 +141,16 @@ var EventFields = function(form) {
 			checkbox.click(function() {
 
 				//in case allday is clicked make sure to unclick it
-				var alldayCheckbox = form.find('#AllDay input.checkbox');
-				if (alldayCheckbox.length && alldayCheckbox.is(':checked')) {
+				if (allDayInput.length && allDayInput.is(':checked')) {
 					//console.log('allday is checked');
 					//alldayCheckbox.trigger('click');
 
 					//$this.allday_toggle(checkbox, 'show');
 
 					//$this.allday_toggle(checkbox, 'fade');
 
-					alldayCheckbox.attr('checked', false);
-					$this.do_toggle(form.find('#Duration').closest('li'),'show', 'show');
+					allDayInput.attr('checked', false);
+					$this.do_toggle(durationTimeInput.closest('li'),'show', 'show');
 					$this.do_toggle(startEndTimeInputs,'show', 'show');
 				}
 
@@ -164,7 +165,7 @@ var EventFields = function(form) {
 	 * checkbox is toggled
 	 */
 	this.noend_toggle = function(checkbox, effect){
-		var endInput = form.find('.SelectionGroup, #Form_ItemEditForm_TimeFrameHeader, #AllDay');
+		var endInput = form.find(".SelectionGroup, #Form_ItemEditForm_TimeFrameHeader, [name='AllDay']");
 
 		if (checkbox.is(':checked')) {
 			$this.do_toggle(endInput,'hide', effect);
@@ -218,8 +219,8 @@ var EventFields = function(form) {
 
 	this.addform_init = function(){
 		//trigger duration time frame on first add
-		form.find('#Duration').closest('li').find('.selector').trigger('click');
-		form.find('#Title input').focus();
+		durationTimeInput.closest('li').find('.selector').trigger('click');
+		titleInput.focus();
 	}
 
 }