Skip to content
This repository was archived by the owner on Dec 17, 2024. It is now read-only.

Commit a29eaff

Browse files
starpitstarpit
committed
fix for poor positioning in sidecar header
Fixes #848
1 parent 9400b0d commit a29eaff

File tree

4 files changed

+77
-71
lines changed

4 files changed

+77
-71
lines changed

‎app/content/css/themes/ibm.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
/* color variables */
1010
body {
11+
--color-content-divider: #4173AF;
1112
--color-tag-beta-fill: #dfe3e6;
1213
--color-tag-beta-text: #394b54;
1314
--color-tag-ibm-fill: #c0e6ff;
@@ -91,7 +92,7 @@ sidecar {
9192
}
9293

9394
sidecar .sidecar-header {
94-
border-bottom-color: var(--color-ui-04);
95+
border-bottom-color: var(--color-content-divider);
9596
background: var(--color-ui-02);
9697
}
9798

‎app/content/css/ui.css‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -640,11 +640,15 @@ sidecar .custom-content {
640640
}
641641
sidecar .sidecar-header {
642642
display: flex;
643-
flex-direction: column;
644643
border-bottom: 1px solid;
645644
flex-basis: 9rem;
646645
min-height: 9rem; /* see shell issue #712 */
647646
}
647+
sidecar .sidecar-header .header-main-content {
648+
flex: 1;
649+
display: flex;
650+
flex-direction: column;
651+
}
648652
sidecar .header-right-bits {
649653
flex-direction: column;
650654
justify-content: center;
@@ -701,7 +705,7 @@ sidecar .sidecar-header-icon {
701705
transform-origin: center;
702706
width: 100%;
703707
height: 100%;
704-
font-size: 0.875rem;
708+
font-size: 1rem;
705709
font-weight: 400;
706710
letter-spacing: 1px;
707711
pointer-events: none; /* with text rotation, this element bumps into neighbors, otherwise obfuscating mouse events */
@@ -751,7 +755,6 @@ sidecar .sidecar-header-name .package-prefix {
751755
max-width: none;
752756
text-transform: uppercase;
753757
letter-spacing: 2px;
754-
margin-bottom: 0.25rem;
755758
opacity: 1;
756759
}
757760
sidecar.entity-is-activations .sidecar-header-name .activation-id {
@@ -776,7 +779,7 @@ sidecar.entity-is-activations .sidecar-header-name .sidecar-header-name-content
776779
sidecar .sidecar-header-secondary-content {
777780
font-size: 0.875rem;
778781
opacity: 0.75;
779-
margin: 1ex 2em;
782+
margin: 1ex 1em 1ex 0;
780783
}
781784
sidecar .sidecar-header-secondary-content .kind-content {
782785
overflow: hidden;

‎app/plugins/modules/activation-visualizations/web/css/table.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@
596596
}
597597
.activation-viz-plugin.grid-header-key {
598598
height: 8em;
599-
width: calc(8 * 2.25vw); /* 7 cells in legend, plus 1 for slop */
599+
width: calc(1.1 * 8 * 2.25vw); /* 7 cells in legend, plus 1 for slop, 1.1x for some more */
600600
font-size: 0.875em;
601601
padding: 0;
602602
}

‎app/templates/index.html‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -69,76 +69,78 @@
6969

7070
<sidecar id='sidecar'>
7171
<header class='sidecar-header'>
72-
<div class='header-top-bits'>
73-
<div class='header-left-bits'>
74-
<div class='sidecar-header-icon-wrapper'><div class='sidecar-header-icon'></div></div>
75-
<div class='sidecar-header-text'>
76-
<div class='sidecar-header-name' data-base-class='sidecar-header-name'>
77-
<!--<span class='activation-content'>of</span>-->
78-
<span class='sidecar-header-name-content' data-base-class='sidecar-header-name-content'>
79-
<span class='activation-content activation-id'></span>
80-
<span class='package-prefix'></span>
81-
<span class='entity-name-line'>
82-
<span class='entity-name'></span>
72+
<div class='sidecar-header-icon-wrapper'><div class='sidecar-header-icon'></div></div>
73+
<div class='header-main-content'>
74+
<div class='header-top-bits'>
75+
<div class='header-left-bits'>
76+
<div class='sidecar-header-text'>
77+
<div class='sidecar-header-name' data-base-class='sidecar-header-name'>
78+
<!--<span class='activation-content'>of</span>-->
79+
<span class='sidecar-header-name-content' data-base-class='sidecar-header-name-content'>
80+
<span class='activation-content activation-id'></span>
81+
<span class='package-prefix'></span>
82+
<span class='entity-name-line'>
83+
<span class='entity-name'></span>
84+
</span>
8385
</span>
86+
</div>
87+
</div> <!-- sidecar-header-text -->
88+
</div> <!-- header-left-bits -->
89+
<div class='header-right-bits'>
90+
<!--<span class='activation-content activation-status' data-title-base='Activation status: {status}'></span>-->
91+
<div class='action-content'>
92+
<span class='badges'>
93+
<span id='version'></span>
8494
</span>
85-
</div>
86-
</div> <!-- sidecar-header-text -->
87-
</div> <!-- header-left-bits -->
88-
<div class='header-right-bits'>
89-
<!--<span class='activation-content activation-status' data-title-base='Activation status: {status}'></span>-->
90-
<div class='action-content'>
91-
<span class='badges'>
92-
<span id='version'></span>
93-
</span>
94-
<a class='entity-web-export-url' target='_blank'>&#x1F310;</a>
95-
</div>
95+
<a class='entity-web-export-url' target='_blank'>&#x1F310;</a>
96+
</div>
97+
<div class='activation-content'>
98+
<strong class='activation-duration'></strong>
99+
<div class='activation-estimated-cost-container'>~$<span class='activation-estimated-cost'></span> per million</div>
100+
</div>
101+
<div class='custom-header-content'></div>
102+
</div> <!-- header-right-bits -->
103+
</div> <!-- header-top-bits -->
104+
<div class='sidecar-header-secondary-content'>
105+
<div class='action-content'>
106+
<span class='kind'></span>
107+
<!--<div class='kind-content'>This is a <span class='kind'></span> action</div>-->
108+
<!--<a class='entity-web-export-url' target='_blank'>View in Browser</a>-->
109+
<!--<span id='version'></span>-->
110+
</div>
96111
<div class='activation-content'>
97-
<strong class='activation-duration'></strong>
98-
<div class='activation-estimated-cost-container'>~$<span class='activation-estimated-cost'></span> per million</div>
99-
</div>
100-
<div class='custom-header-content'></div>
101-
</div> <!-- header-right-bits -->
102-
</div> <!-- header-top-bits -->
103-
<div class='sidecar-header-secondary-content'>
104-
<div class='action-content'>
105-
<span class='kind'></span>
106-
<!--<div class='kind-content'>This is a <span class='kind'></span> action</div>-->
107-
<!--<a class='entity-web-export-url' target='_blank'>View in Browser</a>-->
108-
<!--<span id='version'></span>-->
109-
</div>
110-
<div class='activation-content'>
111-
<div class='kind-content'>
112-
This activation started <strong class='activation-start'></strong>
112+
<div class='kind-content'>
113+
This activation started <strong class='activation-start'></strong>
114+
</div>
113115
</div>
114-
</div>
115-
<div class='package-content'>
116-
<div class='kind-content'>This is a package
117-
<!-- binding signifier -->
118-
<span class='package-binding-signifier'>binding of
119-
<span class='package-binding-of'></span>
120-
</span>
121-
with
122-
<span class='count-with-label package-action-count'>
123-
<span class='package-content-count'></span>
124-
<span class='label-plural'>actions</span><span class='label-singular'>action</span>, and
125-
</span>
126-
<span class='count-with-label package-feed-count'>
127-
<span class='package-content-count'></span>
128-
<span class='label-plural'>feeds</span><span class='label-singular'>feed</span>
129-
</span>
116+
<div class='package-content'>
117+
<div class='kind-content'>This is a package
118+
<!-- binding signifier -->
119+
<span class='package-binding-signifier'>binding of
120+
<span class='package-binding-of'></span>
121+
</span>
122+
with
123+
<span class='count-with-label package-action-count'>
124+
<span class='package-content-count'></span>
125+
<span class='label-plural'>actions</span><span class='label-singular'>action</span>, and
126+
</span>
127+
<span class='count-with-label package-feed-count'>
128+
<span class='package-content-count'></span>
129+
<span class='label-plural'>feeds</span><span class='label-singular'>feed</span>
130+
</span>
131+
</div>
130132
</div>
131-
</div>
132-
<div class='rule-content'>
133-
<div class='kind-content'>This is a rule</div>
134-
</div>
135-
<div class='trigger-content'>
136-
<div class='kind-content'><!--This is a trigger-->
137-
<span class='feed-content'></span>
138-
</div>
139-
</div>
140-
<div class='custom-header-content'></div>
141-
</div> <!-- secondary content -->
133+
<div class='rule-content'>
134+
<div class='kind-content'>This is a rule</div>
135+
</div>
136+
<div class='trigger-content'>
137+
<div class='kind-content'><!--This is a trigger-->
138+
<span class='feed-content'></span>
139+
</div>
140+
</div>
141+
<div class='custom-header-content'></div>
142+
</div> <!-- secondary content -->
143+
</div> <!-- main content -->
142144
</header>
143145
<div class='custom-content'></div>
144146
<div class='sidecar-content'>

0 commit comments

Comments
 (0)