dark mode
This commit is contained in:
vabene1111
7
cookbook/static/themes/bootstrap.min.css
vendored
Normal file
7
cookbook/static/themes/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
12
cookbook/static/themes/darkly.min.css
vendored
Normal file
12
cookbook/static/themes/darkly.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
12
cookbook/static/themes/flatly.min.css
vendored
Normal file
12
cookbook/static/themes/flatly.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
12
cookbook/static/themes/superhero.min.css
vendored
Normal file
12
cookbook/static/themes/superhero.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -18,11 +18,31 @@
|
||||
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
||||
|
||||
<!-- Bootstrap 4 -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
||||
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link id="id_main_css" rel="stylesheet"
|
||||
href="{% static 'themes/darkly.min.css' %}">
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function getCookieValue(a) {
|
||||
let b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)');
|
||||
return b ? b.pop() : '';
|
||||
}
|
||||
|
||||
let theme_list = ['{% static 'themes/bootstrap.min.css' %}', '{% static 'themes/flatly.min.css' %}', '{% static 'themes/darkly.min.css' %}', '{% static 'themes/superhero.min.css' %}'];
|
||||
|
||||
let css = $('#id_main_css');
|
||||
let theme = getCookieValue('theme');
|
||||
if (theme !== "" && theme_list.includes(theme)) {
|
||||
css.attr('href', theme);
|
||||
} else {
|
||||
css.attr('href', '{% static 'themes/bootstrap.min.css' %}');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
@ -38,6 +58,7 @@
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css"
|
||||
integrity="sha256-zFnNbsU+u3l0K+MaY92RvJI6AdAVAxK3/QrBApHvlH8=" crossorigin="anonymous"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
$.fn.select2.defaults.set("theme", "bootstrap");
|
||||
</script>
|
||||
@ -60,7 +81,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="id_main_nav">
|
||||
<!--<a class="navbar-brand" href="{% url 'index' %}">{% trans 'Cookbook' %}</a>-->
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
|
||||
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
@ -134,6 +155,15 @@
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<!-- Navbar theming, run before content to avoid flickering -->
|
||||
<script type="text/javascript">
|
||||
let nav_color = getCookieValue('color');
|
||||
if (nav_color !== "") {
|
||||
$('#id_main_nav').attr('class', 'navbar navbar-expand-lg navbar-dark bg-' + nav_color)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
{% for message in messages %}
|
||||
@ -149,5 +179,6 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
cookbook/templates/settings.html
Normal file
96
cookbook/templates/settings.html
Normal file
@ -0,0 +1,96 @@
|
||||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{% trans 'Settings' %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h3>
|
||||
{% trans 'Settings' %}
|
||||
</h3>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<h4><i class="fas fa-language"></i> {% trans 'Language' %}</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
|
||||
<input class="form-control" name="next" type="hidden" value="{{ redirect_to }}">
|
||||
<select name="language" class="form-control">
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
{% get_available_languages as LANGUAGES %}
|
||||
{% get_language_info_list for LANGUAGES as languages %}
|
||||
{% for language in languages %}
|
||||
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
|
||||
{{ language.name_local }} ({{ language.code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<br/>
|
||||
<input type="submit" value="{% trans 'Save' %}" class="btn btn-success">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<h4><i class="fas fa-palette"></i>{% trans 'Style' %}</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<label>
|
||||
{% trans 'Choose Theme' %}
|
||||
<select class="form-control" id="id_select_theme" onchange="changeTheme()">
|
||||
<option value="{% static 'themes/bootstrap.min.css' %}">{% trans 'Default' %}</option>
|
||||
<option value="{% static 'themes/flatly.min.css' %}">Flatly</option>
|
||||
<option value="{% static 'themes/darkly.min.css' %}">Darkly</option>
|
||||
<option value="{% static 'themes/superhero.min.css' %}">Superhero</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<label>
|
||||
{% trans 'Choose Navigation Color' %}
|
||||
<select class="form-control" id="id_select_color" onchange="changeNavColor()">
|
||||
<option value="primary">Primary</option>
|
||||
<option value="secondary">Secondary</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="success">Success</option>
|
||||
<option value="warning">Warning</option>
|
||||
<option value="danger">Danger</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<script type="text/javascript">
|
||||
if (theme !== "") {
|
||||
$('#id_select_theme').val(theme)
|
||||
}
|
||||
if (nav_color !== "") {
|
||||
$('#id_select_color').val(nav_color)
|
||||
}
|
||||
|
||||
function changeTheme() {
|
||||
let theme = $('#id_select_theme').val();
|
||||
document.cookie = "theme=" + theme + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function changeNavColor() {
|
||||
let color = $('#id_select_color').val();
|
||||
document.cookie = "color=" + color + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
|
||||
location.reload();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@ -9,6 +9,7 @@ urlpatterns = [
|
||||
path('books/', views.books, name='view_books'),
|
||||
path('plan/', views.meal_plan, name='view_plan'),
|
||||
path('shopping/', views.shopping_list, name='view_shopping'),
|
||||
path('settings/', views.settings, name='view_settings'),
|
||||
|
||||
path('view/recipe/<int:pk>', views.recipe_view, name='view_recipe'),
|
||||
|
||||
|
||||
@ -141,3 +141,8 @@ def shopping_list(request):
|
||||
ingredients.append(i)
|
||||
|
||||
return render(request, 'shopping_list.html', {'ingredients': ingredients, 'recipes': recipes, 'form': form})
|
||||
|
||||
|
||||
@login_required
|
||||
def settings(request):
|
||||
return render(request, 'settings.html', {})
|
||||
|
||||
@ -22,6 +22,7 @@ urlpatterns = [
|
||||
path('', include('cookbook.urls')),
|
||||
path('admin/', admin.site.urls),
|
||||
path('accounts/', include('django.contrib.auth.urls')),
|
||||
path('i18n/', include('django.conf.urls.i18n')),
|
||||
]
|
||||
|
||||
if settings.DEBUG:
|
||||
|
||||
Reference in New Issue
Block a user