Merge pull request #279 from YuriSizov/layout-better-search

Improve the layout of search pages
This commit is contained in:
Emi
2023-05-23 22:35:54 +02:00
committed by GitHub
4 changed files with 305 additions and 183 deletions

View File

@@ -53,3 +53,97 @@ body {
height: 95px;
}
}
.asset-search-container {
display: flex;
flex-direction: row;
gap: 24px;
}
@media (max-width: 768px) {
.asset-search-container {
flex-direction: column;
}
}
.asset-search-container > form {
display: flex;
flex-direction: column;
gap: 16px;
width: 220px;
min-width: 220px;
}
@media (max-width: 768px) {
.asset-search-container > form {
width: 100%;
}
}
.asset-search-container > form > * + * {
border-top: 1px solid black;
padding-top: 16px;
}
.asset-search-container > form .form-actions > a {
width: 100%;
}
.asset-search-container > form .form-search {
display: flex;
gap: 16px;
flex-flow: column;
}
.asset-search-container > form .form-search .form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.asset-search-container > form .form-search .form-group label:first-child {
font-size: 106%;
}
.asset-search-container > form .form-search .form-checkbox {
cursor: pointer;
font-weight: 600;
}
.asset-search-container > form .form-search .form-checkbox input[type=checkbox] {
vertical-align: text-top;
}
.asset-search-container > form .form-search select {
cursor: pointer;
}
.asset-search-container > form .form-search .form-highlighted {
border-radius: 4px;
padding: 4px 8px;
}
.asset-search-container > form .form-search .form-highlighted > .form-checkbox {
margin: 0;
}
.asset-search-results {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
}
.pagination-container {
text-align: center;
}
.pagination-stats {
display: flex;
justify-content: space-between;
gap: 8px;
}
@media (max-width: 768px) {
.pagination-stats {
flex-direction: column;
}
}

View File

@@ -1,4 +1,4 @@
<nav aria-label="Page navigation">
<nav class="pagination-container" aria-label="Page navigation">
<ul class="pagination">
<?php if($data['page'] - 1 >= 0) { ?>
@@ -50,15 +50,18 @@
<?php } ?>
</ul>
</nav>
<p>
<?php echo esc($data['page_length']) ?> item<?php if($data['page_length'] != 1) echo 's' ?> per page, <?php echo esc($data['total_items']) ?> item<?php if($data['total_items'] != 1) echo 's' ?> total.
</p>
<p>
Change items per page to: <span class="btn-group btn-group-xs" role="group" aria-label="Page size">
<?php foreach ([40, 100, 200, 500] as $amount) { ?>
<a href="?<?php echo esc(http_build_query(['max_results' => $amount, 'page' => floor($data['page'] * $data['page_length'] / $amount)] + $params)) ?>" class="btn btn-default" aria-label="Per page">
<?php echo raw($amount); ?>
</a>
<?php } ?>
</span>
</p>
<div class="pagination-stats">
<div>
Items per page: <span class="btn-group btn-group-xs" role="group" aria-label="Page size">
<?php foreach ([40, 100, 200, 500] as $amount) { ?>
<a href="?<?php echo esc(http_build_query(['max_results' => $amount, 'page' => floor($data['page'] * $data['page_length'] / $amount)] + $params)) ?>" class="btn btn-default <?php if($data['page_length'] == $amount) echo 'active' ?>" aria-label="Per page">
<?php echo raw($amount); ?>
</a>
<?php } ?>
</span>
</div>
<div>
<?php echo esc($data['page_length']) ?> item<?php if($data['page_length'] != 1) echo 's' ?> per page, <?php echo esc($data['total_items']) ?> item<?php if($data['total_items'] != 1) echo 's' ?> total.
</div>
</div>

View File

