Skip to content

Commit 82ed883

Browse files
author
OpenShift Bot
authored
Merge pull request #1402 from sg00dwin/animation-overview
Merged by openshift-bot
2 parents b5de937 + fad6740 commit 82ed883

File tree

9 files changed

+391
-145
lines changed

9 files changed

+391
-145
lines changed

‎app/scripts/services/html.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ angular.module("openshiftConsole")
66
return {
77
// Ge the breakpoint for the current screen width.
88
getBreakpoint: function() {
9+
if (window.innerWidth < BREAKPOINTS.screenXsMin) {
10+
return 'xxs';
11+
}
12+
913
if (window.innerWidth < BREAKPOINTS.screenSmMin) {
1014
return 'xs';
1115
}

‎app/styles/_overview.less

Lines changed: 182 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -145,24 +145,47 @@
145145
.data-toolbar-label {
146146
margin-right: 7px;
147147
}
148-
// TODO: improve on this as it's pretty hacky
149-
.deployment-connector-arrow {
150-
display: inline-block;
151-
font-size: 300%;
152-
line-height: 1;
153-
margin: 50px 0 0 10px;
154-
text-align: center;
155-
.text-muted();
156-
@media (max-width: @screen-xs-max) {
157-
margin: -3px auto 0 -4px;
158-
transform: rotate(90deg);
159-
width: 100%
148+
.deployment-connector {
149+
align-items: flex-end;
150+
display: flex;
151+
flex: 1 1 auto;
152+
justify-content: center;
153+
@media (min-width: @screen-xs-min) {
154+
align-items: center;
155+
justify-content: flex-end;
156+
}
157+
.deployment-connector-arrow {
158+
align-items: center;
159+
display: flex;
160+
font-size: 300%;
161+
.text-muted();
162+
&:before {
163+
content: '\2192';
164+
// center arrow
165+
margin-top: -8px;
166+
padding-right: 0;
167+
}
168+
@media (max-width: @screen-xxs-max) {
169+
&:before {
170+
content: '\2191';
171+
// center arrow when donuts stacked
172+
margin-top: -20px;
173+
padding-right: 23px;
174+
}
175+
}
160176
}
161177
}
162178
.expanded-section {
163179
margin-top: 20px;
164180
> .row > [class^=col-] {
165181
margin-bottom: 10px;
182+
@media (min-width: @screen-lg-min) {
183+
// aligns 2nd columns with metrics
184+
&.overview-builds-msg,
185+
&.overview-routes {
186+
padding-left: 0;
187+
}
188+
}
166189
}
167190
h3 {
168191
line-height: 1.4;
@@ -205,6 +228,7 @@
205228
min-width: 19px;
206229
}
207230
.list-pf-details {
231+
.fade-in();
208232
@media (min-width: @screen-sm-min) {
209233
justify-content: flex-end;
210234
}
@@ -229,6 +253,9 @@
229253
}
230254
.list-pf-container {
231255
display: block; // so that .word-break() will work in IE
256+
@media (max-width: @screen-xs-max) {
257+
overflow: hidden; // so animation offsets are hidden when sliding in vertically
258+
}
232259
}
233260
.pod-donut {
234261
.text-center();
@@ -238,6 +265,9 @@
238265
border-top-color: @list-pf-border-color;
239266
&.active {
240267
border-top-color: @list-pf-item-active-border-color;
268+
@media (min-width: @screen-xs-min) {
269+
overflow: hidden; // so animation offsets are hidden when sliding in horizontally
270+
}
241271
}
242272
> .list-pf-container {
243273
cursor: pointer;
@@ -324,7 +354,7 @@
324354
max-width: 80px;
325355
}
326356
.usage-label {
327-
// Make sure the labels align with the bottom of the chart.
357+
// Make sure the labels align with the bottom of the chart.
328358
line-height: 1;
329359
margin-bottom: -1px;
330360
}
@@ -349,10 +379,6 @@
349379
border-top: 1px solid @list-pf-border-color;
350380
margin: 0 20px 10px;
351381
}
352-
overview-list-row + overview-list-row .list-pf-item.active {
353-
// avoid double borders when list-pf-item is open
354-
margin-top: -1px;
355-
}
356382
.overview-route {
357383
.word-break();
358384
}
@@ -400,7 +426,145 @@
400426
margin-top: 10px;
401427
}
402428
}
403-
}
429+
430+
// Deployment animations
431+
@keyframes deploymentSlideDown {
432+
0% {
433+
// align previous and latest donut start position
434+
transform: translateY(-220px);
435+
}
436+
100% {
437+
transform: translateX(0);
438+
}
439+
}
440+
441+
@keyframes deploymentSlideIn {
442+
0% {
443+
// align previous and latest donut start position
444+
transform: translateX(240px);
445+
}
446+
100% {
447+
transform: translateX(0);
448+
}
449+
}
450+
451+
.row-expanded-top {
452+
display: flex;
453+
flex-wrap: wrap;
454+
justify-content: space-between;
455+
@media (min-width: @screen-lg-min) {
456+
// width needed to enable flex to trigger word-break on content
457+
.overview-animation-block,
458+
.overview-pod-template {
459+
width: 50%;
460+
}
461+
}
462+
.overview-animation-block {
463+
display: flex;
464+
flex: 1 1 auto;
465+
justify-content: center;
466+
@media (min-width: @screen-sm-min) {
467+
&.animation-in-progress .overview-deployment-donut .latest-donut {
468+
justify-content: flex-end;
469+
}
470+
}
471+
.overview-deployment-donut {
472+
@media (min-width: @screen-xs-min) {
473+
display: flex;
474+
flex: 1 1 auto;
475+
// prevents resize jump; set height since the donut isn't displayed exactly when expanded-section is rendered
476+
height: 150px;
477+
max-width: 450px;
478+
}
479+
&.ng-enter {
480+
animation: deploymentSlideIn 750ms ease forwards;
481+
}
482+
&.stacked-template {
483+
.overview-pod-template {
484+
min-width: 100%;
485+
}
486+
@media (max-width: @screen-xxs-max) {
487+
display: flex;
488+
// stack latest deployment-donut above previous-donut
489+
flex-direction: column-reverse;
490+
&.ng-enter {
491+
animation: deploymentSlideDown 750ms ease forwards;
492+
}
493+
}
494+
}
495+
.latest-donut {
496+
display: flex;
497+
flex: 1 1 auto;
498+
// right align donut
499+
justify-content: flex-end;
500+
}
501+
.previous-donut {
502+
display: flex;
503+
flex: 1 1 auto;
504+
.fade-out();
505+
&.ng-enter-prepare {
506+
// prevent previous-donut initial "flash" before animation
507+
display: none;
508+
}
509+
@media (max-width: @screen-xxs-max) {
510+
flex-direction: column;
511+
deployment-donut {
512+
// move arrow to point at latest deployment-donut
513+
order: 2;
514+
}
515+
}
516+
}
517+
}
518+
}
519+
&.metrics-active {
520+
@media (max-width: @screen-md-max) {
521+
flex-direction: column;
522+
.overview-pod-template {
523+
min-width: 100%;
524+
order: 3;
525+
}
526+
}
527+
.overview-animation-block {
528+
@media (min-width: @screen-xs-min) and (max-width: @screen-md-max) {
529+
justify-content: space-between;
530+
// add spacing when pod-template-block is stacked beneath
531+
padding-bottom: 20px;
532+
&.animation-in-progress {
533+
justify-content: center;
534+
}
535+
}
536+
}
537+
.overview-metrics {
538+
display:none;
539+
// display metrics beside donut
540+
@media (min-width: @screen-xs-min) {
541+
display:block;
542+
.fade-in();
543+
.fade-out();
544+
width: 50%;
545+
}
546+
}
547+
}
548+
&.metrics-not-active {
549+
.overview-pod-template {
550+
// prevent wrapping of flex containers
551+
width: 50%;
552+
}
553+
}
554+
.overview-pod-template {
555+
flex: 1 1 auto;
556+
.pod-template-block {
557+
// add space so text can't touch metrics or doughnut
558+
padding-right: 10px;
559+
&.ng-leave-prepare {
560+
// prevent previous-donut initial "flash" before animation
561+
display: none;
562+
}
563+
}
564+
}
565+
}
566+
567+
} // end overview-new
404568

405569
.overview {
406570
font-weight: @overview-font-weight;

‎app/views/_pod-template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<div class="icon-wrap">
5757
<span class="fa fa-code" aria-hidden="true"></span>
5858
</div>
59-
<div flex>
59+
<div flex class="word-break">
6060
<span class="pod-template-key">Source:</span>
6161
<span ng-switch="build.spec.source.type">
6262
<span ng-switch-when="Git">

‎app/views/overview/_builds.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div ng-if="overviewBuilds.buildConfigs.length" class="expanded-section">
22
<div class="section-title hidden-xs">Builds</div>
33
<div ng-repeat="buildConfig in overviewBuilds.buildConfigs track by (buildConfig | uid)" class="row">
4-
<div class="col-sm-5">
4+
<div class="col-sm-5 col-md-6">
55
<h3 class="mar-top-xs">
66
<a ng-href="{{buildConfig | navigateResourceURL}}">{{buildConfig.metadata.name}}</a>
77
</h3>
88
</div>
9-
<div class="col-sm-7">
9+
<div class="col-sm-7 col-md-6 overview-builds-msg">
1010
<div ng-if="!(overviewBuilds.recentBuildsByBuildConfig[buildConfig.metadata.name] | hashSize)">
1111
No builds.
1212
</div>

0 commit comments

Comments
 (0)