CSS Fixes and cleanup

Improves bootstrap compatibility, allowing for dropping in theme CSS.
Also improves responsive design but still has a ways to go.
This commit is contained in:
Basraah 2017-09-23 18:03:43 +10:00
parent 45f7b7d962
commit e68c840dad
18 changed files with 178 additions and 146 deletions

View File

@ -5,71 +5,89 @@
{% block title %}{% trans "Dashboard" %}{% endblock %} {% block title %}{% trans "Dashboard" %}{% endblock %}
{% block content %} {% block content %}
<div class="col-lg-12"> <h1 class="page-header text-center">{% trans "Dashboard" %}</h1>
<h1 class="page-header text-center">{% trans "Dashboard" %}</h1> <div class="col-sm-12">
<div class="col-lg-12 container"> <div class="row">
<div class="row"> <div class="col-sm-6 text-center">
<div class="col-lg-6 text-center"> <div class="panel panel-primary">
<div class="panel panel-primary"> <div class="panel-heading"><h3 class="panel-title">{% trans "Main Character" %}</h3></div>
<div class="panel-heading">{% trans "Main Character" %}</div> <div class="panel-body">
<div class="panel-body"> {% if request.user.profile.main_character %}
{% if request.user.profile.main_character %} {% with request.user.profile.main_character as main %}
{% with request.user.profile.main_character as main %} <div class="col-lg-4 col-sm-2">
<div class="col-lg-4 col-sm-2"> <table class="table">
<table class="table"> <tr>
<tr><td class="text-center"><img class="ra-avatar" src="https://image.eveonline.com/Character/{{ main.character_id }}_128.jpg"></td></tr> <td class="text-center"><img class="ra-avatar"
<tr><td class="text-center">{{ main.character_name }}</td></tr> src="https://image.eveonline.com/Character/{{ main.character_id }}_128.jpg">
</table> </td>
</div> </tr>
<div class="col-lg-4 col-sm-2"> <tr>
<table class="table"> <td class="text-center">{{ main.character_name }}</td>
<tr><td class="text-center"><img class="ra-avatar" src="https://image.eveonline.com/Corporation/{{ main.corporation_id }}_128.png"></td></tr> </tr>
<tr><td class="text-center">{{ main.corporation_name }}</td></tr> </table>
</table> </div>
</div> <div class="col-lg-4 col-sm-2">
<div class="col-lg-4 col-sm-2"> <table class="table">
{% if main.alliance_id %} <tr>
<table class="table"> <td class="text-center"><img class="ra-avatar"
<tr><td class="text-center"><img class="ra-avatar" src="https://image.eveonline.com/Alliance/{{ main.alliance_id }}_128.png"></td></tr> src="https://image.eveonline.com/Corporation/{{ main.corporation_id }}_128.png">
<tr><td class="text-center">{{ main.alliance_name }}</td><tr> </td>
</table> </tr>
{% endif %} <tr>
</div> <td class="text-center">{{ main.corporation_name }}</td>
{% endwith %} </tr>
{% else %} </table>
<div class="alert alert-danger" role="alert">{% trans "Missing main character model." %}</div> </div>
<div class="col-lg-4 col-sm-2">
{% if main.alliance_id %}
<table class="table">
<tr>
<td class="text-center"><img class="ra-avatar"
src="https://image.eveonline.com/Alliance/{{ main.alliance_id }}_128.png">
</td>
</tr>
<tr>
<td class="text-center">{{ main.alliance_name }}</td>
<tr>
</table>
{% endif %} {% endif %}
<div class="clearfix"></div> </div>
<div class="col-xs-6"> {% endwith %}
<a href="{% url 'authentication:add_character' %}" class="btn btn-block btn-info" title="Add Character">{% trans 'Add Character' %}</a> {% else %}
</div> <div class="alert alert-danger" role="alert">{% trans "Missing main character model." %}</div>
<div class="col-xs-6"> {% endif %}
<a href="{% url 'authentication:change_main_character' %}" class="btn btn-block btn-info" title="Change Main Character">{% trans "Change Main" %}</a> <div class="clearfix"></div>
</div> <div class="col-xs-6">
<a href="{% url 'authentication:add_character' %}" class="btn btn-block btn-info"
title="Add Character">{% trans 'Add Character' %}</a>
</div>
<div class="col-xs-6">
<a href="{% url 'authentication:change_main_character' %}" class="btn btn-block btn-info"
title="Change Main Character">{% trans "Change Main" %}</a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 text-center"> </div>
<div class="panel panel-success"> <div class="col-sm-6 text-center">
<div class="panel-heading">{% trans "Groups" %}</div> <div class="panel panel-success">
<div class="panel-body"> <div class="panel-heading"><h3 class="panel-title">{% trans "Groups" %}</h3></div>
<div style="height: 236px;overflow:-moz-scrollbars-vertical;overflow-y:auto;"> <div class="panel-body">
<table class="table table-striped"> <div style="height: 236px;overflow:-moz-scrollbars-vertical;overflow-y:auto;">
{% for group in user.groups.all %} <table class="table table-striped">
<tr> {% for group in user.groups.all %}
<td>{{ group.name }}</td> <tr>
</tr> <td>{{ group.name }}</td>
{% endfor %} </tr>
</table> {% endfor %}
</div> </table>
</div> </div>
</div> </div>
</div> </div>
<div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading" style="display:flex;">{% trans 'Characters' %}</div> <div class="panel-heading" style="display:flex;"><h3 class="panel-title">{% trans 'Characters' %}</h3></div>
<div class="panel-body"> <div class="panel-body">
<table class="table table-hover"> <table class="table table-hover">
<tr> <tr>
@ -79,14 +97,16 @@
<th class="text-center">{% trans 'Alliance' %}</th> <th class="text-center">{% trans 'Alliance' %}</th>
</tr> </tr>
{% for ownership in request.user.character_ownerships.all %} {% for ownership in request.user.character_ownerships.all %}
{% with ownership.character as char %} {% with ownership.character as char %}
<tr> <tr>
<td class="text-center"><img class="ra-avatar img-circle" src="https://image.eveonline.com/Character/{{ char.character_id }}_32.jpg"></td> <td class="text-center"><img class="ra-avatar img-circle"
<td class="text-center">{{ char.character_name }}</td> src="https://image.eveonline.com/Character/{{ char.character_id }}_32.jpg">
<td class="text-center">{{ char.corporation_name }}</td> </td>
<td class="text-center">{{ char.alliance_name }}</td> <td class="text-center">{{ char.character_name }}</td>
</tr> <td class="text-center">{{ char.corporation_name }}</td>
{% endwith %} <td class="text-center">{{ char.alliance_name }}</td>
</tr>
{% endwith %}
{% endfor %} {% endfor %}
</table> </table>
</div> </div>

