adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-08-09 02:03:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Redesign and bug fix on theme page

Browse Source
This commit is contained in:
Zacharie
2020-08-06 14:32:08 +02:00
parent 76845da496
commit 74c5117f32
6 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/clear/theme.css
+2 -1
View File
@@ -210,7 +210,8 @@ INPUT[type="text"].large { width: 317px; }
.themeName {color:black;}
.themeActions span {background-color: #ddd;}
#themesContent H3 {border-bottom:1px solid #aaa;}
.themeDefault {}
.themeSelect {background-color: #fafafa;}
.themeDefault {background-color: #ffd7ad;}
#pluginsMenuSeparator {border:1px solid #555;}
admin/themes/default/template/configuration_main.tpl
+3 -3
View File
@@ -57,8 +57,8 @@
jQuery(".themeBoxes a").colorbox();
jQuery("input[name='mail_theme']").change(function() {
jQuery("input[name='mail_theme']").parents(".themeBox").removeClass("themeDefault");
jQuery(this).parents(".themeBox").addClass("themeDefault");
jQuery("input[name='mail_theme']").parents(".themeSelect").removeClass("themeDefault");
jQuery(this).parents(".themeSelect").addClass("themeDefault");
});
{/footer_script}
@@ -188,7 +188,7 @@ jQuery("input[name='mail_theme']").change(function() {
<div class="themeBoxes font-checkbox">
{foreach from=$main.mail_theme_options item=name key=theme}
<div class="themeBox {if $main.mail_theme==$theme}themeDefault{/if}">
<div class="themeSelect {if $main.mail_theme==$theme}themeDefault{/if}">
<label class="font-checkbox">
<div class="themeName">
<span class="icon-dot-circled"></span>
admin/themes/default/template/themes_installed.tpl
+13 -11
View File
@@ -7,22 +7,24 @@ jQuery(document).ready(function() {
$('.themeBox').each(function() {
let screenImage = $(this).find(".preview-box img");
let size = $(this).find(".preview-box").width();
screenImage.on( 'load', () => {
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
let theImage = new Image();
theImage.src = screenImage.attr("src");
console.log(screenImage.innerHeight())
if (theImage.width > theImage.height) {
screenImage.css('height', size+'px');
screenImage.css('width', (theImage.width * size / theImage.height)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('heigth', (theImage.height * size / theImage.width)+'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');
}
});
let box = $(this);
box.find('.showInfo').on('click', function() {
console.log('click')
box.find('.showInfo-dropdown').fadeToggle();
});
})
admin/themes/default/template/themes_new.tpl
+15 -12
View File
@@ -7,18 +7,21 @@ jQuery(document).ready(function() {
$('.themeBox').each(function() {
let screenImage = $(this).find(".preview-box img");
let size = $(this).find(".preview-box").width();
screenImage.on( 'load', () => {
let imageW = screenImage.innerWidth();
let imageH = screenImage.innerHeight();
let size = $(this).find(".preview-box").innerWidth();
let theImage = new Image();
theImage.src = screenImage.attr("src");
console.log(screenImage.innerHeight())
if (theImage.width > theImage.height) {
screenImage.css('height', size+'px');
screenImage.css('width', (theImage.width * size / theImage.height)+'px');
} else {
screenImage.css('width', size+'px');
screenImage.css('height', (theImage.height * size / theImage.width)+'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}
@@ -29,8 +32,8 @@ jQuery(document).ready(function() {
{if not empty($new_themes)}
<div class="themeBoxes">
{foreach from=$new_themes item=theme name=themes_loop}
<div class="themeBox add-theme">
<div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.thumbnail}" onerror="this.src='{$default_screenshot}'"></a></div>
<div class="themeBox">
<div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.screenshot}" onerror="this.src='{$default_screenshot}'"></a></div>
<div class="themeName" title="{$theme.name}">{$theme.name}</div>
<div class="themeActions"><a href="{$theme.install_url}">{'Install'|@translate}</a></div>
</div>
admin/themes/default/theme.css
+1 -2
View File
@@ -1478,14 +1478,13 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
.themeBox {display: inline-table;text-align: center;height: 192px;margin: 0px 0px 15px 15px; position: relative;}
.themeShot a {height: 200px; width: 200px; position: relative; overflow: hidden; display: block;}
.add-theme .themeShot a {height: 140px !important; width: 140px !important;}
.themeBox IMG {margin:0px; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.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;}
.add-theme .themeName {max-width: 120px}
.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;}
.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-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;}
admin/themes/roma/theme.css
+3
View File
@@ -279,6 +279,9 @@ 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;}
.themeActions A {border-bottom:none;}
.themeActions span {background-color: #888888;color: #666666;}
.showInfo-dropdown-header a {color:#3A3A3A}