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

Add proper css vars to user style config (#2105)

Browse source
This commit is contained in:
Ben Halpern 2019-03-18 15:22:23 -04:00 • committed by GitHub
parent 2658185389
commit 2b2ecaa115
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 76 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/article-show.scss
View file

@ -86,6 +86,7 @@ article {
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
@media screen and (min-width: 880px) {
border: 1px solid darken($light-medium-gray, 2%);
border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
}
@media screen and (min-width: 950px) {
border-radius: 3px;
@ -173,6 +174,7 @@ article {
padding: 0px 3px 16px;
font-weight: 500;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
font-size: 13.5px;
line-height: 1.5em;
@media screen and (min-width: 430px) {
@ -190,6 +192,7 @@ article {
}
a {
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
text-decoration: none;
}
.icon-img {

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

@ -217,7 +217,7 @@
box-shadow: $bold-shadow;
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
border-radius: 3px;
width: 94%;
width: 96%;
margin: auto;
position: relative;
@media screen and (min-width: 950px) {
@ -415,6 +415,7 @@
text-overflow: ellipsis;
a {
color: #666666;
color: var(--theme-secondary-color, #666666);
}
@media screen and (min-width: 430px) {
bottom: 90px;
@ -582,6 +583,7 @@
font-size: 14px;
a {
color: #666666;
color: var(--theme-secondary-color, #666666);
}
&:hover {
opacity: 0.9;
@ -608,6 +610,7 @@
}
.tag {
color: $black;
color: var(--theme-color, $black);
margin-right: 3px;
}
left: 62px;
@ -627,6 +630,7 @@
font-weight: 600;
z-index: 8;
color: darken($medium-gray, 5%);
color: var(--theme-secondary-color, darken($medium-gray, 5%));
}
.article-engagement-count {
font-size: 13px;
@ -912,6 +916,7 @@
font-weight: 500;
font-size: 0.9em;
background: darken($light-gray, 4%);
background: var(--theme-background, darken($light-gray, 4%));
a {
color: $black;
}
@ -1165,6 +1170,7 @@
margin: 10px auto;
width: 92%;
color: $dark-gray;
color: var(--theme-secondary-color, $dark-gray);
.sponsor-learn-more {
display: block;
margin: 8px auto;
@ -1196,6 +1202,7 @@
padding-bottom: 8px;
a {
color: $black;
color: var(--theme-color, $black);
font-weight: 500;
}
}
@ -1342,7 +1349,9 @@
padding: 8px 0px;
font-size: 0.93em;
color: darken($sky-blue, 17%);
color: var(--theme-color, darken($sky-blue, 17%));
background: white;
background: var(--theme-container-background, #fff);
display: block;
width: 92%;
text-align: left;

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

@ -525,7 +525,6 @@ a.header-link {
padding-bottom: 5px;
margin: 0;
width: 96%;
color: $black;
font-size: 0.95em;
line-height: 1.35em;
overflow: hidden;
@ -653,6 +652,7 @@ a.header-link {
border-top-left-radius: 3px;
border-top-left-radius: 3px;
color: $dark-gray;
color: var(--theme-secondary-color, $dark-gray);
position: relative;
// background:$light-gray;
.comment-date {
@ -664,6 +664,7 @@ a.header-link {
text-align: right;
a {
color: $medium-gray;
color: var(--theme-secondary-color, $dark-gray);
}
}
.dropbtn {
@ -757,6 +758,7 @@ a.header-link {
}
a {
color: lighten($dark-gray, 3%);
color: var(--theme-secondary-color, $dark-gray);
}
}
.reaction-button,
@ -929,6 +931,7 @@ a.header-link {
padding: 0px;
border: 1px solid $light-medium-gray;
background: white;
background: var(--theme-container-background, #fff);
&.comment-created-via-fetch {
animation: comment-create 1.2s;
.body {
@ -971,5 +974,6 @@ a.header-link {
}
to {
background-color: white;
background-color: var(--theme-container-background, #fff);
}
}

3
app/assets/stylesheets/footer.scss
View file

@ -17,6 +17,7 @@ footer{
}
a{
color: $black;
color: var(--theme-color, $black);
display:inline-block;
margin-right: 12px;
&:hover{
@ -26,7 +27,9 @@ footer{
.inner-footer-container{
max-width: 820px;
background: $tan;
background: var(--theme-container-background, $tan);
border: 1px solid darken($light-medium-gray, 2%);
border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
box-shadow: $bold-shadow;
box-shadow: var(--theme-container-box-shadow, $bold-shadow);
padding:50px 30px;

5
app/assets/stylesheets/index-comments.scss
View file

@ -4,6 +4,7 @@
text-align:left;
padding-bottom:calc(0.6vw + 5px);
background:white;
background: var(--theme-container-background, white);
border-radius:3px;
border:1px solid $outline-color;
border: var(--theme-container-border, 1px solid $outline-color);
@ -25,6 +26,7 @@
a{
padding:5px 10px;
color:$dark-gray;
color: var(--theme-color, $dark-gray);
font-weight:500;
font-size:0.85em;
}
@ -44,6 +46,7 @@
}
a{
color:$black;
color: var(--theme-color, $black);
display:block;
padding-left:13px;
padding-right:13px;
@ -59,6 +62,7 @@
.comment-date{
font-size:0.7em;
color:$medium-gray;
color: var(--theme-secondary-color, $medium-gray);
margin-left:5px;
vertical-align:2px;
display:inline-block;
@ -66,6 +70,7 @@
.comment-preview{
font-size:0.9em;
color:$medium-gray;
color: var(--theme-secondary-color, $medium-gray);
}
@media screen and ( min-width: 430px ){
padding:5px 0px;

4
app/assets/stylesheets/more-articles.scss
View file

@ -9,7 +9,8 @@
margin-left: 25px;
}
a{
color:rgb(19, 19, 19);
color:$black;
color: var(--theme-color, $black);
}
.single-other-article{
width:94%;
@ -58,6 +59,7 @@
margin:0;
font-weight:500;
color:lighten($medium-gray,4%);
color: var(--theme-secondary-color, lighten($medium-gray,4%));
font-size:1em;
@media screen and ( min-width: 480px ){
font-size:0.88em;

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

@ -51,6 +51,7 @@ pre {
a {
color: $sky-blue;
color: var(--theme-secondary-color, $sky-blue);
text-decoration:none;
&:hover{
opacity:0.9;

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

@ -74,6 +74,7 @@
width: 210px;
display:inline-block;
color: $black;
color: var(--theme-color, $black);
&.selected {
background: $purple;
}

3
app/assets/stylesheets/sticky-nav.scss
View file

@ -37,6 +37,7 @@
.primary-sticky-nav-author-summary{
font-weight: 400;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
padding: 10px 0px 5px;
font-style: italic;
font-size:0.88em;
@ -117,6 +118,7 @@
margin-top:9px;
font-size: 0.8em;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
}
&:hover{
border: 1px solid darken($light-medium-gray, 17%);
@ -137,6 +139,7 @@
font-weight: 800;
margin-bottom: 2px;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
}
.value{
display: inline-block;

3
app/assets/stylesheets/top-bar.scss
View file

@ -222,6 +222,7 @@
padding: 5px 10px;
text-align: left;
background: $tan;
background: var(--theme-top-bar-background, $tan);
border: 1px solid rgb(219, 222, 225);
border-top: 0px;
display: none;
@ -260,10 +261,12 @@
}
&:hover {
background: darken($tan, 2%);
background: var(--theme-top-bar-background, darken($tan, 2%));
}
}
a {
color: $black;
color: var(--theme-color, $black);
}
}
}

3
app/assets/stylesheets/user-profile-header.scss
View file

@ -8,6 +8,7 @@
max-width:92%;
margin: 30px auto 20px;
background: white;
background: var(--theme-container-background, #fff);
border-radius: 3px;
@media screen and ( min-width: 950px ){
max-width:98%;
@ -162,6 +163,7 @@
margin:0;
font-style: italic;
color:$medium-gray;
color: var(--theme-secondary-color, $medium-gray);
width: 94%;
font-size:0.9em;
margin-top:12px;
@ -251,6 +253,7 @@
font-weight: 800;
margin-bottom: 2px;
color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);
}
.value{
display: inline-block;

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

@ -35,29 +35,6 @@ $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 {
#top-bar,
#page-content,
footer {
& {
background-color: #ececcc !important;
&,
& *:not(.highlight) > .highlight,
& iframe,
& video,
& img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
& * {
background-blend-mode: difference;
}
}
}
}
body.sans-serif-article-body {
.body {
font-family: $helvetica;
@ -67,3 +44,13 @@ body.sans-serif-article-body {
font-size: 0.98em;
}
}
body.comic-sans-article-body {
.body {
font-family: "Comic Sans MS", cursive, sans-serif;
}
.body p {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 0.98em;
}
}

6
app/models/user.rb
View file

@ -114,10 +114,10 @@ class User < ApplicationRecord
message: "%{value} must be either v1 or v2" }
validates :config_theme,
inclusion: { in: %w(default night_theme),
inclusion: { in: %w[default night_theme],
message: "%{value} must be either default or night theme" }
validates :config_font,
inclusion: { in: %w(default sans_serif),
inclusion: { in: %w[default sans_serif comic_sans],
message: "%{value} must be either default or sans serif" }
validates :shipping_country,
length: { in: 2..2 },
@ -131,7 +131,7 @@ class User < ApplicationRecord
length: { maximum: 500 }
validates :mentee_description, :mentor_description,
length: { maximum: 1000 }
validates :inbox_type, inclusion: { in: ["open", "private"] }
validates :inbox_type, inclusion: { in: %w[open private] }
validate :conditionally_validate_summary
validate :validate_mastodon_url
validate :validate_feed_url

21
app/views/layouts/application.html.erb
View file

@ -77,10 +77,29 @@
<% end %>
</head>
<body data-user-status="<%= user_logged_in_status %>" data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>">
<div id="body-styles"></div>
<% if user_signed_in? && !internal_navigation? %>
<script>
try {
document.body.className = localStorage.getItem('config_body_class');
var bodyClass = localStorage.getItem('config_body_class');
document.body.className = bodyClass;
if (bodyClass.includes('night-theme')) {
document.getElementById('body-styles').innerHTML = '<style>\
:root {\
--theme-background: #161f2b;\
--theme-color: #fff;\
--theme-secondary-color: #cedae2;\
--theme-top-bar-background: #141d26;\
--theme-top-bar-color: #fff;\
--theme-top-bar-search-background: #424a54;\
--theme-top-bar-search-color: #fff;\
--theme-top-bar-write-background: #00af81;\
--theme-top-bar-write-color: #fff;\
--theme-container-background: #27374c;\
--theme-container-color: #fff;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #141d26;</style>'
}
} catch(e) {
console.log(e)
}

6
app/views/users/_misc.html.erb
View file

@ -44,7 +44,7 @@
</div>
<div class="sub-field">
<%= f.label :config_font, "Base Post Font" %>
<%= f.select(:config_font, options_for_select(["default", "sans serif"], @user.config_font.gsub("_", " "))) %>
<%= f.select(:config_font, options_for_select(["default", "sans serif", "comic sans"], @user.config_font.gsub("_", " "))) %>
<sub><em>Default is serif style.</em></sub>
</div>
<div class="field">
@ -152,9 +152,9 @@
<%= form_for(@user) do |f| %>
<div class="field checkbox-label-first">
<%= f.label :inbox_type, "Open your inbox to messages from people you don't follow or keep your inbox private to mutual follows."%>
<%= f.label :inbox_type, "Open your inbox to messages from people you don't follow or keep your inbox private to mutual follows." %>
<div class="sub-field">
<%= f.select :inbox_type, [['Open','open'],['Private','private']]%>
<%= f.select :inbox_type, [["Open", "open"], ["Private", "private"]] %>
</div>
<%= f.submit "SUBMIT", class: "cta" %>
</div>