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

Commit 6be039b

Browse files
eric-jeric-j
authored
tab group style updates (#437)
* tab group style updates * minor tweaks
1 parent 7a1a887 commit 6be039b

File tree

3 files changed

+52
-14
lines changed

3 files changed

+52
-14
lines changed

‎api_server/modules/apiweb/styles/web.css

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,18 +206,26 @@ h6 {
206206
.content-body-tab-container {
207207
margin-top: 32px;
208208
margin-bottom: 10px;
209+
border-bottom: 1px solid #3c3c3c;
209210
display: flex;
210211
justify-content: space-between;
211212
}
212213
.content-body-tab-header {
213214
font-size: larger;
214215
cursor: pointer;
216+
display: inline-block;
217+
text-align: center;
218+
padding-bottom: 5px;
219+
margin-bottom: -1px;
220+
}
221+
.content-body-copy {
222+
margin-bottom: 12px;
215223
}
216224
.content-body-tab {
217225
display: none;
218226
}
219227
.content-active-tab {
220-
display: block !important;
228+
/* display: block !important; */
221229
border-bottom: 1px solid;
222230
}
223231
.box-border {
@@ -669,6 +677,17 @@ hr {
669677
margin-top: 10px;
670678
}
671679

680+
@media (max-width: 768px) {
681+
.content-body-tab-icon {
682+
display: none !important;
683+
}
684+
.content-body-tab-header {
685+
display: flex;
686+
align-items: center;
687+
justify-content: center;
688+
}
689+
}
690+
672691
@media (min-width: 1px) {
673692
.btn-block-wrap {
674693
width: 100%;

‎api_server/modules/apiweb/templates/partial_launcher_detailed.hbs

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -642,26 +642,26 @@ function onIdeSelected(e, moniker) {
642642
</div>
643643

644644
<div class="content-body-tab-container">
645-
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
646-
<svg style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M4.446 1h7.108c.377 0 .747.114 1.067.327a2.131 2.131 0 01.747.882l2.576 5.534A.61.61 0 0116 8v4.82c0 .578-.213 1.133-.594 1.541-.38.41-.895.639-1.433.639H2.027c-.538 0-1.053-.23-1.433-.639A2.267 2.267 0 010 12.82V8c0-.09.02-.177.056-.257L2.632 2.21c.168-.363.426-.669.747-.883.32-.213.69-.327 1.067-.327zm0 1.148a.91.91 0 00-.505.155 1.01 1.01 0 00-.354.418v.001l-2.19 4.704h3.616c.179 0 .345.096.444.256l1.335 2.154h2.416l1.335-2.154a.524.524 0 01.444-.256h3.616l-2.19-4.704v-.001a1.009 1.009 0 00-.354-.418.91.91 0 00-.505-.155m3.38 6.426h-3.662l-1.335 2.154a.524.524 0 01-.444.256H6.507a.524.524 0 01-.444-.256L4.728 8.574H1.067v4.246c0 .274.1.536.28.73.18.194.425.302.68.302h11.946a.928.928 0 00.68-.302c.18-.194.28-.456.28-.73V8.574z" clip-rule="evenodd"></path></svg>
645+
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
646+
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M4.446 1h7.108c.377 0 .747.114 1.067.327a2.131 2.131 0 01.747.882l2.576 5.534A.61.61 0 0116 8v4.82c0 .578-.213 1.133-.594 1.541-.38.41-.895.639-1.433.639H2.027c-.538 0-1.053-.23-1.433-.639A2.267 2.267 0 010 12.82V8c0-.09.02-.177.056-.257L2.632 2.21c.168-.363.426-.669.747-.883.32-.213.69-.327 1.067-.327zm0 1.148a.91.91 0 00-.505.155 1.01 1.01 0 00-.354.418v.001l-2.19 4.704h3.616c.179 0 .345.096.444.256l1.335 2.154h2.416l1.335-2.154a.524.524 0 01.444-.256h3.616l-2.19-4.704v-.001a1.009 1.009 0 00-.354-.418.91.91 0 00-.505-.155m3.38 6.426h-3.662l-1.335 2.154a.524.524 0 01-.444.256H6.507a.524.524 0 01-.444-.256L4.728 8.574H1.067v4.246c0 .274.1.536.28.73.18.194.425.302.68.302h11.946a.928.928 0 00.68-.302c.18-.194.28-.456.28-.73V8.574z" clip-rule="evenodd"></path></svg>
647647
Errors
648648
</div>
649-
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
650-
<svg style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M7.7 0H2v15h11V5.3L7.7 0zm3.6 5H8V1.7L11.3 5zM3 1v13h9V6H7V1H3zm2 7h5v1H5V8zm3 3H5v1h3v-1z" clip-rule="evenodd"></path></svg>
649+
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
650+
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M7.7 0H2v15h11V5.3L7.7 0zm3.6 5H8V1.7L11.3 5zM3 1v13h9V6H7V1H3zm2 7h5v1H5V8zm3 3H5v1h3v-1z" clip-rule="evenodd"></path></svg>
651651
Logs
652652
</div>
653-
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
654-
<svg style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M13 1H2C.9 1 0 1.9 0 3v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm1 12c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5h13v8zM1 4h13V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v1zm3.4 8.4l2.8-2.9-2.8-2.9-.8.8 2.2 2.1-2.2 2.1.8.8zM12 11H8v1h4v-1z" clip-rule="evenodd"></path></svg>
653+
<div style="width: 29%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
654+
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M13 1H2C.9 1 0 1.9 0 3v10c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm1 12c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V5h13v8zM1 4h13V3c0-.6-.4-1-1-1H2c-.6 0-1 .4-1 1v1zm3.4 8.4l2.8-2.9-2.8-2.9-.8.8 2.2 2.1-2.2 2.1.8.8zM12 11H8v1h4v-1z" clip-rule="evenodd"></path></svg>
655655
NRQL Queries
656656
</div>
657-
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
658-
<svg style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M9 12v3H1v-3h8zm-1 1H2v1h6v-1zm4-6v3H1V7h11zm-1 1H2v1h9V8zm4-6v3H1V2h14zm-1 1H2v1h12V3z" clip-rule="evenodd"></path></svg>
657+
<div style="width: 32%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
658+
<svg class="content-body-tab-icon" style="margin-top: -5px; width: 16px; fill: rgb(220, 223, 228)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M9 12v3H1v-3h8zm-1 1H2v1h6v-1zm4-6v3H1V7h11zm-1 1H2v1h9V8zm4-6v3H1V2h14zm-1 1H2v1h12V3z" clip-rule="evenodd"></path></svg>
659659
Code Performance
660660
</div>
661661
</div>
662662

663663
<div class="content-body-tab" id="content-body-tab1">
664-
<div>
664+
<div class="content-body-copy">
665665
Use the frames of the stack trace to navigate the code. Leverage the power of New Relic AI, and the help
666666
your teammates, to collaborate on the investigation.
667667
</div>
@@ -670,7 +670,7 @@ function onIdeSelected(e, moniker) {
670670
</div>
671671
</div>
672672
<div class="content-body-tab" id="content-body-tab2">
673-
<div>
673+
<div class="content-body-copy">
674674
Search logs for your APM or OTel services, or even an Infra container. Intiate a log search
675675
directly from specific log lines in your code.
676676
</div>
@@ -679,7 +679,7 @@ function onIdeSelected(e, moniker) {
679679
</div>
680680
</div>
681681
<div class="content-body-tab" id="content-body-tab3">
682-
<div>
682+
<div class="content-body-copy">
683683
Run queries right from your IDE, with auto-complete, visualizations, and export. Share commonly
684684
used queries in .nrql files added to your repo, and run queries right from the file.
685685
</div>
@@ -688,7 +688,7 @@ function onIdeSelected(e, moniker) {
688688
</div>
689689
</div>
690690
<div class="content-body-tab" id="content-body-tab4">
691-
<div>
691+
<div class="content-body-copy">
692692
Identify transactions that are exhibiting performance problems since your last release, and drill down
693693
into specific methods, database operations or external services that are at the root of the problem.
694694
</div>

‎api_server/modules/web/styles/web.css

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,18 +206,26 @@ h6 {
206206
.content-body-tab-container {
207207
margin-top: 32px;
208208
margin-bottom: 10px;
209+
border-bottom: 1px solid #3c3c3c;
209210
display: flex;
210211
justify-content: space-between;
211212
}
212213
.content-body-tab-header {
213214
font-size: larger;
214215
cursor: pointer;
216+
display: inline-block;
217+
text-align: center;
218+
padding-bottom: 5px;
219+
margin-bottom: -1px;
220+
}
221+
.content-body-copy {
222+
margin-bottom: 12px;
215223
}
216224
.content-body-tab {
217225
display: none;
218226
}
219227
.content-active-tab {
220-
display: block !important;
228+
/* display: block !important; */
221229
border-bottom: 1px solid;
222230
}
223231
.box-border {
@@ -669,6 +677,17 @@ hr {
669677
margin-top: 10px;
670678
}
671679

680+
@media (max-width: 768px) {
681+
.content-body-tab-icon {
682+
display: none !important;
683+
}
684+
.content-body-tab-header {
685+
display: flex;
686+
align-items: center;
687+
justify-content: center;
688+
}
689+
}
690+
672691
@media (min-width: 1px) {
673692
.btn-block-wrap {
674693
width: 100%;

0 commit comments

Comments
 (0)