mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-03-28 17:42:57 +01:00
fixes #1336 alternate views for album manager
* in addition to "tile" view introduced in Piwigo 11, we add "compact" and "lines" views * implemented by @MatthieuLP as cat_list_new in a custom branch, manually merged by @plegall on master
This commit is contained in:
plegall
466
admin/themes/default/js/cat_list.js
Normal file
466
admin/themes/default/js/cat_list.js
Normal file
@@ -0,0 +1,466 @@
|
||||
function setDisplayCompact() {
|
||||
|
||||
removeIconDesc();
|
||||
|
||||
$(".albumActions").css("display", "flex");
|
||||
removeHoverEffect($(".categoryBox"));
|
||||
removeHoverEffect($(".categoryBox").children(".albumActions").children("a"));
|
||||
|
||||
$(".categoryBox").children(".albumActions").children("a").hover(function () {
|
||||
$(this).css({
|
||||
color : "#000000",
|
||||
});
|
||||
}, function () {
|
||||
$(this).css({
|
||||
color : "#848484",
|
||||
});
|
||||
});
|
||||
|
||||
$(".categoryBox").css({
|
||||
minWidth: "230px",
|
||||
maxWidth: "350px",
|
||||
flexDirection: "column",
|
||||
maxHeight: "180px",
|
||||
alignItems: "unset",
|
||||
margin: "15px"
|
||||
});
|
||||
|
||||
$(".albumInfos").css({
|
||||
marginLeft: "0",
|
||||
flexDirection: "column"
|
||||
});
|
||||
|
||||
// $(".albumIcon").css({
|
||||
// height: "80px"
|
||||
// });
|
||||
|
||||
// $(".albumIcon span").css({
|
||||
// fontSize: "19px",
|
||||
// width: "27px",
|
||||
// padding: "10px"
|
||||
// });
|
||||
|
||||
$(".albumIcon").css({
|
||||
height: "60px"
|
||||
});
|
||||
|
||||
$(".albumIcon span").css({
|
||||
fontSize: "14px",
|
||||
width: "20px",
|
||||
padding: "8px"
|
||||
});
|
||||
|
||||
$(".albumInfos p").css("margin", "0");
|
||||
$(".albumInfos p:last-child").css({
|
||||
width: "auto"
|
||||
});
|
||||
|
||||
$(".albumTop").css({
|
||||
width: "auto",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
alignItems: "baseline",
|
||||
height: "65px"
|
||||
});
|
||||
|
||||
$(".albumTitle").css("padding", "0 15px");
|
||||
|
||||
$(".addAlbum").css({
|
||||
minWidth : "230px",
|
||||
maxWidth: "350px",
|
||||
flexDirection: "column",
|
||||
maxHeight: "180px",
|
||||
margin: "15px"
|
||||
});
|
||||
|
||||
$(".addAlbum form label").css({
|
||||
display: "none"
|
||||
});
|
||||
|
||||
$(".addAlbumHead").css({
|
||||
flexDirection: "column",
|
||||
transform: "translateY(75px)",
|
||||
alignItems: "center",
|
||||
marginTop: "-10px",
|
||||
transition: "0.4s ease"
|
||||
});
|
||||
|
||||
$(".addAlbum form").css("flex-direction", "column");
|
||||
|
||||
$(".addAlbum form").css({
|
||||
flexDirection: "column",
|
||||
marginTop: "0",
|
||||
marginBottom: "0",
|
||||
transitionDelay: "0s"
|
||||
});
|
||||
|
||||
$(".addAlbum.input-mode form").css({
|
||||
transitionDelay: "0.4s",
|
||||
});
|
||||
|
||||
$(".addAlbum form input").css("margin", "0px 10px 0px 10px");
|
||||
$(".addAlbum form button").css("margin", "10px auto 0 auto");
|
||||
$(".addAlbum p").css("margin-bottom", "0px");
|
||||
|
||||
$(".addAlbumHead p").css("margin-left", "0");
|
||||
|
||||
$(".addAlbumHead span").css({
|
||||
fontSize:"14px",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
padding: "8px"
|
||||
});
|
||||
|
||||
$(".albumActions").css({
|
||||
flexDirection : "row",
|
||||
marginTop: "auto",
|
||||
width: "100%"
|
||||
});
|
||||
|
||||
$(".albumActions a:first-child").css("margin-left", "35px");
|
||||
$(".albumActions a:last-child").css("margin-right", "35px");
|
||||
}
|
||||
|
||||
function setDisplayLine() {
|
||||
|
||||
/*********** Hover stuff ***********/
|
||||
|
||||
removeIconDesc();
|
||||
$(".albumActions").css("display", "flex");
|
||||
removeHoverEffect($(".categoryBox"));
|
||||
|
||||
$(".categoryBox").hover(function () {
|
||||
$(this).css("background", "#ffd7ad");
|
||||
$(this).children(".albumInfos").css({
|
||||
color: "#515151"
|
||||
});
|
||||
$(this).children(".albumActions").children("a").css({
|
||||
color: "#515151",
|
||||
});
|
||||
|
||||
$(this).children(".albumTop").children(".albumIcon").children("span").addClass("albumIconLineHover");
|
||||
|
||||
}, function () {
|
||||
$(this).css("background", "#fafafa");
|
||||
$(this).children(".albumInfos").css({
|
||||
color: "#a9a9a9"
|
||||
});
|
||||
$(this).children(".albumActions").children("a").css({
|
||||
color: "#848484"
|
||||
});
|
||||
|
||||
$(this).children(".albumTop").children(".albumIcon").children("span").removeClass("albumIconLineHover");
|
||||
})
|
||||
|
||||
$(".categoryBox").children(".albumActions").children("a").hover(function () {
|
||||
$(this).css({
|
||||
color : "#000000",
|
||||
});
|
||||
}, function () {
|
||||
$(this).css({
|
||||
color : "#515151",
|
||||
});
|
||||
});
|
||||
|
||||
/************************************/
|
||||
|
||||
$(".categoryBox").css({
|
||||
minWidth: "90%",
|
||||
maxWidth: "100%",
|
||||
flexDirection: "row",
|
||||
maxHeight: "60px",
|
||||
alignItems: "unset",
|
||||
margin: "5px 15px"
|
||||
});
|
||||
|
||||
$(".albumIcon").css({
|
||||
height: "60px"
|
||||
});
|
||||
|
||||
$(".albumIcon span").css({
|
||||
fontSize: "14px",
|
||||
width: "20px",
|
||||
padding: "8px"
|
||||
});
|
||||
|
||||
$(".addAlbumHead span").css({
|
||||
fontSize:"14px",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
padding: "8px"
|
||||
});
|
||||
|
||||
$(".albumInfos").css({
|
||||
marginLeft: "auto",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
width: "auto"
|
||||
});
|
||||
|
||||
$(".albumInfos p").css({
|
||||
textAlign: "right",
|
||||
margin: "0"
|
||||
});
|
||||
|
||||
$(".albumInfos p:last-child").css({
|
||||
width: "270px"
|
||||
});
|
||||
|
||||
$(".albumTop").css({
|
||||
width: "25%",
|
||||
justifyContent: "flex-start",
|
||||
flexDirection: "row",
|
||||
alignItems : "baseline",
|
||||
height: "75px"
|
||||
});
|
||||
|
||||
$(".albumTitle").css("padding", "0 15px");
|
||||
|
||||
$(".addAlbum").css({
|
||||
minWidth: "90%",
|
||||
maxWidth: "100%",
|
||||
flexDirection: "row",
|
||||
maxHeight: "60px",
|
||||
margin: "15px 15px 5px 15px"
|
||||
});
|
||||
|
||||
$(".addAlbum form label").css({
|
||||
display: "none"
|
||||
});
|
||||
|
||||
$(".addAlbumHead").css({
|
||||
flexDirection: "row",
|
||||
transform: "translateY(0)",
|
||||
alignItems: "center",
|
||||
marginTop: "0",
|
||||
transform: "translateX(200px)"
|
||||
});
|
||||
|
||||
$(".addAlbum form").css({
|
||||
flexDirection: "row",
|
||||
marginTop: "0",
|
||||
marginBottom: "0",
|
||||
transitionDelay: "0s"
|
||||
});
|
||||
|
||||
$(".addAlbum.input-mode form").css({
|
||||
transitionDelay: "0s",
|
||||
});
|
||||
|
||||
$(".addAlbum form").css("align-items", "center");
|
||||
$(".addAlbum form input").css("margin", "0px 10px 0px 10px");
|
||||
$(".addAlbum form button").css("margin", "0px 20px");
|
||||
$(".addAlbum p").css("margin-bottom", "0px");
|
||||
|
||||
$(".addAlbumHead p").css("margin-left", "15px");
|
||||
|
||||
$(".albumActions").css({
|
||||
flexDirection : "row",
|
||||
margin: "auto 0px",
|
||||
width: "300px",
|
||||
});
|
||||
|
||||
$(".albumActions a:first-child").css("margin-left", "35px");
|
||||
$(".albumActions a:last-child").css("margin-right", "35px");
|
||||
|
||||
}
|
||||
|
||||
function setDisplayTile() {
|
||||
|
||||
ShowIconDesc();
|
||||
|
||||
$(".albumActions").css("display", "flex");
|
||||
removeHoverEffect($(".categoryBox"));
|
||||
removeHoverEffect($(".categoryBox").children(".albumActions").children("a"));
|
||||
$(".categoryBox").children(".albumActions").children("a").hover(function () {
|
||||
$(this).css({
|
||||
color : "#FFA646"
|
||||
})
|
||||
}, function () {
|
||||
$(this).css({
|
||||
color : "#848484"
|
||||
})
|
||||
});
|
||||
|
||||
AddHoverOnAlbumActions();
|
||||
|
||||
$(".addAlbum.input-mode form").css({
|
||||
transitionDelay: "0s",
|
||||
});
|
||||
|
||||
$(".categoryBox").css({
|
||||
minWidth: "220px",
|
||||
maxWidth: "280px",
|
||||
flexDirection: "column",
|
||||
maxHeight: "300px",
|
||||
alignItems: "center",
|
||||
margin: "15px"
|
||||
});
|
||||
|
||||
$(".albumActions").css({
|
||||
flexDirection : "column",
|
||||
margin:"auto",
|
||||
alignItems: "flex-start",
|
||||
width: "75%",
|
||||
});
|
||||
|
||||
$(".albumInfos").css({
|
||||
marginLeft: "0",
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
$(".albumInfos p:last-child").css({
|
||||
width: "auto"
|
||||
});
|
||||
|
||||
$(".albumIcon").css({
|
||||
height: "80px"
|
||||
});
|
||||
|
||||
$(".albumIcon span").css({
|
||||
fontSize: "19px",
|
||||
width: "27px",
|
||||
padding: "10px"
|
||||
});
|
||||
|
||||
$(".albumTop").css({
|
||||
width: "85%",
|
||||
flexDirection: "column",
|
||||
alignItems: "unset",
|
||||
height: "110px",
|
||||
});
|
||||
|
||||
$(".albumTitle").css("padding", "0");
|
||||
|
||||
$(".addAlbum").css({
|
||||
minWidth: "220px",
|
||||
maxWidth: "280px",
|
||||
flexDirection: "column",
|
||||
maxHeight: "300px",
|
||||
margin: "15px"
|
||||
});
|
||||
|
||||
$(".addAlbumHead").css({
|
||||
flexDirection: "column",
|
||||
transform: "translateY(75px)",
|
||||
alignItems: "center",
|
||||
marginTop: "10px",
|
||||
transition: "0.4s ease"
|
||||
});
|
||||
|
||||
$(".addAlbum form").css({
|
||||
flexDirection: "column",
|
||||
marginTop: "auto",
|
||||
marginBottom: "20px",
|
||||
transitionDelay: "0s"
|
||||
});
|
||||
|
||||
$(".addAlbum form input").css("margin", "0px 10px 10px 10px");
|
||||
$(".addAlbum form button").css("margin", "10px auto 0 auto");
|
||||
$(".addAlbum p").css("margin-bottom", "20px");
|
||||
|
||||
$(".addAlbum form label").css({
|
||||
display: "flex",
|
||||
margin: "-20px 0 0 10px"
|
||||
});
|
||||
|
||||
$(".addAlbumHead p").css("margin-left", "0");
|
||||
|
||||
$(".addAlbumHead span").css({
|
||||
fontSize:"19px",
|
||||
width: "27px",
|
||||
height: "27px",
|
||||
padding: "10px"
|
||||
});
|
||||
|
||||
$(".albumInfos p").css("margin", "0");
|
||||
|
||||
$(".albumActions a:first-child").css("margin-left", "5px");
|
||||
$(".albumActions a:last-child").css("margin-left", "5px");
|
||||
}
|
||||
|
||||
function ShowIconDesc() {
|
||||
$(".albumActions span.iconLegend").show();
|
||||
}
|
||||
|
||||
function removeIconDesc() {
|
||||
$(".albumActions span.iconLegend").hide();
|
||||
}
|
||||
|
||||
function removeHoverEffect(e) {
|
||||
e.unbind('mouseenter').unbind('mouseleave');
|
||||
}
|
||||
|
||||
function AddHoverOnAlbumActions() {
|
||||
$(".albumActions").css("display", "none");
|
||||
$(".categoryBox").hover(function () {
|
||||
$(this).children(".albumActions").css("display", "flex");
|
||||
}, function () {
|
||||
$(this).children(".albumActions").css("display", "none");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
if (!$.cookie("pwg_album_manager_view")) {
|
||||
$.cookie("pwg_album_manager_view", "tile");
|
||||
}
|
||||
|
||||
$(".addAlbum").on("click", function (e) {
|
||||
if (e.target.className !== "cancelAddAlbum") {
|
||||
$(".addAlbum").addClass('input-mode');
|
||||
|
||||
if ($.cookie("pwg_album_manager_view") !== "tile") {
|
||||
$(".addAlbum p").hide(300);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
$(".cancelAddAlbum").on("click", function () {
|
||||
$('.addAlbum').removeClass('input-mode');
|
||||
$(".addAlbum p").show(800);
|
||||
});
|
||||
|
||||
if ($("#displayCompact").is(":checked")) {
|
||||
setDisplayCompact();
|
||||
};
|
||||
|
||||
if ($("#displayLine").is(":checked")) {
|
||||
setDisplayLine();
|
||||
};
|
||||
|
||||
if ($("#displayTile").is(":checked")) {
|
||||
setDisplayTile();
|
||||
};
|
||||
|
||||
$("#displayCompact").change(function () {
|
||||
setDisplayCompact();
|
||||
|
||||
if ($(".addAlbum").hasClass("input-mode")) {
|
||||
$(".addAlbum p").hide();
|
||||
}
|
||||
|
||||
$.cookie("pwg_album_manager_view", "compact");
|
||||
});
|
||||
|
||||
$("#displayLine").change(function () {
|
||||
setDisplayLine();
|
||||
|
||||
if ($(".addAlbum").hasClass("input-mode")) {
|
||||
$(".addAlbum p").hide();
|
||||
}
|
||||
|
||||
$.cookie("pwg_album_manager_view", "line");
|
||||
});
|
||||
|
||||
$("#displayTile").change(function () {
|
||||
setDisplayTile();
|
||||
|
||||
if ($(".addAlbum").hasClass("input-mode")) {
|
||||
$(".addAlbum p").show();
|
||||
}
|
||||
|
||||
$.cookie("pwg_album_manager_view", "tile");
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,8 @@
|
||||
{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
|
||||
|
||||
{combine_script id='alternativeView' load='footer' path='admin/themes/default/js/cat_list.js'}
|
||||
{combine_script id='jquery.cookie' path='themes/default/js/jquery.cookie.js' load='footer'}
|
||||
|
||||
{footer_script require='jquery.ui.sortable'}{literal}
|
||||
jQuery(document).ready(function(){
|
||||
$(".addAlbumHead").click(function () {
|
||||
@@ -8,51 +11,236 @@ jQuery(document).ready(function(){
|
||||
});
|
||||
{/literal}{/footer_script}
|
||||
|
||||
<div class="selectedAlbum cat-list-album-path"><span class="icon-sitemap">{$CATEGORIES_NAV}</span></div>
|
||||
<div class="selectedAlbum cat-list-album-path">
|
||||
<span class="icon-sitemap selectedAlbum-first">{$CATEGORIES_NAV}</span>
|
||||
<div class="AlbumViewSelector">
|
||||
<input type="radio" name="layout" class="switchLayout" id="displayCompact" {if $smarty.cookies.pwg_album_manager_view == 'compact'}checked{/if}/><label for="displayCompact"><span class="icon-th-large firstIcon tiptip" title="{'Compact View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout tiptip" id="displayLine" {if $smarty.cookies.pwg_album_manager_view == 'line'}checked{/if}/><label for="displayLine"><span class="icon-th-list tiptip" title="{'Line View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayTile" {if $smarty.cookies.pwg_album_manager_view == 'tile'}checked{/if}/><label for="displayTile"><span class="icon-pause lastIcon tiptip" title="{'Tile View'|translate}"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
{assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
|
||||
<div class="categoryContainer">
|
||||
<div class="addAlbum">
|
||||
<div class="addAlbumHead" onclick="$('.addAlbum').addClass('input-mode');">
|
||||
<div class="addAlbumHead">
|
||||
<span class="icon-plus-circled icon-blue"></span>
|
||||
<p>{"Add Album"|@translate}
|
||||
</div>
|
||||
<form action="{$F_ACTION}" method="post">
|
||||
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
|
||||
<label for="virtual_name">{"Album Name"|@translate}</label>
|
||||
<input type="text" name="virtual_name" placeholder="{"Portraits..."|@translate}">
|
||||
<label for="virtual_name">{"Album name"|@translate}</label>
|
||||
<input type="text" name="virtual_name" placeholder="{"Album name"|@translate}">
|
||||
<button name="submitAdd" type="submit" class="buttonLike">
|
||||
<i class="icon-plus"></i> {"Create"|@translate}
|
||||
</button>
|
||||
<a onclick="$('.addAlbum').removeClass('input-mode');">{"Cancel"|@translate}</a>
|
||||
<a class="cancelAddAlbum">{"Cancel"|@translate}</a>
|
||||
</form>
|
||||
</div>
|
||||
{if count($categories)}
|
||||
{foreach from=$categories item=category}
|
||||
<div class="categoryBox{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
|
||||
|
||||
<div class="albumIcon">
|
||||
<span class="
|
||||
{if $category.NB_SUB_ALBUMS == 0}icon-folder-open{else}icon-sitemap{/if}
|
||||
{$color_tab[$category.ID % 5]}
|
||||
"> </span>
|
||||
|
||||
<div class="albumTop">
|
||||
<div class="albumIcon">
|
||||
<span class="
|
||||
{if $category.NB_SUB_ALBUMS == 0}icon-folder-open{else}icon-sitemap{/if}
|
||||
{$color_tab[$category.ID % 5]}
|
||||
"> </span>
|
||||
</div>
|
||||
|
||||
<div class="albumTitle">
|
||||
{$category.NAME}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="albumTitle">
|
||||
{$category.NAME}
|
||||
</div>
|
||||
<span class="albumInfos"><p>{$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'}</p> <p>{$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</p></span>
|
||||
|
||||
<div class="albumActions">
|
||||
<a href="{$category.U_EDIT}" title="{'Edit'|@translate}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
|
||||
<a href="{$category.U_CHILDREN}" class="actionTitle" title="{'sub-albums'|@translate}"><span class="icon-sitemap"></span>{'sub-albums'|@translate}</a>
|
||||
<a href="{$category.U_EDIT}" class="actionEdit" {*title="{'Edit'|@translate}"*}><span class="icon-pencil tiptip" title="{'Edit'|@translate}"></span><span class="iconLegend">{'Edit'|@translate}</span></a>
|
||||
<a href="{$category.U_CHILDREN}" class="actionTitle" {*title="{'sub-albums'|@translate}"*}><span class="icon-sitemap tiptip" title="{'sub-albums'|@translate}"></span><span class="iconLegend">{'sub-albums'|@translate}</span></a>
|
||||
{if cat_admin_access($category.ID)}
|
||||
<a href="{$category.U_JUMPTO}" title="{'Visit Gallery'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </a>
|
||||
<a href="{$category.U_JUMPTO}" class="actionGalery" {*title="{'Visit Gallery'|@translate}"*}><span class="icon-eye tiptip" title="{'Visit Gallery'|@translate}"></span><span class="iconLegend">{'Visit Gallery'|@translate}</span></a>
|
||||
{else}
|
||||
<span href="{$category.U_JUMPTO}" title="{'This album is private'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </span>
|
||||
<span href="{$category.U_JUMPTO}" class="actionGalery" {*title="{'This album is private'|@translate}"*}><span class="icon-eye tiptip" title="{'This album is private'|@translate}"></span><span class="iconLegend">{'Visit Gallery'|@translate}</span></span>
|
||||
{/if}
|
||||
<a href="{$category.U_ADD_PHOTOS_ALBUM}" title="{'Add Photos'|@translate}"><span class="icon-plus"></span>{'Add Photos'|@translate}</a>
|
||||
<a href="{$category.U_ADD_PHOTOS_ALBUM}" class="actionAdd" {*title="{'Add Photos'|@translate}"*}><span class="icon-plus tiptip" title="{'Add Photos'|@translate}"></span><span class="iconLegend">{'Add Photos'|@translate}</span></a>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
/*
|
||||
* Switch btn between views
|
||||
*/
|
||||
|
||||
#tabsheet , .selectedAlbum{
|
||||
margin: 0 0 10px 0 !important;
|
||||
}
|
||||
|
||||
.selectedAlbum {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 0 34px 0 22px;
|
||||
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.selectedAlbum-first {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.AlbumViewSelector {
|
||||
padding: 7px 0px;
|
||||
margin-right: 0px;
|
||||
border-radius: 10px;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.AlbumViewSelector span {
|
||||
border-radius: 0;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.addAlbum button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Should be done with :first-child and :last-child but doesn't work */
|
||||
|
||||
.AlbumViewSelector label span.firstIcon{
|
||||
border-radius: 7px 0 0 7px;
|
||||
}
|
||||
|
||||
.AlbumViewSelector label span.lastIcon{
|
||||
border-radius: 0 7px 7px 0;
|
||||
}
|
||||
|
||||
.icon-th-large, .icon-th-list, .icon-pause {
|
||||
padding: 10px;
|
||||
font-size: 19px;
|
||||
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.AlbumViewSelector input:checked + label{
|
||||
background: transparent;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.AlbumViewSelector input:checked + label span{
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.switchLayout {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.albumActions a span.iconLegend {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.categoryContainer {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tiles display
|
||||
*/
|
||||
|
||||
.albumTop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
padding: 0px 20px;
|
||||
height: 75px;
|
||||
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.categoryBox, .addAlbum{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 200px;
|
||||
flex-grow: 1;
|
||||
|
||||
/* Potential Animation */
|
||||
/* transition: 1s linear; */
|
||||
}
|
||||
|
||||
.albumIcon span{
|
||||
font-size: 19px;
|
||||
width: 27px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.albumIconLineHover {
|
||||
background: #f98100! important;
|
||||
color: #ffd7ad;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.albumInfos {
|
||||
color: #a9a9a9;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.albumInfos p {
|
||||
margin: 0 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.albumActions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-top: auto;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.albumActions a:first-child{
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.albumActions a:last-child {
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.addAlbum form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.addAlbum form input {
|
||||
border: none;
|
||||
box-shadow: 0px 2px 3px #00000024;
|
||||
border-radius: 5px;
|
||||
|
||||
margin: 0px 10px;
|
||||
|
||||
max-width: 200px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.addAlbum form button {
|
||||
margin-bottom: 0;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.addAlbumHead {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -195,7 +195,6 @@ TABLE.languages TR TD { padding: 7px 20px; }
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -204,13 +203,10 @@ TABLE.languages TR TD { padding: 7px 20px; }
|
||||
}
|
||||
|
||||
.albumActions {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -236,7 +232,7 @@ TABLE.languages TR TD { padding: 7px 20px; }
|
||||
.addAlbum {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -244,6 +240,10 @@ TABLE.languages TR TD { padding: 7px 20px; }
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.addAlbum.input-mode form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.addAlbum label {
|
||||
margin: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
@@ -312,7 +312,8 @@ TABLE.languages TR TD { padding: 7px 20px; }
|
||||
}
|
||||
|
||||
.addAlbum.input-mode .addAlbumHead{
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0px) !important;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.addAlbum.input-mode form {
|
||||
|
||||
@@ -1118,3 +1118,7 @@ $lang['Created on %s'] = 'Created on %s';
|
||||
$lang['Edited on %s'] = 'Edited on %s';
|
||||
$lang['%d sub-albums'] = '%d sub-albums';
|
||||
$lang['Refresh thumbnail'] = 'Refresh thumbnail';
|
||||
$lang['Compact View'] = 'Compact View';
|
||||
$lang['Tile View'] = 'Tile View';
|
||||
$lang['Line View'] = 'Line View';
|
||||
$lang['Add Album'] = 'Add Album';
|
||||
@@ -1120,3 +1120,7 @@ $lang['Created on %s'] = 'Créé le %s';
|
||||
$lang['Edited on %s'] = 'Modifié le %s';
|
||||
$lang['%d sub-albums'] = '%d sous-albums';
|
||||
$lang['Refresh thumbnail'] = 'Changer de miniature';
|
||||
$lang['Compact View'] = 'Affichage compact';
|
||||
$lang['Tile View'] = 'Affichage tuiles';
|
||||
$lang['Line View'] = 'Affichage lignes';
|
||||
$lang['Add Album'] = 'Ajouter un Album';
|
||||
117
themes/default/js/jquery.cookie.js
Normal file
117
themes/default/js/jquery.cookie.js
Normal file
@@ -0,0 +1,117 @@
|
||||
/*!
|
||||
* jQuery Cookie Plugin v1.4.1
|
||||
* https://github.com/carhartl/jquery-cookie
|
||||
*
|
||||
* Copyright 2013 Klaus Hartl
|
||||
* Released under the MIT license
|
||||
*/
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// CommonJS
|
||||
factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var pluses = /\+/g;
|
||||
|
||||
function encode(s) {
|
||||
return config.raw ? s : encodeURIComponent(s);
|
||||
}
|
||||
|
||||
function decode(s) {
|
||||
return config.raw ? s : decodeURIComponent(s);
|
||||
}
|
||||
|
||||
function stringifyCookieValue(value) {
|
||||
return encode(config.json ? JSON.stringify(value) : String(value));
|
||||
}
|
||||
|
||||
function parseCookieValue(s) {
|
||||
if (s.indexOf('"') === 0) {
|
||||
// This is a quoted cookie as according to RFC2068, unescape...
|
||||
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
|
||||
}
|
||||
|
||||
try {
|
||||
// Replace server-side written pluses with spaces.
|
||||
// If we can't decode the cookie, ignore it, it's unusable.
|
||||
// If we can't parse the cookie, ignore it, it's unusable.
|
||||
s = decodeURIComponent(s.replace(pluses, ' '));
|
||||
return config.json ? JSON.parse(s) : s;
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function read(s, converter) {
|
||||
var value = config.raw ? s : parseCookieValue(s);
|
||||
return $.isFunction(converter) ? converter(value) : value;
|
||||
}
|
||||
|
||||
var config = $.cookie = function (key, value, options) {
|
||||
|
||||
// Write
|
||||
|
||||
if (value !== undefined && !$.isFunction(value)) {
|
||||
options = $.extend({}, config.defaults, options);
|
||||
|
||||
if (typeof options.expires === 'number') {
|
||||
var days = options.expires, t = options.expires = new Date();
|
||||
t.setTime(+t + days * 864e+5);
|
||||
}
|
||||
|
||||
return (document.cookie = [
|
||||
encode(key), '=', stringifyCookieValue(value),
|
||||
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
|
||||
options.path ? '; path=' + options.path : '',
|
||||
options.domain ? '; domain=' + options.domain : '',
|
||||
options.secure ? '; secure' : ''
|
||||
].join(''));
|
||||
}
|
||||
|
||||
// Read
|
||||
|
||||
var result = key ? undefined : {};
|
||||
|
||||
// To prevent the for loop in the first place assign an empty array
|
||||
// in case there are no cookies at all. Also prevents odd result when
|
||||
// calling $.cookie().
|
||||
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||
|
||||
for (var i = 0, l = cookies.length; i < l; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var name = decode(parts.shift());
|
||||
var cookie = parts.join('=');
|
||||
|
||||
if (key && key === name) {
|
||||
// If second argument (value) is a function it's a converter...
|
||||
result = read(cookie, value);
|
||||
break;
|
||||
}
|
||||
|
||||
// Prevent storing a cookie that we couldn't decode.
|
||||
if (!key && (cookie = read(cookie)) !== undefined) {
|
||||
result[name] = cookie;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
config.defaults = {};
|
||||
|
||||
$.removeCookie = function (key, options) {
|
||||
if ($.cookie(key) === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Must not alter options, thus extending a fresh object...
|
||||
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
|
||||
return !$.cookie(key);
|
||||
};
|
||||
|
||||
}));
|
||||
Reference in New Issue
Block a user