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

tab group style updates #437

Merged
eric-j merged 2 commits into from
Apr 10, 2024
Merged

tab group style updates #437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
415a91c
tab group style updates
eric-j Apr 10, 2024
6f68a45
minor tweaks
eric-j Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion api_server/modules/apiweb/styles/web.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,18 +206,26 @@ h6 {
.content-body-tab-container {
margin-top: 32px;
margin-bottom: 10px;
border-bottom: 1px solid #3c3c3c;
display: flex;
justify-content: space-between;
}
.content-body-tab-header {
font-size: larger;
cursor: pointer;
display: inline-block;
text-align: center;
padding-bottom: 5px;
margin-bottom: -1px;
}
.content-body-copy {
margin-bottom: 12px;
}
.content-body-tab {
display: none;
}
.content-active-tab {
display: block !important;
/* display: block !important; */
border-bottom: 1px solid;
}
.box-border {
Expand Down Expand Up @@ -669,6 +677,17 @@ hr {
margin-top: 10px;
}

@media (max-width: 768px) {
.content-body-tab-icon {
display: none !important;
}
.content-body-tab-header {
display: flex;
align-items: center;
justify-content: center;
}
}

@media (min-width: 1px) {
.btn-block-wrap {
width: 100%;
Expand Down
24 changes: 12 additions & 12 deletions api_server/modules/apiweb/templates/partial_launcher_detailed.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -642,26 +642,26 @@ function onIdeSelected(e, moniker) {
</div>

<div class="content-body-tab-container">
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
<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>
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab1')">
<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>
Errors
</div>
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
<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>
<div style="width: 17%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab2')">
<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>
Logs
</div>
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
<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>
<div style="width: 29%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab3')">
<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>
NRQL Queries
</div>
<div class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
<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>
<div style="width: 32%" class="content-body-tab-header" onclick="openTab(event, 'content-body-tab4')">
<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>
Code Performance
</div>
</div>

<div class="content-body-tab" id="content-body-tab1">
<div>
<div class="content-body-copy">
Use the frames of the stack trace to navigate the code. Leverage the power of New Relic AI, and the help
your teammates, to collaborate on the investigation.
</div>
Expand All @@ -670,7 +670,7 @@ function onIdeSelected(e, moniker) {
</div>
</div>
<div class="content-body-tab" id="content-body-tab2">
<div>
<div class="content-body-copy">
Search logs for your APM or OTel services, or even an Infra container. Intiate a log search
directly from specific log lines in your code.
</div>
Expand All @@ -679,7 +679,7 @@ function onIdeSelected(e, moniker) {
</div>
</div>
<div class="content-body-tab" id="content-body-tab3">
<div>
<div class="content-body-copy">
Run queries right from your IDE, with auto-complete, visualizations, and export. Share commonly
used queries in .nrql files added to your repo, and run queries right from the file.
</div>
Expand All @@ -688,7 +688,7 @@ function onIdeSelected(e, moniker) {
</div>
</div>
<div class="content-body-tab" id="content-body-tab4">
<div>
<div class="content-body-copy">
Identify transactions that are exhibiting performance problems since your last release, and drill down
into specific methods, database operations or external services that are at the root of the problem.
</div>
Expand Down
21 changes: 20 additions & 1 deletion api_server/modules/web/styles/web.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,18 +206,26 @@ h6 {
.content-body-tab-container {
margin-top: 32px;
margin-bottom: 10px;
border-bottom: 1px solid #3c3c3c;
display: flex;
justify-content: space-between;
}
.content-body-tab-header {
font-size: larger;
cursor: pointer;
display: inline-block;
text-align: center;
padding-bottom: 5px;
margin-bottom: -1px;
}
.content-body-copy {
margin-bottom: 12px;
}
.content-body-tab {
display: none;
}
.content-active-tab {
display: block !important;
/* display: block !important; */
border-bottom: 1px solid;
}
.box-border {
Expand Down Expand Up @@ -669,6 +677,17 @@ hr {
margin-top: 10px;
}

@media (max-width: 768px) {
.content-body-tab-icon {
display: none !important;
}
.content-body-tab-header {
display: flex;
align-items: center;
justify-content: center;
}
}

@media (min-width: 1px) {
.btn-block-wrap {
width: 100%;
Expand Down