Skip to content

Commit b741b25

Browse files
umapraseedaumapraseeda
committed
doc: Theme fixes
Theme fixes Signed-off-by: Uma Praseeda <uma.praseeda@nordicsemi.no>
1 parent 5c10463 commit b741b25

3 files changed

Lines changed: 65 additions & 35 deletions

File tree

‎sphinx_ncs_theme/layout.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@
138138
target="_blank"
139139
rel="noopener noreferrer"
140140
class="btn ncs-btn-header">
141-
<span class="ncs-label-long">{{ theme_ncs_label | default('nRF Connect SDK') }}</span>
142-
<span class="ncs-label-short">NCS</span>
141+
<span class="ncs-label-long">{{ theme_ncs_label | default('nRF Connect Docs') }}</span>
142+
<span class="ncs-label-short">nRF Connect Docs</span>
143143
</a>
144144
{%- endif %}
145145
</div>

‎sphinx_ncs_theme/static/css/nordic.css‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ kbd {
430430
.ncs-header-top .row > .col-md-6 {
431431
justify-content: flex-start !important;
432432
padding-left: 0 !important;
433-
margin-left: -11rem !important;
433+
/*margin-left: -11rem !important;*/
434434
}
435435
.ncs-header-top .row > .col-8 form,
436436
.ncs-header-top .row > .col-md-6 form {
@@ -455,10 +455,10 @@ kbd {
455455
.ncs-header-top .row > .col-8 .form-control,
456456
.ncs-header-top .row > .col-md-6 .ncs-search-input,
457457
.ncs-header-top .row > .col-md-6 .form-control {
458-
max-width: 100%;
458+
max-width: 95%;
459459
box-sizing: border-box;
460460
min-width: 12rem;
461-
margin-left: 0.25rem;
461+
margin-left: 1.35rem;
462462
}
463463

464464
/* Logo image: constrained to header, same look as docs.nordicsemi.com */
@@ -645,15 +645,26 @@ kbd {
645645
@media screen and (max-width: 1999px) {
646646
.ncs-header-top .row > .col-4 .dropdown,
647647
.ncs-header-top .row > .col-md-4 .dropdown {
648-
margin-right: 0.75rem;
648+
margin-right: 0;
649649
}
650650
}
651651
.ncs-header-top .row > .col-md-4.d-flex > .dropdown {
652-
margin-right: -62px;
652+
/*margin-right: -62px;*/
653+
margin-right: 5px;
653654
}
654655
.ncs-header-top .ncs-btn-versions {
655656
margin-right: 0;
656657
}
658+
/* Versions dropdown: wrapper/menu match toggle width */
659+
.ncs-header-top .dropdown:has(.ncs-btn-versions) {
660+
width: fit-content;
661+
max-width: 100%;
662+
}
663+
.ncs-header-top .dropdown:has(.ncs-btn-versions) .dropdown-menu {
664+
width: 100%;
665+
min-width: fit-content;
666+
box-sizing: border-box;
667+
}
657668
.ncs-btn-header:hover {
658669
background-color: #e0f4f9 !important;
659670
color: #0033a0 !important;
@@ -744,7 +755,7 @@ kbd {
744755
/* From 1199px: buttons on the right, natural width */
745756
@media screen and (min-width: 1199px) {
746757
.ncs-header-top .row > .col-8 form {
747-
max-width: 100%;
758+
max-width: 96%;
748759
}
749760
.ncs-header-top .dropdown,
750761
.ncs-header-top .ncs-btn-header {
@@ -774,7 +785,7 @@ kbd {
774785
@media screen and (min-width: 1200px) {
775786
.ncs-header-top .row > .col-8,
776787
.ncs-header-top .row > .col-md-6 {
777-
min-width: 12rem;
788+
min-width: 8rem;
778789
max-width: 50rem;
779790
}
780791
}
@@ -783,12 +794,12 @@ kbd {
783794
.ncs-header-top .row > .col-4,
784795
.ncs-header-top .row > .col-md-4 {
785796
align-self: center !important;
786-
margin-top: 3.35rem !important;
797+
margin-top: 3rem !important;
787798
}
788799
}
789800

790801
/* From 1680px: 3 buttons in one row at the rightmost end; shrink with ellipsis when needed */
791-
@media screen and (min-width: 1680px) {
802+
@media screen and (min-width: 2000px) {
792803
.ncs-header-top .row > .col-8,
793804
.ncs-header-top .row > .col-md-6 {
794805
margin-left: auto !important;
@@ -801,26 +812,26 @@ kbd {
801812
.ncs-header-top .row > .col-md-4 {
802813
min-width: 0;
803814
max-width: 50%;
804-
overflow: hidden;
815+
overflow: visible;
805816
margin-left: auto;
806817
margin-right: 0;
807818
}
808819
.ncs-header-top .row .col-4.d-flex,
809820
.ncs-header-top .row .col-md-4.d-flex {
810-
/*width: 100%;*/
821+
width: 100%;
811822
/*flex-wrap: wrap;*/
812823
gap: 0.75rem !important;
813824
justify-content: center !important;
814825
}
815826
.ncs-header-top .row > .col-md-4.d-flex .dropdown,
816827
.ncs-header-top .row > .col-md-4.d-flex .ncs-btn-header {
817828
flex-shrink: 1 !important;
818-
min-width: 10rem !important;
829+
min-width: 10.5rem !important;
819830
max-width: 100%;
820831
}
821832
.ncs-header-top .row > .col-md-4 .dropdown .ncs-btn-versions,
822833
.ncs-header-top .row > .col-md-4 .ncs-btn-header {
823-
min-width: 0 !important;
834+
min-width: 10rem !important;
824835
overflow: hidden;
825836
text-overflow: ellipsis;
826837
}
@@ -829,9 +840,9 @@ kbd {
829840
@media screen and (max-width: 1886px) and (min-width: 1200px) {
830841
.ncs-header-top .row > .col-8,
831842
.ncs-header-top .row > .col-md-6 {
832-
margin-left: 0 !important;
843+
margin-left: -6px !important;
833844
min-width: 0 !important;
834-
max-width: 100%;
845+
/*max-width: 100%;*/
835846
}
836847
.ncs-header-top .row > .col-8 .ncs-search-input,
837848
.ncs-header-top .row > .col-8 .form-control,
@@ -841,33 +852,37 @@ kbd {
841852
}
842853
.ncs-header-top .row .col-4.d-flex,
843854
.ncs-header-top .row .col-md-4.d-flex {
844-
flex-direction: column !important;
855+
flex-direction: row !important;
845856
flex-wrap: nowrap !important;
846857
align-items: stretch !important;
847858
align-self: flex-start;
848-
margin-right: 12rem;
859+
/*margin-right: 12rem;*/
849860
/*justify-content: flex-start;*/
850-
gap: 0.25rem !important;
861+
gap: 10px !important;
851862
min-width: 0;
852863
max-width: 100%;
853-
width:20%;
864+
/*width:20%;*/
854865
padding-bottom: 3.5rem !important;
866+
margin-top:90px !important;
867+
margin-left: -11px;
855868
}
856869
.ncs-header-top .row > .col-md-4 .dropdown,
857870
.ncs-header-top .row > .col-md-4 .ncs-btn-header {
858-
width: 100%;
871+
/*width: 100%;*/
859872
min-width: 0;
860873
flex-shrink: 0;
861874
box-sizing: border-box;
875+
margin-right:10px !important;
862876
}
863-
.ncs-header-top .row > .col-md-4 .dropdown {
877+
/*.ncs-header-top .row > .col-md-4 .dropdown {
864878
width: 100% !important;
865-
}
879+
}*/
866880
.ncs-header-top .row > .col-md-4 .dropdown .ncs-btn-versions {
867881
width: 100% !important;
868882
box-sizing: border-box;
869883
justify-content: center;
870884
text-align: center;
885+
min-width:10rem;
871886
}
872887
}
873888
/* Keep header search + buttons on one line until very small screens
@@ -939,15 +954,16 @@ kbd {
939954
.ncs-header-top .row > .col-4.d-flex,
940955
.ncs-header-top .row > .col-md-4.d-flex {
941956
min-width: 0 !important;
942-
max-width: 33.5% !important;
957+
max-width: 33% !important;
943958
padding-top: .5rem !important;
944959
padding-bottom: 2px !important;
960+
margin-right:11px
945961

946962
}
947963
.ncs-header-top .row > .col-md-4 .dropdown,
948964
.ncs-header-top .row > .col-md-4 .ncs-btn-header {
949965
flex: 0 0 auto;
950-
min-width: 0;
966+
min-width: 100%;
951967
max-width: 100%;
952968
margin-right: 0px !important;
953969
}
@@ -1368,7 +1384,7 @@ kbd {
13681384
.wy-side-scroll::-webkit-scrollbar,
13691385
.wy-nav-content-wrap::-webkit-scrollbar,
13701386
.wy-nav-content::-webkit-scrollbar {
1371-
width: 10px;
1387+
width: 5px;
13721388
}
13731389
.wy-side-scroll::-webkit-scrollbar-thumb,
13741390
.wy-nav-content-wrap::-webkit-scrollbar-thumb,
@@ -1481,7 +1497,7 @@ div[role="navigation"] hr {
14811497
margin-top: 0.5rem;
14821498
margin-bottom: 0.5rem;
14831499
/* Bleed into .wy-nav-content horizontal padding (must match that rule) */
1484-
margin-left: -3em;
1500+
margin-left: -2em;
14851501
margin-right: calc(-1 * max(2em, 4.5rem));
14861502
width: calc(100% + 2em + max(2em, 4.5rem));
14871503
max-width: none;
@@ -2485,11 +2501,14 @@ nav.contents.local .ncs-local-toc-tool .ncs-local-toc-icon {
24852501
justify-content: center;
24862502
gap: 0px;
24872503
line-height: 1;
2488-
flex-shrink: 0;
2504+
/*flex-shrink: 0;*/
24892505
}
24902506
.wy-side-scroll .ncs-sidebar-toc-btn .ncs-local-toc-guillemet {
24912507
display: block;
2492-
font-size: 1.1rem;
2508+
font-size: 1em;
2509+
gap:3px;
2510+
align-items:center;
2511+
justify-content:center;
24932512
line-height: 1;
24942513
color: #000;
24952514
}
@@ -2498,15 +2517,16 @@ nav.contents.local .ncs-local-toc-tool .ncs-local-toc-icon {
24982517
color: #0077c8;
24992518
}
25002519
.wy-side-scroll .ncs-sidebar-toc-btn .ncs-local-toc-guillemet--up {
2501-
transform: rotate(-90deg) translateY(1.5px);
2520+
transform: rotate(-90deg) scaleX(1.25);
2521+
;
25022522
transform-origin: center;
25032523
}
25042524
.wy-side-scroll .ncs-sidebar-toc-btn .ncs-local-toc-guillemet--down {
2505-
transform: rotate(90deg) translateY(-4.45px);
2525+
transform: rotate(90deg) scalex(1.25) translateY(-5px);
25062526
transform-origin: center;
25072527
}
25082528
.wy-side-scroll .ncs-sidebar-toc-btn .ncs-local-toc-guillemet + .ncs-local-toc-guillemet {
2509-
margin-top: -10px;
2529+
margin-top: -13px;
25102530
}
25112531
.wy-side-scroll span.ncs-sidebar-toc-btn__label {
25122532
font-size: 14px;
@@ -3257,4 +3277,5 @@ span.guilabel {
32573277
}
32583278
.rst-content table.docutils td code {
32593279
border: 1px solid #dae2e3 !important;
3260-
}
3280+
}
3281+

‎sphinx_ncs_theme/static/js/ncs.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ function NCS () {
143143
ncs.findCurrentVersion();
144144
ncs.findCurrentPage();
145145
ncs.updateVersionDropDown();
146-
ncs.showVersion();
146+
/*ncs.showVersion();*/
147147
};
148148

149149
const NCS_SESSION_KEY = "ncs";
@@ -416,6 +416,15 @@ function initNcsSidebarTocToolbar() {
416416
})
417417
.addClass('current')
418418
.attr('aria-expanded', 'true');
419+
// Top-level leaf ToC rows (no nested <ul>): same .current styling as branches
420+
$menu
421+
.children('ul')
422+
.children('li')
423+
.filter(function () {
424+
return $(this).children('ul').length === 0;
425+
})
426+
.addClass('current')
427+
.attr('aria-expanded', 'true');
419428
syncExpandButtons();
420429
});
421430

0 commit comments

Comments
 (0)