spontaneous 0.1.0.alpha1

data/application/css/editing.scss

@@ -0,0 +1,649 @@
+$editing-0: #ede9e4;
+$editing-1: #444444;
+$editing-2: #ccc;
+$editing-3: darken($editing-2, 20%);
+$editing-4: darken($editing-3, 20%);
+
+// $editing-focus: #8ac551;
+$editing-blur: rgba(0, 0, 0, 0.2);
+$editing-focus: rgba(0, 0, 0, 0.6);
+
+$text-edit-width: 621px;
+
+.editing-panel {
+
+	z-index: 1001;
+	// background-color: $editing-0;
+  background: url(/@spontaneous/static/editing-texture-1.png) repeat;
+	// background: $editing-0 url(/@spontaneous/static/editing-0-noise.png) 0 0 repeat;
+
+	.editing-fields {
+		@extend .clearfix;
+    @include display-box;
+    @include box-align(horizontal);
+		padding: $unit;
+
+	}
+	.editing-toolbar {
+		// background-color: $editing-1;
+		// background: $editing-1 url(/@spontaneous/static/editing-1-noise.png) 0 0 repeat;
+    background-color: rgba(0, 0, 0, 0.3);
+		padding: $unit/2 $unit*2;
+		.indent {
+
+			// background: url(/@spontaneous/static/editing-toolbar-shadow-top.png) 0 0 repeat-x;
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			height: 6px;
+		}
+		&.bottom .indent {
+			top: auto;
+			bottom: 0;
+		}
+		.buttons {
+			@include display-box;
+			@include box-orient(horizontal);
+			@include box-pack(justify);
+			// @include box-pack(end); // for right aligned buttons
+			// @include box-align(end); // for right aligned buttons
+			// padding-top: $unit/2;
+			width: $text-edit-width;
+			.save, .cancel {
+				@include button($action);
+			}
+			.cancel {
+				@include button($editing-1);
+        // margin-right: $unit; // for right aligned buttons
+			}
+			.save, .cancel {
+				display: block;
+				width: 128px;
+			}
+		}
+		&.bottom .buttons {
+			// padding-bottom: $unit/2;
+			padding-top: 0;
+		}
+	}
+	.field-group-bg {
+		@include rounded;
+		// background-color: #6b6b6b;
+		position: absolute;
+		margin: 8px;
+		top: 0px;
+		bottom: 0px;
+	}
+	.field-group-bg.text {
+		left: 0;
+		right: 343px;
+	}
+	.field-group-bg.image {
+		left: 629px;
+		right: 0;
+	}
+	input[type="submit"] {
+		visibility: hidden;
+		position: absolute;
+		width: 0;
+		height: 0;
+	}
+	.field-group {
+		position: relative;
+		z-index: 1010;
+		float: left;
+		// margin: 8px 0 0 8px;
+		padding: 8px;
+		// margin-top: 8px;
+		// margin-bottom: 8px;
+		.field + .field {
+			margin-top: 8px;
+		}
+		.name {
+			@include rounded-top;
+			@include box-sizing;
+			@extend .interface;
+			background-color: $editing-blur;
+			// background-image: url(/@spontaneous/static/paper-texture-dark.png);
+      color: #fff;
+			display: block;
+			height: 16px;
+			padding-left: 8px;
+			padding-top: 2px;
+			.comment {
+				font-weight: normal;
+				text-transform: none;
+				margin-left: $unit;
+				// color: $editing-4;
+			}
+		}
+		.value {
+			@include rounded-bottom;
+			border: solid 2px transparent;
+			padding: 6px;
+      background-color: white;
+      opacity: 0.8;
+			textarea, input[type="text"] {
+				font-family: $input-font-family;
+				font-size: 11px;
+				line-height: 14px;
+				outline: none;
+			}
+			input[type="file"] {
+				visibility: hidden;
+				position: absolute;
+				width: 0;
+				height: 0;
+			}
+			textarea {
+				@include box-sizing;
+				border: none;
+				width: 100%;
+				padding-right: 64px;
+				resize:vertical;
+			}
+			input[type="text"] {
+				@include box-sizing;
+				width: 100%;
+				border: none;
+				display: block;
+				font-weight: bold;
+			}
+		}
+
+
+		.field.focus {
+			.name {
+				background-color: $editing-focus;
+				color: white;
+				.comment {
+					color: white;
+				}
+			}
+			.value {
+				border-color: #fff;
+        background-color: #fff;
+        opacity: 1;
+			}
+			// textarea, input[type="text"] {
+        // background-color: #fff;
+			// }
+		}
+	}
+	.field-group.text {
+		width: $text-edit-width;
+	}
+	&.depth-2 {
+
+		.editing-fields {
+			padding: 0;
+      @include box-orient(vertical);
+		}
+		.editing-toolbar {
+			padding-left: $unit;
+			padding-right: $unit;
+			.buttons {
+				width: 100%;
+			}
+		}
+		.field-group.text {
+			width: 100%;
+			@include box-sizing;
+		}
+    .field-group.image {
+      padding: $unit;
+    }
+	}
+	.field-group.image {
+		@include box-sizing;
+    @extend .box-flexible;
+		display: block;
+		padding: $unit 0;
+		.field {
+			display: inline-block;
+			vertical-align: top;
+			min-width: 100px;
+			margin-right: $unit;
+			margin-bottom: $unit;
+			margin-top: 0;
+			margin-left: 0;
+      .name {
+        background-color: $editing-focus;
+      }
+      .value {
+        opacity: 1;
+      }
+		}
+		.field + .field {
+			// margin-top: 0;
+			// margin-left: $unit;
+		}
+		.field .value {
+			position: relative;
+			min-height: 70px;
+			text-align: center;
+			img {
+				// max-height: 300px;
+        max-width: 200px;
+				@extend .shadow;
+				cursor: pointer;
+			}
+			img:hover {
+				outline: solid 1px $action;
+			}
+			img.empty {
+				width: 50%;
+				height: 100px;
+			}
+			.image-drop {
+				// @include rounded;
+        @include box-sizing;
+				z-index: 2;
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+
+        &.drop-active,
+        &:hover {
+          border: solid 1px $action;
+        }
+      }
+			.actions {
+				margin: 0px;
+				margin-left: 0;
+				position: absolute;
+				top: 0;
+				right: 0;
+				width: 60px;
+				.button {
+					display: block;
+				}
+				.button.clear {
+					color: #5b5b5b;
+					background-color: #d1d1d1;
+					width: 100%;
+				}
+			}
+			.info {
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				padding: $unit;
+				@include image-overlay;
+				@extend .interface;
+				text-transform: none;
+				@include display-box;
+				@include box-orient(vertical);
+        .filename {
+          word-wrap: break-word;
+        }
+				.sizes {
+					padding-top: $unit/2;
+					@include display-box;
+					@include box-orient(horizontal);
+					@include box-pack(justify);
+				}
+			}
+			.landscape {
+				img {
+					max-width: 200px;
+					// max-height: 100px;
+				}
+				.actions {
+					width: auto;
+					display: block;
+					margin: 8px 0 0 0;
+					position: relative;
+					.button {
+						display: inline-block;
+						width: 109px;
+					}
+					.button.clear {
+						position: static;
+					}
+					.button.change {
+						position: absolute;
+						right: 0;
+					}
+				}
+			}
+		}
+	}
+}
+@import "variables";
+
+#editing {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	#url-panel {
+		@extend .bar;
+		background-color: $level1;
+		padding-left: $padding;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+	}
+	#function-panel {
+		position: absolute;
+		top: $bar-height;
+		left: 0;
+		right: 0;
+		height: 34px;
+	}
+	#content-panel {
+		position: absolute;
+		top: $bar-height * 2.5;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: auto;
+		padding: 0 $padding;
+		padding-bottom: 100px;
+		.tabs {
+			@include rounded-top;
+			background-color: $level2;
+			list-style: none;
+			height: $bar-height;
+			@extend .clearfix;
+			.tab:first-child {
+				@include rounded-top-left;
+			}
+			.tab {
+				@extend .bar;
+				display: block;
+				float: left;
+				padding-left: $padding;
+				min-width: 130px;
+				border-right: solid 1px $level4;
+				cursor: pointer;
+				&:hover {
+					background-color: $blue;
+				}
+			}
+			.tab.active {
+				background-color: $level4;
+				font-weight: bold;
+			}
+		}
+		#content-wrapper {
+			border-top: solid 1px $level3;
+			background-color: $level1;
+			.field-wrap {
+				.edit, .preview {
+					padding: $padding;
+					background-color: $level3;
+				}
+				.field {
+					@include rounded;
+					width: 100%;
+					.name, .value {
+						display: table-cell;
+					}
+					.name {
+						@include rounded-left;
+						vertical-align: top;
+						font-weight: bold;
+						width: 150px;
+						padding-right: $padding;
+						text-align: right;
+					}
+					.value {
+						@include rounded-right;
+						padding-left: $padding;
+					}
+				}
+				.field.edit {
+					.name {
+						@extend .bar;
+					}
+					.name {
+						background-color: $level7;
+					}
+					.name.active {
+						background-color: $blue;
+						color: $white;
+					}
+					.value {
+						padding-top: 0;
+						padding-bottom: 0;
+						padding-right: 0;
+						padding-left: 0px;
+						position: relative;
+						input.input {
+							@extend .bar;
+							@include rounded-right;
+							@extend .border-box;
+							display: block;
+							position: relative;
+							left: 0;
+							width: 100%;
+							height: $bar-height;
+							border: solid 2px $blue;
+							outline: none;
+							padding-left: $padding;
+							vertical-align: top;
+							&:focus {
+								border-color: $blue;
+							}
+						}
+					}
+				}
+				.field + .field {
+					margin-top: $padding;
+				}
+			}
+			.facet-contents-wrap .facet-contents-wrap .facet-drag-bar {
+				display: none;
+			}
+			.facet-contents-wrap .editing .facet-contents-wrap .facet-drag-bar {
+				display: block;
+			}
+			.facet.depth-1 .facet-contents-wrap {
+				background-color: $level2;
+			}
+			.facet.depth-2 {
+				background-color: $level1;
+				.field-wrap .preview {
+					background-color: $white;
+				}
+				.field-wrap .edit {
+					background-color: $level1;
+				}
+				.facet-contents-wrap {
+					background-color: $level1;
+				}
+			}
+			.facet.depth-1 > .facet-bottom-bar {
+				@include rounded-bottom;
+				background-color: $level1;
+			}
+			.field-wrap + .facet-allowed {}
+			.facet-allowed {
+				background-color: $level3;
+				padding: 0;
+				.type-list {
+					@include rounded-top;
+					@extend .clearfix;
+					padding-left: $padding;
+					padding-right: $padding;
+					padding-bottom: 6px;
+					$a-height: $bar-height - 6;
+					$a-pad: ($a-height - $line-height) / 2 - 1;
+					a {
+						@include rounded;
+						display: block;
+						float: left;
+						min-width: 95px;
+						padding: $a-pad 6px 0 6px;
+						height: $a-height - $a-pad;
+						background-color: $level2;
+						margin-top: 6px;
+						&:hover {
+							background-color: $blue;
+							color: $white;
+						}
+					}
+					a + a {
+						margin-left: 6px;
+					}
+				}
+			}
+			.page-entry-link h3 {
+				@extend .bar;
+				@include rounded;
+				background-color: $level1;
+				margin-bottom: $padding;
+				font-size: 150%;
+				padding-left: $padding;
+				a {
+					font-weight: normal;
+				}
+			}
+			.facet-contents-wrap {
+				padding: $padding;
+				.facet-drag-bar {
+					@include rounded-top;
+					height: $bar-height - $padding;
+					background-color: $level4;
+				}
+				.facet {
+					margin-top: 2 * $padding;
+				}
+				.field-wrap {}
+				.page .field-wrap {
+					padding-bottom: $padding;
+				}
+			}
+			.depth-2 .facet-contents-wrap {
+				background-color: $level3;
+			}
+			.facet-bottom-bar {
+				@include rounded-bottom;
+				height: $padding;
+				background-color: $level2;
+			}
+		}
+	}
+}
+
+#page-fields .editing-panel,
+.box-fields .editing-panel {
+	.editing-fields, .editing-toolbar {
+		padding-left: $container-padding;
+		padding-right: $container-padding;
+	}
+	.field-group.text {
+		padding-left: 0;
+	}
+}
+.box-fields .editing-panel {
+	.editing-toolbar.bottom .indent {
+		opacity: 0.2;
+	}
+}
+.field {
+  .markdown-editor .md-toolbar {
+    @include display-box;
+    @include box-orient;
+    background-color: $editing-blur;
+    a {
+      @extend .interface;
+      @extend .no-select;
+      color: $editing-3;
+      display: block;
+      border: solid 1px transparent;
+      padding: 2px 6px;
+      cursor: pointer;
+    }
+    a.active {
+      // border: solid 1px $editing-2;
+      background-color: $editing-2;
+    }
+    a:hover {
+      background-color: $editing-3;
+    }
+    a + a {
+      margin-left: 10px;
+    }
+  }
+}
+.field.focus {
+  .markdown-editor .md-toolbar {
+    background-color: $editing-focus;
+    a {
+      color: #333;
+    }
+  }
+
+}
+
+#conflicted-fields-dialogue {
+  .instructions {
+		@extend .interface;
+		text-transform: none;
+		margin: 0;
+		background-color: #f2f2f2;
+		color: #666;
+		padding: $unit;
+  }
+	.differences {
+		@include display-box;
+	}
+	.changes {
+
+	}
+	.diff {
+		@include box-sizing;
+		font-size: $field-preview-font-size;
+		width: 50%;
+		padding: $unit $unit;
+		border: solid 2px #f2f2f2;
+		cursor: pointer;
+
+		&.selected {
+			border-color: $action;
+		}
+		ins {
+			background-color: #deffdd;
+			text-decoration: none;
+		}
+		del {
+			background-color: #fedddd;
+			text-decoration: line-through;
+		}
+		.para {
+			color: #ccc;
+		}
+	}
+	.labels {
+		.diff {
+			border: none;
+			background-color: #fbfbfb;
+      @extend .interface;
+      @extend .no-select;
+			padding-top: $padding/2;
+			padding-bottom: $padding/2;
+		}
+	}
+	.image-field-conflict.changes {
+		.diff {
+			@include display-box;
+			@include box-orient(horizontal);
+			@include box-pack(center);
+			@include box-align(center);
+			img {
+				max-height: 500px;
+				max-width: 100%;
+				display: block;
+			}
+		}
+	}
+}