View File

@ -32,7 +32,7 @@
} }
#lang_select { #lang-select {
width: 40%; width: 40%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

View File

@ -3,7 +3,7 @@
<form action="{% url 'set_language' %}" method="post"> <form action="{% url 'set_language' %}" method="post">
{% csrf_token %} {% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}" /> <input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}" />
<select onchange="this.form.submit()" class="form-control" id="lang_select" name="language"> <select onchange="this.form.submit()" class="form-control" id="lang-select" name="language">
{% get_language_info_list for LANGUAGES as languages %} {% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %} {% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}> <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>

View File

@ -8,7 +8,7 @@ class CorpStats(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Corporation Stats', 'Corporation Stats',
'fa fa-share-alt fa-fw grayiconecolor', 'fa fa-share-alt fa-fw',
'corputils:view', 'corputils:view',
navactive=['corputils:']) navactive=['corputils:'])

View File

@ -6,7 +6,7 @@ from allianceauth.services.hooks import MenuItemHook, UrlHook
@hooks.register('menu_item_hook') @hooks.register('menu_item_hook')
def register_menu(): def register_menu():
return MenuItemHook('Fleet Activity Tracking', 'fa fa-users fa-lightbulb-o fa-fw grayiconecolor', 'fatlink:view', return MenuItemHook('Fleet Activity Tracking', 'fa fa-users fa-lightbulb-o fa-fw', 'fatlink:view',
navactive=['fatlink:']) navactive=['fatlink:'])

