Skip to content

Commit

Permalink
Update search table UI for better mobile view. Config UI fix tooltip …
Browse files Browse the repository at this point in the history 
…position and general layout + better mobile UI (#949)
  • Loading branch information
@saurori
saurori authored May 23, 2024
1 parent fbddaf2 commit d551943
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 121 deletions.
120 changes: 65 additions & 55 deletions core/ui-src/html/directives/search-result.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,50 @@
<tr ng-class="{'duplicate' : result.duplicateGroupIndex > 0, 'title-group-expanded': result.titleGroupIndex > 0} "
style="margin:0; border-width: 0; padding: 0" ng-if="resultDisplayed" class="search-result-row">
<td class="col-md-13 search-results-cell result-title" style="margin:0;">
<input type="checkbox"
ng-model="foo.selected"
ng-click="clickCheckbox($event, result)" data-checkbox-index="0" class="result-checkbox"/><a href="" ng-click="toggleTitleExpansion()"
ng-class="{'visibility-hidden': (result.titlesLength === 1 || result.titleGroupIndex > 0 || result.duplicateGroupIndex > 0)}"
class="title-expand-toggle"
uib-tooltip="Click to see or hide all results with the same title"
tooltip-placement="top"
tooltip-trigger="mouseenter"
style="text-decoration: none"><span class="glyphicon"
ng-class="{'glyphicon-minus': titlesExpanded, 'glyphicon-plus': !titlesExpanded}"></span></a><a
ng-if="foo.duplicatesDisplayed" href="" ng-click="toggleDuplicateExpansion()"
ng-class="{'visibility-hidden': (result.duplicatesLength == 1 || result.duplicateGroupIndex > 0)}"
class="duplicate-expand-toggle"
uib-tooltip="Click to see or hide all duplicates of this result"
tooltip-placement="right"
tooltip-trigger="mouseenter" style="text-decoration: none"
>
<!-- Formatting must be so weird because otherwise we'll have leading whitespaces in the titles -->
<span class="glyphicon" ng-class="{'glyphicon-minus': duplicatesExpanded, 'glyphicon-plus': !duplicatesExpanded}"></span></a><span class="title">{{result.alwaysShowTitles}}<span
ng-if="(result.titleGroupIndex === 0 && result.duplicateGroupIndex === 0) || searchResultsControllerShared.isGroupEpisodes || foo.alwaysShowTitles"><img
ng-if="result.cover && foo.showCovers" ng-src="{{::result.cover}}" width="{{::coverSize}}px" style="margin-right: 5px" ng-click="showCover(result.cover)"/><span
ng-if="result.downloadedAt && searchResultsControllerShared.showDownloadedIndicator" class="fa fa-check" uib-tooltip="Already downloaded at {{::result.downloadedAt}}"
tooltip-placement="top" tooltip-trigger="mouseenter"></span>{{ ::result.title }}</span></span>
<span class="badge" ng-if="result.torrentDownloadFactor">{{::result.torrentDownloadFactor}}</span>
<td class="col-md-13 text-break search-results-cell result-title" style="margin:0;" data-label="Title">
<div class="d-flex">
<div class="d-flex align-items-center justify-content-space-around title-actions me-2">
<input type="checkbox"
ng-model="foo.selected"
ng-click="clickCheckbox($event, result)" data-checkbox-index="0" class="result-checkbox mt-0"/>
<a href="" ng-click="toggleTitleExpansion()"
ng-class="{'visibility-hidden': (result.titlesLength === 1 || result.titleGroupIndex > 0 || result.duplicateGroupIndex > 0)}"
class="title-expand-toggle mx-2"
uib-tooltip="Click to see or hide all results with the same title"
tooltip-placement="top"
tooltip-trigger="mouseenter"
style="text-decoration: none">
<span class="glyphicon" ng-class="{'glyphicon-minus': titlesExpanded, 'glyphicon-plus': !titlesExpanded}"></span>
</a>
</div>
<a ng-if="foo.duplicatesDisplayed" href="" ng-click="toggleDuplicateExpansion()"
ng-class="{'visibility-hidden': (result.duplicatesLength == 1 || result.duplicateGroupIndex > 0)}"
class="duplicate-expand-toggle"
uib-tooltip="Click to see or hide all duplicates of this result"
tooltip-placement="right"
tooltip-trigger="mouseenter" style="text-decoration: none">
<!-- Formatting must be so weird because otherwise we'll have leading whitespaces in the titles -->
<span class="glyphicon" ng-class="{'glyphicon-minus': duplicatesExpanded, 'glyphicon-plus': !duplicatesExpanded}"></span>
</a>
<span class="title">{{result.alwaysShowTitles}}<span
ng-if="(result.titleGroupIndex === 0 && result.duplicateGroupIndex === 0) || searchResultsControllerShared.isGroupEpisodes || foo.alwaysShowTitles"><img
ng-if="result.cover && foo.showCovers" ng-src="{{::result.cover}}" width="{{::coverSize}}px" style="margin-right: 5px" ng-click="showCover(result.cover)"/><span
ng-if="result.downloadedAt && searchResultsControllerShared.showDownloadedIndicator" class="fa fa-check" uib-tooltip="Already downloaded at {{::result.downloadedAt}}"
tooltip-placement="top" tooltip-trigger="mouseenter"></span>{{ ::result.title }}</span>
</span>
<span class="badge" ng-if="result.torrentDownloadFactor">{{::result.torrentDownloadFactor}}</span>
</div>
</td>
<td class="col-md-1 search-results-cell result-indexer" style="text-align: right">

<td class="col-md-1 search-results-cell result-indexer text-right" data-label="Indexer">
{{ ::result.indexer }}
</td>
<td class="col-md-1 search-results-cell result-category" style="text-align: right">
<td class="col-md-1 search-results-cell result-category text-right" data-label="Category">
{{ ::result.category }}
</td>
<td class="col-md-1 search-results-cell result-size" style="text-align: right">
<td class="col-md-1 search-results-cell result-size text-right" data-label="Size">
{{ ::result.size | byteFmt: 2 }}
</td>
<td class="col-md-1 search-results-cell result-details" style="text-align: right">
<td class="col-md-1 search-results-cell result-details text-right" data-label="Details">
<span ng-if="::(result.grabs !== null)">
{{ ::result.grabs | kify }}
</span>
Expand All @@ -47,12 +55,13 @@
{{ ::result.seeders | kify }} / {{ ::result.peers | kify }}
</span>
</td>
<td class="col-md-1 search-results-cell result-age" style="text-align: right">
<td class="col-md-1 search-results-cell result-age text-right" data-label="Age">
<span uib-tooltip="{{ ::result.date }}"
tooltip-placement="top"
tooltip-trigger="mouseenter">{{ ::result.age }}</span>
</td>
<td class="col-md-2 search-results-cell result-links">
<td class="col-md-2 search-results-cell result-links" data-label="Links">
<div>
<a href ng-click="showNfo(result)" ng-class="::{'no-nfo': result.hasNfo === 'NO'}"
class="no-underline result-show-nfo-link"
uib-tooltip="{{ ::getNfoTooltip() }}"
Expand All @@ -69,15 +78,15 @@
tooltip-trigger="mouseenter">
<i class="fa fa-search" aria-hidden="true" style="margin-left:3px; margin-right:3px; vertical-align: middle"></i>
</a>

<a ng-class="::{'no-nfo': !result.comments}" href="{{::result.details_link | dereferer}}" target="_blank"
class="no-underline result-comments-link"
uib-tooltip="Comments"
tooltip-placement="top"
tooltip-trigger="mouseenter">
<i class="fa fa-comment" aria-hidden="true" style="margin-left:0; margin-right:3px;"></i>
</a>

<a target="_blank" href="{{ ::result.details_link | dereferer}}" ng-class="::{'no-nfo': !result.details_link}"
style="vertical-align: middle" class="no-underline result-details-link"
uib-tooltip="Details"
Expand All @@ -86,30 +95,31 @@
<i class="fa fa-info" aria-hidden="true"
style="margin-left:3px; margin-right:3px; vertical-align: middle"></i>
</a>

</a>
</span>
<span ng-switch on="::result.downloadType">
<span ng-switch-when="TORRENT">
<a target="_blank" href="gettorrent/user/{{ ::result.searchResultId }}"
style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
class="no-underline result-torrent-download-link"
uib-tooltip="Download torrent"
tooltip-placement="top"
tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
</a>
</span>
<save-or-send-file search-result-id="result.searchResultId" type="result.downloadType"></save-or-send-file>
<span ng-switch-default>
<a target="_blank" href="getnzb/user/{{ ::result.searchResultId }}"
style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
class="no-underline result-nzb-download-link"
uib-tooltip="Download NZB"
tooltip-placement="top"
tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
</a>
<addable-nzbs searchresult="::result"></addable-nzbs>
</span>
<span ng-switch-when="TORRENT">
<a target="_blank" href="gettorrent/user/{{ ::result.searchResultId }}"
style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
class="no-underline result-torrent-download-link"
uib-tooltip="Download torrent"
tooltip-placement="top"
tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
</a>
</span>
<save-or-send-file search-result-id="result.searchResultId" type="result.downloadType"></save-or-send-file>
<span ng-switch-default>
<a target="_blank" href="getnzb/user/{{ ::result.searchResultId }}"
style="vertical-align: middle; margin-left: 3px; margin-right: 3px"
class="no-underline result-nzb-download-link"
uib-tooltip="Download NZB"
tooltip-placement="top"
tooltip-trigger="mouseenter"><span class="glyphicon glyphicon-save"></span>
</a>
<addable-nzbs searchresult="::result"></addable-nzbs>
</span>
</span>
</div>
</td>
</tr>
32 changes: 20 additions & 12 deletions core/ui-src/html/states/config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,14 @@
</script>

<script type="text/ng-template" id="setting-wrapper.html">
<div class="form-group form-horizontal setting-wrapper" ng-class="{'row': !options.templateOptions.noRow}" ng-show="model.showAdvanced || !to.advanced">
<div class="setting-wrapper" ng-show="model.showAdvanced || !to.advanced">
<div class="form-group form-horizontal" ng-class="{'row': !options.templateOptions.noRow}">
<!--Test-->
<label class="col-xs-8 col-sm-4 control-label config-label align-middle text-right">
{{ to.label }} {{ to.required ? "*" : ""}}
</label>
<div class="col-xs-8 col-sm-4 text-right config-label pe-xs-0">
<label class="control-label align-middle justify-content-flex-end pt-0">
{{ to.label }} {{ to.required ? "*" : ""}}
</label>
</div>
<div class="col-xs-9 col-sm-6 config-content">
<!--Before transclude-->
<formly-transclude></formly-transclude>
Expand All @@ -158,31 +161,36 @@
</div>
<div class="col-xs-1 col-sm-1">
<div class="config-tooltip">
<div ng-if="::to.tooltip" uib-popover-html="to.tooltip" popover-trigger="'outsideClick'" popover-placement="auto top">
<div class="d-flex justify-content-center" ng-if="::to.tooltip" uib-popover-html="to.tooltip" popover-trigger="'outsideClick'" popover-placement="auto top">
<span class="glyphicon glyphicon-question-sign align-middle" style="cursor: pointer"></span>
</div>
</div>
</div>
<div class="col-xs-20 col-sm-9 config-help help-block">
<span ng-bind-html="to.help | derefererExtracting | unsafe" class="align-middle">
Help
</span>
<div class="col-xs-20 col-sm-9 config-help mt-xs-2">
<div class="help-block mx-xs-4">
<div class="align-middle">
<span ng-bind-html="to.help | derefererExtracting | unsafe" >
Help
</span>
</div>
</div>
</div>
</div>
</div>
</script>

<script type="text/ng-template" id="fieldset-wrapper.html">
<fieldset ng-show="model.showAdvanced || !to.advanced">
<legend class="text-left">
<div class="col-sm-4"></div>
<div class="col-sm-16">
<span class="config-fieldset-legend">{{options.templateOptions.label}}
<div class="config-fieldset-legend py-3">{{options.templateOptions.label}}
<span class="glyphicon glyphicon-question-sign" ng-if="::options.templateOptions.tooltip"
uib-popover-html="options.templateOptions.tooltip"
tooltip-placement="auto top"
popover-trigger="'outsideClick'"
style="font-size: 15px; cursor: pointer"></span>
</span>
</div>
</div>
</legend>
<formly-transclude></formly-transclude>
Expand All @@ -192,7 +200,7 @@
<script type="text/ng-template" id="notificationRepeatSection.html">
<!--loop through each element in model array-->
<div class="{{ hideRepeat }} repeatWrapperClass">
<legend><span class="config-fieldset-legend">{{to.headline}}</span></legend>
<legend><div class="config-fieldset-legend py-3">{{to.headline}}</div></legend>
<div class="repeatsection modal-content" ng-repeat="element in model[options.key]"
ng-init="fields = copyFields(to.fields)">
<fieldset>
Expand Down
6 changes: 2 additions & 4 deletions core/ui-src/html/states/search-results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ <h2 ng-if="!anyResultsRejected && anyIndexersSearchedSuccessfully">No results we
</div>
</div>

<div class="col-md-4">
<div class="col-md-4 search-results-pagination">
<dir-pagination-controls auto-hide="false" max-size="5"></dir-pagination-controls>
</div>
<div class="col-md-8 text-right">
Expand Down Expand Up @@ -256,8 +256,7 @@ <h2 ng-if="!anyResultsRejected && anyIndexersSearchedSuccessfully">No results we
</div>
</div>

<div class="table-responsive">
<table class="search-results-table table">
<table class="table table-hover search-results-table">
<thead class="search-results-header">
<tr class="search-results-header-row">
<th class="col-md-13 cursor-default search-results-cell result-title">
Expand Down Expand Up @@ -338,7 +337,6 @@ <h2 ng-if="numberOfAcceptedResults === 0">All found results have been rejected</
<tbody>{{result.title}}</tbody>

</table>
</div>

<dir-pagination-controls auto-hide="false" on-page-change="onPageChange(newPageNumber, oldPageNumber)"></dir-pagination-controls>
</div>
Expand Down
Loading

0 comments on commit d551943

Please sign in to comment.