Fix bugs and fix design of the theme manager

This commit is contained in:
Zacharie
2020-08-07 14:29:15 +02:00
parent 74c5117f32
commit 8283baf685
5 changed files with 46 additions and 52 deletions
+1 -1
View File
@@ -211,7 +211,7 @@ INPUT[type="text"].large { width: 317px; }
.themeActions span {background-color: #ddd;}
#themesContent H3 {border-bottom:1px solid #aaa;}
.themeSelect {background-color: #fafafa;}
.themeDefault {background-color: #ffd7ad;}
.themeSelect.themeDefault {background-color: #ffd7ad;}
#pluginsMenuSeparator {border:1px solid #555;}
@@ -4,31 +4,6 @@
jQuery(document).ready(function() {
$("a.preview-box").colorbox();
$('.themeBox').each(function() {
let screenImage = $(this).find(".preview-box img");
screenImage.on( 'load', () => {
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
console.log(screenImage.innerHeight())
if (imageW > imageH) {
screenImage.css('height', size+'px');
screenImage.css('width', (imageW * size / imageH)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('heigth', (imageH * size / imageW)+'px');
}
});
let box = $(this);
box.find('.showInfo').on('click', function() {
box.find('.showInfo-dropdown').fadeToggle();
});
})
$(document).mouseup(function (e) {
e.stopPropagation();
if (!$(event.target).hasClass('showInfo')) {
@@ -38,6 +13,35 @@ jQuery(document).ready(function() {
});
$(window).bind("load", function() {
$('.themeBox').each(function() {
let box = $(this);
box.find('.showInfo').on('click', function() {
let dropdown = box.find('.showInfo-dropdown');
$('.showInfo-dropdown').each(function() {
if ($(this) !== dropdown) {
$(this).fadeOut();
}
})
box.find('.showInfo-dropdown').fadeToggle();
});
let screenImage = $(this).find(".preview-box img");
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
if (imageW > imageH) {
screenImage.css('height', size+'px');
screenImage.css('width', (imageW * size / imageH)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('heigth', (imageH * size / imageW)+'px');
}
})
})
{/literal}{/footer_script}
<div class="titrePage">
+12 -18
View File
@@ -1,29 +1,23 @@
{include file='include/colorbox.inc.tpl'}
{footer_script}{literal}
jQuery(document).ready(function() {
$("a.preview-box").colorbox();
$(window).bind("load", function() {
$('.themeBox').each(function() {
let screenImage = $(this).find(".preview-box img");
screenImage.on( 'load', () => {
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
console.log(screenImage.innerHeight())
if (imageW > imageH) {
screenImage.css('height', size+'px');
screenImage.css('width', (imageW * size / imageH)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('heigth', (imageH * size / imageW)+'px');
}
});
if (imageW > imageH) {
screenImage.css('height', size+'px');
screenImage.css('width', (imageW * size / imageH)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('heigth', (imageH * size / imageW)+'px');
}
})
});
})
{/literal}{/footer_script}
<div class="titrePage">
<h2>{'Add New Theme'|@translate}</h2>
+2 -6
View File
@@ -1483,9 +1483,10 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
.themeName {font-size:14px; margin:10px; position:relative; text-transform: capitalize; font-weight: bold; text-align: left; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;}
.themeName em {font-weight: normal;}
.themeName .showInfo {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.themeBox .showInfo-dropdown {position: absolute; right: 0px; transform: translateX(38%); display: none; text-align: left; padding-bottom: 0;}
.themeBox .showInfo-dropdown {position: absolute; right: 0px; transform: translateX(40%); display: none; text-align: left; padding-bottom: 0;}
.themeSelect {box-shadow: 0px 2px 1px #00000024; display: inline-block; text-align: center; padding: 0px 10px 8px 10px; margin-right: 10px; transition: 0.4s ease;}
.showInfo-dropdown-header {padding: 5px 10px; white-space: nowrap; font-weight: bold; font-size: 12px;}
.showInfo-dropdown-header a:hover {color: white;}
.showInfo-dropdown-content {padding: 5px 10px}
.showInfo-dropdown-action {padding: 8px 10px; border-top: 1px solid #ffffff45; color: white; text-decoration: none !important; display: block; margin-top: 5px; border-radius: 0px 0px 10px 10px; font-weight: bold;}
.showInfo-dropdown-action:hover {background-color: rgba(0, 0, 0, 0.192); color: white;}
@@ -2977,11 +2978,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
}
/* Selection mode */
.content div.titrePage{
padding-top:35px;
}
.selection-mode-group-manager{
position:absolute;
right:15px;
+2 -2
View File
@@ -280,8 +280,8 @@ a.stat-box:hover {
.themeBox {background-color:#333;}
.themeName {color:#ccc;}
.themeSelect {background-color: #333; box-shadow: none;}
.themeDefault {background-color: #f9852c;}
.themeDefault a, .themeDefault span, .themeDefault .themeName{ color:#333;}
.themeSelect.themeDefault {background-color: #f9852c;}
.themeSelect.themeDefault a, .themeSelect.themeDefault span, .themeSelect.themeDefault .themeName{ color:#333;}
.themeActions A {border-bottom:none;}
.themeActions span {background-color: #888888;color: #666666;}
.showInfo-dropdown-header a {color:#3A3A3A}