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

Design fix and clean css

Browse Source 
* Add a dark mode to the tag manager
 * Change design of the select number tag per page to correspond to the tag manager
 * Small design fixes
 * Clean and reorder css files
This commit is contained in:
Zacharie
2020-07-09 16:48:10 +02:00
parent 842a8dff45
commit 9dc29c0252
8 changed files with 659 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/clear/theme.css
+5 -4
View File
@@ -279,6 +279,7 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
#batchManagerGlobal fieldset {
margin: 0;
margin-top: 30px;
border: none;
}
/* beta-test ends */
@@ -722,15 +723,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
}
#filterList .ui-slider .ui-slider-range {background: rgba(255,166,70, 0.9); margin-top: -1px; border: 1px solid #ffaf58;}
#filterList .ui-widget-content {border: 1px solid #EEE; background: #DDD;}
.navigationBar, .thumbnailsActionsNumber, .navigationBar a,
.navigationBar span, .thumbnailsActionsNumber a, .thumbnailsActionsNumber span {
.navigationBar, .navigationBar a,
.navigationBar span {
background-color: #f9f9f9; border-radius: 10px;
}
.navigationBar a:hover, .thumbnailsActionsNumber a:hover {background-color: #ffd2a1;}
.navigationBar a:hover {background-color: #ffd2a1;}
#batchManagerGlobal option[disabled] {background-color: #EEE;}
.dimension-cancel {background-color: #F8F8F8 !important;}
.pageNumberSelected {color: #FFF !important; font-weight: bold;}
.navigationBar span, .thumbnailsActionsNumber span {
.navigationBar span {
color: #BBB;
}
#batchManagerGlobal .ui-state-default, #batchManagerGlobal .ui-widget-content .ui-state-default,#batchManagerGlobal .ui-widget-header .ui-state-default {
admin/themes/default/js/group_list.js
+1 -1
View File
@@ -151,7 +151,7 @@ var setupGroupBox = function (groupBox) {
groupBox.find(".Group-checkbox input[type='checkbox']").attr("checked", false)
/* Display the option on the click on "..." */
groupBox.find(".group-dropdown-options").click(function GroupOptions() {
groupBox.find(".dropdown-option").click(function GroupOptions() {
$(this).find("#GroupOptions").toggle();
});
admin/themes/default/js/tags.js
+11 -11
View File
@@ -854,7 +854,7 @@ function promiseFinish() {
}
function updatePaginationMenu() {
$('.tag-pagination-container').html('');
$('.pagination-item-container').html('');
actualPage = Math.min(actualPage, getNumberPages());
@@ -895,7 +895,7 @@ function createPaginationMenu() {
function appendPaginationItem(page = null) {
if (page != null) {
let newTag = $(pageItem.replace(/%d/g, page))
$('.tag-pagination-container').append(newTag);
$('.pagination-item-container').append(newTag);
if (actualPage == page) {
newTag.addClass('actual');
}
@@ -904,21 +904,21 @@ function appendPaginationItem(page = null) {
updatePaginationMenu();
})
} else {
$('.tag-pagination-container').append($(pageEllipsis));
$('.pagination-item-container').append($(pageEllipsis));
}
}
function updateArrows() {
if (actualPage == 1) {
$('.tag-pagination-arrow.left').addClass('unavailable');
$('.pagination-arrow.left').addClass('unavailable');
} else {
$('.tag-pagination-arrow.left').removeClass('unavailable');
$('.pagination-arrow.left').removeClass('unavailable');
}
if (actualPage == getNumberPages()) {
$('.tag-pagination-arrow.rigth').addClass('unavailable');
$('.pagination-arrow.rigth').addClass('unavailable');
} else {
$('.tag-pagination-arrow.rigth').removeClass('unavailable');
$('.pagination-arrow.rigth').removeClass('unavailable');
}
}
@@ -997,11 +997,11 @@ function tagToDisplay() {
.slice((actualPage-1)*per_page, (actualPage)*per_page);
}
$('.tag-pagination-arrow.rigth').on('click', () => {
$('.pagination-arrow.rigth').on('click', () => {
movePage();
})
$('.tag-pagination-arrow.left').on('click', () => {
$('.pagination-arrow.left').on('click', () => {
movePage(false);
})
@@ -1013,8 +1013,8 @@ if (getNumberPages() > 1) {
$('.tag-pagination').hide();
}
$('.tag-pagination-select input[type="radio"]').on('click',function () {
per_page = parseInt($(this).val());
$('.pagination-per-page a').on('click',function () {
per_page = parseInt($(this).html());
updatePaginationMenu();
})
admin/themes/default/template/batch_manager_global.tpl
+2 -2
View File
@@ -593,8 +593,8 @@ UL.thumbnails SPAN.wrap2 {ldelim}
{include file='navigation_bar.tpl'|@get_extent:'navbar'}
</div>
<div style="float:right;margin-top:30px; margin-right: 46px;" class="thumbnailsActionsNumber">
<span class="thumbnailsActionsShow" style="font-weight: bold;">{'display'|@translate}</span>
<div style="float:right;margin-top:30px; margin-right: 46px;" class="pagination-per-page">
<span>{'display'|@translate}</span>
<a href="{$U_DISPLAY}&amp;display=20">20</a>
<a href="{$U_DISPLAY}&amp;display=50">50</a>
<a href="{$U_DISPLAY}&amp;display=100">100</a>
admin/themes/default/template/batch_manager_unit.tpl
+2 -2
View File
@@ -42,8 +42,8 @@ jQuery("a.preview-box").colorbox( {
<div style="margin-left: 22px;">
{if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
</div>
<div style="margin-right: 21px;" class="thumbnailsActionsNumber">
<span class="thumbnailsActionsShow" style="font-weight: bold;color: unset;">{'photos per page'|@translate} :</span>
<div style="margin-right: 21px;" class="pagination-per-page">
<span style="font-weight: bold;color: unset;">{'photos per page'|@translate} :</span>
<a href="{$U_ELEMENTS_PAGE}&amp;display=5">5</a>
<a href="{$U_ELEMENTS_PAGE}&amp;display=10">10</a>
<a href="{$U_ELEMENTS_PAGE}&amp;display=50">50</a>
admin/themes/default/template/tags.tpl
+16 -17
View File
@@ -164,24 +164,23 @@ var str_tag_found = '{'<b>%d</b> tag found'|@translate}';
</div>
<div class="emptyResearch"> {'No tag found'|@translate} </div>
<div class="tag-pagination">
<div class="tag-pagination-arrow left">
<span class="icon-left-open"></span>
<div class="pagination-container">
<div class="pagination-arrow left">
<span class="icon-left-open"></span>
</div>
<div class="pagination-item-container">
</div>
<div class="pagination-arrow rigth">
<span class="icon-left-open"></span>
</div>
</div>
<div class="tag-pagination-container">
</div>
<div class="tag-pagination-arrow rigth">
<span class="icon-left-open"></span>
</div>
<p> {'Tags per page'} </p>
<div class="tag-pagination-select" tabindex="1">
<input name="per-page" type="radio" id="select-100" checked value="100">
<label for="select-100">100</label>
<input name="per-page" type="radio" id="select-200" checked='false' value="200">
<label for="select-200">200</label>
<input name="per-page" type="radio" id="select-500" value="500">
<label for="select-500">500</label>
<input name="per-page" type="radio" id="select-1000" value="1000">
<label for="select-1000">1000</label>
<div class="pagination-per-page">
<span class="thumbnailsActionsShow" style="font-weight: bold;">Afficher</span>
<a>100</a>
<a>200</a>
<a>500</a>
<a>1000</a>
</div>
</div>
admin/themes/default/theme.css
+566 -589
View File
File diff suppressed because it is too large Load Diff
admin/themes/roma/theme.css
+56 -10
View File
@@ -126,6 +126,30 @@ ul.actions, .content form#waiting {text-align:center;}
color: #8d8d8d;
}
/* Filter */
.search-input {
background-color: #333 !important;
}
.search-input:hover {
background-color: #222 !important;
}
/* Pagination */
.pagination-per-page {
background-color: #555;
}
.pagination-per-page span {
color: #777;
}
.pagination-per-page a:hover {
background-color: #888; color: #444;
}
/* jQuery tooltips */
.ui-tooltip {
color: #eee;
@@ -448,11 +472,6 @@ label>p.group_select {
color:#c0c0c0;
}
.groups #GroupPermission:hover,
.group-dropdown-option:hover{
background-color:#393939;
}
/*Group manager buttons*/
.groups .manage-users,
@@ -796,7 +815,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
color: #C0C0C0;
border: none!important;
}
#batchManagerGlobal fieldset {margin: 0; margin-top: 30px;}
#batchManagerGlobal fieldset {margin: 0; margin-top: 30px; border:none}
#permitAction select {background: #3C3C3C; color: #C0C0C0;}
#action_associate a:last-child {color: #C0C0C0; background-color: #464646;}
#forbidAction, .selectionEmptyBlock {background-color: #f3f3f3;}
@@ -807,17 +826,17 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
text-decoration: none; background-color: #ffa646 !important; color: initial;
}
#forbidAction, .selectionEmptyBlock {background-color: #5a5757; color: #c1c1c1;}
.navigationBar, .thumbnailsActionsNumber, .navigationBar a,
.navigationBar span, .thumbnailsActionsNumber a, .thumbnailsActionsNumber span {
.navigationBar, .navigationBar a,
.navigationBar span {
background-color: #555; border-radius: 10px;
}
.pageNumberSelected {background-color: #b4b4b4;}
.navigationBar a:hover, .thumbnailsActionsNumber a:hover {background-color: #888; color: #444;}
.navigationBar a:hover {background-color: #888; color: #444;}
#action_title .large, #action_author .large {background-color: #333; color: #fefefe;}
#addFilter optgroup, #batchManagerGlobal option[disabled] {background-color: #555;}
.dimension-cancel {background-color: #555 !important;}
.pageNumberSelected {color: #777 !important; font-weight: bold;}
.navigationBar span, .thumbnailsActionsNumber span {
.navigationBar span {
color: #777;
}
#batchManagerGlobal .ui-state-default, #batchManagerGlobal .ui-widget-content .ui-state-default,#batchManagerGlobal .ui-widget-header .ui-state-default {
@@ -929,6 +948,33 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
background: #333 !important;
}
/* Tag Manager */
.tag-box,
.tag-header #add-tag:not(.input-mode) .add-tag-label,
.tag-header .selection-controller a{
background-color: #333 !important;
}
.tag-header #add-tag.input-mode .add-tag-container input:hover {
background-color: #222 !important;
}
.tag-container.selection .tag-box[data-selected="1"] {
background-color: #f9852c !important;
box-shadow: none;
}
.tag-select-message {
background: #0051a57d;
color: #bce5f7;
}
.tag-select-message a {
background-color: #bce5f7;
color: #0051a5;
}
/* Icon colors*/
.icon-red {