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

issue #1175, adjustements to css, and some html

Browse Source 
Extra padding added to the inside of plugins and outside
filter input color changed
plugin shadow changed
deactivate and restore options moved to dropdown
TODO change options icon, edit dropdown function to work on each plugin seperately
This commit is contained in:
Hannah
2020-04-28 16:10:16 +02:00
committed by plegall
parent debb840e22
commit 9d2ddc9f1c
2 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/default/template/plugins_installed.tpl
+15 -4
View File
@@ -159,6 +159,12 @@ jQuery(document).ready(function() {
jQuery(".showInactivePlugins button").on('click', showInactivePlugins)
});
});
jQuery(".showOptions").click(function(){
jQuery("#PluginOptionsBlock").toggle();
});
{/literal}
{/footer_script}
@@ -229,7 +235,14 @@ jQuery(document).ready(function() {
<div id="{$plugin.ID}" class="pluginMiniBox {$plugin.STATE}">
<div class="pluginContent">
<a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}"></a>
<div class="PluginOptionsIcons">
<a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}"></a>
<a class="icon-menu showOptions" ></a>
</div>
<div id="PluginOptionsBlock">
<a class="pluginActionLevel2 icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
<a class="pluginActionLevel3 icon-back-in-time" href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>
</div>
<div class="pluginMiniBoxNameCell">
{$plugin.NAME}
</div>
@@ -243,9 +256,6 @@ jQuery(document).ready(function() {
{else}
<div class="pluginUnavailableAction icon-cog">{'Settings'|@translate}</div>
{/if}
<a class="pluginActionLevel2 icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
<a class="pluginActionLevel3 icon-back-in-time" href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>
{elseif $plugin.STATE == 'inactive'}
<div class="pluginEmptyInput"></div>
<a class="pluginActionLevel1 icon-plus" href="{$plugin.U_ACTION}&amp;action=activate" class="activate">{'Activate'|@translate}</a>
@@ -262,6 +272,7 @@ jQuery(document).ready(function() {
{/if}
</div>
</div>
</div> {*<!-- pluginMiniBox -->*}
admin/themes/default/theme.css
+72 -26
View File
@@ -1075,20 +1075,20 @@ h2:lang(en) { text-transform:capitalize; }
.pluginFilter,.pluginBoxesTitle {display: flex;align-items: center}
.pluginFilter p{margin-right: 10px}
.pluginFilter input {padding: 3px}
.pluginFilter INPUT[type="text"] {
padding: 5px;
background-color:#ffffff;
}
.pluginFilter {justify-content: end;position: absolute;right: 20px; z-index: 2;}
.pluginBoxesCount {
background-color: rgb(150, 150, 150);
color: white;
border-radius: 30%;
border-radius: 25px;
text-align: center;
padding-left: 3px;
padding-right: 3px;
height: 20px;
padding: 2px 10px;
font-weight: bold;
font-size: 14px;
width: 25px;
font-size: 12px;
}
.pluginBox {
@@ -1102,31 +1102,29 @@ h2:lang(en) { text-transform:capitalize; }
.pluginBox td {text-align:left;}
.pluginBox td.pluginDesc img {vertical-align:middle;}
.pluginBoxNameCell {width:180px; vertical-align:top;}
.pluginBoxes .inactive, .pluginBoxes .uninstalled {opacity:0.8;filter:alpha(opacity=80);}
.pluginBoxes .inactive, .pluginBoxes .uninstalled {}
.emptyResearch {opacity: 0.3;text-align: center;left: 45%;font-weight: bold;font-size: 30px; position: absolute; display: none;}
.pluginMiniBox {
display:flex;
box-shadow: 1px 1px 1px 1px #d7d7d7;
width:260px;
height:205px;
margin:10px;
border-radius:2px;
-moz-border-radius:2px;
margin:15px 30px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
overflow:hidden;
margin-left: 0;
box-shadow: 0px 0px 5px #d7d7d7;
}
.pluginContent {
width: 98.5%;
width: 100%;
text-align: left;
background-color: #fafafa;
padding: 7px;
padding-top: 10px;
padding-left: 10px;
padding: 15px;
overflow: hidden;
position: relative;
border-left: solid 4px #ffc17e
border-left: solid 5px #ffc17e;
}
.pluginMiniBoxNameCell {
@@ -1144,18 +1142,66 @@ h2:lang(en) { text-transform:capitalize; }
overflow: hidden;
}
.pluginActions {display: flex; font-size:11px; justify-content: space-between; margin-top: 1; bottom: 4px;position: absolute;flex-direction: column; align-items: center; width: 240px;}
.pluginActions > * {padding: 8px; text-align: center; padding-left: 4px; padding-right: 4px; width: 96%; margin: 4px}
.pluginActions a {
margin-top:15px;
font-size:10px;
}
.pluginActions > * {
padding: 10px 4px;
text-align: center;
display:block;
}
.pluginEmptyInput {width: 90px;}
.pluginUnavailableAction {opacity: 0.5;}
.pluginUnavailableAction {
opacity: 0.5;
font-size: 10px;
padding: 10px 4px;
margin: 15px 0;
}
.pluginActionLevel1 {background-color: #ffc17e; font-weight: bold;}
.pluginActionLevel1:hover {background-color: #ff7700; color: white; text-decoration: none;}
.pluginActionLevel2 {background-color: #ececec; font-weight: bold;}
.pluginActionLevel2:hover {background-color: #8b8b8b; color: white; text-decoration: none; }
.pluginActionLevel3 {padding-left: 10px; opacity: 0.9;}
.plugin-inactive .pluginContent {border-color: #8b8b8b}
.pluginActionLevel2 {padding:5px 0;}
.pluginActionLevel3 {/*padding-left: 10px; opacity: 0.9;*/padding:5px 0}
.plugin-inactive .pluginContent{
border:none;
/*border-radius:10px;*/
}
.pluginMiniBox .showInfo, .themeBox .showInfo { display:block;position:absolute;top:0;right:5px;width:15px; padding: 10px;}
.plugin-inactive .pluginMiniBox{
border-radius:10px;
}
.plugin-inactive .pluginContent .pluginActionLevel1{
background-color: #ececec;
}
.plugin-inactive .pluginContent .pluginActionLevel1:hover{
background-color:#ffc17e;
}
.pluginMiniBox .PluginOptionsIcons,
.themeBox .PluginOptionsIcons{
display:block;
position:absolute;
top:0;
right:0px;
padding: 13px;}
#PluginOptionsBlock{
display:none;
position:absolute;
right: 0;
top: 30px;
background-color:white;
z-index:2;
padding:5px 10px;
box-shadow: 0px 0px 5px #d7d7d7;
}
#PluginOptionsBlock a{
display:block;
}
.warning:before {content:url(icon/warning.png);vertical-align:top;}
.deactivate_all {font-size: 11px;font-weight: normal; margin-top: -5px; margin-bottom: 5px; font-weight: bold;opacity: 0.6;}