View File

@ -7,7 +7,7 @@ from . import urls
class FleetUpMenu(MenuItemHook): class FleetUpMenu(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, 'Fleet-Up', MenuItemHook.__init__(self, 'Fleet-Up',
'fa fa-arrow-up fa-fw grayiconecolor', 'fa fa-arrow-up fa-fw',
'fleetup:view', 'fleetup:view',
navactive=['fleetup:']) navactive=['fleetup:'])

View File

@ -8,7 +8,7 @@ class ApplicationsMenu(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Applications', 'Applications',
'fa fa-file-o fa-fw grayiconecolor', 'fa fa-file-o fa-fw',
'hrapplications:index', 'hrapplications:index',
navactive=['hrapplications:']) navactive=['hrapplications:'])

View File

@ -7,7 +7,7 @@ from . import urls
class OpTimerboardMenu(MenuItemHook): class OpTimerboardMenu(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, 'Fleet Operations', MenuItemHook.__init__(self, 'Fleet Operations',
'fa fa-exclamation fa-fw grayiconecolor', 'fa fa-exclamation fa-fw',
'optimer:view', 'optimer:view',
navactive=['optimer:']) navactive=['optimer:'])

View File

@ -8,7 +8,7 @@ class PermissionsTool(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Permissions Audit', 'Permissions Audit',
'fa fa-key fa-id-card grayiconecolor', 'fa fa-key fa-id-card',
'permissions_tool:overview', 'permissions_tool:overview',
order=400, order=400,
navactive=['permissions_tool:']) navactive=['permissions_tool:'])

View File

@ -6,7 +6,7 @@
{% block page_title %}{% trans "Permissions Overview" %}{% endblock page_title %} {% block page_title %}{% trans "Permissions Overview" %}{% endblock page_title %}
{% block content %} {% block content %}
<div> <div class="col-sm-12">
<h1 class="page-header">{% trans "Permissions Overview" %}</h1> <h1 class="page-header">{% trans "Permissions Overview" %}</h1>
{% if request.GET.all != 'yes' %} {% if request.GET.all != 'yes' %}
<span class="pull-right"> <span class="pull-right">

View File

@ -44,7 +44,7 @@ class PermissionsToolViewsTestCase(TestCase):
response_content = str(response.content, encoding='utf8') response_content = str(response.content, encoding='utf8')
self.assertInHTML( self.assertInHTML(
'<li><a class="active" href="/permissions/overview/"><i class="fa fa-key fa-id-card grayiconecolor"></i> Permissions Audit</a></li>', '<li><a class="active" href="/permissions/overview/"><i class="fa fa-key fa-id-card"></i> Permissions Audit</a></li>',
response_content) response_content)
def test_permissions_overview(self): def test_permissions_overview(self):

View File

@ -7,7 +7,7 @@ class Services(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Services', 'Services',
'fa fa-cogs fa-fw grayiconecolor', 'fa fa-cogs fa-fw',
'services:services', 100) 'services:services', 100)
def render(self, request): def render(self, request):

View File

@ -74,7 +74,7 @@ class JabberBroadcast(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Jabber Broadcast', 'Jabber Broadcast',
'fa fa-lock fa-fw fa-bullhorn grayiconecolor', 'fa fa-lock fa-fw fa-bullhorn',
'openfire:broadcast') 'openfire:broadcast')
def render(self, request): def render(self, request):
@ -87,7 +87,7 @@ class FleetBroadcastFormatter(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, MenuItemHook.__init__(self,
'Fleet Broadcast Formatter', 'Fleet Broadcast Formatter',
'fa fa-lock fa-fw fa-space-shuttle grayiconecolor', 'fa fa-lock fa-fw fa-space-shuttle',
'services:fleet_format_tool') 'services:fleet_format_tool')
def render(self, request): def render(self, request):

