diff --git a/djangovuejs/settings.py b/djangovuejs/settings.py index 02340b244a350cc6f2933b555b30329660f7ed44..caa4604ee8b166d74235011cdf17ad1bfec01ab2 100644 --- a/djangovuejs/settings.py +++ b/djangovuejs/settings.py @@ -11,6 +11,7 @@ https://docs.djangoproject.com/en/1.9/ref/settings/ """ import os +from django.utils.translation import gettext_lazy as _ # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) @@ -49,6 +50,7 @@ MIDDLEWARE = [ 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', + 'django.middleware.locale.LocaleMiddleware' ] ROOT_URLCONF = 'djangovuejs.urls' @@ -112,6 +114,10 @@ USE_L10N = True USE_TZ = True +LANGUAGES = [ + ('de', _('German')), + ('en', _('English')), +] # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto/static-files/ diff --git a/static/css/main.css b/static/css/main.css index b09c9e78b77a182f9fe6f733e8939ec1c2ce7653..09d3b54a118c5514b8399c74025f5402331fae8a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -62,7 +62,7 @@ header > div { .search { height:100%; display:flex; - justify-content:center; + justify-content: flex-end; align-items: center; padding: 10px 30px; @@ -73,6 +73,13 @@ header > div { cursor: pointer; } +.icon-search { + height: 100%; + border-left: 1px solid; + border-color: #d6d6d6; + padding-left: 30px; +} + .lang { height: 100%; display:flex; @@ -123,16 +130,19 @@ input { .dropdown-content { display: none; position: absolute; - margin-top: 24px; - left: -160px; - padding: 15px; font-size: 13px; color: #d2cdcd; background-color: white; box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd; - width: 200px; overflow: auto; z-index: 1; + padding: 15px; +} + +.dropdown-login { + margin-top: 24px; + left: -160px; + width: 200px; } .dropdown-content a { @@ -142,12 +152,18 @@ input { padding: 5px; } +.dropdown-lang { + display: block; + margin-top: 24px; + left: -25px; + width: 170px; +} + .dropdown-content a:hover { color: white; background-color: #0027af; } - .active { box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd; } diff --git a/static/js/main.js b/static/js/main.js index 3d90b6efa6a0930097c06b0977e531dceb6ec789..1411fd27e22a68a4bcf7e0c78fd68295b232a7a5 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -133,12 +133,29 @@ var demo = new Vue({ document.addEventListener("DOMContentLoaded", function() { window.onclick = function(event) { - if (event.target.matches('.login') || event.target.matches('.fa-user')) { + if (event.target.matches('.search') || event.target.matches('.fa-search')) { + document.getElementsByClassName("search")[0].classList.toggle("active"); + } else { + searchBtn = document.getElementsByClassName("search")[0]; + if (searchBtn.classList.contains('active')) { + searchBtn.classList.remove('active'); + }; + }; + + if (event.target.matches('.lang') || event.target.matches('.fa-chevron-down')) { + document.getElementById("menu-lang").classList.toggle("show"); + document.getElementsByClassName("lang")[0].classList.toggle("active"); + } else { + langBtn = document.getElementsByClassName("lang")[0]; + if (langBtn.classList.contains('active')) { + langBtn.classList.remove('active'); + }; + }; + + if (event.target.matches('.login') || event.target.matches('.fa-user')) { document.getElementById("menu-login").classList.toggle("show"); document.getElementsByClassName("login")[0].classList.toggle("active"); - - console.log(document.getElementsByClassName("login")[0]); } else { loginBtn = document.getElementsByClassName("login")[0]; if (loginBtn.classList.contains('active')) { @@ -155,4 +172,6 @@ document.addEventListener("DOMContentLoaded", function() { } } } + + }); diff --git a/templates/base.html b/templates/base.html index a487972db0ca695e67b7fda93f0bccdd0e394899..1c96b53a00c0542ff811163ad5af14dc17b6193b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,3 +1,4 @@ +{% load i18n %} {% load staticfiles %} @@ -22,15 +23,24 @@
- - En +
@@ -38,15 +48,15 @@ {% if authenticated %} @@ -56,12 +66,12 @@