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

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

@@ -421,7 +421,6 @@
<div class="appstore-layout"> <div class="appstore-layout">
<div ng-show="ready && validSubscription" class="ng-cloak appstore-toolbar"> <div ng-show="ready && validSubscription" class="ng-cloak appstore-toolbar">
<div class="appstore-toolbar-content">
<div class="dropdown"> <div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }"> <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" ng-class="{ 'btn-primary': '' !== category && 'recent' !== category && 'new' !== category }">
{{ categoryButtonLabel(category) }} {{ categoryButtonLabel(category) }}
@@ -445,12 +444,9 @@
</ul> </ul>
</div> </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> <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="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> <button type="button" class="btn btn-default" ng-click="applinksAdd.show()"><i class="fas fa-link"></i> {{ 'apps.addApplinkAction' | tr }}</button>
</div> </div>
</div>
</div>
<div ng-show="ready && validSubscription" class="ng-cloak appstore-grid"> <div ng-show="ready && validSubscription" class="ng-cloak appstore-grid">
<div class="text-center" ng-hide="apps.length || popularApps.length"> <div class="text-center" ng-hide="apps.length || popularApps.length">

40
dashboard/src/theme.scss
View File

@@ -972,45 +972,13 @@ multiselect {
} }
.appstore-toolbar { .appstore-toolbar {
padding: 15px 0;
background: transparent;
margin: 0 15px;
.appstore-toolbar-content {
display: flex; display: flex;
flex-wrap: wrap;
gap: 5px;
margin: auto; margin: auto;
max-width: 1400px; max-width: 1400px;
padding: 15px 10px;
> * { background: transparent;
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 { .appstore-grid {