diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index b20052039..5a313df13 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -418,7 +418,7 @@ label>p.group_select { /*UserList Pop in*/ -.UserListPopInContainer{ +.UserListPopInContainer, .SearchModalContainer{ background-color:white; border-radius:10px; @@ -571,7 +571,7 @@ input:focus + .slider { /*UserList Pop in*/ -.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum, .CloseRenameAlbum { +.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum, .CloseRenameAlbum, .CloseSearchModal { color:white; } diff --git a/admin/themes/default/template/include/batch_manager_filter.inc.tpl b/admin/themes/default/template/include/batch_manager_filter.inc.tpl index eaab894ce..e5f83db6b 100644 --- a/admin/themes/default/template/include/batch_manager_filter.inc.tpl +++ b/admin/themes/default/template/include/batch_manager_filter.inc.tpl @@ -202,6 +202,7 @@ var sliders = { {/if} +{include file='include/search_modal.inc.tpl'}
  • diff --git a/admin/themes/default/template/include/search_modal.inc.tpl b/admin/themes/default/template/include/search_modal.inc.tpl new file mode 100644 index 000000000..cd91c314d --- /dev/null +++ b/admin/themes/default/template/include/search_modal.inc.tpl @@ -0,0 +1,142 @@ +{footer_script} +$(document).ready(function () { + + function open_search_modal() { + $("#HelpSearchModal").fadeIn(); +} + +}); +{/footer_script} + +
    +
    + {'Search with extended syntax'|@translate} +
    {'The quick search engine allows the use of Boolean operators to refine your search. By default, the search applies to all keywords. Searches are not case-sensitive. Here is a list of actions you can perform :'|@translate}
    + {'With keywords'|@translate} + +
    +
    +

    {'Keywords in quotes'|@translate}

    + "captain haddock" +
    +
    {'Use quotes to search for an exact word or phrase'|@translate}
    +
    + +
    +
    +

    {'inclusive OR'|@translate}

    + "alain **OR** bernard" +
    +
    {'Use OR between keywords to get results containing one or the other'|@translate}
    +
    + +
    +
    +

    {'Exclusion'|@translate}

    + - "NOT keyword" +
    +
    {'Use a minus sign (-) or NOT before a keyword to exclude it from the search. Note that NOT acts as a filter. You cannot use only NOT operators and cannot combine OR and NOT'|@translate}
    +
    + +
    +
    +

    {'Grouping'|@translate}

    + (parentheses) +
    +
    {'Use parentheses to group keywords with AND/OR conditions'|@translate}
    +
    + + {'By Filters'|@translate} + +
    +
    +

    {'Tag'|@translate}

    + tag:"alain" +
    +
    {'Searches only within tags, ignoring titles and descriptions'|@translate}
    +
    + +
    +
    +

    {'File'|@translate}

    + file:"DSC_" +
    +
    {'Searches within file names'|@translate}
    +
    + +
    +
    +

    {'Author'|@translate}

    + author:"Alain" +
    +
    {'Searches by author'|@translate}
    +
    + +
    +
    +

    {'Created Date'|@translate}

    + created:"2003" +
    +
    {'Searches for photos taken in 2003'|@translate}
    +
    + +
    +
    +

    {'Width and Height'|@translate}

    + width:"" + height:"" +
    +
    {'Searches for photos of a specific width or height in pixels'|@translate}
    +
    + +
    +
    +

    {'Size'|@translate}

    + size:">5m" +
    +
    {'Searches for photos larger than 5 million pixels'|@translate}
    +
    + +
    +
    +

    {'Ratio'|@translate}

    + ratio:"3/4" +
    +
    {'Searches for photos with a specific aspect ratio'|@translate}
    +
    + +
    +
    +

    {'Hits'|@translate}

    + hits:"" +
    +
    {'Searches for photos by the number of hits'|@translate}
    +
    + +
    +
    +

    {'Score'|@translate}

    + score:"*" +
    +
    {'Returns all photos with or without a score'|@translate}
    +
    + +
    +
    +

    {'Filesize'|@translate}

    + filesize:"1m..10m" +
    +
    {'Searches for files within a size range'|@translate}
    +
    + +
    +
    +

    {'ID'|@translate}

    + id:"123..126" +
    +
    {'Searches for photos using their unique identifier'|@translate}
    +
    + + +
    +
    \ No newline at end of file diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 9e41c1909..341bdf34b 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -5840,6 +5840,121 @@ input:checked + .slider:before, input:checked + .slider::after { display:block; } } +/*Search Modal*/ +/* #HelpSearchModal{ + display: none; +} */ + +.SearchModal { + position: fixed; + z-index: 100; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; +} + +.SearchModalContainer { + width: 60%; + max-width: 800px; + background-color: white; + padding: 30px; + border-radius: 8px; + text-align: left; + overflow-y: auto; + max-height: 60vh; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.SearchModalContainer::-webkit-scrollbar { + width: 12px; /* Width of the scrollbar */ + height: 12px; /* Height of the scrollbar (for horizontal scrollbar) */ +} + +.SearchModalContainer::-webkit-scrollbar-track { + background: #f1f1f1; /* Track color */ + border-radius: 10px; /* Rounding the track */ +} + +.SearchModalContainer::-webkit-scrollbar-thumb { + background-color: #888; /* Thumb color */ + border-radius: 10px; /* Rounding the thumb */ + border: 3px solid #f1f1f1; /* Adds a padding effect */ +} + +.SearchModalContainer::-webkit-scrollbar-thumb:hover { + background-color: #555; /* Thumb color on hover */ +} + +.SearchModalContainer strong { + font-size: 1.25rem; + display: block; + margin-bottom: 10px; +} + +.SearchModalContainer legend { + font-weight: bold; + margin-top: 20px; + margin-bottom: 10px; + border-bottom: 2px solid #ddd; + padding-bottom: 5px; + font-size: 1.1rem; +} + +.searchModalTab { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 15px; + padding-left: 10px; +} + +.searchModalContent { + flex: 1; + margin-left: 15px; + font-size: 0.9rem; + color: #555; +} + +.searchModalContent p { + font-weight: bold; + margin: 0; + font-size: 1rem; +} + +.searchModalContent code { + background-color: #c3c3c3; + padding: 2px 5px; + font-size: 0.95rem; + margin: 0 5px; + white-space: nowrap; +} + +.searchModalContent { + border-left: 3px solid #eee; + padding-left: 15px; +} + +.searchModalTab + .searchModalTab { + margin-top: 10px; +} + +.SearchModalContainer > div { + margin-top: 10px; +} + +.CloseSearchModal{ + position:absolute; + right:-40px; + top:-40px; + font-size:30px; +} + /*UserList Pop in*/ @@ -6874,7 +6989,7 @@ color:#FF7B00; color:#353535; } -.UserListPopInContainer { +.UserListPopInContainer, .SearchModalContainer { background-color:white; } diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 4186c277d..85647955a 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -626,7 +626,7 @@ label>p.group_select { /*UserList Pop in*/ -.UserListPopInContainer{ +.UserListPopInContainer, .SearchModalContainer{ background-color:#444; border-radius:10px; @@ -1606,7 +1606,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; color:#c1c1c1; } -.UserListPopInContainer { +.UserListPopInContainer, .SearchModalContainer { background-color:#444; }