theme enabled

src/client/app.js

@@ -20,6 +20,7 @@ import Article from './components/Article'
 import ArticlePageControl from './components/ArticlePageControl'
 import Album from './components/Album'
 import Parallax from './components/Parallax'
+import ThemeSelector from './components/ThemeSelector'
 
 import Page from './components/CloudPage'
 import PageSchool from './components/PageSchool'
@@ -48,6 +49,7 @@ import Ext from './filters/Ext'
 import IOService from './services/io'
 import MenuService from './services/menu'
 import API from './services/api'
+import Theme from './services/theme'
 
 import {sortByPattern} from '../utils/sort'
 import {documentsSortPattern, collectiveSortPattern} from './config'
@@ -260,6 +262,7 @@ app.run(($location, $rootScope, $http) => {
 	API,
 	IOService,
 	MenuService,
+	Theme,
 	RemoveHashtags,
 	RemoveNewline,
 	Strip,
@@ -301,5 +304,6 @@ app.run(($location, $rootScope, $http) => {
 	ScheduleSlider,
 	ScheduleSlide,
 	ScheduleRecord,
-	FooterLinks
+	FooterLinks,
+	ThemeSelector
 ].map(i => i(app))

src/client/components/ThemeSelector.js

@@ -0,0 +1,22 @@
+export default function (app) {
+	app.component('themeSelector', {
+		template: `
+			<p ng-click="toggleTheme()">
+				<span ng-hide="isMainTheme" title="Выключить версию для слабовидящих"><i class="fa fa-eye" aria-hidden="true"></i></span>
+				<span ng-show="isMainTheme" title="Включить версию для слабовидящих"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>
+			</p>
+		`,
+		controller: ($scope, theme) => {
+			const update = () => {
+				$scope.isMainTheme = theme.currentTheme === theme.mainTheme
+			}
+
+			$scope.toggleTheme = () => {
+				theme.toggle()
+				update()
+			}
+
+			update()
+		},
+	})
+};

src/client/services/theme.js

@@ -0,0 +1,32 @@
+const themes = {
+	main: 'style.css',
+	accessibility: 'style-accessibility.css',
+}
+
+const defaultTheme = 'main'
+
+class Theme {
+	constructor($rootScope) {
+		this.mainTheme = defaultTheme
+		this.currentTheme = null
+
+		const getTheme = value => themes[value]
+		const setTheme = value => {
+			const theme = value in themes ? value : defaultTheme
+			localStorage.setItem('theme', theme)
+			this.currentTheme = theme
+			$rootScope.theme = getTheme(theme)
+		}
+
+		setTheme(localStorage.getItem('theme'))
+
+		this.toggle = () => {
+			const t = this.currentTheme === 'main' ? 'accessibility' : 'main'
+			setTheme(t)
+		}
+	}
+}
+
+export default function (app) {
+	app.service('theme', Theme)
+}

src/style/components/navigation.scss

@@ -19,7 +19,7 @@
 
 .navigation__right {
   color: $dark-color;
-  font-size: $smaller-font-size;
+  font-size: $normal-font-size;
   margin-right: 1em;
 
   z-index: 1000;

src/style/variables.scss

@@ -55,7 +55,7 @@ $biggest-font-size: 2.5rem;
 
 //MENU
 $menu-thickness: 2.5em;
-$menu-colored-mark-thickness: 2px;
+$menu-colored-mark-thickness: 4px;
 $menu-inactive-item-color: hsl(0, 0%, 50%);
 
 //ANIMATION

src/templates/components/navigation.html

@@ -2,6 +2,6 @@
     <main-menu items="$.menu"></main-menu>
 
     <div class="navigation__right">
-        <span>{{$.rightText}}</span>
+        <theme-selector></theme-selector>
     </div>
 </div>

src/templates/main.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html ng-app="hudozka">
+
 <head>
     <meta name="fragment" content="!">
     <meta name="google-site-verification" content="8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg">
@@ -9,6 +10,8 @@
     <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
     <meta name="referrer" content="unsafe-url">
 
+    {{{{raw-helper}}}}
+
     <base href="/">
     <title ng-bind="title">Шлиссельбургская Детская Художественная Школа</title>
 
@@ -18,17 +21,22 @@
     <link rel="apple-touch-icon" sizes="114x114" href="//static.shlisselburg.org/art/graphics/favicon-114.png" />
     <link rel="apple-touch-icon" sizes="144x144" href="//static.shlisselburg.org/art/graphics/favicon-144.png" />
 
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" ng-href="{{theme}}" href="style.css"/>
+    <!--<link rel="stylesheet" href="style-accessibility.css" />-->
     <!--<link rel="stylesheet" href="/animate.min.css">-->
     <link rel="stylesheet" href="/fonts/PTSans/stylesheet.css">
     <link rel="stylesheet" href="/fonts/PTSerif/stylesheet.css">
 
+    <script src="/libs.js"></script>
+
     <script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
 
-    <script src="/libs.js"></script>
     <script src="/app.js"></script>
 
+    {{{{/raw-helper}}}}
+
     <script>
         if(window.location.host.indexOf('localhost') === -1){
             (function (i, s, o, g, r, a, m) {