data/application/css/login.scss

@@ -0,0 +1,91 @@
+@import "definitions";
+
+$login-width: 400px;
+$splash-width: 100px;
+
+#outer {
+	width: $login-width;
+	margin: 0 auto;
+	top: 100px;
+	position: relative;
+	h1 {
+		margin: 0;
+		padding: 0;
+		padding-left: $unit;
+		@include header;
+		font-size: 24px;
+		line-height: 28px;
+		color: #666;
+	}
+	#login {
+		position: relative;
+		// padding: $unit;
+		#splash {
+			display: none;
+			width: $splash-width;
+			height: $splash-width+8;
+			background: url(/@spontaneous/static/spot.svg) 0 0 no-repeat;
+			@include background-size;
+			position: absolute;
+			left: -($splash-width+$unit);
+			top: -5px;
+		}
+		form {
+			@include rounded($unit);
+			background-color: #eee;
+			border: solid 3px #fafafa;
+			// margin-left: $splash-width + $unit;
+			font-family: $content-font-family;
+			p {
+				position: relative;
+				margin-top: 0;
+				margin-bottom: $unit/2;
+			}
+			p.error {
+				-webkit-font-smoothing: antialiased;
+				@include rounded-top($unit);
+				@include vertical-gradient(#f00, #f00000);
+				// background-color: red;
+				padding: $unit;
+				color: #fff;
+			}
+			.inputs {
+				padding: $unit;
+				input {
+					@include box-sizing;
+					@include rounded;
+					border: none;
+					font-size: 14px;
+					font-weight: bold;
+					padding: $unit/2;
+					width: $login-width -  ($unit*3);
+					font-family: $content-font-family;
+					outline-color: $action;
+				}
+				label {
+					position: relative;
+					span {
+						@extend .interface;
+						position: absolute;
+						left: $unit;
+						top: $unit/2;
+						color: #666;
+						&.faded {
+							opacity: 0.5;
+						}
+					}
+				}
+				.submit {
+					@extend .clearfix;
+					margin-bottom: 0;
+				}
+				button {
+					@include button;
+					border: none;
+					float: right;
+					width: 96px;
+				}
+			}
+		}
+	}
+}