View File

@ -7,7 +7,7 @@ from . import urls
class SrpMenu(MenuItemHook): class SrpMenu(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, 'Ship Replacement', MenuItemHook.__init__(self, 'Ship Replacement',
'fa fa-money fa-fw grayiconecolor', 'fa fa-money fa-fw',
'srp:management', 'srp:management',
navactive=['srp:']) navactive=['srp:'])

View File

@ -1,20 +1,29 @@
.grayiconecolor { .gray-icon-color .fa {
color: #505050; color: #505050;
} }
#lang_select {
margin-right: 25px; .notification-bell-color {
color: #A88F1E;
} }
#f_lang_select {
margin-right: 5px;
}
.navbar-brand { .navbar-brand {
height: 58px; height: 58px;
padding: 19px 19px; padding: 19px 19px;
} }
.auth-navbar-top { .auth-navbar-top {
margin-bottom: 0; margin-bottom: 0;
} }
.auth-sidebar {
margin-top: 1px; .auth-side-navbar-collapse {
padding-left: 0;
}
#wrapper {
width: 100%;
padding: 0;
}
#site-body-wrapper {
margin-right:0;
} }

View File

@ -24,22 +24,51 @@
<body> <body>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<div id="wrapper"> <div id="wrapper" class="container">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-static-top navbar-inverse auth-navbar-top" role="navigation">
<nav class="navbar navbar-inverse navbar-static-top auth-navbar-top" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand"> <div class="navbar-header">
{{ SITE_NAME }} <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".auth-menus-collapse">
</a> <span class="sr-only">Toggle navigation</span>
<!-- /.navbar-header --> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<ul class="nav navbar-top-links navbar-right"> <span class="icon-bar"></span>
<li class="nav-link"> </button>
<form id="f_lang_select" action="{% url 'set_language' %}" method="post"> <a class="navbar-brand">
{% csrf_token %} {{ SITE_NAME }}
<input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}"/> </a>
<select onchange="this.form.submit()" class="form-control" id="lang_select" name="language"> </div>
<div class="collapse navbar-collapse auth-menus-collapse">
<ul class="nav navbar-nav navbar-right">
{% if notifications %}
<li>
<a href="{% url 'notifications:list' %}">
<span class="fa-stack">
<i class="fa fa-bell fa-stack-2x notification-bell-color"></i>
<i class="fa fa-inverse fa-stack-1x">{{ notifications }}</i>
</span>
</a>
</li>
{% else %}
<li><a href="{% url 'notifications:list' %}">
<i class="fa fa-bell-o"></i></a>
</li>
{% endif %}
{% if user.is_authenticated %}
{% if user.is_staff %}
<li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
{% endif %}
<li><a href="{% url 'auth_logout' %}">{% trans "Logout" %}</a></li>
{% else %}
<li><a href="{% url 'authentication:login' %}">{% trans "Login" %}</a></li>
{% endif %}
</ul>
<form id="f-lang-select" class="navbar-form navbar-right" action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path|slice:'3:' }}"/>
<div class="form-group">
<select onchange="this.form.submit()" class="form-control" id="lang-select" name="language">
{% get_language_info_list for LANGUAGES as languages %} {% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %} {% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %}
@ -48,48 +77,24 @@
</option> </option>
{% endfor %} {% endfor %}
</select> </select>
</form> </div>
</li> </form>
{% if notifications %} </div>
<li class="nav-link active">
<a href="{% url 'notifications:list' %}">
<span class="fa-stack">
<i class="fa fa-bell fa-stack-2x"></i>
<i class="fa fa-inverse fa-stack-1x">{{ notifications }}</i>
</span>
</a>
</li>
{% else %}
<li class="nav-link"><a href="{% url 'notifications:list' %}">
<i class="fa fa-bell-o"></i></a>
</li>
{% endif %}
{% if user.is_authenticated %}
{% if user.is_staff %}
<li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
{% endif %}
<li><a href="{% url 'auth_logout' %}">{% trans "Logout" %}</a></li>
{% else %}
<li><a href="{% url 'authentication:login' %}">{% trans "Login" %}</a></li>
{% endif %}
</ul>
</div> </div>
</nav>
<!-- /.navbar-top-links --> <div class="row" id="site-body-wrapper">
<div class="col-sm-2 auth-side-navbar" role="navigation">
<div class="navbar-default sidebar auth-sidebar" role="navigation"> <div class="collapse navbar-collapse auth-menus-collapse auth-side-navbar-collapse">
<div class="sidebar-nav navbar-collapse"> <ul class="nav nav-pills nav-stacked gray-icon-color" id="side-menu">
<ul class="nav" id="side-menu">
<li> <li>
<a class="{% navactive request 'authentication:dashboard' %}" <a class="{% navactive request 'authentication:dashboard' %}"
href="{% url 'authentication:dashboard' %}"> href="{% url 'authentication:dashboard' %}">
<i class="fa fa-dashboard fa-fw grayiconecolor"></i>{% trans " Dashboard" %} <i class="fa fa-dashboard fa-fw"></i>{% trans " Dashboard" %}
</a> </a>
</li> </li>
<li> <li>
<a class="{% navactive request 'groupmanagement:groups' %}" href="{% url 'groupmanagement:groups' %}"> <a class="{% navactive request 'groupmanagement:groups' %}" href="{% url 'groupmanagement:groups' %}">
<i class="fa fa-cogs fa-fw fa-sitemap grayiconecolor"></i>{% trans " Groups" %} <i class="fa fa-cogs fa-fw fa-sitemap"></i>{% trans " Groups" %}
</a> </a>
</li> </li>
@ -97,7 +102,7 @@
<li> <li>
<a class="{% navactive request 'groupmanagement:management groupmanagement:membership groupmanagement:membership_list' %}" <a class="{% navactive request 'groupmanagement:management groupmanagement:membership groupmanagement:membership_list' %}"
href="{% url 'groupmanagement:management' %}"> href="{% url 'groupmanagement:management' %}">
<i class="fa fa-lock fa-sitemap fa-fw grayiconecolor"></i>{% trans " Group Management" %} <i class="fa fa-lock fa-sitemap fa-fw"></i>{% trans " Group Management" %}
</a> </a>
</li> </li>
{% endif %} {% endif %}
@ -107,28 +112,26 @@
<li> <li>
<a class="{% navactive request 'authentication:help' %}" <a class="{% navactive request 'authentication:help' %}"
href="{% url 'authentication:help' %}"> href="{% url 'authentication:help' %}">
<i class="fa fa-question fa-fw grayiconecolor"></i>{% trans " Help" %} <i class="fa fa-question fa-fw"></i>{% trans " Help" %}
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<!-- /.sidebar-collapse -->
</div> </div>
<!-- /.navbar-static-side --> <div class="col-sm-10">
</nav>
<div id="page-wrapper">
<div class="container">
{% if messages %} {% if messages %}
<br> <br>
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.level_tag }}">{{ message }}</div> <div class="alert alert-{{ message.level_tag }}">{{ message }}</div>
{% if not forloop.last %}
<br>
{% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}
</div> </div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
{% endif %} {% endif %}

View File

@ -1,7 +1,7 @@
{% load staticfiles %} {% load staticfiles %}
<!-- Bootstrap Core CSS --> <!-- Bootstrap Core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Extra Bootstrap CSS --> <!-- Extra Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" rel="stylesheet">
<!-- End Bootstrap CSS --> <!-- End Bootstrap CSS -->

View File

@ -7,7 +7,7 @@ from . import urls
class TimerboardMenu(MenuItemHook): class TimerboardMenu(MenuItemHook):
def __init__(self): def __init__(self):
MenuItemHook.__init__(self, 'Structure Timers', MenuItemHook.__init__(self, 'Structure Timers',
'fa fa-clock-o fa-fw grayiconecolor', 'fa fa-clock-o fa-fw',
'timerboard:view', 'timerboard:view',
navactive=['timerboard:']) navactive=['timerboard:'])