mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-23 18:05:09 +00:00
[ADF-2305] Process app tiles on process workspace landing page show "…" in Firefox (#2963)
* [ADF-2305] Process app tiles on process workspace landing page show "..." in Firefox * [ADF-2305] Removed multi-line ellipsis work around for Firefox * [ADF-2305] Added multi-line or single line ellpsis conditionally * * [ADF-2305] Imported line-clamp mixin from core mixins
This commit is contained in:
Deepak Paul
Eugenio Romano
parent
9e8fb2b6ea
commit
ec3b208b84
@ -30,31 +30,21 @@
|
||||
}
|
||||
|
||||
@mixin line-clamp($line-height: 1.25, $lines: 3) {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
position: relative;
|
||||
line-height: $line-height;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 !important;
|
||||
-webkit-line-clamp: $lines;
|
||||
height: calc(0.99em * #{$line-height} * #{$lines});
|
||||
|
||||
&:after {
|
||||
content: '...';
|
||||
text-align: right;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(0.99em * #{$line-height});
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
.line-clamp:after {
|
||||
display: none !important;
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
height: calc(0.99em * #{$line-height} * #{$lines});
|
||||
}
|
||||
|
||||
@supports not (-webkit-line-clamp: 1) {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,132 +1,130 @@
|
||||
// TODO: import this mixin from core mixins...
|
||||
// -------
|
||||
@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
|
||||
// -------
|
||||
@mixin adf-apps-theme($theme) {
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-app-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
$themes: (
|
||||
theme-1: (bg: #269abc, color: #168aac),
|
||||
theme-2: (bg: #7da9b0, color: #6d99a0),
|
||||
theme-3: (bg: #7689ab, color: #66799b),
|
||||
theme-4: (bg: #c74e3e, color: #b73e2e),
|
||||
theme-5: (bg: #fab96c, color: #eaa95c),
|
||||
theme-6: (bg: #759d4c, color: #658d3c),
|
||||
theme-7: (bg: #b1b489, color: #a1a479),
|
||||
theme-8: (bg: #a17299, color: #916289),
|
||||
theme-9: (bg: #696c67, color: #595c57),
|
||||
theme-10: (bg: #cabb33, color: #baab23)
|
||||
);
|
||||
|
||||
.adf-app-list-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
.adf-app-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-item {
|
||||
outline: none;
|
||||
$tile-themes: (
|
||||
theme-1: (bg: #269abc, color: #168aac),
|
||||
theme-2: (bg: #7da9b0, color: #6d99a0),
|
||||
theme-3: (bg: #7689ab, color: #66799b),
|
||||
theme-4: (bg: #c74e3e, color: #b73e2e),
|
||||
theme-5: (bg: #fab96c, color: #eaa95c),
|
||||
theme-6: (bg: #759d4c, color: #658d3c),
|
||||
theme-7: (bg: #b1b489, color: #a1a479),
|
||||
theme-8: (bg: #a17299, color: #916289),
|
||||
theme-9: (bg: #696c67, color: #595c57),
|
||||
theme-10: (bg: #cabb33, color: #baab23)
|
||||
);
|
||||
|
||||
.adf-app-list-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-card {
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$theme: map-get($themes, theme-#{$i});
|
||||
background-color: map-get($theme, bg);
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
outline: none;
|
||||
transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
|
||||
min-height: 200px;
|
||||
padding: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
|
||||
cursor: pointer;
|
||||
transform: scale(1.015);
|
||||
}
|
||||
&-card {
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
z-index: 9998;
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
background-color: map-get($tile-theme, bg);
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
outline: none;
|
||||
transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
|
||||
min-height: 200px;
|
||||
padding: 0 !important;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.theme-#{$i} & {
|
||||
$theme: map-get($themes, theme-#{$i});
|
||||
color: map-get($theme, color);
|
||||
&:hover {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
|
||||
cursor: pointer;
|
||||
transform: scale(1.015);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
z-index: 9998;
|
||||
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.theme-#{$i} & {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
color: map-get($tile-theme, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: 16px;
|
||||
margin-bottom: 0;
|
||||
z-index: 9999;
|
||||
&-title {
|
||||
padding: 16px;
|
||||
margin-bottom: 0 !important;
|
||||
z-index: 9999;
|
||||
|
||||
h1 {
|
||||
h1 {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
|
||||
&-subtitle {
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
|
||||
.line-clamp {
|
||||
@include line-clamp(1.25, 3);
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 0 16px 16px 16px;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
.line-clamp {
|
||||
@include line-clamp(1.25, 3);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-card-actions {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
&-actions {
|
||||
padding: 0 16px 16px 16px !important;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
}
|
||||
|
||||
&.mat-card-actions {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
@import '../task-list/components/start-task.component';
|
||||
@import '../task-list/components/task-filters.component';
|
||||
@import '../task-list/components/task-header.component';
|
||||
@import '../app-list/apps-list.component';
|
||||
|
||||
@mixin adf-process-services-theme($theme) {
|
||||
@include adf-process-filters-theme($theme);
|
||||
@ -16,4 +17,5 @@
|
||||
@include adf-task-list-header-theme($theme);
|
||||
@include adf-process-attachment-list-theme($theme);
|
||||
@include adf-task-attachment-list-theme($theme);
|
||||
@include adf-apps-theme($theme);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user