Merge pull request #7 from Devex/navbar

Navbar
2016-01-24 21:05:18 +00:00
parent 2b18ace6d1 66e83b25a3
commit 1ff7c18782
11 changed files with 17520 additions and 2145 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+.sass-cache/
--- a/css/editor.css
+++ b/css/editor.css
@@ -0,0 +1,332 @@
+/* compiler is working */
+body {
+  padding-top: 50px;
+  padding-bottom: 40px;
+  margin-left: 200px !important;
+  -webkit-transition: margin 500ms ease;
+  -moz-transition: margin 500ms ease;
+  -ms-transition: margin 500ms ease;
+  -o-transition: margin 500ms ease;
+  transition: margin 500ms ease; }
+
+@media (max-width: 980px) {
+  /* Enable use of floated navbar text */
+  .navbar-text.pull-right {
+    float: none;
+    padding-left: 5px;
+    padding-right: 5px; } }
+
+@media (max-width: 979px) {
+  .navbar-fixed-top {
+    position: fixed; } }
+
+.navbar-inverse .brand {
+  width: 180px;
+  color: #fff; }
+
+.brand img {
+  float: left;
+  margin: 2px 10px 0 0; }
+
+.brand .label {
+  position: relative;
+  left: 10px;
+  top: -3px;
+  font-weight: normal;
+  font-size: 9px;
+  background: #666;
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
+  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7); }
+
+.edit .demo {
+  margin-left: 0px;
+  margin-top: 10px;
+  padding: 30px 15px 15px;
+  border-radius: 4px;
+  position: relative;
+  word-wrap: break-word; }
+
+.edit .demo:after {
+  background-color: #F5F5F5;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px 0 4px 0;
+  color: #9DA0A4;
+  content: "Container";
+  font-size: 12px;
+  font-weight: bold;
+  left: -1px;
+  padding: 3px 7px;
+  position: absolute;
+  top: -1px; }
+
+.sidebar-nav {
+  position: fixed;
+  width: 200px;
+  left: 0px;
+  bottom: 0;
+  top: 44px;
+  background: #ccc;
+  padding: 9px 0;
+  z-index: 10;
+  -webkit-transition: all 500ms ease;
+  -moz-transition: all 500ms ease;
+  -ms-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  transition: all 500ms ease; }
+
+.sidebar-nav .nav-header {
+  cursor: pointer;
+  font-size: 14px;
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
+
+.sidebar-nav .nav-header span.label {
+  font-size: 10px;
+  /*padding-bottom:0;*/
+  position: relative;
+  top: -1px; }
+
+.sidebar-nav .nav-header .popover {
+  color: #999;
+  text-shadow: none; }
+
+.popover-info {
+  position: relative; }
+
+.popover-info .popover {
+  display: none;
+  top: -12.5px;
+  left: 15px; }
+
+.popover-info:hover .popover {
+  display: block;
+  opacity: 1;
+  width: 400px; }
+
+.popover-info:hover .popover .arrow {
+  top: 23px; }
+
+.sidebar-nav .accordion-group {
+  border: none; }
+
+.sidebar-nav li {
+  line-height: 25px; }
+
+.sidebar-nav .box {
+  line-height: 25px;
+  width: 170px;
+  height: 25px; }
+
+.sidebar-nav .preview {
+  display: block;
+  color: #666;
+  font-size: 12px;
+  line-height: 22px; }
+
+.sidebar-nav .preview input {
+  width: 90px;
+  padding: 0 10px;
+  background: #bbb;
+  font-size: 10px;
+  color: #999;
+  line-height: 20px;
+  height: 20px;
+  position: relative;
+  top: -1px; }
+
+.sidebar-nav .view {
+  display: none; }
+
+.sidebar-nav .remove,
+.sidebar-nav .configuration {
+  display: none; }
+
+.sidebar-nav .boxes {
+  display: none; }
+
+.demo .preview {
+  display: none; }
+
+.demo .box .view {
+  display: block;
+  padding-top: 30px; }
+
+.ui-draggable-dragging .view {
+  display: block; }
+
+/*.demo .ui-sortable-placeholder { outline: 5px dotted #ddd; visibility: visible; border-radius: 4px; }*/
+.ui-sortable-placeholder {
+  outline: 1px dashed #ddd;
+  visibility: visible;
+  border-radius: 4px; }
+
+.edit .drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer; }
+
+.box, .lyrow {
+  position: relative; }
+
+.edit .demo .lyrow .drag {
+  top: 5px;
+  right: 80px;
+  z-index: 10; }
+
+.edit .demo .column .box .drag {
+  top: 5px; }
+
+.edit .demo .column .box .configuration {
+  position: absolute;
+  top: 3px;
+  right: 140px;
+  white-space: nowrap; }
+
+.edit .demo .remove {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 10; }
+
+.demo .configuration {
+  filter: alpha(opacity=0);
+  opacity: 0;
+  -webkit-transition: all 500ms ease;
+  -moz-transition: all 500ms ease;
+  -ms-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  transition: all 500ms ease; }
+
+.demo .drag, .demo .remove {
+  filter: alpha(opacity=20);
+  opacity: 0.2;
+  -webkit-transition: all 500ms ease;
+  -moz-transition: all 500ms ease;
+  -ms-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  transition: all 500ms ease; }
+
+.demo .lyrow:hover > .drag,
+.demo .lyrow:hover > .configuration,
+.demo .lyrow:hover > .remove,
+.demo .box:hover .drag,
+.demo .box:hover .configuration,
+.demo .box:hover .remove {
+  filter: alpha(opacity=100);
+  opacity: 1; }
+
+.edit .demo .row-fluid:before {
+  background-color: #F5F5F5;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px 0 4px 0;
+  color: #9DA0A4;
+  content: "Row";
+  font-size: 12px;
+  font-weight: bold;
+  left: -1px;
+  line-height: 2;
+  padding: 3px 7px;
+  position: absolute;
+  top: -1px; }
+
+.demo .row-fluid {
+  background-color: #F5F5F5;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
+  border: 1px solid #DDDDDD;
+  border-radius: 4px 4px 4px 4px;
+  margin: 15px 0;
+  position: relative;
+  padding: 25px  14px 0; }
+
+.edit .column:after {
+  background-color: #F5F5F5;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px 0 4px 0;
+  color: #9DA0A4;
+  content: "Column";
+  font-size: 12px;
+  font-weight: bold;
+  left: -1px;
+  padding: 3px 7px;
+  position: absolute;
+  top: -1px; }
+
+.column {
+  background-color: #FFFFFF;
+  border: 1px solid #DDDDDD;
+  border-radius: 4px 4px 4px 4px;
+  margin: 15px 0;
+  padding: 39px 19px 24px;
+  position: relative; }
+
+/* preview */
+body.devpreview {
+  margin-left: 0px; }
+
+.devpreview .sidebar-nav {
+  left: -200px;
+  -webkit-transition: all 0ms ease;
+  -moz-transition: all 0ms ease;
+  -ms-transition: all 0ms ease;
+  -o-transition: all 0ms ease;
+  transition: all 0ms ease; }
+
+.devpreview .drag, .devpreview .configuration, .devpreview .remove {
+  display: none; }
+
+.sourcepreview .column, .sourcepreview .row-fluid, .sourcepreview .demo .box {
+  margin: 0px 0;
+  padding: 0px;
+  background: none;
+  border: none;
+  -webkit-box-shadow: inset 0 0px 0px transparent;
+  -moz-box-shadow: inset 0 0px 0px transparent;
+  box-shadow: inset 0 0px 0px transparent; }
+
+.devpreview .demo .box, .devpreview .demo .row-fluid {
+  padding-top: 0;
+  background: none; }
+
+.devpreview .demo .column {
+  padding-top: 19px;
+  padding-bottom: 19px; }
+
+#download-layout {
+  display: none; }
+
+#editorModal textarea,
+#downloadModal textarea {
+  width: 100%;
+  height: 280px;
+  resize: none;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+#editorModal {
+  width: 640px; }
+
+a.language-selected {
+  font-style: italic;
+  font-weight: bold; }
+
+.toolbox-reset {
+  background: inherit;
+  color: inherit;
+  display: inherit;
+  line-height: inherit;
+  margin: inherit;
+  padding: inherit;
+  -webkit-text-size-adjust: inherit;
+  -ms-text-size-adjust: inherit; }
+  .toolbox-reset .collapse {
+    display: block; }
+  .toolbox-reset .modal {
+    left: inherit; }
--- a/css/toolbox.css
+++ b/css/toolbox.css
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -0,0 +1,43 @@
+'use strict';
+
+var        gulp = require('gulp'),
+    browserSync = require('browser-sync'),
+         reload = browserSync.reload;
+var        sass = require('gulp-sass');
+
+
+gulp.task('sass', function () {
+  gulp.src('scss/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('css'));
+});
+
+gulp.task('sass:watch', function () {
+  gulp.watch('scss/*.scss', ['sass']);
+  gulp.watch(['css/*.css'], reload);
+});
+
+
+// Start a server with Live Reload
+gulp.task('serve', ['sass'], function () {
+  browserSync({
+    // notify: false,
+    // Customize the BrowserSync console logging prefix
+    // logPrefix: 'WSK',
+    // Run as an https by uncommenting 'https: true'
+    // Note: this uses an unsigned certificate which on first access
+    //       will present a certificate warning in the browser.
+    // https: true,
+    server: ['.tmp', './']
+
+    // proxy: 'http://localhost:8888/'
+
+  });
+
+
+  gulp.watch(['./scss/**/*.scss'], ['sass']);
+  gulp.watch(['css/**/*.css'], reload);
+  gulp.watch(['./*.html'], reload);
+  // gulp.watch(['./*.php'], reload);
+  // gulp.watch(['js/**/*.js'], [reload]);
+});
--- a/index.html
+++ b/index.html
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -296,10 +296,10 @@ var stopsave = 0;
 var startdrag = 0;
 var demoHtml = $(".demo").html();
 var currenteditor = null;
-$(window).resize(function() {
-	$("body").css("min-height", $(window).height() - 90);
-	$(".demo").css("min-height", $(window).height() - 160)
-});
+// $(window).resize(function() {
+// 	$("body").css("min-height", $(window).height() - 90);
+// 	$(".demo").css("min-height", $(window).height() - 160)
+// });

 function restoreData(){
 	if (supportstorage()) {
@@ -334,8 +334,8 @@ $(document).ready(function() {
 		contentsCss: ['css/bootstrap-combined.min.css'],
 		allowedContent: true
 	});
-	$("body").css("min-height", $(window).height() - 50);
-	$(".demo").css("min-height", $(window).height() - 130);
+	// $("body").css("min-height", $(window).height() - 50);
+	// $(".demo").css("min-height", $(window).height() - 130);
 	$(".sidebar-nav .lyrow").draggable({
 		connectToSortable: ".demo",
 		helper: "clone",
@@ -499,4 +499,3 @@ function saveHtml()
 			saveAs(blob, "webpage.html");
 		}
 		}
-
--- a/package.json
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "Devex_FE_assets",
+  "version": "0.0.0",
+  "devDependencies": {
+    "gulp": "~3.9.0",
+    "gulp-sass": "^2.0.0",
+    "gulp-sourcemaps": "^1.5.0",
+    "browser-sync": "^2.10.0"
+  },
+  "engines": {
+    "node": ">=0.12.0"
+  }
+}
--- a/scss/editor.scss
+++ b/scss/editor.scss
@@ -0,0 +1,2 @@
+@import 'partials/legacy';
+@import 'partials/overwrites';
--- a/scss/partials/_editor.scss
+++ b/scss/partials/_editor.scss
@@ -0,0 +1,65 @@
+/*
+ * Stuff we've deleted that comes from the bootstrap-combined.css file
+ */
+
+// we wrap everything with the toolbar class
+.toolbox-reset {
+  // modal
+  .modal {
+    position: fixed;
+    top: 10%;
+    left: 50%;
+    z-index: 1050;
+    width: 560px;
+    margin-left: -280px;
+    background-color: #ffffff;
+    border: 1px solid #999;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding-box;
+    background-clip: padding-box;
+    outline: none;
+  }
+
+  .modal.fade {
+    -webkit-transition: opacity .3s linear, top .3s ease-out;
+    -moz-transition: opacity .3s linear, top .3s ease-out;
+    -o-transition: opacity .3s linear, top .3s ease-out;
+    transition: opacity .3s linear, top .3s ease-out;
+    top: -25%;
+  }
+
+  .modal.fade.in {
+    top: 10%;
+    display: inherit !important;
+  }
+
+  // sidebar
+  .accordion-group {
+    margin-bottom: 2px;
+    border: 1px solid #e5e5e5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+  }
+}
+
+// screen sizes
+#MD {
+  width:992px;
+}
+#SM {
+  width:768px;
+}
+#XS {
+  width:480px;
+}
+#LG {
+  width:100%
+}
--- a/scss/partials/_legacy.scss
+++ b/scss/partials/_legacy.scss
@@ -1,7 +1,8 @@
+/* compiler is working */
 body {
 	padding-top:50px;
 	padding-bottom: 40px;
-	margin-left:200px;
+	margin-left:200px !important;
 	-webkit-transition: margin 500ms ease;
 	-moz-transition: margin 500ms ease;
 	-ms-transition: margin 500ms ease;
@@ -33,7 +34,17 @@ body {
 	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.7);
 }

-.edit .demo { margin-left:0px; margin-top:10px; padding:30px 15px 15px; border: 1px solid #DDDDDD; border-radius: 4px; position:relative; word-wrap: break-word;}
+.edit .demo {
+  margin-left:0px;
+  margin-top:10px;
+  padding:30px 15px 15px;
+  border-radius: 4px;
+  position:relative;
+  word-wrap: break-word;
+
+}
+
+
 .edit .demo:after {
 	background-color: #F5F5F5;
 	border: 1px solid #DDDDDD;
--- a/scss/partials/_overwrites.scss
+++ b/scss/partials/_overwrites.scss
@@ -0,0 +1,18 @@
+.toolbox-reset {
+  background: inherit;
+  color: inherit;
+  display: inherit;
+  line-height: inherit;
+  margin: inherit;
+  padding: inherit;
+  -webkit-text-size-adjust: inherit;
+  -ms-text-size-adjust: inherit;
+
+  .collapse {
+    display: block;
+  }
+
+  .modal {
+    left: inherit;
+  }
+}