From aaf81ba6c4ac54bbc4b33c3707a3a2456042c279 Mon Sep 17 00:00:00 2001 From: Pat Mellon Date: Fri, 22 Jan 2021 11:42:22 -0500 Subject: [PATCH 1/2] Add star rating functionality --- js/theme.js | 16 ++++++++++++++++ pytorch_sphinx_theme/footer.html | 18 +++++++++++------- pytorch_sphinx_theme/layout.html | 1 + scss/_sphinx_base.scss | 25 ++++++++++++++++++++----- 4 files changed, 48 insertions(+), 12 deletions(-) diff --git a/js/theme.js b/js/theme.js index b464aefd..d96ba3e4 100644 --- a/js/theme.js +++ b/js/theme.js @@ -359,3 +359,19 @@ if (link.text() == "SyntaxError") { console.log("There is an issue with the intermediate/speech_command_recognition_with_torchaudio.html menu item."); link.text("Speech Command Recognition with torchaudio"); } + +$(".stars-outer > i").hover(function() { + $(this).prevAll().addBack().toggleClass("fas star-fill"); +}); + +$(".stars-outer > i").on("click", function() { + $(this).prevAll().each(function() { + $(this).addBack().addClass("fas star-fill"); + }); + + $(".stars-outer > i").each(function() { + $(this).unbind("mouseenter mouseleave").css({ + "pointer-events": "none" + }); + }); +}) diff --git a/pytorch_sphinx_theme/footer.html b/pytorch_sphinx_theme/footer.html index e6cb6525..09df0e28 100644 --- a/pytorch_sphinx_theme/footer.html +++ b/pytorch_sphinx_theme/footer.html @@ -12,14 +12,18 @@ {% if theme_pytorch_project == 'tutorials' %} -
-
-
Was this helpful?
-
Yes
-
No
-
Thank you
+
+
+
Rate this Tutorial
+
+ + + + + +
-
+
{% else %} diff --git a/pytorch_sphinx_theme/layout.html b/pytorch_sphinx_theme/layout.html index 58ddefc4..839cc3dc 100644 --- a/pytorch_sphinx_theme/layout.html +++ b/pytorch_sphinx_theme/layout.html @@ -80,6 +80,7 @@ {% include "fonts.html" %} +
diff --git a/scss/_sphinx_base.scss b/scss/_sphinx_base.scss index 2bf14a4d..3b3d6fb7 100644 --- a/scss/_sphinx_base.scss +++ b/scss/_sphinx_base.scss @@ -138,19 +138,19 @@ ul.pytorch-breadcrumbs { .rst-content footer { - .helpful-hr.hr-top { + .rating-hr.hr-top { margin-bottom: rem(-1px); } - .helpful-hr.hr-bottom { + .rating-hr.hr-bottom { margin-top: rem(-1px); } - .helpful-container { + .rating-container { display: inline-flex; font-size: rem(18px); - .helpful-question, .was-helpful-thank-you { + .rating-prompt, .was-helpful-thank-you { padding: rem(10px) rem(20px) rem(10px) rem(20px); } @@ -158,7 +158,7 @@ ul.pytorch-breadcrumbs { display: none; } - .helpful-question.yes-link, .helpful-question.no-link { + .rating-prompt.yes-link, .rating-prompt.no-link { color: $orange; cursor: pointer; @@ -167,6 +167,21 @@ ul.pytorch-breadcrumbs { color: $white; } } + + .stars-outer { + display: inline-block; + position: relative; + font-family: FontAwesome; + padding: rem(10px) rem(20px) rem(10px) rem(20px); + + i { + cursor: pointer; + } + + .star-fill { + color: $red_orange; + } + } } div[role="contentinfo"] { From ba164341f015fed6936f993e6d50fc65881e4e63 Mon Sep 17 00:00:00 2001 From: Pat Mellon Date: Wed, 27 Jan 2021 16:10:44 -0500 Subject: [PATCH 2/2] Add build files --- pytorch_sphinx_theme/static/css/theme.css | 81 ++++++++++++++--------- pytorch_sphinx_theme/static/js/theme.js | 16 +++++ 2 files changed, 66 insertions(+), 31 deletions(-) diff --git a/pytorch_sphinx_theme/static/css/theme.css b/pytorch_sphinx_theme/static/css/theme.css index b9ad5e81..538be487 100644 --- a/pytorch_sphinx_theme/static/css/theme.css +++ b/pytorch_sphinx_theme/static/css/theme.css @@ -2107,10 +2107,6 @@ pre code { color: #6c757d; opacity: 1; } -.form-control::-moz-placeholder { - color: #6c757d; - opacity: 1; -} .form-control:-ms-input-placeholder { color: #6c757d; opacity: 1; @@ -4557,10 +4553,8 @@ tbody.collapse.show { @media (min-width: 576px) { .card-columns { -webkit-column-count: 3; - -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1.25rem; - -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .card-columns .card { @@ -5676,7 +5670,7 @@ button.close { -webkit-transform: translateX(0); transform: translateX(0); } -@supports (transform-style: preserve-3d) { +@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { -webkit-transform: translate3d(0, 0, 0); @@ -5689,7 +5683,7 @@ button.close { -webkit-transform: translateX(100%); transform: translateX(100%); } -@supports (transform-style: preserve-3d) { +@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-next, .active.carousel-item-right { -webkit-transform: translate3d(100%, 0, 0); @@ -5702,7 +5696,7 @@ button.close { -webkit-transform: translateX(-100%); transform: translateX(-100%); } -@supports (transform-style: preserve-3d) { +@supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-prev, .active.carousel-item-left { -webkit-transform: translate3d(-100%, 0, 0); @@ -7233,6 +7227,7 @@ button.bg-dark:focus { } .position-sticky { + position: -webkit-sticky !important; position: sticky !important; } @@ -7252,8 +7247,9 @@ button.bg-dark:focus { z-index: 1030; } -@supports (position: sticky) { +@supports ((position: -webkit-sticky) or (position: sticky)) { .sticky-top { + position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; @@ -9357,7 +9353,7 @@ a.text-dark:hover, a.text-dark:focus { } .highlight .bp { - color: #999999; + color: #525252; } .highlight .nb { @@ -9900,9 +9896,17 @@ pre { -ms-flex-align: center; align-items: center; padding-left: 2.8125rem; - height: 100%; - min-height: 100%; - margin-top: -68px; + height: 90vh; + margin-top: -25px; + padding-top: 50%; + overflow-y: scroll; +} +.mobile-main-menu-links-container .main-menu { + height: 100vh; +} + +.mobile-main-menu-links-container ul.resources-mobile-menu-items li { + padding-left: 15px; } .site-footer { @@ -10324,32 +10328,44 @@ ul.pytorch-breadcrumbs a { background-image: url("../images/icon-menu-dots-dark.svg"); } -.rst-content footer .helpful-hr.hr-top { +.rst-content footer .rating-hr.hr-top { margin-bottom: -0.0625rem; } -.rst-content footer .helpful-hr.hr-bottom { +.rst-content footer .rating-hr.hr-bottom { margin-top: -0.0625rem; } -.rst-content footer .helpful-container { +.rst-content footer .rating-container { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 1.125rem; } -.rst-content footer .helpful-container .helpful-question, .rst-content footer .helpful-container .was-helpful-thank-you { +.rst-content footer .rating-container .rating-prompt, .rst-content footer .rating-container .was-helpful-thank-you { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } -.rst-content footer .helpful-container .was-helpful-thank-you { +.rst-content footer .rating-container .was-helpful-thank-you { display: none; } -.rst-content footer .helpful-container .helpful-question.yes-link, .rst-content footer .helpful-container .helpful-question.no-link { +.rst-content footer .rating-container .rating-prompt.yes-link, .rst-content footer .rating-container .rating-prompt.no-link { color: #e44c2c; cursor: pointer; } -.rst-content footer .helpful-container .helpful-question.yes-link:hover, .rst-content footer .helpful-container .helpful-question.no-link:hover { +.rst-content footer .rating-container .rating-prompt.yes-link:hover, .rst-content footer .rating-container .rating-prompt.no-link:hover { background-color: #e44c2c; color: #ffffff; } +.rst-content footer .rating-container .stars-outer { + display: inline-block; + position: relative; + font-family: FontAwesome; + padding: 0.625rem 1.25rem 0.625rem 1.25rem; +} +.rst-content footer .rating-container .stars-outer i { + cursor: pointer; +} +.rst-content footer .rating-container .stars-outer .star-fill { + color: #ee4c2c; +} .rst-content footer div[role="contentinfo"] { padding-top: 2.5rem; } @@ -10893,7 +10909,7 @@ article.pytorch-article .tip .admonition-title { background: #6bcebb; } article.pytorch-article .seealso .admonition-title { - background: #6bcebb; + background: #6bcebb; } article.pytorch-article .hint .admonition-title { background: #a2cdde; @@ -11717,9 +11733,6 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button a { .pytorch-left-menu-search ::-webkit-input-placeholder { color: #262626; } -.pytorch-left-menu-search ::-moz-placeholder { - color: #262626; -} .pytorch-left-menu-search :-ms-input-placeholder { color: #262626; } @@ -12276,21 +12289,27 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button a { .resources-dropdown .with-down-orange-arrow { padding-right: 2rem; position: relative; - background-image: url("/assets/images/chevron-down-orange.svg"); + background: url("../images/chevron-down-orange.svg"); background-size: 14px 18px; background-position: top 7px right 10px; background-repeat: no-repeat; } -.resources-dropdown .with-down-arrow { + +.with-down-arrow { padding-right: 2rem; position: relative; - background-image: url("/assets/images/chevron-down-black.svg"); + background-image: url("../images/chevron-down-black.svg"); background-size: 14px 18px; background-position: top 7px right 10px; background-repeat: no-repeat; } -.resources-dropdown .with-down-arrow:hover { - background-image: url("/assets/images/chevron-down-orange.svg"); +.with-down-arrow:hover { + background-image: url("../images/chevron-down-orange.svg"); + background-repeat: no-repeat; +} + +.header-holder .main-menu ul li .resources-dropdown .doc-dropdown-option { + padding-top: 1rem; } .header-holder .main-menu ul li a.nav-dropdown-item { @@ -12325,4 +12344,4 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button a { color: white; } -/*# sourceMappingURL=theme.css.map */ +/*# sourceMappingURL=theme.css.map */ \ No newline at end of file diff --git a/pytorch_sphinx_theme/static/js/theme.js b/pytorch_sphinx_theme/static/js/theme.js index e5ec63e7..c5d9bd79 100644 --- a/pytorch_sphinx_theme/static/js/theme.js +++ b/pytorch_sphinx_theme/static/js/theme.js @@ -1055,4 +1055,20 @@ if (link.text() == "SyntaxError") { link.text("Speech Command Recognition with torchaudio"); } +$(".stars-outer > i").hover(function() { + $(this).prevAll().addBack().toggleClass("fas star-fill"); +}); + +$(".stars-outer > i").on("click", function() { + $(this).prevAll().each(function() { + $(this).addBack().addClass("fas star-fill"); + }); + + $(".stars-outer > i").each(function() { + $(this).unbind("mouseenter mouseleave").css({ + "pointer-events": "none" + }); + }); +}) + },{"jquery":"jquery"}]},{},[1,2,3,4,5,6,7,8,9,10,"pytorch-sphinx-theme"]);