yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2785 from nathanwoulfe/temp-U4-11524

Browse Source 
U4 11524 - icon alignment in help drawer
This commit is contained in:
Sebastiaan Janssen
2018-07-18 14:49:31 +02:00
committed by GitHub
parent 596157f90b 9488df823a
commit d9459661eb
2 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
View File

@@ -55,12 +55,13 @@
/* Our badge - should be moved */
.umb-help-badge {
padding: 10px 20px 10px 35px;
padding: 10px 20px 10px 55px;
background: @white;
position: relative;
overflow: hidden;
border-radius: 3px;
display: block;
margin-bottom:5px;
}
.umb-help-badge:hover,
@@ -74,10 +75,10 @@
}
.umb-help-badge__icon {
font-size: 40px;
font-size: 36px;
transform: translate(0,-50%);
position: absolute;
left: -15px;
left: 10px;
top: 50%;
color: @red-l3;
}
@@ -128,6 +129,14 @@
align-items: center;
}
/* the outer container for each help type - tours, video etc */
.umb-help-section + .umb-help-section {
margin-top:20px;
}
.umb-help-section__title {
margin:0 0 10px;
}
/* Help list */
@@ -135,12 +144,12 @@
list-style: none;
margin-left: 0;
margin-bottom: 0;
background: @white;
background: @white;
border-radius: 3px;
}
.umb-help-list:last-child {
border-bottom: none;
[data-element*="help-tours"] & {
margin-bottom:5px;
}
}
.umb-help-list-item {
@@ -149,20 +158,28 @@
border-bottom: 1px solid @gray-9;
}
.umb-help-list-item > a,
.umb-help-list-item__group-title i {
margin-right:2px;
text-decoration: none;
}
.umb-help-list-item__content {
display: flex;
align-items: center;
padding: 10px 20px;
padding: 10px 20px 10px 10px;
text-decoration: none;
}
.umb-help-list-item:hover,
.umb-help-list-item:focus,
.umb-help-list-item:active,
.umb-help-list-item > a:hover,
.umb-help-list-item > a:focus,
.umb-help-list-item > a:active {
text-decoration: none;
.umb-help-list-item__title {
text-decoration: underline !important;
text-decoration: underline;
}
}
@@ -191,4 +208,8 @@
.umb-help-list-item:hover .umb-help-list-item__group-title {
text-decoration: underline;
}
[data-element*="tour-"].umb-help-list-item:hover .umb-help-list-item__title {
text-decoration:none;
}

31
src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
View File

@@ -8,16 +8,17 @@
<umb-drawer-content>
<!-- Tours -->
<div ng-if="vm.tours" data-element="help-tours" style="margin-bottom: 20px;">
<div class="umb-help-section" ng-if="vm.tours" data-element="help-tours">
<h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
<h5 class="umb-help-section__title">Tours</h5>
<div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'" style="margin-bottom: 5px;">
<div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'">
<div class="umb-help-list">
<a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="tourGroup.open = !tourGroup.open">
<h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
<a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" ng-click="tourGroup.open = !tourGroup.open">
<h5 class="umb-help-list-item__group-title">
<i ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
<span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
<span ng-if="tourGroup.group === 'undefined'">Other</span>
</h5>
@@ -49,7 +50,7 @@
<!-- Show in custom help dashboard -->
<div data-element="help-custom-dashboard" style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
<div class="umb-help-section" data-element="help-custom-dashboard" ng-if="vm.customDashboard.length > 0">
<div ng-repeat="tab in vm.customDashboard">
<div ng-repeat="property in tab.properties">
<div>
@@ -61,11 +62,11 @@
</div>
<!-- Help Content -->
<div data-element="help-articles" style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
<h5 style="margin-bottom: 10px; margin-top: 0;">Articles</h5>
<div class="umb-help-section" data-element="help-articles" ng-if="vm.topics.length > 0">
<h5 class="umb-help-section__title">Articles</h5>
<ul class="umb-help-list">
<li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
<a data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<span>
<span class="umb-help-list-item__title">
<span class="bold">{{topic.name}}</span>
@@ -79,11 +80,11 @@
</div>
<!-- Umbraco tv content -->
<div data-element="help-videos" style="margin-bottom: 20px;">
<h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
<div class="umb-help-section" data-element="help-videos">
<h5 class="umb-help-section__title" ng-if="vm.videos.length > 0">Videos</h5>
<ul class="umb-help-list">
<li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
<a data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<i class="umb-help-list-item__icon icon-tv-old"></i>
<span class="umb-help-list-item__title">{{video.title}}</span>
<i class="umb-help-list-item__open-icon icon-out"></i>
@@ -93,8 +94,8 @@
</div>
<!-- Links -->
<div data-element="help-links">
<a data-element="help-link-umbraco-tv" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<div class="umb-help-section" data-element="help-links">
<a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
<i class="umb-help-badge__icon icon-tv-old"></i>
<div class="umb-help-badge__title">Visit umbraco.tv</div>
<small>
@@ -102,7 +103,7 @@
</small>
</a>
<a data-element="help-link-our-umbraco" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
<a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
<i class="umb-help-badge__icon icon-favorite"></i>
<div class="umb-help-badge__title">Visit our.umbraco.org</div>
<small>