adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-07-20 00:23:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Redesign theme page (based on Hannah mock-up)

Browse Source
This commit is contained in:
Zacharie
2020-08-05 13:04:33 +02:00
parent b2b1c4acda
commit 6d9e1f3f8e
5 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/clear/theme.css
+5 -3
View File
@@ -206,11 +206,13 @@ INPUT[type="text"].large { width: 317px; }
*+html .bigbutton input, * html .bigbutton input { left:0px; position:relative; top:-40px; }
* html .bigtext { margin-right: 300px; }
.themeBox {background-color:#ddd;}
.themeBox IMG {border:1px solid white;}
.themeBox {background-color:#fafafa; box-shadow: 0px 0px 5px #acacac;}
.themeName {color:black;}
.themeActions span {background-color: #ddd;}
.themeActions a {background-color: #ffc17e; color: #222;}
.themeActions a:hover {background-color: #ff7700; color: white; text-decoration: none;}
#themesContent H3 {border-bottom:1px solid #aaa;}
.themeDefault {background-color:#dbe8f3;}
.themeDefault {}
#pluginsMenuSeparator {border:1px solid #555;}
admin/themes/default/template/themes_installed.tpl
+43 -28
View File
@@ -4,15 +4,23 @@
jQuery(document).ready(function() {
$("a.preview-box").colorbox();
jQuery('.showInfo').tipTip({
'delay' : 0,
'fadeIn' : 200,
'fadeOut' : 200,
'maxWidth':'300px',
'keepAlive':true,
'activation':'click'
$('.themeBox').each(function() {
let box = $(this);
box.find('.showInfo').on('click', function() {
console.log('click')
box.find('.showInfo-dropdown').fadeToggle();
});
})
$(document).mouseup(function (e) {
e.stopPropagation();
if (!$(event.target).hasClass('showInfo')) {
$('.showInfo-dropdown').fadeOut();
}
});
});
{/literal}{/footer_script}
<div class="titrePage">
@@ -33,9 +41,9 @@ jQuery(document).ready(function() {
<fieldset>
<legend>
{if $theme.STATE == 'active'}
{'Active Themes'|@translate}
<span class="icon-purple icon-toggle-on"></span>{'Active Themes'|@translate}
{else}
{'Inactive Themes'|@translate}
<span class="icon-yellow icon-toggle-off"></span>{'Inactive Themes'|@translate}
{/if}
</legend>
<div class="themeBoxes">
@@ -56,25 +64,34 @@ jQuery(document).ready(function() {
{/if}
<div class="themeBox{if $theme.IS_DEFAULT} themeDefault{/if}">
<div class="themeName">
{$theme.NAME} {if $theme.IS_DEFAULT}<em>({'default'|@translate})</em>{/if} {if $theme.IS_MOBILE}<em>({'Mobile'|@translate})</em>{/if}
<a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}<br/>{$theme.DESC|@escape:'html'}"></a>
</div>
<div class="themeShot"><a href="{$theme.SCREENSHOT}" class="preview-box" title="{$theme.NAME}"><img src="{$theme.SCREENSHOT}" alt=""></a></div>
<div class="themeName" title="{$theme.NAME}">
{$theme.NAME} {if $theme.IS_DEFAULT}<em>({'default'|@translate})</em>{/if} {if $theme.IS_MOBILE}<em>({'Mobile'|@translate})</em>{/if}
<a class="icon-ellipsis-v showInfo"></a>
</div>
<div class="showInfo-dropdown dropdown">
<div class="showInfo-dropdown-header">
{if !empty($author)}
{'By %s'|@translate:$author} |
{/if}
{'Version'|@translate} {$version}
</div>
<div class="showInfo-dropdown-content">
{$theme.DESC|@escape:'html'}
</div>
{if $theme.DEACTIVABLE}
<a href="{$deactivate_baseurl}{$theme.ID}" class="showInfo-dropdown-action tiptip icon-cancel-circled" title="{'Forbid this theme to users'|@translate}">{'Deactivate'|@translate}</a>
{/if}
</div>
<div class="themeActions">
<div>
{if $theme.STATE == 'active'}
{if $theme.DEACTIVABLE}
<a href="{$deactivate_baseurl}{$theme.ID}" class="tiptip" title="{'Forbid this theme to users'|@translate}">{'Deactivate'|@translate}</a>
{else}
<span title="{$theme.DEACTIVATE_TOOLTIP}" class="tiptip">{'Deactivate'|@translate}</span>
{/if}
{if not $theme.IS_DEFAULT}
| <a href="{$set_default_baseurl}{$theme.ID}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Default'|@translate}</a>
{/if}
{if $theme.ADMIN_URI}
<br><a href="{$theme.ADMIN_URI}" class="tiptip" title="{'Configuration'|@translate}">{'Configuration'|@translate}</a>
<a href="{$theme.ADMIN_URI}" class="icon-cog">{'Configuration'|@translate}</a>
{/if}
{if not $theme.IS_DEFAULT}
<a href="{$set_default_baseurl}{$theme.ID}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Set default'|@translate}</a>
{else}
<span class="tiptip" title="{'Theme is already set to default'|@translate}">{'Set default'|@translate}</span>
{/if}
{else}
{if $theme.ACTIVABLE}
@@ -82,14 +99,12 @@ jQuery(document).ready(function() {
{else}
<span title="{$theme.ACTIVABLE_TOOLTIP}" class="tiptip">{'Activate'|@translate}</span>
{/if}
|
{if $theme.DELETABLE}
<a href="{$delete_baseurl}{$theme.ID}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');" title="{'Delete this theme'|@translate}">{'Delete'|@translate}</a>
<a href="{$delete_baseurl}{$theme.ID}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'Delete'|@translate}</a>
{else}
<span title="{$theme.DELETE_TOOLTIP}" class="tiptip">{'Delete'|@translate}</span>
<span title="{$theme.DELETE_TOOLTIP}">{'Delete'|@translate}</span>
{/if}
{/if}
</div>
</div> <!-- themeActions -->
</div>
admin/themes/default/template/themes_new.tpl
+5 -5
View File
@@ -11,11 +11,11 @@ jQuery(document).ready(function() {
{if not empty($new_themes)}
<div class="themeBoxes">
{foreach from=$new_themes item=theme name=themes_loop}
<div class="themeBox">
<div class="themeName">{$theme.name}</div>
<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="themeActions"><a href="{$theme.install_url}">{'Install'|@translate}</a></div>
</div>
<div class="themeBox">
<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="themeName" title="{$theme.name}">{$theme.name}</div>
<div class="themeActions"><a href="{$theme.install_url}">{'Install'|@translate}</a></div>
</div>
{/foreach}
</div> <!-- themeBoxes -->
{else}
admin/themes/default/theme.css
+29 -12
View File
@@ -6,7 +6,7 @@
/* content.css */
[class*="icon-"]:before { text-decoration:none !important; }
.showInfo { font-size:15px;cursor:pointer;line-height:15px; }
.showInfo { font-size:15px;cursor:pointer;line-height:15px; display: flex; align-items: center;}
/* .Content is on every pages so it is common and it will no longer be a specific css */
.content h2 {margin: 0; padding: 5px 0.5em 5px 0.5em; text-align: right; font-size: 120%;}
@@ -1476,15 +1476,31 @@ margin-top:4px; padding-bottom:3px; padding-top:3px; top:1px;
#thePopuphelpPage #pwgHead {display:none}
#thePopuphelpPage #footer {display:none}
.themeBox {display:inline-table; text-align:center; height:192px; background-color:#eee; margin:5px; border-radius:5px; overflow:hidden; }
.themeBox {display: inline-table;text-align: center;height: 192px;margin: 0px 0px 15px 15px;overflow: hidden; position: relative;}
.themeShot a {height: 140px; width: 200px; position: relative; overflow: hidden; display: block;}
.themeBox IMG {border:1px solid white; margin:0 15px;}
.themeName {font-size:1em; margin:5px 0; position:relative; }
.themeActions {display: table-row; font-size:12px; height: 43px; }
.themeActions DIV {display: table-cell; vertical-align: middle; line-height:18px; }
.themeActions A {}
.themeBox IMG {margin:0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-height: 100%;}
.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;}
.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;}
.showInfo-dropdown-action:hover {background-color: rgba(0, 0, 0, 0.192); color: white;}
.themeActions {display: flex;flex-direction: column; color: white;}
.themeActions DIV {display: table-cell; vertical-align: middle; line-height:18px;}
.themeActions span, .themeActions a {padding: 6px 5px; margin: 0px 10px 10px 10px; font-weight: bold; font-size: 12px;}
.themeActions a {background-color: #ffc17e; color: #222;}
.themeActions a:hover {background-color: #ff7700; color: white; text-decoration: none;}
#themesContent .themeBox IMG {width:150px; height:120px;}
#themesContent H3 {font-size:16px; text-align:left; border-bottom:1px solid #444; letter-spacing:1px; margin:5px;}
.themeBoxes {min-height:0;text-align:left;}
@@ -1699,11 +1715,12 @@ h2:lang(en) { text-transform:capitalize; }
.pluginMiniBox .PluginOptionsIcons,
.themeBox .PluginOptionsIcons{
display:block;
display:flex;
position:absolute;
top:0;
right:-6px;
padding: 13px;}
padding: 13px;
}
.PluginOptionsBlock{
@@ -1817,10 +1834,10 @@ LEGEND {
}
LEGEND SPAN {
padding: 2px;
padding: 4px;
border-radius: 100%;
margin-right: 6px;
font-size: 18px;
font-size: 16px;
}
/* Batch Manager, global mode */
admin/themes/roma/theme.css
+2 -7
View File
@@ -278,11 +278,10 @@ a.stat-box:hover {
* html .bigtext { margin-right: 300px; }
.themeBox {background-color:#333;}
.themeBox IMG {border:1px solid #666;}
.themeName {color:#ccc;}
.themeActions A {border-bottom:none;}
.themeDefault {background-color:#555;}
.themeActions span {background-color: #888888;color: #666666;}
.showInfo-dropdown-header a {color:#3A3A3A}
#pluginsMenuSeparator {border:1px solid #333;}
#helpContent, #pLoaderPage, #ftpPage, #ftpPage LEGEND {color:#aaa;}
@@ -730,10 +729,6 @@ input:focus + .slider {
}
#configContent fieldset:not(.no-border) {
border-top-color:#444;
}
table.dataTable tr.even {
background-color: #111 !important;
}