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

Move themes config into separate partial and add logo theme-ability (#2427)

Browse source 
* Remove honeycomb code from config.ru

* Modify pink theme and minor other theme adjustments

* Fix schema
This commit is contained in:
Ben Halpern 2019-04-13 13:11:18 -04:00 • committed by GitHub
parent 409c280c10
commit dec44cd34e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -61,23 +61,31 @@
font-size: 20px;
font-family: $helvetica-condensed;
font-stretch:condensed;
margin: 0px auto;
margin: 0px 0px;
line-height: 33px;
padding-left: 4px;
width: 90%;
width: 97%;
margin-bottom: 15px;
@media screen and ( min-width: 514px ) {
width: 90%;
margin: 0px auto;
}
@media screen and ( min-width: 835px ) {
float: left;
width: 250px;
}
.single-settings-tab {
padding-left: 5px;
width: 210px;
width: 100%;
display:inline-block;
color: $black;
color: var(--theme-color, $black);
&.selected {
background: $purple;
background: var(--theme-container-accent-background, $purple);
}
@media screen and ( min-width: 514px ) {
width: 210px;
}
}
}

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

@ -261,7 +261,7 @@
}
&:hover {
background: darken($tan, 2%);
background: var(--theme-top-bar-background, darken($tan, 2%));
background: var(--theme-top-bar-background-hover, darken($tan, 2%));
}
}
a {
@ -303,10 +303,10 @@
padding: 7px 8px 6px 10px;
margin-top: 7px;
fill: white;
fill: var(--theme-logo-color, white);
border-radius: 3px;
// border-right:1px solid #a5a6a8;
// border-left:1px solid #a5a6a8;
background: $black;
background: var(--theme-logo-background, $black);
}
}

57
app/views/layouts/_user_config.html.erb Normal file
View file

@ -0,0 +1,57 @@
<script>
try {
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: #0d1219;\
--theme-color: #fff;\
--theme-logo-background: #0a0a0a;\
--theme-logo-color: #fff;\
--theme-anchor-color: #17a1f6;\
--theme-secondary-color: #cedae2;\
--theme-top-bar-background: #1c2938;\
--theme-top-bar-background-hover: #27384c;\
--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: #141f2d;\
--theme-container-accent-background: #202c3d;\
--theme-container-background-hover: #37475c;\
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
--theme-container-color: #fff;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #141d26;\
--theme-social-icon-invert: invert(100)</style>'
} else if (bodyClass.includes('pink-theme')) {
document.getElementById('body-styles').innerHTML = '<style>\
:root {\
--theme-background: #FFF7F9;\
--theme-color: #333;\
--theme-logo-background: #fff7f9;\
--theme-logo-color: #ff4983;\
--theme-anchor-color: #4e57ef;\
--theme-secondary-color: #4e57ef;\
--theme-top-bar-background: #ff4983;\
--theme-top-bar-background-hover: #ff5b8f;\
--theme-top-bar-color: #fff;\
--theme-top-bar-search-background: #FFF7F9;\
--theme-top-bar-search-color: #000;\
--theme-top-bar-write-background: #ff4983;\
--theme-top-bar-write-color: #fff;\
--theme-container-background: #fff;\
--theme-container-accent-background: #ff4983;\
--theme-container-background-hover: #FFF7F9;\
--theme-gradient-background: linear-gradient(to right, #fff 8%, #ffceda 18%, #FFF7F9 33%);\
--theme-container-color: #ff4983;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #ff4983;\
--theme-social-icon-invert: invert(0)</style>'
}
} catch(e) {
console.log(e)
}
</script>

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

@ -26,7 +26,6 @@
margin: auto;
max-width: 1250px;
}
@media screen and (min-width: 950px) {
.home {
margin-top: 26px;
@ -75,57 +74,7 @@
<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 {
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: #0d1219;\
--theme-color: #fff;\
--theme-anchor-color: #17a1f6;\
--theme-secondary-color: #cedae2;\
--theme-top-bar-background: #1c2938;\
--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: #141f2d;\
--theme-container-accent-background: #202c3d;\
--theme-container-background-hover: #37475c;\
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
--theme-container-color: #fff;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #141d26;\
--theme-social-icon-invert: invert(100)</style>'
} else if (bodyClass.includes('pink-theme')) {
document.getElementById('body-styles').innerHTML = '<style>\
:root {\
--theme-background: #FFF7F9;\
--theme-color: #333;\
--theme-anchor-color: #6116f6;\
--theme-secondary-color: #6116f6;\
--theme-top-bar-background: #ff4983;\
--theme-top-bar-color: #fff;\
--theme-top-bar-search-background: #FFF7F9;\
--theme-top-bar-search-color: #000;\
--theme-top-bar-write-background: #ff4983;\
--theme-top-bar-write-color: #fff;\
--theme-container-background: #fff;\
--theme-container-accent-background: #ff4983;\
--theme-container-background-hover: #FFF7F9;\
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
--theme-container-color: #ff4983;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #ff4983;\
--theme-social-icon-invert: invert(100)</style>'
}
} catch(e) {
console.log(e)
}
</script>
<%= render "layouts/user_config" %>
<% end %>
<% unless internal_navigation? %>
<div id="audiocontent">