@@ -1,80 +1,89 @@
<?php include("_header.phtml") ?>
<form method="get" action="edit">
<div class="form-inline form-search">
<div class="form-group">
<label>Status</label>
<?php foreach($constants['edit_status'] as $id => $status) if(is_int($id)) { ?>
<label>
<input type="checkbox" name="status[<?php echo esc($status) ?>]" value="1"
<?php if(isset($params['status']) && (is_array($params['status']) ?
isset($params['status'][$status]) && $params['status'][$status] :
in_array($status, explode(' ', $params['status'])))
) echo 'checked=""';
?>>
<?php echo esc(ucfirst(str_replace('_', ' ', $status))) ?>
</label>
<div class="asset-search-container">
<form method="get" action="edit">
<div class="input-group">
<input type="text" class="form-control" name="filter" placeholder="Search for..." value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
<div class="form-inline form-search">
<div class="form-group">
<label>Status</label>
<?php foreach($constants['edit_status'] as $id => $status) if(is_int($id)) { ?>
<label class="form-checkbox">
<input type="checkbox" name="status[<?php echo esc($status) ?>]" value="1"
<?php if(isset($params['status']) && (is_array($params['status']) ?
isset($params['status'][$status]) && $params['status'][$status] :
in_array($status, explode(' ', $params['status'])))
) echo 'checked=""';
?>>
<?php echo esc(ucfirst(str_replace('_', ' ', $status))) ?>
</label>
<?php } ?>
</div>
<?php if(isset($params['asset'])) { ?>
<div class="form-group bg-info form-highlighted">
<label class="form-checkbox">
<input type="checkbox" name="asset" value="<?php echo esc($params['asset']) ?>" checked="">
<?php if($params['asset'] == -1) { ?>
Only new assets
<?php } else { ?>
Only asset #<?php echo esc($params['asset']) ?>
<?php } ?>
</label>
</div>
<?php } ?>
<?php if(isset($params['user'])) { ?>
<div class="form-group bg-info form-highlighted">
<label class="form-checkbox">
<input type="checkbox" name="user" value="<?php echo esc($params['user']) ?>" checked="">
Only by <?php echo esc($params['user']) ?>
</label>
</div>
<?php } ?>
</div>
<?php if(isset($params['asset'])) { ?>
<div class="form-group bg-primary" style="padding:0 5px;">
<label>
<input type="checkbox" name="asset" value="<?php echo esc($params['asset']) ?>" checked="">
<?php if($params['asset'] == -1) { ?>
Only new assets
<?php } else { ?>
Only asset #<?php echo esc($params['asset']) ?>
<?php } ?>
</label>
</form>
<div class="asset-search-results">
<?php foreach($data['result'] as $i => $asset_edit) { ?>
<div class="media">
<div class="media-left">
<a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>">
<img class="media-object" src="<?php echo esc($asset_edit['icon_url']) ?>" alt="<?php echo esc($asset_edit['title']) ?>'s icon" width=80 height=80>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>"><?php echo ($asset_edit['asset_id'] == -1 ? 'Create ' : 'Edit ') . '"' . esc($asset_edit['title']) . '"' ?></a>
<br>
<span class="label label-<?php echo raw([
'new' => 'info',
'in_review' => 'primary',
'rejected' => 'danger',
'accepted' => 'success'
][$asset_edit['status']]) ?>"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['status']))) ?></span>
<span class="label label-default"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['godot_version']))) ?></span>
<span class="label label-<?php echo raw([
'official' => 'danger',
'community' => 'info',
'testing' => 'success',
][$asset_edit['support_level']]) ?>"><?php echo raw(ucfirst($asset_edit['support_level'])) ?></span>
</h4>
<p>Submitted by user <?php echo esc($asset_edit['author']) ?></p>
<?php if($asset_edit['status'] == 'rejected' && $asset_edit['reason']) echo 'Rejection reason: ' . esc($asset_edit['reason']) ?>
</div>
</div>
<?php } ?>
<?php if(isset($params['user'])) { ?>
<div class="form-group bg-primary" style="padding:0 5px;">
<label>
<input type="checkbox" name="user" value="<?php echo esc($params['user']) ?>" checked="">
Only by <?php echo esc($params['user']) ?>
</label>
</div>
<?php } ?>
</div>
<div class="input-group">
<input type="text" class="form-control" name="filter" placeholder="Search for..." value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search</button>
</span>
</div>
</form>
<?php foreach($data['result'] as $i => $asset_edit) { ?>
<div class="media">
<div class="media-left">
<a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>">
<img class="media-object" src="<?php echo esc($asset_edit['icon_url']) ?>" alt="<?php echo esc($asset_edit['title']) ?>'s icon" width=80 height=80>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="<?php echo raw($basepath) . '/asset/edit/' . url($asset_edit['edit_id']) ?>"><?php echo ($asset_edit['asset_id'] == -1 ? 'Create ' : 'Edit ') . '"' . esc($asset_edit['title']) . '"' ?></a>
<br>
<span class="label label-<?php echo raw([
'new' => 'info',
'in_review' => 'primary',
'rejected' => 'danger',
'accepted' => 'success'
][$asset_edit['status']]) ?>"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['status']))) ?></span>
<span class="label label-default"><?php echo raw(ucfirst(str_replace('_', ' ', $asset_edit['godot_version']))) ?></span>
<span class="label label-<?php echo raw([
'official' => 'danger',
'community' => 'info',
'testing' => 'success',
][$asset_edit['support_level']]) ?>"><?php echo raw(ucfirst($asset_edit['support_level'])) ?></span>
</h4>
<p>Submitted by user <?php echo esc($asset_edit['author']) ?></p>
<?php if($asset_edit['status'] == 'rejected' && $asset_edit['reason']) echo 'Rejection reason: ' . esc($asset_edit['reason']) ?>
</div>
<?php include("_pagination.phtml") ?>
</div>
<?php } ?>
<?php include("_pagination.phtml") ?>
</div>
<?php include("_footer.phtml") ?>

