Commit 96009d3d authored by onny's avatar onny
Browse files

start implementing localization and internationalization

parent e69ac1e5
......@@ -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/
......
......@@ -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;
}
......
......@@ -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() {
}
}
}
});
{% load i18n %}
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
......@@ -22,15 +23,24 @@
</div>
</div>
<div class='search'>
<span class='icon'>
<span class='icon icon-search'>
<i class="fa fa-search"></i>
<input type='text'>
<!-- <input type='text'> -->
</span>
</div>
<div class='lang'>
<span class='icon'>
<div class="dropdown">
<i class="fa fa-chevron-down fa-margin"></i>
<span>En</span>
{% get_current_language as LANGUAGE_CODE %}
<span>{{ LANGUAGE_CODE }}</span>
<div id="menu-lang" class="dropdown-content dropdown-lang">
{% get_available_languages as LANGUAGES %}
{% for lang_code, lang_name in LANGUAGES %}
<a href="/{{ lang_code }}">{{ lang_name }}</a>
{% endfor %}
</div>
</div>
</span>
</div>
<div class='login'>
......@@ -38,15 +48,15 @@
{% if authenticated %}
<div class="dropdown">
<i class="fa fa-user"></i>
<div id="menu-login" class="dropdown-content">
<div id="menu-login" class="dropdown-content dropdown-login">
ubezi@student.kit.edu
<hr>
<a href="#about">Logout</a>
<a href="/admin/logout">{% trans "Logout" %}</a>
</div>
</div>
{% else %}
<i class="fa fa-lock fa-margin"></i>
<span>Sign In</span>
<span>{% trans "Sign In" %}</span>
{% endif %}
</span>
</div>
......@@ -56,12 +66,12 @@
<main>
<div>
<div class="sidebar">
<a href="/artists">Artists</a><br>
<a href="/projects">Projects</a><br>
<a href="/entries">Entries</a><br>
<a href="/media">Media</a><br><br>
<a href="/artists">{% trans "Artists" %}</a><br>
<a href="/projects">{% trans "Projects" %}</a><br>
<a href="/entries">{% trans "Entries" %}</a><br>
<a href="/media">{% trans "Media" %}</a><br><br>
{% if authenticated %}
<a href="/add">Add</a><br>
<a href="/add">{% trans "Add" %}</a><br>
{% endif %}
</div>
<div class="content">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment