From 6d9e1f3f8ef41ab72cea5838f52ed2f6f707d93f Mon Sep 17 00:00:00 2001 From: Zacharie Date: Wed, 5 Aug 2020 13:04:33 +0200 Subject: [PATCH] Redesign theme page (based on Hannah mock-up) --- admin/themes/clear/theme.css | 8 ++- .../default/template/themes_installed.tpl | 71 +++++++++++-------- admin/themes/default/template/themes_new.tpl | 10 +-- admin/themes/default/theme.css | 41 +++++++---- admin/themes/roma/theme.css | 9 +-- 5 files changed, 84 insertions(+), 55 deletions(-) diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index 3b13dcf63..085763f88 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -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;} diff --git a/admin/themes/default/template/themes_installed.tpl b/admin/themes/default/template/themes_installed.tpl index 1c44f63ed..c69baf5c9 100644 --- a/admin/themes/default/template/themes_installed.tpl +++ b/admin/themes/default/template/themes_installed.tpl @@ -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}
@@ -33,9 +41,9 @@ jQuery(document).ready(function() {
{if $theme.STATE == 'active'} - {'Active Themes'|@translate} + {'Active Themes'|@translate} {else} - {'Inactive Themes'|@translate} + {'Inactive Themes'|@translate} {/if}
@@ -56,25 +64,34 @@ jQuery(document).ready(function() { {/if}
-
- {$theme.NAME} {if $theme.IS_DEFAULT}({'default'|@translate}){/if} {if $theme.IS_MOBILE}({'Mobile'|@translate}){/if} - -
+
+ {$theme.NAME} {if $theme.IS_DEFAULT}({'default'|@translate}){/if} {if $theme.IS_MOBILE}({'Mobile'|@translate}){/if} + +
+
+
+ {if !empty($author)} + {'By %s'|@translate:$author} | + {/if} + {'Version'|@translate} {$version} +
+
+ {$theme.DESC|@escape:'html'} +
+ {if $theme.DEACTIVABLE} + {'Deactivate'|@translate} + {/if} +
-
{if $theme.STATE == 'active'} - {if $theme.DEACTIVABLE} - {'Deactivate'|@translate} - {else} - {'Deactivate'|@translate} - {/if} - - {if not $theme.IS_DEFAULT} - | {'Default'|@translate} - {/if} {if $theme.ADMIN_URI} -
{'Configuration'|@translate} + {'Configuration'|@translate} + {/if} + {if not $theme.IS_DEFAULT} + {'Set default'|@translate} + {else} + {'Set default'|@translate} {/if} {else} {if $theme.ACTIVABLE} @@ -82,14 +99,12 @@ jQuery(document).ready(function() { {else} {'Activate'|@translate} {/if} - | {if $theme.DELETABLE} - {'Delete'|@translate} + {'Delete'|@translate} {else} - {'Delete'|@translate} + {'Delete'|@translate} {/if} {/if} -
diff --git a/admin/themes/default/template/themes_new.tpl b/admin/themes/default/template/themes_new.tpl index d897deabb..dd86f96a0 100644 --- a/admin/themes/default/template/themes_new.tpl +++ b/admin/themes/default/template/themes_new.tpl @@ -11,11 +11,11 @@ jQuery(document).ready(function() { {if not empty($new_themes)}
{foreach from=$new_themes item=theme name=themes_loop} -
-
{$theme.name}
-
-
{'Install'|@translate}
-
+
+
+
{$theme.name}
+
{'Install'|@translate}
+
{/foreach}
{else} diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 825790267..c31b63000 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -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 */ diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index c6d8bc739..3731315d7 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -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; }