View File

@@ -1,114 +1,130 @@
<?php include("_header.phtml") ?>
<form method="get" action="asset">
<div class="form-inline form-search">
<div class="form-group">
<label for="category">Category</label>
<select id="category" name="category" class="form-control">
<option value="">
Any
</option>
<?php foreach($categories as $key => $category) { ?>
<option value="<?php echo esc($category['id']) ?>" <?php if(isset($params['category']) && $category['id'] == $params['category']) echo 'selected=""'; ?>>
<?php echo esc($category['name']) ?>
</option>
<?php } ?>
</select>
<div class="asset-search-container">
<form method="get" action="asset">
<div class="input-group">
<input type="text" class="form-control" name="filter" placeholder="Search for..." value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Search</button>
</span>
</div>
<div class="form-group">
<label>Support level</label><br class="visible-xs-block">
<?php foreach($constants['support_level'] as $id => $level) if(is_int($id)) { ?>
<label>
<input type="checkbox" name="support[<?php echo esc($level) ?>]" value="1"
<?php if(isset($params['support']) && (is_array($params['support']) ?
isset($params['support'][$level]) && $params['support'][$level] :
in_array($level, explode(' ', $params['support'])))
) echo 'checked=""';
?>>
<?php echo esc(ucfirst($level)) ?>
<div class="form-inline form-search">
<div class="form-group">
<label for="category">Category</label>
<select id="category" name="category" class="form-control">
<option value="">
Any
</option>
<?php foreach($categories as $key => $category) { ?>
<option value="<?php echo esc($category['id']) ?>" <?php if(isset($params['category']) && $category['id'] == $params['category']) echo 'selected=""'; ?>>
<?php echo esc($category['name']) ?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Support level</label>
<?php foreach($constants['support_level'] as $id => $level) if(is_int($id)) { ?>
<label class="form-checkbox">
<input type="checkbox" name="support[<?php echo esc($level) ?>]" value="1"
<?php if(isset($params['support']) && (is_array($params['support']) ?
isset($params['support'][$level]) && $params['support'][$level] :
in_array($level, explode(' ', $params['support'])))
) echo 'checked=""';
?>>
<?php echo esc(ucfirst($level)) ?>
</label>
<?php } ?>
</div>
<div class="form-group">
<label>Godot version</label>
<select id="category" name="godot_version" class="form-control">
<option value="">
Any
</option>
<?php foreach($constants['common_godot_versions'] as $version) if(substr_count($version, '.') != 2) { ?>
<option value="<?php echo esc($version) ?>" <?php if(isset($params['godot_version']) && $version == $params['godot_version']) echo 'selected=""'; ?>>
<?php echo esc(ucfirst(str_replace('_', ' ', $version))) ?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="sort">Order by</label>
<select id="sort" name="sort" class="form-control">
<?php if(!isset($params['sort'])) $params['sort'] = 'updated'; foreach(['cost', 'name', 'updated'] as $id => $order) { ?>
<option value="<?php echo esc($order) ?>" <?php if(isset($params['sort']) && $order == $params['sort']) echo 'selected=""'; ?>>
<?php echo $order === 'cost' ? "License" : esc(ucfirst($order)) ?>
</option>
<?php } ?>
</select>
<label class="form-checkbox">
<input type="checkbox" name="reverse" <?php if(isset($params['reverse'])) echo 'checked=""'; ?>>
Reverse
</label>
</div>
<?php if(isset($params['user'])) { ?>
<div class="form-group bg-info form-highlighted">
<label class="form-checkbox">
<input type="checkbox" name="user" value="<?php echo esc($params['user']) ?>" checked="">
Only by <?php echo esc($params['user']) ?>
</label>
</div>
<?php } ?>
</div>
<div class="form-group">
<label>Godot version</label>
<select id="category" name="godot_version" class="form-control">
<option value="">
Any
</option>
<?php foreach($constants['common_godot_versions'] as $version) if(substr_count($version, '.') != 2) { ?>
<option value="<?php echo esc($version) ?>" <?php if(isset($params['godot_version']) && $version == $params['godot_version']) echo 'selected=""'; ?>>
<?php echo esc(ucfirst(str_replace('_', ' ', $version))) ?>
</option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="sort">Order by</label>
<select id="sort" name="sort" class="form-control">
<?php if(!isset($params['sort'])) $params['sort'] = 'updated'; foreach(['cost', 'name', 'updated'] as $id => $order) { ?>
<option value="<?php echo esc($order) ?>" <?php if(isset($params['sort']) && $order == $params['sort']) echo 'selected=""'; ?>>
<?php echo $order === 'cost' ? "License" : esc(ucfirst($order)) ?>
</option>
<?php } ?>
</select>
<label>
<input type="checkbox" name="reverse" <?php if(isset($params['reverse'])) echo 'checked=""'; ?>>
Reverse
</label>
</div>
<?php if(isset($params['user'])) { ?>
<div class="form-group bg-primary" style="padding:0 5px;">
<label>
<input type="checkbox" name="user" value="<?php echo esc($params['user']) ?>" checked="">
Only by <?php echo esc($params['user']) ?>
</label>
<div class="form-actions">
<a href="<?php echo raw($basepath) . '/asset/edit?' . raw($query) . '&asset=-1' ?>" class="btn btn-default">
<i class="glyphicon glyphicon-hourglass"></i> View My Pending
</a>
</div>
<?php } ?>
</div>
<div class="input-group">
<input type="text" class="form-control" name="filter" placeholder="Search for..." value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search</button>
</span>
</div>
</form>
<br/>
<div class="row">
<?php foreach($data['result'] as $i => $asset) { ?>
<div class="col-md-6 asset-item">
<div class="media">
<div class="media-left">
<a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>" class="img-thumbnail">
<img class="media-object" src="<?php echo esc($asset['icon_url']) ?>" alt="<?php echo esc($asset['title']) ?>'s icon" width=80 height=80>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>"><?php echo esc($asset['title']) ?></a>
<small><?php echo esc($asset['version_string']) ?></small>
<br>
<span class="label label-primary"><?php echo esc($asset['category']) ?></span>
<span class="label label-danger"><?php echo esc(ucfirst(str_replace('_', ' ', $asset['godot_version']))) ?></span>
<span class="label label-<?php echo raw([
'official' => 'success',
'community' => 'info',
'testing' => 'default',
][$asset['support_level']]) ?>"><?php echo esc(ucfirst($asset['support_level'])) ?></span>
</h4>
</form>
<p class="text-muted">
Submitted by user <a href="?user=<?php echo esc($asset['author']) ?>" title="Search assets by '<?php echo esc($asset['author']) ?>'"><?php echo esc($asset['author']) ?></a>;
<a href="?<?php echo esc(http_build_query([
'filter' => $asset['cost'] // isset($params['filter']) ? $params['filter'] . ' ' . $asset['cost'] : $asset['cost']
] + $params)) ?>" title="Search assets with filter '<?php echo esc($asset['cost']) ?>'"><?php echo esc($asset['cost']) ?></a>;
<span class="nowrap"><?php echo esc(explode(" ", $asset['modify_date'])[0]) ?></span>
</p>
<div class="asset-search-results">
<div class="row">
<?php foreach($data['result'] as $i => $asset) { ?>
<div class="col-md-6 asset-item">
<div class="media">
<div class="media-left">
<a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>" class="img-thumbnail">
<img class="media-object" src="<?php echo esc($asset['icon_url']) ?>" alt="<?php echo esc($asset['title']) ?>'s icon" width=80 height=80>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="<?php echo raw($basepath) . '/asset/' . url($asset['asset_id']) ?>"><?php echo esc($asset['title']) ?></a>
<small><?php echo esc($asset['version_string']) ?></small>
<br>
<span class="label label-primary"><?php echo esc($asset['category']) ?></span>
<span class="label label-danger"><?php echo esc(ucfirst(str_replace('_', ' ', $asset['godot_version']))) ?></span>
<span class="label label-<?php echo raw([
'official' => 'success',
'community' => 'info',
'testing' => 'default',
][$asset['support_level']]) ?>"><?php echo esc(ucfirst($asset['support_level'])) ?></span>
</h4>
<p class="text-muted">
Submitted by user <a href="?user=<?php echo esc($asset['author']) ?>" title="Search assets by '<?php echo esc($asset['author']) ?>'"><?php echo esc($asset['author']) ?></a>;
<a href="?<?php echo esc(http_build_query([
'filter' => $asset['cost'] // isset($params['filter']) ? $params['filter'] . ' ' . $asset['cost'] : $asset['cost']
] + $params)) ?>" title="Search assets with filter '<?php echo esc($asset['cost']) ?>'"><?php echo esc($asset['cost']) ?></a>;
<span class="nowrap"><?php echo esc(explode(" ", $asset['modify_date'])[0]) ?></span>
</p>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<?php include("_pagination.phtml") ?>
</div>
</div>
<?php include("_pagination.phtml") ?>
<a href="<?php echo raw($basepath) . '/asset/edit?' . raw($query) . '&asset=-1' ?>" class="btn btn-warning"><i class="glyphicon glyphicon-hourglass"></i> View Pending</a>
<?php include("_footer.phtml") ?>