diff --git a/VIPSWeb/static/css/vipsweb.css b/VIPSWeb/static/css/vipsweb.css index f9da06ca786f83e8043ce8937ca04f90476e5ab4..67419976265c09fed91c42cdb78dbbf1cfb37a75 100644 --- a/VIPSWeb/static/css/vipsweb.css +++ b/VIPSWeb/static/css/vipsweb.css @@ -93,7 +93,7 @@ /*color: #f7f6f2 !important;*/ font-weight: bold !important; height: 65px; - border-bottom: 4px solid #222222; + border-bottom: 4px solid #008136; } .navbar-nav .dropdown a .caret{ @@ -185,7 +185,7 @@ div.messages_illustration{ @media (min-width: 992px) { #mapContainer{ - border-left: 15px solid rgba(0, 87, 77, 0.15); + border-left: 15px solid #d9e6e4; padding-left: 0px; padding-right: 0px; @@ -201,7 +201,7 @@ div.messages_illustration{ @media (max-width: 992px) { #mapContainer{ - background-color: rgba(0, 87, 77, 0.15); + background-color: #d9e6e4; padding-bottom: 15px; } @@ -411,11 +411,12 @@ p.byline { margin: 0px 0px 8px 0px; } -a { +a, a:hover { color: #008136; text-decoration: underline; } + p.lead { font-size: 20px; line-height: 30px; @@ -734,10 +735,77 @@ table.messageTable tr, table.messageTable td cursor:pointer; } -.vipsMessageContainer { +.singleBlockContainer { margin-bottom: 15px; margin-top: 15px; + padding: 15px; background-color: white !important; } +div.tab-content { + background-color: white; + padding: 30px; + margin-bottom: 15px; +} + +ul.nav-tabs>li>a, ul.nav-tabs>li.active a{ + border: 1px solid white; + border-radius: 0; + margin: 0px; +} + +ul.nav-tabs li a { + background-color: #ddd; + color: black; +} + +ul.nav-tabs { + border-bottom: 0px none; +} + +.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ + border: 1px solid white !important; + background-color: #008136; + color: white; +} + +div.input-group-addon { + background-color: #008136; + color: white; +} + +button.btn-primary { + background-color: #008136; + color: white; +} + +table.table { + border-collapse: collapse; +} + +table.table > tbody > tr > td { + background-color: white; + border-bottom: 3px solid #d9e6e4; +} + +.table thead>tr>th { + border-bottom: 3px solid #d9e6e4; + +} + +ol.breadcrumb { + background-color: transparent; + +} + +ul.nav > li > ul.nav{ + margin-left: 10px; + +} + +.nav>li>span.active { + position: relative; + display: block; + padding: 10px 15px; +} diff --git a/VIPSWeb/templates/base.html b/VIPSWeb/templates/base.html index aa867ca1aa29ffe8a1dda939f1264acd2ac6aa17..c89bb4999352496a5f6e8d437ee7ff1c8920352d 100644 --- a/VIPSWeb/templates/base.html +++ b/VIPSWeb/templates/base.html @@ -105,7 +105,7 @@ </div> </nav> </div> -<div style="background-color: rgba(0, 87, 77, 0.15)"> +<div style="background-color: #d9e6e4;"> <div class="container" id="contentContainer" > <div class="row"> <!-- Start contents container --> diff --git a/forecasts/templates/forecasts/index.html b/forecasts/templates/forecasts/index.html index e58e436210d08a31d0d186c926c1ab6278621a83..ef4a4a77286a4fc04c4a0b2305aeb02d5175347b 100644 --- a/forecasts/templates/forecasts/index.html +++ b/forecasts/templates/forecasts/index.html @@ -26,7 +26,7 @@ {% block content %} <h1>{% trans "Forecasts" %}</h1> <div class="table-responsive"> - <table id="resultTable" class="table table-striped"> + <table id="resultTable" class="table"> <thead> <tr> <th> diff --git a/forecasts/templates/models/detail.html b/forecasts/templates/models/detail.html index 224dbb62ebfb332434b9b2539777fc28a9dc330e..90b085bfd67051a54db92bdb0090c15dcd62aaf4 100644 --- a/forecasts/templates/models/detail.html +++ b/forecasts/templates/models/detail.html @@ -21,8 +21,10 @@ {% load i18n %} {% block title%}{{model.local_name}} - {% trans "Models" %}{%endblock%} {% block content %} -<h1>{{model.local_name}}</h1> -<ul class="nav nav-tabs"> +<div class="col-md-3"> </div> +<div class="col-md-9"> + <h1>{{model.local_name}}</h1> + <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#modelDescription">{% trans "Description" %}</a></li> <li><a data-toggle="tab" href="#warningStatusInterpretation">{% trans "Interpretation of warning status" %}</a></li> <li><a data-toggle="tab" href="#modelUsage">{% trans "Technical usage" %}</a></li> @@ -44,5 +46,5 @@ </pre> </div> </div> - +</div> {% endblock %} \ No newline at end of file diff --git a/information/templates/information/detail.html b/information/templates/information/detail.html index a4d3ea5652bf686d23ab94649e9d60817a1947b2..a4e484c154400f7555118ddd46bf9939aab70aa3 100644 --- a/information/templates/information/detail.html +++ b/information/templates/information/detail.html @@ -2,36 +2,37 @@ {% load i18n staticfiles %} {% block title%}{{information_locale.headline}}{%endblock%} {% block content %} -<ol class="breadcrumb"> -{% for crumb in breadcrumb reversed %} +<div class="col-md-3"> + <nav> + <ul class="nav"> + {{ menu_html | safe }} + </ul> + </nav> +</div> +<div class="col-md-9"> - {% if crumb.children_locales %} - <li class="dropdown"> - {% if crumb.active %} - <span class="active">{{ crumb.title }}</span> + <ol class="breadcrumb"> + {% for crumb in breadcrumb reversed %} + {% if crumb.children_locales %} + <li class="dropdown"> + {% if crumb.active %} + <span class="active">{{ crumb.title }}</span> + {% else %} + <a href="{% url 'information:detail' crumb.id %}">{{ crumb.title }}</a> + {% endif %} + </li> {% else %} - <a href="{% url 'information:detail' crumb.id %}">{{ crumb.title }}</a> + <li class="active">{{ crumb.title }}</li> {% endif %} - <a class="dropdown-toggle" role="button" id="crumbDropdown" data-toggle="dropdown" aria-expanded="true"> - <span class="caret"></span> - </a> - <ul class="dropdown-menu" role="menu" aria-labelledby="crumbDropdown"> - {% for child in crumb.children_locales %} - <li role="presentation"><a role="menuitem" tabindex="-1" href="{% url 'information:detail' child.information.pk %}">{{ child.headline }}</a></li> - {% endfor %} - </ul> - </li> - {% else %} - <li class="active">{{ crumb.title }}</li> + {% endfor %} + </ol> + <div class="singleBlockContainer"> + {% if information_locale.information.main_illustration %} + <div class="messages_illustration"><img src="{{settings.MEDIA_URL}}{{information_locale.information.main_illustration}}" class="img-responsive"/></div> {% endif %} - - -{% endfor %} -</ol> -{% if information_locale.information.main_illustration %} -<div class="messages_illustration"><img src="{{settings.MEDIA_URL}}{{information_locale.information.main_illustration}}" class="img-responsive"/></div> -{% endif %} -<h1>{{information_locale.headline}}</h1> -<p class="lead">{{information_locale.lead_paragraph}}</p> -{{information_locale.body | safe }} + <h1>{{information_locale.headline}}</h1> + <p class="lead">{{information_locale.lead_paragraph}}</p> + {{information_locale.body | safe }} + </div> +</div> {% endblock %} \ No newline at end of file diff --git a/information/views.py b/information/views.py index 9be62ed255983a44b6e7cc6cc44532892ac46217..c12ff5c5a799dbee4b4fe791f2d16cef05686330 100644 --- a/information/views.py +++ b/information/views.py @@ -18,6 +18,7 @@ from django.shortcuts import render from information.models import InformationLocale, Information +from django.core.urlresolvers import reverse def index(request): @@ -43,7 +44,8 @@ def detail(request, information_id): 'information_locale' : information_locale, #'parent_information' : parent_information, #'children_locales':children_locales, - 'breadcrumb': get_breadcrumb(information_locale.information) + 'breadcrumb': get_breadcrumb(information_locale.information), + 'menu_html': get_menu_html(None, information_id) } return render(request, 'information/detail.html', context) @@ -63,4 +65,52 @@ def get_breadcrumb(information): }) information = information.parent_information return breadcrumb - \ No newline at end of file + +menu_template = """ + <nav> + <ul class="nav"> + %s + </ul> + </nav> + """ + +link_title = """<a href="%s">%s</a>""" + +toggleable_item_template=""" +<li class="%s"> + %s + <ul class="nav"> + %s + </ul> +</li> +""" +simple_item_template = """<li class="%s">%s</li>""" + +## Recursive method +def get_menu_html(parent_information, active_information_pk): + + # We start with backtracking from the active information object + if(parent_information == None): + items = Information.objects.filter(parent_information__isnull=True) + else: + items = Information.objects.filter(parent_information=parent_information) + + items_html = [] + for info in items: + info_locale = InformationLocale.get_information_locale_with_fallback(info.pk) + if info.pk == int(active_information_pk): + active_class = "active" + title = """<span class="active">%s</span>""" % info_locale.headline + else: + active_class = "" + title = link_title % (reverse('information:detail', kwargs={"information_id":info.pk}), info_locale.headline) + + child_menu_html = get_menu_html(info, active_information_pk) + # If item has no child items, create simple item + if child_menu_html == "": + items_html.append(simple_item_template % (active_class, title)) + # Else create complex item + else: + items_html.append(toggleable_item_template % (active_class, title, child_menu_html)) + + return "".join(items_html) \ No newline at end of file diff --git a/vips_messages/models.py b/vips_messages/models.py index 643dec183cd44c9a509c41656430b753dea2b85a..6bac62a2b00855cec2a1abe25d5787bbc6946f99 100644 --- a/vips_messages/models.py +++ b/vips_messages/models.py @@ -145,7 +145,7 @@ class Message: message_locale["createdBy"].get("firstName",""), message_locale["createdBy"].get("lastName","") ) - print the_dict["datePub"] + #print the_dict["datePub"] return Message( the_dict["messageId"], the_dict["organizationId"], diff --git a/vips_messages/templates/messages/detail.html b/vips_messages/templates/messages/detail.html index 3d4d6ba72d153134c182b6ae57757dcc50311e88..a6ce9aa5ff7e72cd38156b857ba31e31be1396e7 100644 --- a/vips_messages/templates/messages/detail.html +++ b/vips_messages/templates/messages/detail.html @@ -4,7 +4,7 @@ {% block content %} <div class="row"> <div class="col-md-3"> </div> - <div class="col-md-9 vipsMessageContainer"> + <div class="col-md-9 singleBlockContainer"> {% if message.illustration_file_name %} <div class="messages_illustration"><img src="{{message.get_illustration_url}}" class="img-responsive"/></div> {% endif %} diff --git a/vips_messages/templates/messages/index.html b/vips_messages/templates/messages/index.html index 6dc6ff4b8911d64c6b36c03724b4136446438deb..59c88d71984d567fdb67318f4445ae0c4bca8c44 100644 --- a/vips_messages/templates/messages/index.html +++ b/vips_messages/templates/messages/index.html @@ -10,7 +10,7 @@ <div class="row"> <div class="col-xs-3"> <div class="input-group"> - <div class="input-group-addon"><img src="{% static "css/icons/ic_action_search.png" %}" alt="Search icon"/></div> + <div class="input-group-addon"><span class="fa fa-search"></span><!--img src="{% static "css/icons/ic_action_search.png" %}" alt="Search icon"/--></div> <input class="form-control" type="text" id="textSearchField" placeholder="{% trans "Text search" %}" oninput="search(this);"/> </div> </div> @@ -35,13 +35,13 @@ {{form.publishedTo.errors}} <input class="form-control" type="date" name="{{form.publishedTo.html_name}}" value="{{form.publishedTo.value | default_if_none:""}}" placeholder="{% trans "To" %}"/> </div> - <button type="submit" class="btn btn-default">{% trans "Date search" %}</button> + <button type="submit" class="btn btn-primary">{% trans "Date search" %}</button> </form> </div> </div> <div class="table-responsive"> - <table id="resultTable" class="table table-striped"> + <table id="resultTable" class="table"> <thead> <tr> <th>{% trans "Publish date" %}</th>