Ui style and fixes

locales/en/common.json

@@ -73,6 +73,9 @@
         "npo_join": "Join NPO",
         "whoami": "Manage Profile"
     },
+    "top-nav": {
+      "manage": "Manage"
+    },
     "footer": {
         "scrolltop": "Back to top",
         "visit_homepage": "Visit Midburn website",
@@ -84,7 +87,8 @@
         "open_source": "Open Source",
         "want_to_help": "Want to help us code?",
         "toc": "Terms of Use and Privacy Policy",
-        "toc_link": "http://midburn.org/en/en-terms-and-privacy/"
+        "toc_link": "http://midburn.org/en/en-terms-and-privacy/",
+        "change_theme": "Change theme"
     },
     "whoami": {
         "gender": "Gender",

locales/en/gate.json

@@ -1,5 +1,6 @@
 {
     "gate" : "Gate",
+    "desc": "Manage gate entrance",
     "search": "Search by ticket number / person name / email / id",
     "enter_ticket": "Enter ticket",
     "force_enter_ticket": "Force entrance",

locales/he/common.json

@@ -74,6 +74,9 @@
         "npo_join": "הצטרפות לעמותה",
         "whoami": "עריכת פרופיל"
     },
+    "top-nav": {
+        "manage": "ניהול"
+    },
     "footer": {
         "scrolltop": "חזרה למעלה",
         "visit_homepage": "בקרו באתר מידברן",
@@ -85,7 +88,8 @@
         "open_source": "קוד פתוח",
         "want_to_help": "רוצה לעזור לנו לקודד?",
         "toc": "תנאי השימוש באתר ומדיניות פרטיות",
-        "toc_link": "http://midburn.org/he-terms-and-privacy/"
+        "toc_link": "http://midburn.org/he-terms-and-privacy/",
+        "change_theme": "החלף צבע"
     },
     "whoami": {
         "gender": "מגדר",

locales/he/gate.json

@@ -1,5 +1,6 @@
 {
     "gate" : "שער",
+    "desc": "ניהול כניסות לאירוע",
     "search": "חיפוש באמצעות שם פרטי / שם משפחה / שם מלא / דואר אלקטרוני / מספר כרטיס / תעודת זהות",
     "enter_ticket": "כניסה לאירוע",
     "force_enter_ticket": "כניסה לאירוע בכוח",

public/scripts/camps.js

@@ -1,6 +1,13 @@
 /**
  * GLOBALS
  */
+$(window).load(function () {
+    var isLight = sessionStorage.getItem("theme");
+    $('body').toggleClass('light', isLight === 'light');
+    $("#cover").fadeOut(200);
+    toggleTheme();
+});
+
 $(document).ajaxStart(function () {
     $('#ajax_indicator').removeClass('done').removeClass('hide').fadeIn('fast');
 });
@@ -9,7 +16,7 @@ $(document).ajaxComplete(function () {
 });
 $(function () {
     // tooltips
-    $('[data-toggle="tooltip"]').tooltip()
+    $('[data-toggle="tooltip"]').tooltip();
 });
 
 // bind Twitter Bootstrap tooltips to dynamically created elements
@@ -42,6 +49,16 @@ $input.keydown(function () {
     clearTimeout(typingTimer);
 });
 
+// toggleTheme (default or light)
+function toggleTheme() {
+    $('#toggleTheme').on('click', function() {
+        isLight = sessionStorage.getItem("theme");
+        isLight = isLight === '' ? 'light' : '';
+        $('body').toggleClass('light', isLight === 'light');
+        sessionStorage.setItem("theme", isLight);
+    });
+}
+
 function doneTyping() {
     var val = $input.val(),
         lang = $('body').attr('lang'),

public/stylesheets/_camps.scss

@@ -1,9 +1,5 @@
 @import url( 'https://fonts.googleapis.com/css?family=Cabin|Rubik');
 @import './camps_mobile';
-$card-bg: #fafafa;
-$green: #24b47e;
-$red: #D50000;
-$teal: #26A69A;
 
 body {
     font-family: 'Cabin', sans-serif;
@@ -51,7 +47,6 @@ body[lang="en"] {
     &:focus,
     &:hover {
         text-decoration: none;
-        color: inherit;
         transform: translateY(-3px);
         box-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
     }
@@ -138,6 +133,7 @@ body[lang="en"] {
         background: #6772e5;
 
         &:hover {
+            color: #fff;
             background: #7795f8;
         }
     }
@@ -147,7 +143,8 @@ body[lang="en"] {
         background: $green;
 
         &:hover {
-            background: #24b41e;
+            color: #fff;
+            background: $light-green;
         }
     }
 
@@ -203,7 +200,7 @@ body[lang="en"] .dash-panel a:after {
 }
 
 .card {
-    padding: 40px 40px 40px 120px;
+    padding: 40px;
     margin-bottom: 2em;
     background-color: $card-bg;
     border-radius: 2px;
@@ -361,9 +358,11 @@ body[lang="en"] {
 .camps {
     // Card transition
     .cards--wrapper {
+        border-radius: 4px;
         display: block;
         visibility: hidden;
         background: $card-bg;
+        color: $card-text;
         margin-bottom: 2em;
         position: relative;
         overflow: hidden;

public/stylesheets/_colors.scss

@@ -1,11 +1,19 @@
-
 // colors
+$primary-color: #6771e5;
+$primary-color-muted: #afb1e5;
+$secondary-color: #ffa500;
+$card-bg: #fafafa;
+$card-text: black;
+
+
 $dark-gray: #7F8C8D;
 $gray: #95A5A6;
 $light-gray: #BDC3C7;
 $dark-blue: #34495E;
 $blue: #2980B9;
+$teal: #3ea4a6;
 $green: #16A085;
+$light-green: #1dd6b2;
 $yellow: #F1C40F;;
 $orange: #F39C12;
 $red:  #E74C3C;

public/stylesheets/_footer.scss

@@ -32,7 +32,7 @@ footer {
 
     .footer__links {
         padding: 0;
-
+        text-align: center;
         li {
             display: inline-block;
             padding: 0.2em 0.5em;
@@ -55,4 +55,4 @@ footer {
             }
         }
     }
-}
+}

public/stylesheets/_light-theme.scss

@@ -0,0 +1,6 @@
+body.light {
+    background-image: inherit;
+    .main {
+        color: black;
+    }
+}

public/stylesheets/main.scss

@@ -1,15 +1,33 @@
+@import './colors';
 @import './ui';
 @import './camps';
 @import './footer';
 @import './colors';
+@import './light-theme';
+
+// hide this after getting theme from session storage and page load (public/scripts/camps.js)
+#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #ffffff; z-index:9999;}
+
 body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    background-image: url("https://midburn.org/wp-content/uploads/2017/01/poicamp.jpg");
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-attachment: fixed;
+    background-size: cover;
 }
-
-a:hover {
-    text-decoration: none;
+a {
+    color: $primary-color;
+    &:hover {
+        color: $primary-color-muted;
+        text-decoration: none;
+    }
+}
+*:focus {
+    outline: none !important;
+    color: inherit !important;
 }
 
 span {
@@ -18,6 +36,16 @@ span {
 
 .main {
     padding-top: 90px;
+    color: white;
+}
+
+.card {
+    background: $card-bg;
+    color: $card-text;
+}
+
+.text-muted {
+    color: $primary-color-muted;
 }
 
 .midburn_logo {
@@ -37,16 +65,30 @@ span {
     margin-bottom: 6px;
 }
 /*NAVIGATION*/
+#navbar {
+    padding: 0 10px 0 10px;
+}
+
 .navbar-brand {
+    background-size: 50px;
     padding-left: 30px;
-    background-image: url("../images/spark_logo.png");
+    background-image: url("../images/midburn_logo.svg");
     background-repeat: no-repeat;
-    background-position: 10px 15px;
+    background-position: -9px 12px;
+    color: black !important;
 }
 
 .navbar-nav>li>a {
     line-height: 22px;
 }
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
+    background-color: $primary-color !important;
+    background-image: -webkit-linear-gradient(top, $primary-color 0, $primary-color 100%) !important;
+    background-image: -o-linear-gradient(top, $primary-color 0, $primary-color 100%) !important;
+    background-image: -webkit-gradient(linear, left top, left bottom, from($primary-color), to($primary-color)) !important;
+    background-image: linear-gradient(to bottom, $primary-color 0, $primary-color 100%) !important;
+}
+
 
 li.dropdown > ul > li > a > img,
 li.dropdown > ul > li > a > span {
@@ -87,11 +129,11 @@ li.dropdown > ul > li > a > span {
         display: table;
     }
 }
+
 // center modal buttons
 .swal-footer {
     text-align: center;
 }
-
 // bootstrap overrides
 .checkbox input[type=checkbox],
 .checkbox-inline input[type=checkbox],

routes/main_routes.js

@@ -19,6 +19,8 @@ var async = require('async');
 var crypto = require('crypto');
 
 module.exports = function (app, passport) {
+    // Use locals
+    app.locals.moment = require('moment');
     // Breadcrumbs
     app.use(breadcrumbs.init());
 

routes/pages/camps_routes.js

@@ -275,7 +275,7 @@ var __render_camp = function (camp, req, res) {
             url: '/' + req.params.lng + '/home'
         },
         {
-            name: 'camps:breadcrumbs.manage',
+            name: 'camps:nav_admin',
             url: '/' + req.params.lng + '/camps-admin'
         }]);
 
@@ -309,7 +309,7 @@ var __render_camp = function (camp, req, res) {
             url: '/' + req.params.lng + '/home'
         },
         {
-            name: 'camps:breadcrumbs.manage',
+            name: 'camps:art_installation.nav_admin',
             url: '/' + req.params.lng + '/art-admin'
         }]);
         if (req.user.isAdmin || req.user.isArtInstallationsAdmin) {

routes/pages/events_routes.js

@@ -4,7 +4,16 @@ const express = require("express");
 const router = express.Router();
 
 router.get("/", userRole.isAdmin(), (req, res) => {
+    req.breadcrumbs([{
+        name: 'breadcrumbs.home',
+        url: '/' + req.params.lng + '/home'
+    },
+    {
+        name: 'events:nav_admin',
+        url: '/' + req.params.lng + '/events-admin'
+    }]);
     res.render("pages/events/index", {
+        breadcrumbs: req.breadcrumbs(),
         t_prefix: "events:"
     });
 });

views/includes/footer.jade

@@ -19,6 +19,10 @@ footer
                         a(href="#{t('footer.toc_link')}" target='_blank')=t('footer.toc')
                     li
                         a(href='//www.midburn.org')=t('footer.visit_homepage')
+                    li
+                        a(href="#" id="toggleTheme")
+                            i.fa.fa-paint-brush.m-1(aria-hidden='true')
+                            =t('common:footer.change_theme')
 
             .col-xs-12.col-sm-4
                 ul.footer__links

views/includes/layout.jade

@@ -17,7 +17,8 @@ head
         link(rel='stylesheet', href='/node_modules/selectize.js/dist/css/selectize.default.css')
         link(rel="stylesheet", href="/stylesheets/main.scss" )
 
-body( style='direction:#{languageDir}', lang=language, dir='#{languageDir}' )
+body( style='direction:#{languageDir}', lang=language, dir='#{languageDir}')
+    div#cover
     block wrapper
     //-     Scripts     -//
     script(src='/node_modules/jquery/dist/jquery.min.js')