mirror of
https://github.com/vale981/ray
synced 2025-03-05 10:01:43 -05:00
[doc] css improvements for rate the doc components (#27717)
- improve the css for the rate the doc component ### Before <img width="260" alt="Screen Shot 2022-08-09 at 2 15 19 PM" src="https://user-images.githubusercontent.com/9677264/183762845-26a7f6a8-909d-4c66-b030-7d28c7f2c65b.png"> <img width="379" alt="Screen Shot 2022-08-09 at 2 15 11 PM" src="https://user-images.githubusercontent.com/9677264/183762884-4618e4bb-4a54-401e-97f6-f363fcd086a5.png"> ### After <img width="488" alt="Screen Shot 2022-08-09 at 1 55 16 PM" src="https://user-images.githubusercontent.com/9677264/183762916-4f803ff6-801f-4b7c-a4a4-1adad8e07ff7.png"> <img width="473" alt="Screen Shot 2022-08-09 at 1 55 22 PM" src="https://user-images.githubusercontent.com/9677264/183762928-081da7be-9721-4066-8e96-ba7e0f01c59c.png"> <img width="423" alt="Screen Shot 2022-08-09 at 1 55 37 PM" src="https://user-images.githubusercontent.com/9677264/183762940-94c94361-72b2-4f2b-91af-c88c57d6886c.png">
This commit is contained in:
parent
2246ea7fe4
commit
e33edcb0b7
2 changed files with 35 additions and 3 deletions
|
@ -175,7 +175,33 @@ pre {
|
|||
|
||||
.btn-outline-info:hover, .btn-outline-primary:hover{
|
||||
border-color: var(--buttons-color-blue);
|
||||
background-color: var(--buttons-color-blue);;
|
||||
background-color: var(--buttons-color-blue);
|
||||
}
|
||||
|
||||
.btn-outline-info.active:not(:disabled):not(.disabled), .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle {
|
||||
border-color: var(--buttons-color-blue);
|
||||
background-color: var(--buttons-color-blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-info, .btn-info:hover, .btn-info:focus {
|
||||
border-color: var(--buttons-color-blue);
|
||||
background-color: var(--buttons-color-blue);
|
||||
}
|
||||
|
||||
.btn-info.active:not(:disabled):not(.disabled), .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
|
||||
border-color: var(--buttons-color-blue);
|
||||
background-color: var(--buttons-color-blue);
|
||||
}
|
||||
|
||||
.btn-info:hover{
|
||||
opacity: 90%;
|
||||
}
|
||||
|
||||
.btn-info:disabled{
|
||||
border-color: var(--background-color-disabled);
|
||||
background-color: var(--background-color-disabled);
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
/* custom css for pre elements */
|
||||
|
@ -251,6 +277,11 @@ details.dropdown .summary-up, details.dropdown .summary-down {
|
|||
box-shadow: 0 0.2rem 0.5rem rgb(0 0 0 / 5%), 0 0 0.0625rem rgb(0 0 0 / 10%) !important;
|
||||
}
|
||||
|
||||
/* custom css for text area */
|
||||
textarea {
|
||||
border-color: var(--border-color-gray);
|
||||
}
|
||||
|
||||
/* custom css for footer */
|
||||
footer {
|
||||
margin-top: 1rem;
|
||||
|
@ -272,6 +303,7 @@ footer {
|
|||
--tabs-color-underline: #e0e0e0;
|
||||
--border-color-gray: #e0e0e0;
|
||||
--background-color-light-gray:#fafafa;
|
||||
--background-color-disabled: #9E9E9E;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
|
@ -3,11 +3,11 @@ function Prefs(a){function b(){localStorage.setItem(a,JSON.stringify(c));}var c;
|
|||
|
||||
var READTHEDOCS_DATA=window.READTHEDOCS_DATA||{};function recordEvent(a,b,c){var d="localhost"===window.location.hostname,e="RateTheDocs";"function"==typeof gtag?gtag("event",a,{send_to:"UA-110413294-1",event_category:e,event_label:b,value:c,dimension1:READTHEDOCS_DATA.project,dimension2:READTHEDOCS_DATA.version}):"function"==typeof ga?ga("user.send","event",e,a,b,c,{dimension1:READTHEDOCS_DATA.project,dimension2:READTHEDOCS_DATA.version}):d?console.log("recordEvent",e,a,b,c):alert("Unable to register your docs feedback: Google Analytics not loaded");}var recording = {init:function init(){var a=window.navigator||{},b="1"===a.doNotTrack||"1"===a.msDoNotTrack||"yes"===a.doNotTrack||"1"===window.doNotTrack;return !b},recordUpVote:function recordUpVote(){recordEvent("Helpful Vote","Yes",1);},recordDownVote:function recordDownVote(){recordEvent("Helpful Vote","No",0);},recordSuggestion:function recordSuggestion(a){recordEvent("Suggestion",a);}};
|
||||
|
||||
var widgetHtml = "<div class='rate-the-docs ratd-widget ratd-state-loading' role='dialog' aria-labelledby='ratd_title'><h2 id='ratd_title' class='sr-only'><em>Rate</em> the Docs</h2><div class='ratd-panels'><form class='ratd-panel ratd-panel-rating'>Is this page helpful? <button class='btn btn-neutral ratd-rating-vote' data-rating='1'><i class='fa fa-thumbs-o-up' aria-hidden='true'></i> 👍 Yes</button> <button class='btn btn-neutral ratd-rating-vote' data-rating='0'><i class='fa fa-thumbs-o-down' aria-hidden='true'></i> 👎 No</button></form><form class='ratd-panel ratd-panel-suggestion'><label for='ratd_suggestion_text'>Sorry… how could we improve this page?</label> <textarea id='ratd_suggestion_text' name='suggestion' rows='5'></textarea> <small class='ratd-suggestion-length' title='Characters'>0/500</small> <button class='btn btn-info' type='submit'>Submit</button> <small class='ratd-suggestion-tip'>Feedback is anonymous. Please don’t include personal info. If you need a reply, <a href='https://github.com/ray-project/ray/issues/new/choose'>contact us</a> instead.</small></form><div class='ratd-panel ratd-panel-thanks'>Thanks! We’ve noted your feedback.</div></div><button class='ratd-toggle ratd-toggle-close btn btn-link' aria-label='Close ratings widget' disabled><i class='fa fa-times' aria-hidden='true' title='Close'></i></button> <button class='ratd-toggle ratd-toggle-collapse btn btn-link' aria-label='Hide ratings widget'><i class='fa fa-chevron-right' aria-hidden='true' title='Hide'></i></button> <button class='ratd-toggle ratd-toggle-expand btn btn-link' aria-label='Show ratings widget' disabled><i class='fa fa-book' aria-hidden='true' title='Rate the Docs'><i>?</i></i></button></div>";
|
||||
var widgetHtml = "<div class='rate-the-docs ratd-widget ratd-state-loading' role='dialog' aria-labelledby='ratd_title'><h2 id='ratd_title' class='sr-only'><em>Rate</em> the Docs</h2><div class='ratd-panels'><form class='ratd-panel ratd-panel-rating'><span>Is this page helpful?</span> <button class='btn btn-neutral ratd-rating-vote' data-rating='1'>👍 Yes</button> <button class='btn btn-neutral ratd-rating-vote' data-rating='0'>👎 No</button></form><form class='ratd-panel ratd-panel-suggestion'><label for='ratd_suggestion_text'>Sorry… how could we improve this page?</label> <textarea id='ratd_suggestion_text' name='suggestion' rows='5'></textarea> <small class='ratd-suggestion-length' title='Characters'>0/500</small> <button class='btn btn-info' type='submit'>Submit</button> <small class='ratd-suggestion-tip'>Feedback is anonymous. Please don’t include personal info. If you need a reply, <a href='https://github.com/ray-project/ray/issues/new/choose'>contact us</a> instead.</small></form><div class='ratd-panel ratd-panel-thanks'>Thanks! We’ve noted your feedback.</div></div><button class='ratd-toggle ratd-toggle-close btn btn-link' aria-label='Close ratings widget' disabled><i class='fa fa-times' aria-hidden='true' title='Close'></i></button> <button class='ratd-toggle ratd-toggle-collapse btn btn-link' aria-label='Hide ratings widget'><i class='far fa-chevron-right' aria-hidden='true' title='Hide'></i></button> <button class='ratd-toggle ratd-toggle-expand btn btn-link' aria-label='Show ratings widget' disabled><i class='far fa-thumbs-up'></i><i class='far fa-thumbs-down'></i></button></div>";
|
||||
|
||||
function styleInject(a,b){void 0===b&&(b={});var c=b.insertAt;if(a&&"undefined"!=typeof document){var d=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===c?d.firstChild?d.insertBefore(e,d.firstChild):d.appendChild(e):d.appendChild(e),e.styleSheet?e.styleSheet.cssText=a:e.appendChild(document.createTextNode(a));}}
|
||||
|
||||
var css_248z = "/*! rate-the-docs 0.2.1 - https://github.com/medmunds/rate-the-docs */footer{margin-bottom:3rem}.ratd-widget{position:fixed;bottom:0;right:0;z-index:9999;display:grid;grid-template-columns:1fr 1.618rem;grid-template-rows:1fr;grid-template-areas:\"main controls\"}@media (min-width:768px){.ratd-widget{grid-template-columns:1fr 3.236rem}}.ratd-panels{grid-area:main;margin:auto 0}.ratd-panel{padding-left:12px}.ratd-toggle{grid-area:controls;justify-self:center;align-self:center;margin:auto 0}.ratd-toggle.ratd-toggle-close{align-self:start;margin:6px 0}.ratd-widget{border-top-left-radius:8px;background-color:#e7f2fa}.ratd-widget .btn{font-size:90%}.ratd-panel-suggestion>:not(:first-child){margin-top:8px}.ratd-panel-suggestion label span{display:block}.ratd-suggestion-length{float:right;margin-left:.5em;margin-bottom:.5em;color:#999}.ratd-suggestion-tip{display:block;clear:both}.ratd-toggle.btn-link{color:inherit}.ratd-widget{opacity:1;transition:opacity .25s ease-in}.ratd-widget.ratd-state-closing{opacity:0;pointer-events:none}.ratd-widget.ratd-state-closed{display:none}.ratd-panels{overflow:hidden;width:330px;transition:width .25s ease-in-out}.ratd-panel{width:330px}.ratd-widget.ratd-state-collapsed .ratd-panels{width:0}.ratd-panel{overflow:hidden;transition:height .25s ease-in-out}.btn.ratd-toggle{opacity:1;transform:rotate(0deg);transition:opacity .25s ease-in-out,transform .25s ease-in-out}.btn.ratd-toggle[disabled]{pointer-events:none;opacity:0;transform:rotate(180deg)}.ratd-widget.ratd-state-loading,.ratd-widget.ratd-state-loading .ratd-panel,.ratd-widget.ratd-state-loading .ratd-panels,.ratd-widget.ratd-state-loading .ratd-toggle{transition:none}";
|
||||
var css_248z = "/*! rate-the-docs 0.2.1 - https://github.com/medmunds/rate-the-docs */footer{margin-bottom:3rem}.ratd-widget{position:fixed;bottom:0;right:0;z-index:9999;display:grid;grid-template-columns:1fr 1.618rem;grid-template-rows:1fr;grid-template-areas:\"main controls\"}@media (min-width:768px){.ratd-widget{grid-template-columns:1fr 3.236rem}}.ratd-panels{grid-area:main;margin:auto 0}.ratd-panel{padding-left:1em}.ratd-toggle{grid-area:controls;justify-self:center;align-self:center;margin:auto 0}.ratd-toggle.ratd-toggle-close{align-self:start;margin:6px 0}.ratd-toggle-expand i{display:inline-block}.ratd-toggle-expand i.fa-thumbs-up{margin-right:.5em}.ratd-widget{border-top-left-radius:8px;background-color:#e7f2fa}.ratd-toggle .far{font-size:1em}.ratd-panel-suggestion>:not(:first-child){margin:8px 0}.ratd-panel-suggestion label span{display:block}.ratd-suggestion-length{float:right;margin-left:.5em;margin-bottom:.5em;color:#999}.ratd-suggestion-tip{display:block;clear:both}.ratd-toggle.btn-link{color:inherit}.ratd-widget{opacity:1;transition:opacity .25s ease-in}.ratd-widget.ratd-state-closing{opacity:0;pointer-events:none}.ratd-widget.ratd-state-closed{display:none}.ratd-panels{overflow:hidden;width:330px;transition:width .25s ease-in-out}.ratd-panel{width:330px}.ratd-widget.ratd-state-collapsed .ratd-panels{width:0}.ratd-panel{overflow:hidden;transition:height .25s ease-in-out}.btn.ratd-toggle{opacity:1;transition:opacity .25s ease-in-out,transform .25s ease-in-out}.btn.ratd-toggle[disabled]{pointer-events:none;opacity:0}.ratd-widget.ratd-state-loading,.ratd-widget.ratd-state-loading .ratd-panel,.ratd-widget.ratd-state-loading .ratd-panels,.ratd-widget.ratd-state-loading .ratd-toggle{transition:none}textarea{width:100%}.ratd-suggestion-length,textarea{display:block}form.ratd-panel-rating span{vertical-align:middle}button.ratd-toggle-expand{width:-webkit-max-content;width:-moz-max-content;width:max-content}form.ratd-panel-suggestion label{margin-top:1em}";
|
||||
styleInject(css_248z);
|
||||
|
||||
var DEFAULT_OPTIONS={contactLink:"/contact",suggestionMaxLength:500,recording:recording};function initWidget(a){function b(a){var b=i.querySelector(".ratd-panel-"+a);i.querySelectorAll(".ratd-panel").forEach(function(a){a===b?(a.style.height=a.scrollHeight+"px",a.removeAttribute("aria-hidden")):(a.style.height="0px",a.setAttribute("aria-hidden","true"));}),"rating"!==a&&c("close");}function c(a){var b=i.querySelector(".ratd-toggle-"+a);i.querySelectorAll(".ratd-toggle").forEach(function(a){a===b?(a.disabled=!1,a.removeAttribute("aria-hidden")):(a.disabled=!0,a.setAttribute("aria-hidden","true"));});}function d(){i.classList.add("ratd-state-collapsed"),i.querySelector(".ratd-panels").setAttribute("aria-hidden","true"),c("expand"),h.set("collapsed",!0);}function e(){i.classList.remove("ratd-state-collapsed"),i.querySelector(".ratd-panels").removeAttribute("aria-hidden"),c("collapse"),h.set("collapsed",!1);}function f(c){var d=c.currentTarget.dataset.rating;c.preventDefault(),c.currentTarget.disabled=!0,"1"===d?(a.recording.recordUpVote(),b("thanks")):(a.recording.recordDownVote(),b("suggestion"),k.focus());}function g(){var a=1>k.value.trim().length;l.disabled=a;}if(void 0===a&&(a={}),!Object.assign)return !1;if(a=Object.assign({},DEFAULT_OPTIONS,a),!a.recording.init())return !1;var h=Prefs("rate-the-docs");document.body.insertAdjacentHTML("beforeend",widgetHtml);var i=document.body.querySelector(".ratd-widget");i.querySelectorAll("a[href='#contact']").forEach(function(b){b.href=a.contactLink;}),i.querySelector(".ratd-toggle-close").addEventListener("click",function(){i.setAttribute("aria-hidden","true"),i.addEventListener("transitionend",function(a){a.currentTarget===i&&(i.classList.remove("ratd-state-closing"),i.classList.add("ratd-state-closed"));}),i.classList.add("ratd-state-closing");}),i.querySelector(".ratd-toggle-collapse").addEventListener("click",d),i.querySelector(".ratd-toggle-expand").addEventListener("click",e),i.querySelectorAll(".ratd-rating-vote").forEach(function(a){return a.addEventListener("click",f)});var j=i.querySelector(".ratd-panel-suggestion"),k=j.querySelector("#ratd_suggestion_text"),l=j.querySelector("button[type=submit]");k.maxLength=a.suggestionMaxLength,inputLengthCounter(k,j.querySelector(".ratd-suggestion-length")),k.addEventListener("input",g),g(),j.addEventListener("submit",function(c){c.preventDefault(),l.disabled=!0,a.recording.recordSuggestion(k.value.trim()),b("thanks");}),b("rating"),h.get("collapsed")?d():e(),requestAnimationFrame(function(){i.classList.remove("ratd-state-loading");});}function inputLengthCounter(a,b){function c(){b.textContent=a.value.length+"/"+a.maxLength;}a.addEventListener("input",c),c();}
|
||||
|
|
Loading…
Add table
Reference in a new issue