Make navbar a real bootstrap navbar and switch from Font Awesome to Line Awesome (because it's libre)

This commit is contained in:
Oliver Falk
2018-07-09 12:23:22 +02:00
parent 53508723c3
commit 1cc69ddac0
4 changed files with 87 additions and 68 deletions

View File

@@ -42,9 +42,9 @@
<img src="{{ mailurl }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
<i class="fas fa-unlock" title="None-SSL connection (http)"></i>
<i class="fa fa-unlock-alt" title="None-SSL connection (http)"></i>
<br/>
<i class="fas fa-at" title="mail: {{ form.mail.value }}"></i>
<i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
</div>
</div>
<br/>MD5
@@ -56,9 +56,9 @@
<img src="{{ mailurl_secure }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
<i class="fas fa-lock" title="Secure connection (https)"></i>
<i class="fa fa-unlock" title="Secure connection (https)"></i>
<br/>
<i class="fas fa-at" title="mail: {{ form.mail.value }}"></i>
<i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
</div>
</div>
<br/>MD5
@@ -70,9 +70,9 @@
<img src="{{ BASE_URL }}{{ mail_hash256 }}?s={{ size }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
<i class="fas fa-unlock" title="None-SSL connection (http)"></i>
<i class="fa fa-unlock-alt" title="None-SSL connection (http)"></i>
<br/>
<i class="fas fa-at" title="mail: {{ form.mail.value }}"></i>
<i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
</div>
</div>
<br/>SHA256
@@ -84,9 +84,9 @@
<img src="{{ SECURE_BASE_URL }}{{ mail_hash256 }}?s={{ size }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px;">
<i class="fas fa-lock" title="Secure connection (https)"></i>
<i class="fa fa-unlock" title="Secure connection (https)"></i>
<br/>
<i class="fas fa-at" title="mail: {{ form.mail.value }}"></i>
<i class="fa fa-at" title="mail: {{ form.mail.value }}"></i>
</div>
</div>
<br/>SHA256
@@ -101,9 +101,9 @@
<img src="{{ openidurl }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px">
<i class="fas fa-unlock" title="None-SSL connection (http)"></i>
<i class="fa fa-unlock-alt" title="None-SSL connection (http)"></i>
<br/>
<i class="fab fa-openid" title="openid: {{ form.openid.value }}"></i>
<i class="fa fa-openid" title="openid: {{ form.openid.value }}"></i>
</div>
</div>
<br/>SHA256
@@ -115,9 +115,9 @@
<img src="{{ openidurl_secure }}" style="max-width: {{ size }}px; max-height: {{ size }}px;">
</a>
<div style="padding-left:2px; float:inline-end; font-size:{% widthratio size 3 1 %}px">
<i class="fas fa-lock" title="Secure connection (http)"></i>
<i class="fa fa-unlock" title="Secure connection (http)"></i>
<br/>
<i class="fab fa-openid" title="openid: {{ form.openid.value }}"></i>
<i class="fa fa-openid" title="openid: {{ form.openid.value }}"></i>
</div>
</div>
<br/>SHA256

View File

@@ -0,0 +1,28 @@
{% load i18n %}
<ul class="nav navbar-nav" style="flex-direction: row;">
<li class="nav-item dropdown" id="tab_account">
<a class="nav-link dropdown-toggle" href="/" id="account_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% if request.user.is_authenticated %}
<i class="fa fa-user" aria-hidden="true"></i> {{ request.user }}
{% else %}
<i class="fa fa-sign-in" aria-hidden="true"></i> Login
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right" style="position: absolute; right:0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
{% if request.user.is_authenticated %}
<a class="dropdown-item" href="{% url 'profile' %}"><i class="fa fa-image" aria-hidden="true"></i> {% trans 'Profile' %}</a>
<a class="dropdown-item" href="{% url 'user_preference' %}"><i class="fa fa-cog" aria-hidden="true"></i> {% trans 'Preferences' %}</a>
<a class="dropdown-item" href="{% url 'logout' %}"><i class="fa fa-sign-out" aria-hidden="true"></i> {% trans 'Logout' %}</a>
{% else %}
<a class="dropdown-item" href="{% url 'login' %}"><i class="fa fa-sign-in" aria-hidden="true"></i> {% trans 'Local' %}</a>
<a class="dropdown-item" href="{% url 'new_account' %}"><i class="fa fa-user-plus" aria-hidden="true"></i> {% trans 'Create account' %}</a>
{% endif %}
</div>
</li>
{% if user.is_staff %}
<li class="nav-item" style="margin-left: 5px;">
<a class="nav-link" href="{% url 'admin:index' %}" target="_new"><i class="fa fa-user-secret" aria-hidden="true"></i> {% trans 'Admin' %}</a>
</li>
{% endif %}
</ul>

View File

@@ -8,61 +8,52 @@
<title>{% block title %}Libravatar - {% trans 'Freeing the Web, one face at a time!' %}{% endblock title %}</title>
{% endblock bootstrap4_extra_head %}
<div id="header">
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ site_url }}">
<div id="logo">
<img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top" alt="{% trans 'Home' %}">
</div>
<div id="site-branding">
<font size='1.0em'>
<span id="site-name">i<span class="bolder">vatar</span></span>
</font>
<br/><font size='0.8em'>{% trans 'freeing the web one face at a time' %}</font>
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'tools_check' %}">{% trans 'Check' %}</a>
<!-- <a class="dropdown-item" href="#">{% trans 'Check domain' %}</a> -->
</div>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="#">{% trans 'Contact us' %}</a>
</li>
-->
<!--
<li class="nav-item">
<a class="nav-link" href="#">{% trans 'Security' %}</a>
</li>
-->
</ul>
{% if user.is_authenticated %}
<ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="nav-link" href="{% url 'profile' %}">{% trans 'Profile' %}</a>
<a class="nav-link" href="{% url 'user_preference' %}">{% trans 'Preferences' %}</a>
<a class="nav-link" href="{% url 'logout' %}">{% trans 'Logout' %}</a>
</div>
</li>
</ul>
{% endif %}
</div>
</nav>
</div>
{% block topbar_base %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% block topbar %}
{% block site_brand %}
<a class="navbar-brand d-none d-lg-block" href="/">
<img src="{% static 'img/logo.png' %}" width="60" height="60" class="d-inline-block align-top" alt="{% trans 'Home' %}">
</a>
{% endblock %}
{% block nav %}
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto nav">
<li class="nav-item" style="margin-left: 5px;">
<a class="nav-link" href="TODO contact" target="_new"><i class="fa fa-envelope" aria-hidden="true"></i>
{% trans 'Contact' %}
</a>
</li>
<li class="nav-item" style="margin-left: 5px;">
<a class="nav-link" href="TODO security" target="_new"><i class="fa fa-user-secret" aria-hidden="true"></i>
{% trans 'Security' %}
</a>
</li>
<li class="nav-item dropdown" id="tab_tools">
<a class="nav-link dropdown-toggle" href="/" id="tools_dropdown"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{% trans 'Tools' %}">
<i class="fa fa-wrench" aria-hidden="true"></i>
{% trans 'Tools' %}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="tools_dropdown">
<a id="tools-check" class="dropdown-item"
href="{% url 'tools_check' %}">
<i class="fa fa-check-square" aria-hidden="true"></i> {% trans 'Check' %}
</a>
</div>
</li>
</ul>
</div>
<div>
{% block account_bar %}{% include "_account_bar.html" %}{% endblock %}
</div>
{% endblock %}
{% endblock %}
</nav>
{% endblock %}
{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
<div id="outer">

View File

@@ -19,7 +19,7 @@
<link rel="icon" type="image/png" href="{% static '/img/nobody/195.png' %}" sizes="195x195">
<link rel="mask-icon" href="{% static '/img/safari-pinned-tab.svg' %}" color="#fa711f">
<link rel="stylesheet" href="{% static '/css/ivatar.css' %}" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'line-awesome/css/line-awesome-font-awesome.min.css' %}">
{% if user.is_authenticated %}
{% if user.userpreference and user.userpreference.theme != 'default' %}
<link rel="stylesheet" href="{% static 'css/' %}{{ user.userpreference.theme }}.css" type="text/css">