From ed284c951934a7f5c5f1eb1d017f0e212bfc2d03 Mon Sep 17 00:00:00 2001 From: Pavel Reznikov Date: Sun, 9 Nov 2014 20:08:26 -0800 Subject: [PATCH] demo site --- freelancer/css/freelancer.css | 445 +++++++++++++++++++++++++ freelancer/js/cbpAnimatedHeader.js | 44 +++ freelancer/js/cbpAnimatedHeader.min.js | 11 + freelancer/js/classie.js | 80 +++++ freelancer/js/freelancer.js | 37 ++ gridstack-demo.css | 20 ++ gridstack.css | 4 +- gridstack.js | 31 +- index.html | 405 +++++++++++++++++++++- 9 files changed, 1051 insertions(+), 26 deletions(-) create mode 100755 freelancer/css/freelancer.css create mode 100755 freelancer/js/cbpAnimatedHeader.js create mode 100755 freelancer/js/cbpAnimatedHeader.min.js create mode 100755 freelancer/js/classie.js create mode 100755 freelancer/js/freelancer.js create mode 100644 gridstack-demo.css diff --git a/freelancer/css/freelancer.css b/freelancer/css/freelancer.css new file mode 100755 index 0000000..efd4837 --- /dev/null +++ b/freelancer/css/freelancer.css @@ -0,0 +1,445 @@ +/*! + * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ + +body { + overflow-x: hidden; +} + +p { + font-size: 20px; +} + +p.small { + font-size: 16px; +} + +a, +a:hover, +a:focus, +a:active, +a.active { + outline: 0; + color: #18bc9c; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; +} + +hr.star-light, +hr.star-primary { + margin: 25px auto 30px; + padding: 0; + max-width: 250px; + border: 0; + border-top: solid 5px; + text-align: center; +} + +hr.star-light:after, +hr.star-primary:after { + content: "\f005"; + display: inline-block; + position: relative; + top: -.8em; + padding: 0 .25em; + font-family: FontAwesome; + font-size: 2em; +} + +hr.star-light { + border-color: #fff; +} + +hr.star-light:after { + color: #fff; + background-color: #18bc9c; +} + +hr.star-primary { + border-color: #2c3e50; +} + +hr.star-primary:after { + color: #2c3e50; + background-color: #fff; +} + +.img-centered { + margin: 0 auto; +} + +header { + text-align: center; + color: #fff; + background: #18bc9c; +} + +header .container { + padding-top: 100px; + padding-bottom: 50px; +} + +header img { + display: block; + margin: 0 auto 20px; +} + +header .intro-text .name { + display: block; + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 2em; + font-weight: 700; +} + +header .intro-text .skills { + font-size: 1.25em; + font-weight: 300; +} + +@media(min-width:768px) { + header .container { + padding-top: 200px; + padding-bottom: 100px; + } + + header .intro-text .name { + font-size: 4.75em; + } + + header .intro-text .skills { + font-size: 1.75em; + } +} + +@media(min-width:768px) { + .navbar-fixed-top { + padding: 25px 0; + -webkit-transition: padding .3s; + -moz-transition: padding .3s; + transition: padding .3s; + } + + .navbar-fixed-top .navbar-brand { + font-size: 2em; + -webkit-transition: all .3s; + -moz-transition: all .3s; + transition: all .3s; + } + + .navbar-fixed-top.navbar-shrink { + padding: 10px 0; + } + + .navbar-fixed-top.navbar-shrink .navbar-brand { + font-size: 1.5em; + } +} + +.navbar { + text-transform: uppercase; + font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight: 700; +} + +.navbar a:focus { + outline: 0; +} + +.navbar .navbar-nav { + letter-spacing: 1px; +} + +.navbar .navbar-nav li a:focus { + outline: 0; +} + +.navbar-default, +.navbar-inverse { + border: 0; +} + +section { + padding: 100px 0; +} + +section h2 { + margin: 0; + font-size: 3em; +} + +section.success { + color: #fff; + background: #18bc9c; +} + +@media(max-width:767px) { + section { + padding: 75px 0; + } + + section.first { + padding-top: 75px; + } +} + +#portfolio .portfolio-item { + right: 0; + margin: 0 0 15px; +} + +#portfolio .portfolio-item .portfolio-link { + display: block; + position: relative; + margin: 0 auto; + max-width: 400px; +} + +#portfolio .portfolio-item .portfolio-link .caption { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + background: rgba(24,188,156,.9); + -webkit-transition: all ease .5s; + -moz-transition: all ease .5s; + transition: all ease .5s; +} + +#portfolio .portfolio-item .portfolio-link .caption:hover { + opacity: 1; +} + +#portfolio .portfolio-item .portfolio-link .caption .caption-content { + position: absolute; + top: 50%; + width: 100%; + height: 20px; + margin-top: -12px; + text-align: center; + font-size: 20px; + color: #fff; +} + +#portfolio .portfolio-item .portfolio-link .caption .caption-content i { + margin-top: -12px; +} + +#portfolio .portfolio-item .portfolio-link .caption .caption-content h3, +#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 { + margin: 0; +} + +#portfolio * { + z-index: 2; +} + +@media(min-width:767px) { + #portfolio .portfolio-item { + margin: 0 0 30px; + } +} + +.btn-outline { + margin-top: 15px; + border: solid 2px #fff; + font-size: 20px; + color: #fff; + background: 0 0; + transition: all .3s ease-in-out; +} + +.btn-outline:hover, +.btn-outline:focus, +.btn-outline:active, +.btn-outline.active { + border: solid 2px #fff; + color: #18bc9c; + background: #fff; +} + +.floating-label-form-group { + position: relative; + margin-bottom: 0; + padding-bottom: .5em; + border-bottom: 1px solid #eee; +} + +.floating-label-form-group input, +.floating-label-form-group textarea { + z-index: 1; + position: relative; + padding-right: 0; + padding-left: 0; + border: 0; + border-radius: 0; + font-size: 1.5em; + background: 0 0; + box-shadow: none!important; + resize: none; +} + +.floating-label-form-group label { + display: block; + z-index: 0; + position: relative; + top: 2em; + margin: 0; + font-size: .85em; + line-height: 1.764705882em; + vertical-align: middle; + vertical-align: baseline; + opacity: 0; + -webkit-transition: top .3s ease,opacity .3s ease; + -moz-transition: top .3s ease,opacity .3s ease; + -ms-transition: top .3s ease,opacity .3s ease; + transition: top .3s ease,opacity .3s ease; +} + +.floating-label-form-group::not(:first-child) { + padding-left: 14px; + border-left: 1px solid #eee; +} + +.floating-label-form-group-with-value label { + top: 0; + opacity: 1; +} + +.floating-label-form-group-with-focus label { + color: #18bc9c; +} + +form .row:first-child .floating-label-form-group { + border-top: 1px solid #eee; +} + +footer { + color: #fff; +} + +footer h3 { + margin-bottom: 30px; +} + +footer .footer-above { + padding-top: 50px; + background-color: #2c3e50; +} + +footer .footer-col { + margin-bottom: 50px; +} + +footer .footer-below { + padding: 25px 0; + background-color: #233140; +} + +.btn-social { + display: inline-block; + width: 50px; + height: 50px; + border: 2px solid #fff; + border-radius: 100%; + text-align: center; + font-size: 20px; + line-height: 45px; +} + +.btn:focus, +.btn:active, +.btn.active { + outline: 0; +} + +.scroll-top { + z-index: 1049; + position: fixed; + right: 2%; + bottom: 2%; + width: 50px; + height: 50px; +} + +.scroll-top .btn { + width: 50px; + height: 50px; + border-radius: 100%; + font-size: 20px; + line-height: 28px; +} + +.scroll-top .btn:focus { + outline: 0; +} + +.portfolio-modal .modal-content { + padding: 100px 0; + min-height: 100%; + border: 0; + border-radius: 0; + text-align: center; + background-clip: border-box; + -webkit-box-shadow: none; + box-shadow: none; +} + +.portfolio-modal .modal-content h2 { + margin: 0; + font-size: 3em; +} + +.portfolio-modal .modal-content img { + margin-bottom: 30px; +} + +.portfolio-modal .modal-content .item-details { + margin: 30px 0; +} + +.portfolio-modal .close-modal { + position: absolute; + top: 25px; + right: 25px; + width: 75px; + height: 75px; + background-color: transparent; + cursor: pointer; +} + +.portfolio-modal .close-modal:hover { + opacity: .3; +} + +.portfolio-modal .close-modal .lr { + z-index: 1051; + width: 1px; + height: 75px; + margin-left: 35px; + background-color: #2c3e50; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.portfolio-modal .close-modal .lr .rl { + z-index: 1052; + width: 1px; + height: 75px; + background-color: #2c3e50; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} \ No newline at end of file diff --git a/freelancer/js/cbpAnimatedHeader.js b/freelancer/js/cbpAnimatedHeader.js new file mode 100755 index 0000000..7c3bbc1 --- /dev/null +++ b/freelancer/js/cbpAnimatedHeader.js @@ -0,0 +1,44 @@ +/** + * cbpAnimatedHeader.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +var cbpAnimatedHeader = (function() { + + var docElem = document.documentElement, + header = document.querySelector( '.navbar-fixed-top' ), + didScroll = false, + changeHeaderOn = 300; + + function init() { + window.addEventListener( 'scroll', function( event ) { + if( !didScroll ) { + didScroll = true; + setTimeout( scrollPage, 250 ); + } + }, false ); + } + + function scrollPage() { + var sy = scrollY(); + if ( sy >= changeHeaderOn ) { + classie.add( header, 'navbar-shrink' ); + } + else { + classie.remove( header, 'navbar-shrink' ); + } + didScroll = false; + } + + function scrollY() { + return window.pageYOffset || docElem.scrollTop; + } + + init(); + +})(); \ No newline at end of file diff --git a/freelancer/js/cbpAnimatedHeader.min.js b/freelancer/js/cbpAnimatedHeader.min.js new file mode 100755 index 0000000..b39cb0d --- /dev/null +++ b/freelancer/js/cbpAnimatedHeader.min.js @@ -0,0 +1,11 @@ +/** + * cbpAnimatedHeader.min.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})(); \ No newline at end of file diff --git a/freelancer/js/classie.js b/freelancer/js/classie.js new file mode 100755 index 0000000..a967554 --- /dev/null +++ b/freelancer/js/classie.js @@ -0,0 +1,80 @@ +/*! + * classie - class helper functions + * from bonzo https://github.com/ded/bonzo + * + * classie.has( elem, 'my-class' ) -> true/false + * classie.add( elem, 'my-new-class' ) + * classie.remove( elem, 'my-unwanted-class' ) + * classie.toggle( elem, 'my-class' ) + */ + +/*jshint browser: true, strict: true, undef: true */ +/*global define: false */ + +( function( window ) { + +'use strict'; + +// class helper functions from bonzo https://github.com/ded/bonzo + +function classReg( className ) { + return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); +} + +// classList support for class management +// altho to be fair, the api sucks because it won't accept multiple classes at once +var hasClass, addClass, removeClass; + +if ( 'classList' in document.documentElement ) { + hasClass = function( elem, c ) { + return elem.classList.contains( c ); + }; + addClass = function( elem, c ) { + elem.classList.add( c ); + }; + removeClass = function( elem, c ) { + elem.classList.remove( c ); + }; +} +else { + hasClass = function( elem, c ) { + return classReg( c ).test( elem.className ); + }; + addClass = function( elem, c ) { + if ( !hasClass( elem, c ) ) { + elem.className = elem.className + ' ' + c; + } + }; + removeClass = function( elem, c ) { + elem.className = elem.className.replace( classReg( c ), ' ' ); + }; +} + +function toggleClass( elem, c ) { + var fn = hasClass( elem, c ) ? removeClass : addClass; + fn( elem, c ); +} + +var classie = { + // full names + hasClass: hasClass, + addClass: addClass, + removeClass: removeClass, + toggleClass: toggleClass, + // short names + has: hasClass, + add: addClass, + remove: removeClass, + toggle: toggleClass +}; + +// transport +if ( typeof define === 'function' && define.amd ) { + // AMD + define( classie ); +} else { + // browser global + window.classie = classie; +} + +})( window ); diff --git a/freelancer/js/freelancer.js b/freelancer/js/freelancer.js new file mode 100755 index 0000000..6a98ae4 --- /dev/null +++ b/freelancer/js/freelancer.js @@ -0,0 +1,37 @@ +/*! + * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com) + * Code licensed under the Apache License v2.0. + * For details, see http://www.apache.org/licenses/LICENSE-2.0. + */ + +// jQuery for page scrolling feature - requires jQuery Easing plugin +$(function() { + $('.page-scroll a').bind('click', function(event) { + var $anchor = $(this); + $('html, body').stop().animate({ + scrollTop: $($anchor.attr('href')).offset().top + }, 1500, 'easeInOutExpo'); + event.preventDefault(); + }); +}); + +// Floating label headings for the contact form +$(function() { + $("body").on("input propertychange", ".floating-label-form-group", function(e) { + $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val()); + }).on("focus", ".floating-label-form-group", function() { + $(this).addClass("floating-label-form-group-with-focus"); + }).on("blur", ".floating-label-form-group", function() { + $(this).removeClass("floating-label-form-group-with-focus"); + }); +}); + +// Highlight the top nav as scrolling occurs +$('body').scrollspy({ + target: '.navbar-fixed-top' +}) + +// Closes the Responsive Menu on Menu Item Click +$('.navbar-collapse ul li a').click(function() { + $('.navbar-toggle:visible').click(); +}); \ No newline at end of file diff --git a/gridstack-demo.css b/gridstack-demo.css new file mode 100644 index 0000000..ccf3b5e --- /dev/null +++ b/gridstack-demo.css @@ -0,0 +1,20 @@ +.grid-stack-item-content { + background: white; + color: #2c3e50; + font-family: 'Indie Flower', cursive; + text-align: center; + font-size: 20px; +} + +.grid-stack-item-content .fa { + font-size: 64px; + display: block; + margin: 20px 0 10px; +} + +header a, header a:hover { color: #fff; } + +.darklue { background: #2c3e50; color: #fff; } +.darklue hr.star-light::after { + background-color: #2c3e50; +} diff --git a/gridstack.css b/gridstack.css index 5cea385..713ecb4 100644 --- a/gridstack.css +++ b/gridstack.css @@ -28,8 +28,8 @@ z-index: 100; } -.grid-stack-item.ui-draggable-dragging .box, -.grid-stack-item.ui-resizable-resizing .box { +.grid-stack-item.ui-draggable-dragging .grid-stack-item-content, +.grid-stack-item.ui-resizable-resizing .grid-stack-item-content { box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); opacity: 0.8; } diff --git a/gridstack.js b/gridstack.js index 7ba5f00..98a2b05 100644 --- a/gridstack.js +++ b/gridstack.js @@ -252,21 +252,24 @@ self.grid.move_node(node, x, y); self._update_container_height(); } - }).resizable({ - autoHide: true, - handles: 'se', - minHeight: this.opts.cell_height - 10, - minWidth: 70, - - start: on_start_moving, - stop: on_end_moving, - resize: function (event, ui) { - var width = Math.round(ui.size.width / cell_width), - height = Math.round(ui.size.height / cell_height); - self.grid.move_node(node, node.x, node.y, width, height); - self._update_container_height(); - } }); + if (!el.attr('data-gs-no-resize')) { + el.resizable({ + autoHide: true, + handles: 'se', + minHeight: this.opts.cell_height - 10, + minWidth: 70, + + start: on_start_moving, + stop: on_end_moving, + resize: function (event, ui) { + var width = Math.round(ui.size.width / cell_width), + height = Math.round(ui.size.height / cell_height); + self.grid.move_node(node, node.x, node.y, width, height); + self._update_container_height(); + } + }); + } }; GridStack.prototype.add_widget = function (el, x, y, width, height) { diff --git a/index.html b/index.html index 7ffbb59..56e5048 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,402 @@ - - - + + + + + + + + + + gridstack.js - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ gridstack.js +
+

gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column + grid. It allows you to build draggable responsive bootstrap v3 friendly layouts.

+ +

Inspired by gridster.js. Built with love.

+
+
+
+
+
+ +
+
+
+
+

Demo

+
+
+
+ +
+
+
+
Drag me!
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+

Usage

+
+
+
+ +

Coming soon...

+
+
+ + + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + - - - + + +