gallery frontend update
This commit is contained in:
		
							parent
							
								
									8259dee4a3
								
							
						
					
					
						commit
						789c2df7fd
					
				| 
						 | 
				
			
			@ -1,4 +1,19 @@
 | 
			
		|||
# encoding: utf-8
 | 
			
		||||
module CarrierWave
 | 
			
		||||
  module Uploader
 | 
			
		||||
    module Versions
 | 
			
		||||
      def recreate_version!(version)
 | 
			
		||||
        already_cached = cached?
 | 
			
		||||
        cache_stored_file! if !already_cached
 | 
			
		||||
        send(version).store!
 | 
			
		||||
        if !already_cached && @cache_id
 | 
			
		||||
          tmp_dir = File.expand_path(File.join(cache_dir, cache_id), CarrierWave.root)
 | 
			
		||||
          FileUtils.rm_rf(tmp_dir)
 | 
			
		||||
        end
 | 
			
		||||
      end
 | 
			
		||||
    end
 | 
			
		||||
  end
 | 
			
		||||
end
 | 
			
		||||
 | 
			
		||||
class GalleryUploader < CarrierWave::Uploader::Base
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -35,7 +50,7 @@ class GalleryUploader < CarrierWave::Uploader::Base
 | 
			
		|||
  # end
 | 
			
		||||
  
 | 
			
		||||
  version :thumb do
 | 
			
		||||
    process :resize_to_fill => [120, 90]
 | 
			
		||||
    process :resize_to_fill => [150, 120]
 | 
			
		||||
  end
 | 
			
		||||
 | 
			
		||||
  # Add a white list of extensions which are allowed to be uploaded.
 | 
			
		||||
| 
						 | 
				
			
			@ -60,3 +75,4 @@ class GalleryUploader < CarrierWave::Uploader::Base
 | 
			
		|||
#  end
 | 
			
		||||
 | 
			
		||||
end
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -120,7 +120,8 @@ var galleryAPI = function(){
 | 
			
		|||
		g.loadFooterPanel(g.loadArea,id,function(headbtn){
 | 
			
		||||
			headbtn = $(headbtn);
 | 
			
		||||
			headbtn.click(function(){g.makeNewAlbum();})
 | 
			
		||||
			g.albumArea.find(".rghead .rgfn").html(headbtn);
 | 
			
		||||
			//g.albumArea.find(".rghead .rgfn").html(headbtn);
 | 
			
		||||
			g.albumArea.find(".rghead").hide();
 | 
			
		||||
		})
 | 
			
		||||
		
 | 
			
		||||
		g.albumArea.addClass('o_gallery');
 | 
			
		||||
| 
						 | 
				
			
			@ -153,12 +154,12 @@ var galleryAPI = function(){
 | 
			
		|||
			$.each(categories,function(x,category){
 | 
			
		||||
				$.each(category,function(i,album){
 | 
			
		||||
					if(album.cover == "default")
 | 
			
		||||
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='../../../assets/gallery/default.jpg' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='categoryname'>"+album.category_name+"</span><span class='tagnames'></span></div>");
 | 
			
		||||
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='../../../assets/gallery/default.jpg'/></a><span class='albumname'><a title='"+album.description+"' href='?album="+album._id+"'>"+album.name+"</a></span><span class='categoryname'><i class='icon-folder-close'></i> "+album.category_name+"</span><span class='tagnames'></span></div>");
 | 
			
		||||
					else
 | 
			
		||||
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='"+album.cover_path+"' width='120px' height='90px'/></a><span class='albumname'>"+album.name+"</span><span class='categoryname'>"+album.category_name+"</span><span class='tagnames'></span></div>");
 | 
			
		||||
						var $img = $("<div class='rgalbum'><a title='"+album.description+"' href='?album="+album._id+"'><img src='"+album.cover_path+"'/></a><span class='albumname'><a title='"+album.description+"' href='?album="+album._id+"'>"+album.name+"</a></span><span class='categoryname'><i class='icon-folder-close'></i> "+album.category_name+"</span><span class='tagnames'></span></div>");
 | 
			
		||||
					var tag_string = "";
 | 
			
		||||
					for(tag in album.tag_names){
 | 
			
		||||
						tag_string+= '<span class="label label-tags">' + album.tag_names[tag] + '</span>';
 | 
			
		||||
						tag_string+= '<span class="tags">' + album.tag_names[tag] + ', </span>';
 | 
			
		||||
					}
 | 
			
		||||
					$img.find(".tagnames").html(tag_string);
 | 
			
		||||
					g.albumArea.find("#imgholder").append($img);
 | 
			
		||||
| 
						 | 
				
			
			@ -172,47 +173,47 @@ var galleryAPI = function(){
 | 
			
		|||
		g.loadFooterPanel(g.loadArea,id,function(headerPanel){
 | 
			
		||||
			headarea = $(headerPanel);
 | 
			
		||||
			g.albumArea.find(".rghead .rgfn").html(headarea);
 | 
			
		||||
				$('.bt-tag').click(function(){
 | 
			
		||||
					$(this).toggleClass("active");
 | 
			
		||||
					var $tag_panel = $('#tag_panel'),
 | 
			
		||||
						tag_panel_position = 0;
 | 
			
		||||
			// 	$('.bt-tag').click(function(){
 | 
			
		||||
			// 		$(this).toggleClass("active");
 | 
			
		||||
			// 		var $tag_panel = $('#tag_panel'),
 | 
			
		||||
			// 			tag_panel_position = 0;
 | 
			
		||||
 | 
			
		||||
					if( $tag_panel.css('right') == '0px' ){
 | 
			
		||||
						tag_panel_position = -200;
 | 
			
		||||
					}
 | 
			
		||||
					$tag_panel.animate({'right':tag_panel_position}, 300);
 | 
			
		||||
			// 		if( $tag_panel.css('right') == '0px' ){
 | 
			
		||||
			// 			tag_panel_position = -200;
 | 
			
		||||
			// 		}
 | 
			
		||||
			// 		$tag_panel.animate({'right':tag_panel_position}, 300);
 | 
			
		||||
 | 
			
		||||
					g.albumArea
 | 
			
		||||
						.delay(200)
 | 
			
		||||
						.animate({'margin-right':tag_panel_position+200},300);
 | 
			
		||||
					return false;
 | 
			
		||||
				});
 | 
			
		||||
			g.albumArea.find("#tag_search_box").keyup(function(e){
 | 
			
		||||
				sval = $(this).val();
 | 
			
		||||
				if(sval == "<%= I18n.t('gallery.search_tags') %>")
 | 
			
		||||
						sval = "";
 | 
			
		||||
				sval = sval.replace(/(^\s*)|(\s*$)/g,'');
 | 
			
		||||
				if(sval){
 | 
			
		||||
					var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
 | 
			
		||||
					var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
 | 
			
		||||
					if ((re1.test(sval) && (re2.test(sval)))){
 | 
			
		||||
						$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
 | 
			
		||||
					}else{
 | 
			
		||||
						$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
 | 
			
		||||
					}
 | 
			
		||||
				}else{
 | 
			
		||||
					$("#gallery_tag_list li").slideDown();
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
			g.albumArea.find("#tag_panel .bt-save").click(function(){
 | 
			
		||||
				g.saveTags(id,g.loadArea);
 | 
			
		||||
			})
 | 
			
		||||
			g.albumArea.find(".rghead .rgfn .bt-add").click(function(){
 | 
			
		||||
				showUploadPanel();
 | 
			
		||||
			})
 | 
			
		||||
			g.albumArea.find(".rghead .rgfn .bt-del").click(function(){
 | 
			
		||||
				g.deleteAlbum(id);
 | 
			
		||||
			})
 | 
			
		||||
			// 		g.albumArea
 | 
			
		||||
			// 			.delay(200)
 | 
			
		||||
			// 			.animate({'margin-right':tag_panel_position+200},300);
 | 
			
		||||
			// 		return false;
 | 
			
		||||
			// 	});
 | 
			
		||||
			// g.albumArea.find("#tag_search_box").keyup(function(e){
 | 
			
		||||
			// 	sval = $(this).val();
 | 
			
		||||
			// 	if(sval == "<%= I18n.t('gallery.search_tags') %>")
 | 
			
		||||
			// 			sval = "";
 | 
			
		||||
			// 	sval = sval.replace(/(^\s*)|(\s*$)/g,'');
 | 
			
		||||
			// 	if(sval){
 | 
			
		||||
			// 		var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range 
 | 
			
		||||
			// 		var re2 = new RegExp("^[\uE7C7-\uE7F3]*$");
 | 
			
		||||
			// 		if ((re1.test(sval) && (re2.test(sval)))){
 | 
			
		||||
			// 			$("#gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp();
 | 
			
		||||
			// 		}else{
 | 
			
		||||
			// 			$("#gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp();
 | 
			
		||||
			// 		}
 | 
			
		||||
			// 	}else{
 | 
			
		||||
			// 		$("#gallery_tag_list li").slideDown();
 | 
			
		||||
			// 	}
 | 
			
		||||
			// })
 | 
			
		||||
			// g.albumArea.find("#tag_panel .bt-save").click(function(){
 | 
			
		||||
			// 	g.saveTags(id,g.loadArea);
 | 
			
		||||
			// })
 | 
			
		||||
			// g.albumArea.find(".rghead .rgfn .bt-add").click(function(){
 | 
			
		||||
			// 	showUploadPanel();
 | 
			
		||||
			// })
 | 
			
		||||
			// g.albumArea.find(".rghead .rgfn .bt-del").click(function(){
 | 
			
		||||
			// 	g.deleteAlbum(id);
 | 
			
		||||
			// })
 | 
			
		||||
		})
 | 
			
		||||
		var uploadpanel = $('<div id="upload_panel_holder"><div class="rgfn"><a class="bt-cls btn btn-primary pull-right" title="Close" href="" onclick="return false;"><i class="icon-remove icon-white"></i>Close Panel</a></div></div>');
 | 
			
		||||
		var frame = $('<iframe id="upload_panel" width="100%" scrolling="no" height="294" frameborder="0" src="upload_panel"></iframe>');
 | 
			
		||||
| 
						 | 
				
			
			@ -231,7 +232,7 @@ var galleryAPI = function(){
 | 
			
		|||
		}
 | 
			
		||||
		
 | 
			
		||||
		g.albumArea.addClass('o_album');
 | 
			
		||||
		g.albumArea.find(".rghead .rgfn").append(uploadpanel);
 | 
			
		||||
		// g.albumArea.find(".rghead .rgfn").append(uploadpanel);
 | 
			
		||||
		g.albumArea.find("#imgholder").empty();
 | 
			
		||||
		$("#filter").remove();
 | 
			
		||||
		g.albumArea.css("margin-top","");
 | 
			
		||||
| 
						 | 
				
			
			@ -243,10 +244,10 @@ var galleryAPI = function(){
 | 
			
		|||
				var $img = $("<div class='rgphoto'><a title='"+image.description+"' href='?theater="+image._id+"'><img src='"+thumb+"'/></a></div>");
 | 
			
		||||
				g.albumArea.find("#imgholder").append($img);
 | 
			
		||||
			})
 | 
			
		||||
			g.tagList.find("input").attr("checked",false);
 | 
			
		||||
			// g.tagList.find("input").attr("checked",false);
 | 
			
		||||
			$.each(album.tags,function(i,tag){
 | 
			
		||||
 | 
			
		||||
				g.tagList.find("li[data-content="+tag+"] input").attr("checked",true);
 | 
			
		||||
				// g.tagList.find("li[data-content="+tag+"] input").attr("checked",true);
 | 
			
		||||
			})
 | 
			
		||||
			// g.albumArea.find("#imgholder").append($addsign);
 | 
			
		||||
		})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,7 +16,7 @@
 | 
			
		|||
	}
 | 
			
		||||
.rg a:hover {  }
 | 
			
		||||
 | 
			
		||||
.rg img { display: block; border: none; width: 120px; height: 90px; }
 | 
			
		||||
.rg img { display: block; border: none; }
 | 
			
		||||
	
 | 
			
		||||
.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -26,9 +26,7 @@
 | 
			
		|||
	}
 | 
			
		||||
.rghead,  .rgbody { overflow: hidden; }
 | 
			
		||||
.rghead {
 | 
			
		||||
	border-bottom: solid 1px #ccc;
 | 
			
		||||
	padding: 10px 0;
 | 
			
		||||
	background: #fff;
 | 
			
		||||
	}
 | 
			
		||||
.rgtitle {
 | 
			
		||||
	color: #333;
 | 
			
		||||
| 
						 | 
				
			
			@ -39,21 +37,22 @@
 | 
			
		|||
.rgbody {
 | 
			
		||||
	
 | 
			
		||||
	}
 | 
			
		||||
.rgfn { overflow: hidden; padding: 4px 10px; }
 | 
			
		||||
.rgfn { overflow: hidden; }
 | 
			
		||||
.rgalbum, .rgphoto { float: left; margin: 0 10px 24px 0; }
 | 
			
		||||
.rgalbum {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	margin: 0 8px 8px 0;
 | 
			
		||||
	margin: 0 16px 16px 0;
 | 
			
		||||
	padding: 6px;
 | 
			
		||||
	width: 150px;
 | 
			
		||||
	height: 220px;
 | 
			
		||||
	border: solid 1px #ccc;
 | 
			
		||||
	height: 180px;
 | 
			
		||||
	border-radius: 4px;
 | 
			
		||||
 | 
			
		||||
	transition: all 0.3s ease;
 | 
			
		||||
	-webkit-transition: all 0.3s ease;
 | 
			
		||||
	-moz-transition: all 0.3s ease;
 | 
			
		||||
}
 | 
			
		||||
.rgalbum:hover {
 | 
			
		||||
	box-shadow: 0 0 6px rgba(0,0,0,0.2);
 | 
			
		||||
.rgalbum > a {
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin: -6px -6px 0 -6px;
 | 
			
		||||
}
 | 
			
		||||
.rgalbum img {		
 | 
			
		||||
	transition: all, 0.5s ease;
 | 
			
		||||
| 
						 | 
				
			
			@ -64,29 +63,28 @@
 | 
			
		|||
.rgphoto {  }
 | 
			
		||||
.rgphoto a {
 | 
			
		||||
	display: block;
 | 
			
		||||
	padding: 4px;
 | 
			
		||||
	border: solid 1px #ddd;
 | 
			
		||||
	background-color: #fff;
 | 
			
		||||
	border-radius: 4px;
 | 
			
		||||
 | 
			
		||||
	transition: all, 0.3s ease;
 | 
			
		||||
	-webkit-transition: all, 0.3s ease;
 | 
			
		||||
	-moz-transition: all, 0.3s ease;
 | 
			
		||||
}
 | 
			
		||||
.rgphoto a:hover { 
 | 
			
		||||
	border-color: #999;
 | 
			
		||||
	box-shadow: 0 3px 6px rgba(0,0,0,0.2); 
 | 
			
		||||
.rgphoto a:hover img { 
 | 
			
		||||
	opacity: 0.85;
 | 
			
		||||
}
 | 
			
		||||
.rgphoto img, .rgphoto_edit img { 
 | 
			
		||||
	display: block;
 | 
			
		||||
	border-radius: 3px;
 | 
			
		||||
 | 
			
		||||
	transition: all, 0.3s ease;
 | 
			
		||||
	-webkit-transition: all, 0.3s ease;
 | 
			
		||||
	-moz-transition: all, 0.3s ease;
 | 
			
		||||
	}
 | 
			
		||||
.rgalbum .albumname {
 | 
			
		||||
	font-size: 15px;
 | 
			
		||||
	padding: 6px 0;
 | 
			
		||||
	font-size: 1.25em;
 | 
			
		||||
	line-height: ;
 | 
			
		||||
	margin: 6px 0;
 | 
			
		||||
	display: block;
 | 
			
		||||
	height: 45px;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
	transition: background 0.3s ease;
 | 
			
		||||
	-webkit-transition: background 0.3s ease;
 | 
			
		||||
	-moz-transition: background 0.3s ease;
 | 
			
		||||
| 
						 | 
				
			
			@ -95,42 +93,37 @@
 | 
			
		|||
.rgalbum a:hover img { 
 | 
			
		||||
	opacity: 0.85;
 | 
			
		||||
	}
 | 
			
		||||
.rgalbum .categoryname {}
 | 
			
		||||
.rgalbum .tagnames {
 | 
			
		||||
	display: block;
 | 
			
		||||
	margin-top: 8px;
 | 
			
		||||
	padding-top: 8px;
 | 
			
		||||
	line-height: 22px;
 | 
			
		||||
	height: 22px;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
	border-top: solid 1px #ccc;
 | 
			
		||||
	color: #666;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.taglist {
 | 
			
		||||
	padding: 10px 0;
 | 
			
		||||
}
 | 
			
		||||
.taglist_title {
 | 
			
		||||
	font-size: 1.5em;
 | 
			
		||||
	margin: 0 0 10px 0;
 | 
			
		||||
}
 | 
			
		||||
.taglist ul {
 | 
			
		||||
	padding: 10px 0;
 | 
			
		||||
	border-top: solid 1px #ddd;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
.taglist li {
 | 
			
		||||
	float: left;
 | 
			
		||||
	margin: 0 8px 8px 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.rgp .rgtitle { margin: 0 0 10px 0; }
 | 
			
		||||
 | 
			
		||||
/* Photo Edit */
 | 
			
		||||
.albumname_edit label, .albumname_edit .rginput, .rgphoto_edit img, .rgphoto_edit .rginput { float: left; }
 | 
			
		||||
.rgphoto_edit, .albumname_edit {
 | 
			
		||||
	clear: both;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
	margin-bottom: 10px;
 | 
			
		||||
}
 | 
			
		||||
.albumname_edit label { 
 | 
			
		||||
	width: 120px;
 | 
			
		||||
	margin: 0 10px 0 0;
 | 
			
		||||
	text-align: right;
 | 
			
		||||
	padding: 0;
 | 
			
		||||
	line-height: 24px;
 | 
			
		||||
}
 | 
			
		||||
.albumname_edit .rginput {  }
 | 
			
		||||
.rgphoto_edit img { margin: 0 10px 10px 0; }
 | 
			
		||||
.rgphoto_edit .rginput { margin-right: 10px; }
 | 
			
		||||
.rgphoto_edit .edit_fn { float: left; margin-bottom: 10px; }
 | 
			
		||||
.rgphoto_edit .edit_fn .bt-dels { }
 | 
			
		||||
 | 
			
		||||
/* Delete List */
 | 
			
		||||
.rglist { overflow: hidden; padding: 10px 0; }
 | 
			
		||||
.list { table-layout:fixed; width: 100%; margin: 0 0 12px 0; }
 | 
			
		||||
.list thead th { padding: 8px 4px; font-size: 30px; font-weight: bold; }
 | 
			
		||||
.list th img { width: 60px; height: 45px; }
 | 
			
		||||
.list .photoname { padding-left: 6px; }
 | 
			
		||||
.list .photofn { padding-right: 4px; }
 | 
			
		||||
.list .photofn a { float: right; margin-left: 4px; display: block; }
 | 
			
		||||
.list th { padding: 4px 0 4px 4px; }
 | 
			
		||||
.list tbody th, .list tbody td { border-bottom: solid 1px #ccc; }
 | 
			
		||||
.list .odd th, .list .odd td { background: #f6f6f6; } 
 | 
			
		||||
.list .c1 { width: 64px; }
 | 
			
		||||
.list .c3 { width: 40px; }
 | 
			
		||||
 | 
			
		||||
/* Ruling Slide */
 | 
			
		||||
.rslide {
 | 
			
		||||
| 
						 | 
				
			
			@ -151,14 +144,6 @@
 | 
			
		|||
	}
 | 
			
		||||
.rslide.fullscreen { position: fixed; z-index: 99; }
 | 
			
		||||
.rslideinside {
 | 
			
		||||
	/*
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	left: 0;
 | 
			
		||||
	right: 0;
 | 
			
		||||
	bottom: 0;
 | 
			
		||||
	overflow: hidden;
 | 
			
		||||
	*/
 | 
			
		||||
	}
 | 
			
		||||
.comp  {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
| 
						 | 
				
			
			@ -335,213 +320,9 @@
 | 
			
		|||
	}
 | 
			
		||||
.dm li a:hover { background: #eee; }
 | 
			
		||||
 | 
			
		||||
/* Ruling Gallery UI */
 | 
			
		||||
.rgbt {	
 | 
			
		||||
	padding: 0 0 0 32px;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	
 | 
			
		||||
	text-shadow: 0 1px 0 #fff;
 | 
			
		||||
	-webkit-text-shadow: 0 1px 0 #fff;
 | 
			
		||||
	-moz-text-shadow: 0 1px 0 #fff;
 | 
			
		||||
	-ms-text-shadow: 0 1px 0 #fff;
 | 
			
		||||
	}
 | 
			
		||||
.rgbt span { 
 | 
			
		||||
	padding: 0 12px 0 8px;
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	line-height: 30px;
 | 
			
		||||
	height: 32px;
 | 
			
		||||
	font-size: 14px;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
.rgbtsg {
 | 
			
		||||
	padding: 6px;
 | 
			
		||||
	}
 | 
			
		||||
.rgphoto_edit .rgbtsg.active { display: inline-block; }
 | 
			
		||||
.bt-finish { display: block; float: right; clear: both; }
 | 
			
		||||
.bt-addnew {
 | 
			
		||||
	margin: 0 auto;
 | 
			
		||||
	width: 98px;
 | 
			
		||||
	height: 100px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	}
 | 
			
		||||
.bt-next{ 
 | 
			
		||||
	background-position: 0 -258px;
 | 
			
		||||
	display: block;
 | 
			
		||||
	float: right;
 | 
			
		||||
	clear: both;
 | 
			
		||||
	}
 | 
			
		||||
.bt-next:hover { background-position: 0 -448px; }
 | 
			
		||||
.bt-next:active { background-position: 0 -638px; }
 | 
			
		||||
.bt-close {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	right: 6px;
 | 
			
		||||
	top: 6px;
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.inputui {
 | 
			
		||||
	margin: 0 0 8px 0;
 | 
			
		||||
	}
 | 
			
		||||
.inputui span {
 | 
			
		||||
	padding: 0 4px 0 0;
 | 
			
		||||
	display: block;
 | 
			
		||||
	}
 | 
			
		||||
.rginput { max-width: 400px; }
 | 
			
		||||
.rginput input, .rginput textarea { color: #999; }
 | 
			
		||||
.rginput.focus input, .rginput.focus textarea { color: #333; }
 | 
			
		||||
 | 
			
		||||
.rgih26 { width: 208px; }
 | 
			
		||||
.rgih26 span {  }
 | 
			
		||||
.rgih26 input { width: 376px; }
 | 
			
		||||
.rgih26.focus {  }
 | 
			
		||||
.rgih26.focus span {  }
 | 
			
		||||
.rgih68 { width: 396px; }
 | 
			
		||||
.rgih68 span { padding: 3px 4px 3px 0; }
 | 
			
		||||
.rgih68 textarea { width: 392px; height: 62px; }
 | 
			
		||||
.rgih68.focus {  }
 | 
			
		||||
.rgih68.focus span {  }
 | 
			
		||||
.rgih98 { width: 396px; }
 | 
			
		||||
.rgih98 span {  }
 | 
			
		||||
.rgih98 textarea { width: 376px; height: 80px; }
 | 
			
		||||
.rgih98.focus {  }
 | 
			
		||||
.rgih98.focus span {  }
 | 
			
		||||
 | 
			
		||||
.w380 { width: 386px; }
 | 
			
		||||
 | 
			
		||||
#imgholder { overflow: hidden; }
 | 
			
		||||
 | 
			
		||||
/* upload panel */
 | 
			
		||||
#upload_panel_holder {
 | 
			
		||||
	display: none;
 | 
			
		||||
	margin: 16px 0 0 0;
 | 
			
		||||
	clear: both;
 | 
			
		||||
	float: right;
 | 
			
		||||
	width: 100%;
 | 
			
		||||
}
 | 
			
		||||
#upload_panel {
 | 
			
		||||
	background-color: #ddd;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* tag panel */
 | 
			
		||||
#tag_panel {
 | 
			
		||||
	position: fixed;
 | 
			
		||||
	right: -200px;
 | 
			
		||||
	top: 31px;
 | 
			
		||||
	width: 200px;
 | 
			
		||||
	min-height: 100px;
 | 
			
		||||
	border-left: solid 1px #ccc;
 | 
			
		||||
	background-color: #fff;
 | 
			
		||||
}
 | 
			
		||||
#tag_panel .scrollbar {
 | 
			
		||||
	right: 0px;
 | 
			
		||||
	top: 0px;
 | 
			
		||||
	width: 9px;
 | 
			
		||||
}
 | 
			
		||||
#tag_panel .viewport {
 | 
			
		||||
	height: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.tag_list {
 | 
			
		||||
	margin: 0;
 | 
			
		||||
	padding: 0;
 | 
			
		||||
}
 | 
			
		||||
.tag_list li {
 | 
			
		||||
	padding: 4px 6px;
 | 
			
		||||
	border-top: solid 1px #f6f6f6;
 | 
			
		||||
}
 | 
			
		||||
.tag_list li:first-child {
 | 
			
		||||
	border: 0;
 | 
			
		||||
}
 | 
			
		||||
.tag_list li:hover {
 | 
			
		||||
	background-color: #08c;
 | 
			
		||||
}
 | 
			
		||||
.tag_list li:hover label {
 | 
			
		||||
	color: #fff;
 | 
			
		||||
}
 | 
			
		||||
.tag_list input[type=checkbox], .tag_list label {
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: middle;
 | 
			
		||||
	text-transform: capitalize;
 | 
			
		||||
	margin: 0;
 | 
			
		||||
}
 | 
			
		||||
.tag_list label {
 | 
			
		||||
	padding: 0 6px;
 | 
			
		||||
}
 | 
			
		||||
.tag_search {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	left: -1px;
 | 
			
		||||
	bottom: -32px;
 | 
			
		||||
	width: 200px;
 | 
			
		||||
	height: 32px;
 | 
			
		||||
	background-color: #f5f5f5;
 | 
			
		||||
	border-left: solid 1px #ccc;
 | 
			
		||||
	border-top: solid 1px #ddd;
 | 
			
		||||
}
 | 
			
		||||
.tag_search input[type=text] {
 | 
			
		||||
	box-shadow: none;
 | 
			
		||||
	width: 92px;
 | 
			
		||||
	height: 25px;
 | 
			
		||||
	line-height: 25px;
 | 
			
		||||
	padding: 3px 6px 3px 24px;
 | 
			
		||||
	border: 0;
 | 
			
		||||
	border-top: solid 1px #fff;
 | 
			
		||||
}
 | 
			
		||||
.tag_search input[type=text]:focus {
 | 
			
		||||
	background-color: #fff;
 | 
			
		||||
}
 | 
			
		||||
.tag_search .icon-search {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	left: 6px;
 | 
			
		||||
	top: 50%;
 | 
			
		||||
	margin-top: -7px;
 | 
			
		||||
}
 | 
			
		||||
#tag_panel .tag_save {
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	right: 0;
 | 
			
		||||
	bottom: 0;
 | 
			
		||||
	height: 31px;
 | 
			
		||||
	border-left: solid 1px #ccc;
 | 
			
		||||
	background-color: #fff;
 | 
			
		||||
	padding: 2px 4px 0 4px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/* orbit style implementation */
 | 
			
		||||
#orbit_gallery {
 | 
			
		||||
	margin-bottom: 30px;
 | 
			
		||||
}
 | 
			
		||||
#orbit_gallery .nav-tabs, #orbit_gallery .tab-pane {
 | 
			
		||||
	margin-left: 8px;
 | 
			
		||||
	margin-right: 8px;
 | 
			
		||||
}
 | 
			
		||||
.tab_content .tab-pane{
 | 
			
		||||
	display: none;
 | 
			
		||||
}
 | 
			
		||||
.tab_content .active{
 | 
			
		||||
	display: block;
 | 
			
		||||
}
 | 
			
		||||
#orbit_gallery .btn { margin: 0; }
 | 
			
		||||
#orbit_gallery .btn i { margin-right: 4px; }
 | 
			
		||||
#orbit_gallery .rgfn .btn {
 | 
			
		||||
	margin-left: 8px;
 | 
			
		||||
}
 | 
			
		||||
#orbit_gallery .form-actions { background-color: whiteSmoke; }
 | 
			
		||||
 | 
			
		||||
.o_gallery .tagnames {
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
}
 | 
			
		||||
.o_gallery .label-tags {
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	margin: 0 6px 6px 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.o_gallery .rgbody, .o_album .rgbody {
 | 
			
		||||
	padding: 10px 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#categories .add-album .control-label {
 | 
			
		||||
	text-align: left;
 | 
			
		||||
	width: 100px;
 | 
			
		||||
	padding-left: 12px;
 | 
			
		||||
	padding-right: 12px;
 | 
			
		||||
	margin: 0 -10px 30px -10px;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -1,60 +1,6 @@
 | 
			
		|||
 | 
			
		||||
<%= stylesheet_link_tag "gallery_frontend" %>
 | 
			
		||||
 | 
			
		||||
<div id="filter" class="subnav">
 | 
			
		||||
  <ul class="nav nav-pills filter">
 | 
			
		||||
    <li class="accordion-group">
 | 
			
		||||
      <div class="accordion-heading">
 | 
			
		||||
        <a href="#collapse-categories" data-toggle="collapse" data-parent=".filters" class="accordion-toggle"><%= t("gallery.category") %> <b class="web-symbol"></b></a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </li>
 | 
			
		||||
    <li class="accordion-group">
 | 
			
		||||
      <div class="accordion-heading">
 | 
			
		||||
        <a href="#collapse-tags" data-toggle="collapse" data-parent=".filters" class="accordion-toggle"><%= t("gallery.tag") %> <b class="web-symbol"></b></a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </li>
 | 
			
		||||
  </ul>
 | 
			
		||||
  <div class="filters">
 | 
			
		||||
    <div class="accordion-body collapse" id="collapse-categories">
 | 
			
		||||
      <div class="accordion-inner filter_btns cats" data-toggle="buttons-checkbox">
 | 
			
		||||
         <% @categorylist.each do |category| %>
 | 
			
		||||
            <a href="cat=<%= category.id %>" class="btn" onclick="return false;"><%= category.name %></a>
 | 
			
		||||
          <% end %>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="filter-clear">
 | 
			
		||||
        <a href="" class="btn" onclick="return false;"  for="cats"><i class="icons-brush-large"></i>清除</a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="accordion-body collapse" id="collapse-tags">
 | 
			
		||||
      <div class="accordion-inner filter_btns tags" data-toggle="buttons-checkbox">
 | 
			
		||||
        <% @tags.each do |tag| %>
 | 
			
		||||
        <a href="tag=<%= tag.id %>" class="btn" onclick="return false;"><%= tag[I18n.locale] %></a>
 | 
			
		||||
        <% end %>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="filter-clear">
 | 
			
		||||
        <a href="" class="btn" onclick="return false;" for="tags"><i class="icons-brush-large" ></i>清除</a>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
<!-- <table id="gallery_list" class="table main-list">
 | 
			
		||||
  <thead>
 | 
			
		||||
    <tr>
 | 
			
		||||
      <th class="span1"></th>
 | 
			
		||||
      <th class="span2"></th>
 | 
			
		||||
      <th class="span2"></th>
 | 
			
		||||
      <th></th>
 | 
			
		||||
    </tr>
 | 
			
		||||
  </thead>
 | 
			
		||||
  <tbody id="tbody_gallery" class="sort-holder">
 | 
			
		||||
    <tr>
 | 
			
		||||
      <td class="span1"></td>
 | 
			
		||||
      <td class="span2"></td>
 | 
			
		||||
      <td class="span2"></td>
 | 
			
		||||
      <td></td>
 | 
			
		||||
    </tr>
 | 
			
		||||
  </tbody>
 | 
			
		||||
</table> -->
 | 
			
		||||
<div id="orbit_gallery" class="rg">
 | 
			
		||||
  <!-- <div class="rghead">
 | 
			
		||||
    <div class="rgfn">
 | 
			
		||||
| 
						 | 
				
			
			@ -100,25 +46,18 @@
 | 
			
		|||
   <%= javascript_include_tag "galleryAPI" %>
 | 
			
		||||
   <%= javascript_include_tag "jquery.tinyscrollbar" %>
 | 
			
		||||
  <% end %>
 | 
			
		||||
  <script type="text/javascript">
 | 
			
		||||
      var $tag_panel = $('#tag_panel');
 | 
			
		||||
          orbit_bar_height = $('#orbit-bar').outerHeight();
 | 
			
		||||
          action_panel_height = $('.form-actions').outerHeight();
 | 
			
		||||
          window_height = $(window).height();
 | 
			
		||||
 | 
			
		||||
      
 | 
			
		||||
      $tag_panel.height( window_height - orbit_bar_height - 90 );
 | 
			
		||||
      $tag_panel.tinyscrollbar();
 | 
			
		||||
 | 
			
		||||
      $(window).resize(function(){
 | 
			
		||||
        $tag_panel.tinyscrollbar_update('relative');
 | 
			
		||||
        $tag_panel.height( $(window).height() - orbit_bar_height - 90 );
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      
 | 
			
		||||
  </script>
 | 
			
		||||
  <div class="taglist"> <!-- add "album_tags" or "photo_tags" class to .taglist -->
 | 
			
		||||
    <h3 class="taglist_title"><%= t('gallery.album_tag') %></h3>
 | 
			
		||||
    <ul>
 | 
			
		||||
      <li>Computer,</li>
 | 
			
		||||
      <li>Birds,</li>
 | 
			
		||||
      <li>Girls,</li>
 | 
			
		||||
      <li>Boys,</li>
 | 
			
		||||
      <li>Human</li>
 | 
			
		||||
    </ul>
 | 
			
		||||
  </div>
 | 
			
		||||
  <!-- tag end -->
 | 
			
		||||
  <div class="form-actions form-fixed pagination-right rghead">
 | 
			
		||||
  <div class="rghead">
 | 
			
		||||
  <div class="rgfn">
 | 
			
		||||
  <!--   <a href="" class="btn btn-primary pull-right"><i class="icon-plus icon-white"></i>新增</a> -->
 | 
			
		||||
  </div>
 | 
			
		||||
| 
						 | 
				
			
			@ -128,12 +67,12 @@
 | 
			
		|||
galleryAPI.prototype.loadFooterPanel = function(area,id,callbackFn){
 | 
			
		||||
    var headarea = null;
 | 
			
		||||
    if(area == "images"){
 | 
			
		||||
      headarea = '<a class="bt-back btn btn-primary pull-left" title="<%= I18n.t("gallery.back_to_albums") %>" href="gallery"><i class="icon-arrow-left icon-white"></i><%= I18n.t("gallery.back_to_albums") %></a> ';
 | 
			
		||||
       headarea+='<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.album_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.album_tag") %></a>';
 | 
			
		||||
      headarea = '<a class="bt-back rgbt" title="<%= I18n.t("gallery.back_to_albums") %>" href="gallery"><i class="icon-arrow-left"></i> <%= I18n.t("gallery.back_to_albums") %></a> ';
 | 
			
		||||
       // headarea+='<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.album_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.album_tag") %></a>';
 | 
			
		||||
      
 | 
			
		||||
    }else if (area == "theater"){
 | 
			
		||||
      headarea = '<a href="" class="bt-back btn pull-left" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left icon-black"></i><%= I18n.t("gallery.back_to_photos") %></a></div>';
 | 
			
		||||
      headarea+= '<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.photo_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.photo_tag") %></a>';
 | 
			
		||||
      headarea = '<a href="" class="bt-back rgbt" title="<%= I18n.t("gallery.back_to_photos") %>"><i class="icon-arrow-left"></i> <%= I18n.t("gallery.back_to_photos") %></a></div>';
 | 
			
		||||
      // headarea+= '<a class="bt-tag btn btn-primary pull-right" title="<%= I18n.t("gallery.photo_tag") %>" href="" ><i class="icon-tag icon-white"></i><%= I18n.t("gallery.photo_tag") %></a>';
 | 
			
		||||
    }
 | 
			
		||||
    if(typeof callbackFn == "function"){
 | 
			
		||||
      callbackFn.call(this,headarea);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Reference in New Issue