Dashlist: Tweaked design of folder addition (#27241)

This commit is contained in:
Torkel Ödegaard 2020-08-27 09:49:07 +02:00 committed by GitHub
parent 5e27654298
commit 093477c036
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions

View File

@ -6,13 +6,10 @@
</h6> </h6>
<div class="dashlist-item" ng-repeat="dash in group.list"> <div class="dashlist-item" ng-repeat="dash in group.list">
<a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}"> <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
<span class="dashlist-title"> <div class="dashlist-link-body">
{{dash.title}} <div class="dashlist-title">{{dash.title}}</div>
</span> <div ng-if="dash.folderTitle" class="dashlist-folder">{{dash.folderTitle}}</div>
<span ng-if="dash.folderTitle" class="dashlist-folder"> </div>
<icon name="'folder'" type="mono" size="'xs'"></icon>
{{dash.folderTitle}}
</span>
<span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)"> <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
<icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon> <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
</span> </span>

View File

@ -8,9 +8,9 @@
padding-top: 3px; padding-top: 3px;
} }
.dashlist { .dashlist-link {
&-link {
@include list-item(); @include list-item();
display: flex;
.fa { .fa {
padding-top: 3px; padding-top: 3px;
@ -19,15 +19,19 @@
.fa-star { .fa-star {
color: $orange; color: $orange;
} }
} }
&-star { .dashlist-star {
float: right; display: flex;
} align-items: center;
color: $text-color-weak;
&-folder { }
color: $text-color-weak;
margin-left: $space-sm; .dashlist-folder {
font-size: $font-size-xs; color: $text-color-weak;
} font-size: $font-size-xs;
}
.dashlist-link-body {
flex-grow: 1;
} }