maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make pull to refresh night theme, plus invert icons in night theme (#2135)

Browse source 
* Add night theme to pulltorefresh

* Adjust opacity of pulltorefresh for style

* Invert certain images
This commit is contained in:
Ben Halpern 2019-03-20 18:42:52 -04:00 • committed by GitHub
parent ce29fcc67c
commit f70852d547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/lib/pulltorefresh.js
View file

@ -6,7 +6,7 @@
function _ptrMarkup () { return "\n<div class=\"__PREFIX__box\">\n <div class=\"__PREFIX__content\">\n <div class=\"__PREFIX__icon\"></div>\n <div class=\"__PREFIX__text\"></div>\n </div>\n</div>"; }
function _ptrStyles () { return ".__PREFIX__ptr {\n box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n pointer-events: none;\n font-size: 0.85em;\n font-weight: bold;\n top: 0;\n height: 0;\n transition: height 0.3s, min-height 0.3s;\n text-align: center;\n width: 100%;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n align-content: stretch;\n}\n.__PREFIX__box {\n padding: 10px;\n flex-basis: 100%;\n}\n.__PREFIX__pull {\n transition: none;\n}\n.__PREFIX__text {\n margin-top: 0.33em;\n color: rgba(0, 0, 0, 0.3);\n}\n.__PREFIX__icon {\n color: rgba(0, 0, 0, 0.3);\n transition: transform 0.3s;\n}\n.__PREFIX__top {\n touch-action: pan-x pan-down pinch-zoom;\n}\n.__PREFIX__release .__PREFIX__icon {\n transform: rotate(180deg);\n}\n"; }
function _ptrStyles () { return ".__PREFIX__ptr {\n box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n pointer-events: none;\n font-size: 0.85em;\n font-weight: bold;\n top: 0;\n height: 0;\n transition: height 0.3s, min-height 0.3s;\n text-align: center;\n width: 100%;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n align-content: stretch;\n}\n.__PREFIX__box {\n padding: 10px;\n flex-basis: 100%;\n}\n.__PREFIX__pull {\n transition: none;\n}\n.__PREFIX__text {\n margin-top: 0.33em;\n opacity: 0.7; }\n.__PREFIX__icon {\n transition: transform 0.3s;\n opacity: 0.7;}\n.__PREFIX__top {\n touch-action: pan-x pan-down pinch-zoom;\n}\n.__PREFIX__release .__PREFIX__icon {\n transform: rotate(180deg);\n}\n"; }
var _defaults = {
distThreshold: 60,
@ -32,7 +32,7 @@
resistanceFunction: function (t) { return Math.min(1, t / 2.5); },
shouldPullToRefresh: function () {
return !window.scrollY &&
(document.getElementById('articles-list') || document.getElementById("user-dashboard")) &&
(document.getElementById('articles-list') || document.getElementById("user-dashboard") || document.getElementById("article-body")) &&
!document.body.classList.contains('modal-open')
},
};

1
app/assets/stylesheets/articles.scss
View file

@ -124,7 +124,6 @@
top: 14px;
border: 0px;
background: transparent;
background: var(--theme-secondary-color, transparent);
border-radius: 8px;
img {
height: 24px;

2
app/assets/stylesheets/comments.scss
View file

@ -168,7 +168,7 @@ a.header-link {
border: 0;
cursor: pointer;
display: inline-block;
background: $light-gray;
background: transparent;
max-width: 29px;
@media screen and (max-width: 900px) {
padding: 5px 6px 1px;

7
app/assets/stylesheets/variables.scss
View file

@ -35,6 +35,13 @@ $bold-shadow: 3px 3px 0px darken($light-medium-gray, 13%);
$ease-in-cubic : cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-out-cubic : cubic-bezier(0.215, 0.61, 0.355, 1);
body.night-theme {
.on-page-nav-butt img, .icon-img, .dropdown-icon, .reaction-button:not(.reacted) img, .image-upload-button button, .icon-image {
-webkit-filter: invert(95%);
filter: invert(95%);
}
}
body.sans-serif-article-body {
.body {
font-family: $helvetica;