jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

use flexbox for appstore toolbar

Browse Source
This commit is contained in:
Johannes Zellner
2024-10-15 17:47:59 +02:00
parent 6e12d06343
commit e6232189e7
2 changed files with 30 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
dashboard/public/views/appstore.html
View File

@@ -421,35 +421,31 @@
<div class="appstore-layout">
<div ng-show="ready && validSubscription" class="ng-cloak appstore-toolbar">
<div class="appstore-toolbar-content">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }">
{{ categoryButtonLabel(category) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" ng-click="showCategory('');"><i class="fas fa-home fa-fw"></i> {{ 'appstore.category.all' | tr }}</a></li>
<li><a href="" ng-click="showCategory('new');"><i class="fas fa-rss fa-fw"></i> {{ 'appstore.category.newApps' | tr }}</a></li>
<li role="separator" class="divider"></li>
<li ng-repeat="category in categories | orderBy:'label'"><a href="" ng-click="showCategory(category.id);"><i class="{{ category.icon }} fa-fw"></i> {{ category.label }}</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<i class="{{ userManagementFilterOption.icon }} fa-fw"></i>
{{ 'appstore.ssofilter.label' | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="option in userManagementFilterOptions" ng-class="{ 'active': userManagementFilterOption.id && userManagementFilterOption.id === option.id }"><a href="" ng-click="applyUserMangamentFilter(option);"><i class="{{ option.icon }} fa-fw"></i> {{ option.label }}</a></li>
</ul>
</div>
<input type="text" id="appstoreSearch" class="form-control" style="width: auto; flex-grow: 1;" placeholder="{{ 'appstore.searchPlaceholder' | tr }}" ng-model="searchString" ng-change="search()" autofocus>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="openAppProxy()"><i class="fas fa-exchange-alt"></i> {{ 'apps.addAppproxyAction' | tr }}</a></a>
<button type="button" class="btn btn-default" ng-click="applinksAdd.show()"><i class="fas fa-link"></i> {{ 'apps.addApplinkAction' | tr }}</button>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }">
{{ categoryButtonLabel(category) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" ng-click="showCategory('');"><i class="fas fa-home fa-fw"></i> {{ 'appstore.category.all' | tr }}</a></li>
<li><a href="" ng-click="showCategory('new');"><i class="fas fa-rss fa-fw"></i> {{ 'appstore.category.newApps' | tr }}</a></li>
<li role="separator" class="divider"></li>
<li ng-repeat="category in categories | orderBy:'label'"><a href="" ng-click="showCategory(category.id);"><i class="{{ category.icon }} fa-fw"></i> {{ category.label }}</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
<i class="{{ userManagementFilterOption.icon }} fa-fw"></i>
{{ 'appstore.ssofilter.label' | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="option in userManagementFilterOptions" ng-class="{ 'active': userManagementFilterOption.id && userManagementFilterOption.id === option.id }"><a href="" ng-click="applyUserMangamentFilter(option);"><i class="{{ option.icon }} fa-fw"></i> {{ option.label }}</a></li>
</ul>
</div>
<input type="text" id="appstoreSearch" class="form-control" style="width: auto; flex-grow: 1;" placeholder="{{ 'appstore.searchPlaceholder' | tr }}" ng-model="searchString" ng-change="search()" autofocus>
<button type="button" class="btn btn-default" ng-click="openAppProxy()"><i class="fas fa-exchange-alt"></i> {{ 'apps.addAppproxyAction' | tr }}</a></a>
<button type="button" class="btn btn-default" ng-click="applinksAdd.show()"><i class="fas fa-link"></i> {{ 'apps.addApplinkAction' | tr }}</button>
</div>
<div ng-show="ready && validSubscription" class="ng-cloak appstore-grid">

44
dashboard/src/theme.scss
View File

@@ -972,45 +972,13 @@ multiselect {
}
.appstore-toolbar {
padding: 15px 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: auto;
max-width: 1400px;
padding: 15px 10px;
background: transparent;
margin: 0 15px;
.appstore-toolbar-content {
display: flex;
margin: auto;
max-width: 1400px;
> * {
margin: 0 10px;
}
// > input {
// margin: 0 10px;
// margin-right: 15px;
// }
// > button, > .dropdown > .btn {
// border-radius: 0;
// display: inline-block;
// }
// > button:first-of-type {
// margin-left: 5px;
// }
// @media(max-width:768px) {
// flex-wrap: wrap;
// > input {
// margin: 0;
// }
// > button, > .dropdown {
// display: none;
// }
// }
}
}
.appstore-grid {