diff --git a/app/assets/javascripts/jquery.gridster.js b/app/assets/javascripts/jquery.gridster.js index 947f4bb2a..e8998514f 100755 --- a/app/assets/javascripts/jquery.gridster.js +++ b/app/assets/javascripts/jquery.gridster.js @@ -1328,6 +1328,7 @@ */ fn.draggable = function() { var self = this; + var draggable_options = $.extend(true, {}, this.options.draggable, { offset_left: this.options.widget_margins[0], start: function(event, ui) { @@ -3204,6 +3205,7 @@ max_rows += (+$(w).attr('data-sizey')); }); + this.cols = Math.max(min_cols, cols, this.options.min_cols); this.rows = Math.max(max_rows, this.options.min_rows); diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js index a4f58b7c8..e1fded1fb 100755 --- a/app/assets/javascripts/orbitdesktop.js +++ b/app/assets/javascripts/orbitdesktop.js @@ -420,9 +420,10 @@ var orbitDesktop = function(dom){ $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){ tiles.sort(o.sortJSON("position",true,parseInt)); var tilecolors = o.themesettings.tilecolor; + var totaltiles_in_a_row = 4; var opacity = ["op05","op06","op07","op08","op09"]; var row = 1,col = 1,x = 1,y = 1; - var $group = $('
'); + var $group = $('
'); var $ul = $(''); $.each(tiles,function(i,tile){ @@ -436,21 +437,72 @@ var orbitDesktop = function(dom){ var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)]; var op = opacity[Math.floor(Math.random()*opacity.length)]; if(tile.data_category == "app") - $li = $('
  • '+tile.title+'

  • '); + $li = $('
  • '+tile.title+'

  • '); else - $li = $('
  • Loading...

    '+tile.title+'

  • '); + $li = $('
  • Loading...

    '+tile.title+'

  • '); row = row + y; $ul.append($li); }) $group.append($ul); - console.log($group); $("div#desktop div#group_wrapper").append($group); - o.gridvar = $(".grid ul").gridster({ - widget_margins: [6, 6], - widget_base_dimensions: [120, 120] - }); + var dragged = null,draggable,lastpos = []; + o.gridvar = $(".grid ul").find("> li ").mousedown(function(e){ + !draggable; + dragged = $(this); + lastpos = []; + $(".grid ul li").each(function(){ + lastpos.push({"col":$(this).attr("data-col"),"row":$(this).attr("data-row")}) + }) + }).end() + .gridster({ + widget_margins: [6, 6], + widget_base_dimensions: [120, 120], + avoid_overlapped_widgets: true, + draggable : { + stop: function(event, ui){ + + var widgetchanged_col = dragged.attr("data-col"); + var total = 0; + // console.log(widgetchanged.col); + // console.log(o.gridvar.serialize_changed()); + $(".grid ul li[data-col="+widgetchanged_col+"]").each(function(i,w){ + var size = parseInt($(this).attr("data-sizey")); + if(!isNaN(size)){ + total += size; + } + }) + // other way to calculate the overflow is by top > height of div + if(total>totaltiles_in_a_row){ + revertbacktiles(); + }else{ + console.log(widgetchanged_col-1); + $(".grid ul li[data-col="+(widgetchanged_col-1)+"]").each(function(i,w){ + var sizey = parseInt($(this).attr("data-sizey")); + var sizex = parseInt($(this).attr("data-sizex")); + if(sizey==1){ + sizex = sizex - 1; + } + console.log(sizex); + + if(!isNaN(sizex)){ + total += sizex; + } + }) + if(total>totaltiles_in_a_row){ + revertbacktiles(); + } + } + } + } + }).data('gridster'); + var revertbacktiles = function(){ + lastpos.push({"col":"","row":""}); + $(".grid ul li").each(function(i){ + $(this).attr({"data-col":lastpos[i].col,"data-row":lastpos[i].row}); + }) + } bindHandlers(); o.initializeWidgets(); }) @@ -1219,7 +1271,7 @@ var orbitDesktop = function(dom){ }) }; this.initializeWidgets = function(){ // this function will initialize all the widgets in the desktop - var elements = $("#group_wrapper li.element"); + var elements = $("#group_wrapper li.widget"); $.each(elements,function(){ var widget = $(this); if(widget.attr("data-category")=="widget"){ diff --git a/app/assets/stylesheets/desktop.css b/app/assets/stylesheets/desktop.css index 346c21664..f3746eff1 100644 --- a/app/assets/stylesheets/desktop.css +++ b/app/assets/stylesheets/desktop.css @@ -2,6 +2,7 @@ *This is a manifest file that'll automatically include all the stylesheets available in this directory *and any sub-directories. You're free to add application-wide styles to this file and they'll appear at *the top of the compiled file, but it's generally better to create a new file per style scope. + *= require desktop_font *= require style *= require bootstrap *= require bootstrap-orbit diff --git a/app/assets/stylesheets/desktop_font.css b/app/assets/stylesheets/desktop_font.css new file mode 100644 index 000000000..d0a9ec097 --- /dev/null +++ b/app/assets/stylesheets/desktop_font.css @@ -0,0 +1 @@ +@import url(http://fonts.googleapis.com/css?family=Cuprum|Dosis:400,700|Roboto+Condensed:400,700); \ No newline at end of file diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css index 54d856900..f2a5e0195 100644 --- a/app/assets/stylesheets/desktopmain.css +++ b/app/assets/stylesheets/desktopmain.css @@ -60,9 +60,30 @@ body { } a, a:hover { text-decoration: none; color: #666; } a:focus { outline: none; } + +/* box-sizing element */ +.appholder, .appname { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.admbg { background-color: #fff; } +.admbg2 { background-color: #ddd; } +.admtxt { color: #666; } +.admtxt:hover { color: #666; } +.hfn { + font-size: 15px; + line-height: 36px; + float: left; + margin: 12px 12px 0 0; + position: relative; + } +.thmtxt { position: relative; } + /* desktop layout */ #container { - margin: 48px 0 0 156px; + padding: 48px 0 0 156px; } #header { padding: 0 0 12px 0; @@ -117,6 +138,7 @@ a:focus { outline: none; } padding: 0 6px; font-size: 15px; position: absolute; + z-index: 9; min-width: 48px; text-align: center; white-space: nowrap; @@ -165,14 +187,28 @@ a:focus { outline: none; } .appname { font-size: 15px; - height: 30px; line-height: 30px; + width: 100%; + height: 30px; + padding: 0 12px; overflow: hidden; cursor: default; + position: absolute; + left: 0; + bottom: 0; z-index: 3; } -.w1.h1 .appname { text-align: center; } -.w2.h2 .appname { font-size: 21px; } +[data-sizex="1"] .appname, .w1.h1 .appname { + text-align: center; +} +[data-sizey="2"] .appname { + font-size: 21px; +} +.hh2 .appname { + position: relative; + width: auto; + padding: 0; +} .appicon { display: block; width: 60px; @@ -180,6 +216,9 @@ a:focus { outline: none; } margin: 0 auto; position: relative; } +[data-sizex="1"] .appicon { + margin-top: 24px; +} #sections .appicon { width: 30px; height: 30px; @@ -189,16 +228,19 @@ a:focus { outline: none; } .appholder { position: relative; z-index: 2; - } -.holder_f .appholder { - position: absolute; + padding: 12px; + padding-bottom: 30px; width: 100%; height: 100%; + overflow: hidden; + } +.fullsize .appholder { + position: absolute; padding: 0; left: 0; top: 0; } -.holder_f .appname { display: none; } +.fullsize .appname { display: none; } .dtitle { font-size: 30px; line-height: 60px; @@ -209,18 +251,6 @@ a:focus { outline: none; } } /*.section_slc { width: 252px; }*/ -.admbg { background-color: #fff; } -.admbg2 { background-color: #ddd; } -.admtxt { color: #666; } -.admtxt:hover { color: #666; } -.hfn { - font-size: 15px; - line-height: 36px; - float: left; - margin: 12px 12px 0 0; - position: relative; - } -.thmtxt { position: relative; } .tile { display: block; width: 100%; @@ -388,10 +418,10 @@ a:focus { outline: none; } .hp { padding-left: 12px; padding-right: 12px; } .vp { padding-top: 12px; padding-bottom: 12px; } .element { - /*margin: 0 12px 12px 0; - float: left;*/ - position: absolute; - /*display:inline-block;*/ + margin: 0 12px 12px 0; + float: left; + position: relative; + display:inline-block; } .group{ float: left; diff --git a/app/assets/stylesheets/jquery.gridster.css b/app/assets/stylesheets/jquery.gridster.css old mode 100755 new mode 100644 index c36d418a9..8441eac38 --- a/app/assets/stylesheets/jquery.gridster.css +++ b/app/assets/stylesheets/jquery.gridster.css @@ -37,9 +37,9 @@ .gridster .preview-holder { z-index: 1; position: absolute; - background-color: #fff; - border-color: #fff; - opacity: 0.3; + background-color: #000; + border-color: #000; + opacity: 0.2; } .gridster .player-revert { diff --git a/app/assets/stylesheets/style.css.erb b/app/assets/stylesheets/style.css.erb index f86c9a914..48f79d2a1 100644 --- a/app/assets/stylesheets/style.css.erb +++ b/app/assets/stylesheets/style.css.erb @@ -1,6 +1,6 @@ /*style*/ -@import url(http://fonts.googleapis.com/css?family=Cuprum); +/*@import url(http://fonts.googleapis.com/css?family=Cuprum);*/ @font-face{ font-family: 'WebSymbolsRegular'; src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);