Skip to content
Snippets Groups Projects
Unverified Commit bd1b5533 authored by Marko Ivancic's avatar Marko Ivancic Committed by GitHub
Browse files

Implement initial Profile Page UI (#12) 


Co-authored-by: default avatarMarko Ivančić <marko.ivancic@srce.hr>
parent b3a48406
No related branches found
No related tags found
1 merge request!1Relate histories
Hide whitespace changes
Inline Side-by-side
Showing
with 612 additions and 427 deletions
routing/routes/routes.yml
+ 1
− 0
View file @ bd1b5533
...@@ -23,5 +23,6 @@ accounting-user-activity: ...@@ -23,5 +23,6 @@ accounting-user-activity:
accounting-user-logout: accounting-user-logout:
path: /user/logout path: /user/logout
methods: methods:
- GET
- POST - POST
defaults: { _controller: 'SimpleSAML\Module\accounting\Http\Controllers\User\Profile::logout' } defaults: { _controller: 'SimpleSAML\Module\accounting\Http\Controllers\User\Profile::logout' }
src/Http/Controllers/User/Profile.php
+ 0
− 1
View file @ bd1b5533
...@@ -152,7 +152,6 @@ class Profile ...@@ -152,7 +152,6 @@ class Profile
public function logout(): Response public function logout(): Response
{ {
// TODO mivanci make logout button available using HTTP POST
return new RunnableResponse([$this->authSimple, 'logout'], [$this->getLogoutUrl()]); return new RunnableResponse([$this->authSimple, 'logout'], [$this->getLogoutUrl()]);
} }
......
templates/base.twig
+ 28
− 39
View file @ bd1b5533
<!DOCTYPE html>
<html lang="{{ currentLanguage }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
{# <meta name="viewport" content="initial-scale=1.0">#}
{# <meta http-equiv="X-UA-Compatible" content="IE=Edge">#}
<title>{{ pagetitle }}</title>
<link rel="stylesheet" href="{{ asset('css/src/default.css', 'accounting') }}">
<link rel="icon" href="{{ asset("icons/favicon.ico") }}">
<meta name="robots" content="noindex, nofollow">
</head>
<body id="{{ templateId }}">
{% extends "base.twig" %} {% include '@accounting/includes/_header.twig' %}
{% block preload %} {% include '@accounting/includes/_navigation.twig' %}
{# TODO mivanci apply new CSS from Mihaly#}
{# <link rel="stylesheet" href="{{ asset('css/src/default.css', 'accounting') }}">#}
<link rel="stylesheet" href="{{ asset('css/src/custom.css', 'accounting') }}">
{% endblock %}
{% block contentwrapper %} {% block banner %}{% endblock %}
<div class="pure-g">
<div class="pure-u-1">
{% include '@accounting/includes/_header.twig' %}
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-5">
{% include '@accounting/includes/_navigation.twig' %}
</div>
<div class="pure-u-4-5">
{{ block('content') }}
</div>
</div>
{% endblock %}
{% block footer %} <section id="main">
<footer style="text-align: center;"> {% block content %}{% endblock %}
<div> </section>
{% trans %}
As part of the GÉANT 2020 Framework Partnership Agreement (FPA), the project receives funding
from the European Union’s Horizon 2020 research and innovation programme under Grant
Agreement No. 856726 (GN4-3).
{% endtrans %}
</div>
</footer>
{{ parent() }} <footer>
{% endblock %} <div>
{% trans %}
{% block postload %} As part of the GÉANT 2020 Framework Partnership Agreement (FPA), the project receives funding from the European
{# TODO mivanci add JS#} Union’s Horizon 2020 research and innovation programme under Grant Agreement No. 856726 (GN4-3).
{# <script src="{{ asset('js/src/default.js', 'accounting') }}"></script>#} {% endtrans %}
{% endblock %} </div>
</footer>
</body>
</html>
\ No newline at end of file
templates/includes/_header.twig
+ 1
− 3
View file @ bd1b5533
<header> <header>
<div id="logo"> <div id="logo"><img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo"/></div>
<img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo">
</div>
<label for="nav-toggle" class="nav-toggle-label"> <label for="nav-toggle" class="nav-toggle-label">
<span></span> <span></span>
</label> </label>
......
templates/includes/_js-accordion.twig deleted 100644 → 0
+ 0
− 23
View file @ b3a48406
<script>
(function () {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "table-row") {
panel.style.display = "none";
} else {
panel.style.display = "table-row";
}
});
}
})();
</script>
\ No newline at end of file
templates/includes/_navigation.twig
+ 39
− 27
View file @ bd1b5533
<div class="pure-menu"> <div id="nav">
<span class="pure-menu-heading"></span> <input type="checkbox" id="nav-toggle" class="nav-toggle">
<ul class="pure-menu-list"> <nav role="navigation" aria-label="XXX-pagedesc-XXX">
{# asset icon example #} <ul>
{# <li class="pure-menu-item">#} <li>
{# <a href="personal-data">#} <a href="personal-data">
{# <span class="navicon">#} <span class="navicon">
{# <img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}"#} <img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}" alt="Profile Page Icon"/>
{# alt="Personal Data Icon">#} </span>
{# </span>#} <span>{{ 'Personal Data'|trans }}</span>
{# <span>Personal Data</span>#} </a>
{# </a>#} </li>
{# </li>#} <li>
<a href="connected-organizations">
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'personal-data' %}pure-menu-selected{% endif %}"> <span class="navicon">
<a href="personal-data" class="pure-menu-link">Personal Data</a> <img src="{{ asset('css/src/icons/conn-orgs.svg', 'accounting') }}"
</li> alt="Connected Organizations Icon"/>
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'connected-organizations' %}pure-menu-selected{% endif %}"> </span>
<a href="connected-organizations" class="pure-menu-link">Connected Organizations</a> <span>{{ 'Connected Organizations'|trans }}</span>
</li> </a>
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'activity' %} pure-menu-selected{% endif %}"> </li>
<a href="activity" class="pure-menu-link">Activity</a> <li>
</li> <a href="activity">
<li class="pure-menu-item"> <span class="navicon">
<a href="#" class="pure-menu-link">Log Out</a> <img src="{{ asset('css/src/icons/activity.svg', 'accounting') }}" alt="Activity Icon"/>
</li> </span>
</ul> <span>{{ 'Activity'|trans }}</span>
</a>
</li>
<li>
<a href="logout">
<span class="navicon">
<img src="{{ asset('css/src/icons/logout.svg', 'accounting') }}" alt="Logout Icon"/>
</span>
<span>{{ 'Log out'|trans }}</span>
</a>
</li>
</ul>
</nav>
</div> </div>
\ No newline at end of file
templates/test.twig deleted 100644 → 0
+ 0
− 25
View file @ b3a48406
{% set pagetitle = 'Setup'|trans %}
{% set frontpage_section = 'main' %}
{% extends "base.twig" %}
{% block preload %}
<link rel="stylesheet" href="{{ asset('css/accounting.css', 'accounting') }}">
{% endblock %}
{% block content %}
<h2>{{ pagetitle }} </h2>
<p>
Jobs Store class: {{ jobs_store }}, <br>
Jobs Store needs setup: {{ jobs_store_needs_setup }}, <br>
Jobs Store setup ran: {{ jobs_store_setup_ran }}, <br>
Data Store class: {{ data_store }}, <br>
Data Store needs setup: {{ data_store_needs_setup }}, <br>
Data Store setup ran: {{ data_store_setup_ran }} <br>
</p>
{% endblock %}
{# TODO mivanci delete this file #}
\ No newline at end of file
templates/user/activity.twig
+ 20
− 25
View file @ bd1b5533
...@@ -8,18 +8,13 @@ ...@@ -8,18 +8,13 @@
{% set pageMenuItem = 'activity' %} {% set pageMenuItem = 'activity' %}
{% block content %} {% block content %}
<table>
<h2>{{ pagetitle }} </h2>
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<tr> <tr>
<th><strong>{{ 'Time'|trans }}</strong></th> <th><strong>{{ 'Time'|trans }}</strong></th>
<th><strong>{{ 'Access'|trans }}</strong></th> <th><strong>{{ 'Access'|trans }}</strong></th>
<th><strong>{{ 'Sent data'|trans }}</strong></th> <th><strong>{{ 'Sent data'|trans }}</strong></th>
</tr> </tr>
</thead>
<tbody>
{% for activity in activityBag.getAll %} {% for activity in activityBag.getAll %}
<tr class="accordion"> <tr class="accordion">
<td>{{ activity.getHappenedAt|date() }}</td> <td>{{ activity.getHappenedAt|date() }}</td>
...@@ -30,19 +25,25 @@ ...@@ -30,19 +25,25 @@
{% endfor %} {% endfor %}
</td> </td>
</tr> </tr>
<tr class="panel"> <tr>
<td colspan="3"> <td class="dropdown-container" colspan="3">
<strong>{{ 'IP address'|trans }}</strong> <input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
<ul><li>{{ activity.getClientIpAddress }}</li></ul> <label class="dropdown-label" for="dropdown-toggle-{{ loop.index }}">
<img src="{{ asset('css/src/icons/dropdown.svg', 'accounting') }}" alt="Dropdown icon">
</label>
<div class="dropdown-box">
<strong>{{ 'IP address'|trans }}</strong>
<ul><li>{{ activity.getClientIpAddress|default(' / ') }}</li></ul>
<strong>{{ 'Information transfered to service'|trans }}</strong> <strong>{{ 'Information transfered to service'|trans }}</strong>
<ul> <ul>
{% for name, value in activity.getUser.getAttributes %} {% for name, value in activity.getUser.getAttributes %}
<li> <li>
{{ name|trans }}: {{ value|join(', ') }} {{ name|trans }}: {{ value|join(', ') }}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</td> </td>
</tr> </tr>
{% else %} {% else %}
...@@ -50,7 +51,6 @@ ...@@ -50,7 +51,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td> <td colspan="3">{{ 'No data available'|trans }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody>
</table> </table>
<br> <br>
<div class="center"> <div class="center">
...@@ -66,8 +66,3 @@ ...@@ -66,8 +66,3 @@
</div> </div>
{% endblock %} {% endblock %}
{% block postload %}
{{ parent() }}
{% include '@accounting/includes/_js-accordion.twig' %}
{% endblock %}
\ No newline at end of file
templates/user/activity.twig.bak 0 → 100644
+ 73
− 0
View file @ bd1b5533
{# @var activityBag \SimpleSAML\Module\accounting\Entities\Activity\Bag #}
{# @var connectedServiceProvider \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider #}
{% extends "@accounting/base.twig" %}
{% set pagetitle = 'Activity'|trans %}
{% set pageMenuItem = 'activity' %}
{% block content %}
<h2>{{ pagetitle }} </h2>
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<tr>
<th><strong>{{ 'Time'|trans }}</strong></th>
<th><strong>{{ 'Access'|trans }}</strong></th>
<th><strong>{{ 'Sent data'|trans }}</strong></th>
</tr>
</thead>
<tbody>
{% for activity in activityBag.getAll %}
<tr class="accordion">
<td>{{ activity.getHappenedAt|date() }}</td>
<td>{{ activity.getServiceProvider.getName }}</td>
<td>
{% for name in activity.getUser.getAttributes|keys %}
{{ name|trans }}{% if not loop.last %}, {% endif %}
{% endfor %}
</td>
</tr>
<tr class="panel">
<td colspan="3">
<strong>{{ 'IP address'|trans }}</strong>
<ul><li>{{ activity.getClientIpAddress }}</li></ul>
<strong>{{ 'Information transfered to service'|trans }}</strong>
<ul>
{% for name, value in activity.getUser.getAttributes %}
<li>
{{ name|trans }}: {{ value|join(', ') }}
</li>
{% endfor %}
</ul>
</td>
</tr>
{% else %}
<tr>
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<br>
<div class="center">
<div class="pagination">
{% if page > 1 %}
<a href="?page={{ page - 1 }}">❮</a>
{% endif %}
{% if activityBag.getAll|length == maxResults %}
<a href="?page={{ page + 1 }}">❯</a>
{% endif %}
</div>
</div>
{% endblock %}
{% block postload %}
{{ parent() }}
{% include '@accounting/includes/_js-accordion.twig' %}
{% endblock %}
\ No newline at end of file
templates/user/connected-organizations.twig
+ 35
− 39
View file @ bd1b5533
...@@ -3,55 +3,57 @@ ...@@ -3,55 +3,57 @@
{% extends "@accounting/base.twig" %} {% extends "@accounting/base.twig" %}
{% set pagetitle = 'Connected organizations'|trans %} {% set pagetitle = 'Connected Organizations'|trans %}
{% set pageMenuItem = 'connected-organizations' %} {% set pageMenuItem = 'connected-organizations' %}
{% block content %} {% block content %}
<table>
<h2>{{ pagetitle }} </h2> <!-- fixed table header -->
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<tr> <tr>
<th><strong>{{ 'Name'|trans }}</strong></th> <th><strong>{{ 'Name'|trans }}</strong></th>
<th><strong>{{ 'All access'|trans }}</strong></th> <th><strong>{{ 'All access'|trans }}</strong></th>
<th><strong>{{ 'Last access'|trans }}</strong></th> <th><strong>{{ 'Last access'|trans }}</strong></th>
</tr> </tr>
</thead>
<tbody>
{% for connectedServiceProvider in connectedServiceProviderBag.getAll %} {% for connectedServiceProvider in connectedServiceProviderBag.getAll %}
<tr class="accordion"> <tr>
<td>{{ connectedServiceProvider.getServiceProvider.getName|e }}</td> <td>{{ connectedServiceProvider.getServiceProvider.getName|e }}</td>
<td>{{ connectedServiceProvider.getNumberOfAuthentications|e }}</td> <td>{{ connectedServiceProvider.getNumberOfAuthentications|e }}</td>
<td>{{ connectedServiceProvider.getLastAuthenticationAt|date() }}</td> <td>{{ connectedServiceProvider.getLastAuthenticationAt|date() }}</td>
</tr> </tr>
<tr class="panel"> <tr>
<td colspan="3"> <td class="dropdown-container" colspan="3">
<strong>{{ 'Service details'|trans }}</strong> <input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
<ul> <label class="dropdown-label" for="dropdown-toggle-{{ loop.index }}">
<li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li> <img src="{{ asset('css/src/icons/dropdown.svg', 'accounting') }}" alt="Dropdown icon">
<li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li> </label>
</ul> <div class="dropdown-box">
<strong>{{ 'Service details'|trans }}</strong>
<ul>
<li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li>
<li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li>
</ul>
<strong>{{ 'Information transfered to service'|trans }}</strong>
<ul>
{% for name, value in connectedServiceProvider.getUser.getAttributes %}
<li>
{{ name|trans }}: {{ value|join(', ') }}
</li>
{% endfor %}
</ul>
<strong>{{ 'Information transfered to service'|trans }}</strong> <strong>{{ 'Login details'|trans }}</strong>
<ul> <ul>
{% for name, value in connectedServiceProvider.getUser.getAttributes %}
<li> <li>
{{ name|trans }}: {{ value|join(', ') }} {{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
</li> </li>
{% endfor %} <li>
</ul> {{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
</li>
<strong>{{ 'Login details'|trans }}</strong> </ul>
<ul> </div>
<li>
{{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
</li>
<li>
{{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
</li>
</ul>
</td> </td>
</tr> </tr>
{% else %} {% else %}
...@@ -59,12 +61,6 @@ ...@@ -59,12 +61,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td> <td colspan="3">{{ 'No data available'|trans }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> <!-- end of repeating item -->
</table> </table>
{% endblock %}
{% block postload %}
{{ parent() }}
{% include '@accounting/includes/_js-accordion.twig' %}
{% endblock %} {% endblock %}
templates/user/connected-organizations.twig.bak 0 → 100644
+ 70
− 0
View file @ bd1b5533
{# @var connectedServiceProviderBag \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider\Bag #}
{# @var connectedServiceProvider \SimpleSAML\Module\accounting\Entities\ConnectedServiceProvider #}
{% extends "@accounting/base.twig" %}
{% set pagetitle = 'Connected organizations'|trans %}
{% set pageMenuItem = 'connected-organizations' %}
{% block content %}
<h2>{{ pagetitle }} </h2>
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<tr>
<th><strong>{{ 'Name'|trans }}</strong></th>
<th><strong>{{ 'All access'|trans }}</strong></th>
<th><strong>{{ 'Last access'|trans }}</strong></th>
</tr>
</thead>
<tbody>
{% for connectedServiceProvider in connectedServiceProviderBag.getAll %}
<tr class="accordion">
<td>{{ connectedServiceProvider.getServiceProvider.getName|e }}</td>
<td>{{ connectedServiceProvider.getNumberOfAuthentications|e }}</td>
<td>{{ connectedServiceProvider.getLastAuthenticationAt|date() }}</td>
</tr>
<tr class="panel">
<td colspan="3">
<strong>{{ 'Service details'|trans }}</strong>
<ul>
<li>{{ 'Entity ID'|trans }}: {{ connectedServiceProvider.getServiceProvider.getEntityId|e }}</li>
<li>{{ 'Description'|trans }}: {{ connectedServiceProvider.getServiceProvider.getDescription|e|default(' / ') }}</li>
</ul>
<strong>{{ 'Information transfered to service'|trans }}</strong>
<ul>
{% for name, value in connectedServiceProvider.getUser.getAttributes %}
<li>
{{ name|trans }}: {{ value|join(', ') }}
</li>
{% endfor %}
</ul>
<strong>{{ 'Login details'|trans }}</strong>
<ul>
<li>
{{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
</li>
<li>
{{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
</li>
</ul>
</td>
</tr>
{% else %}
<tr>
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block postload %}
{{ parent() }}
{% include '@accounting/includes/_js-accordion.twig' %}
{% endblock %}
templates/user/personal-data.twig
+ 17
− 18
View file @ bd1b5533
...@@ -5,31 +5,30 @@ ...@@ -5,31 +5,30 @@
{% set pageMenuItem = 'personal-data' %} {% set pageMenuItem = 'personal-data' %}
{% block content %} {% block banner %}
<h2>{{ pagetitle }} </h2>
<section id="banner"> <section id="banner">
<div> <div>
{% trans %}This is what we know about you...{% endtrans %} {% trans %}This is what we know about you...{% endtrans %}
</div> </div>
</section> </section>
{% endblock %}
<table class="pure-table pure-table-striped pure-table-attributes"> {% block content %}
<thead> <table>
<!-- fixed table header -->
<tr>
<th>{{ 'Attribute'|trans }}</th>
<th>{{ 'Your value'|trans }}</th>
</tr>
{% for name, value in normalizedAttributes %}
<tr> <tr>
<th><strong>Attribute</strong></th> <td>
<th><strong>Your value</strong></th> {{ name|trans }}
<a href="#"><img src="{{ asset('css/src/icons/i.svg', 'accounting') }}" alt="Info icon"></a>
</td>
<td>{{ value }}</td>
</tr> </tr>
</thead> {% endfor %}
<tbody>
{% for name, value in normalizedAttributes %}
<tr>
<td>{{ name|trans }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
{% endblock %} {% endblock %}
templates/user/personal-data.twig.bak 0 → 100644
+ 35
− 0
View file @ bd1b5533
{% extends "@accounting/base.twig" %}
{% set pagetitle = 'Personal Data'|trans %}
{% set pageMenuItem = 'personal-data' %}
{% block content %}
<h2>{{ pagetitle }} </h2>
<section id="banner">
<div>
{% trans %}This is what we know about you...{% endtrans %}
</div>
</section>
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<tr>
<th><strong>Attribute</strong></th>
<th><strong>Your value</strong></th>
</tr>
</thead>
<tbody>
{% for name, value in normalizedAttributes %}
<tr>
<td>{{ name|trans }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
www/assets/css/src/default.css
+ 293
− 227
View file @ bd1b5533
:root { :root {
/* */ /* */
--main-text-c: #181E3C; --main-text-c: #181E3C;
--main-bg-c: #F5F5F5; --main-bg-c: #F5F5F5;
--heading-text-c: #5B6186; --heading-text-c: #5B6186;
--caption-bg-c: #F0F2F9;
--table-border: #F0F2F9;
--caption-bg-c: #F0F2F9; --nav-bg-c: #F8F8FC;
--button-bg-c: #4859B2;
--button-text-c: #ffffff;
--table-border: #F0F2F9; --link-c: #4859B2;
--nav-bg-c: #F8F8FC; --main-font-family: Raleway;
--main-font-weight: 500;
--mainfont-size: 18pt;
--button-bg-c: #4859B2; --table-font-size: 18pt;
--button-text-c: #ffffff;
--link-c: #4859B2; --large-font-size: 24px;
--main-font-family: Raleway;
--main-font-weight: 500;
--mainfont-size: 18pt;
--table-font-size: 18pt;
--large-font-size: 24px;
} }
/* raleway-300 - latin-ext_latin */ /* raleway-300 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local(''), src: local(''),
url('fonts/raleway-v28-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('fonts/raleway-v28-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/raleway-v28-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('fonts/raleway-v28-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* raleway-regular - latin-ext_latin */ /* raleway-regular - latin-ext_latin */
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local(''), src: local(''),
url('fonts/raleway-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('fonts/raleway-v28-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/raleway-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('fonts/raleway-v28-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* raleway-500 - latin-ext_latin */ /* raleway-500 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: local(''), src: local(''),
url('fonts/raleway-v28-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('fonts/raleway-v28-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/raleway-v28-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('fonts/raleway-v28-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* raleway-600 - latin-ext_latin */ /* raleway-600 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: local(''), src: local(''),
url('fonts/raleway-v28-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('fonts/raleway-v28-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/raleway-v28-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('fonts/raleway-v28-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* ======================= */ /* ======================= */
/* mobile-first body */ /* mobile-first body */
/* ======================= */ /* ======================= */
/*body {*/ body {
/* display: grid;*/ display: grid;
/* grid-template-rows: 4em auto auto auto auto;*/ grid-template-rows: 4em auto auto auto auto;
/* grid-template-columns: 1fr 18fr 1fr;*/ grid-template-columns: 1fr 18fr 1fr;
/* grid-template-areas:*/ grid-template-areas:
/* "header header header"*/ "header header header"
/* "nav nav nav"*/ "nav nav nav"
/* ". banner ."*/ ". banner ."
/* ". main ."*/ ". main ."
/* "footer footer footer";*/ "footer footer footer";
/* min-height: 100vh;*/ min-height: 100vh;
/* font-size: var(--main-font-size);*/ font-size: var(--main-font-size);
/* font-family: var(--main-font-family);*/ font-family: var(--main-font-family);
/* font-weight: var(--main-font-weight);*/ font-weight: var(--main-font-weight);
/* margin: 0;*/ margin: 0;
/*}*/ }
/* ======================= */ /* ======================= */
/* header and logo */ /* header and logo */
/* ======================= */ /* ======================= */
header { header {
grid-area: header; grid-area: header;
background-color: var(--nav-bg-c); background-color: var(--nav-bg-c);
color: var(--link-c); color: var(--link-c);
display: flex; display: flex;
text-align: center; text-align: center;
width:100%; width:100%;
z-index:999; z-index:999;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
} }
#logo { #logo {
/*margin-left: 2em;*/ margin-left: 2em;
} }
/* ======================= */ /* ======================= */
...@@ -109,250 +109,316 @@ header { ...@@ -109,250 +109,316 @@ header {
/* ======================= */ /* ======================= */
#nav{ #nav{
grid-area: nav; grid-area: nav;
} }
nav { nav {
width: 100%; width: 100%;
padding: 1em; padding: 1em;
text-align: left; text-align: left;
display:none; display:none;
background-color: var(--nav-bg-c); background-color: var(--nav-bg-c);
} }
nav ul { nav ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
align-items: left; align-items: left;
justify-content: flex-end; justify-content: flex-end;
} }
nav li { nav li {
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
color: var(--alt-color); color: var(--alt-color);
} }
nav > ul > li { nav > ul > li {
font-variant: normal; font-variant: normal;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-top: 0.5em; margin-top: 0.5em;
} }
nav > ul > li > a { nav > ul > li > a {
color: var(--banner-font-family); color: var(--banner-font-family);
text-decoration: none; text-decoration: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-items: center; justify-items: center;
} }
.nav-toggle { .nav-toggle {
display:none; display:none;
} }
.nav-toggle:checked ~ nav { .nav-toggle:checked ~ nav {
display: block; display: block;
} }
.nav-toggle:checked ~ div { .nav-toggle:checked ~ div {
display: none; display: none;
} }
.nav-toggle-label { .nav-toggle-label {
margin-right: 1em; margin-right: 1em;
margin-left: auto; margin-left: auto;
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
align-self: flex-end; align-self: flex-end;
} }
.nav-toggle:not(:checked) ~ .nav-toggle-label { .nav-toggle:not(:checked) ~ .nav-toggle-label {
margin-left: auto; margin-left: auto;
} }
.nav-toggle-label span, .nav-toggle-label span,
.nav-toggle-label span:before, .nav-toggle-label span:before,
.nav-toggle-label span:after { .nav-toggle-label span:after {
display: block; display: block;
background: var(--link-c);; background: var(--link-c);;
height: 2px; height: 2px;
width: 2em; width: 2em;
position: relative; position: relative;
} }
.nav-toggle-label span:before, .nav-toggle-label span:before,
.nav-toggle-label span:after { .nav-toggle-label span:after {
content: ''; content: '';
position: absolute; position: absolute;
} }
.nav-toggle-label span:before { .nav-toggle-label span:before {
bottom: 7px; bottom: 7px;
} }
.nav-toggle-label span:after { .nav-toggle-label span:after {
top: 7px; top: 7px;
} }
.navicon { .navicon {
display: inline-grid; display: inline-grid;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
width: 2em; width: 2em;
} }
/* ======================= */ /* ======================= */
/* Banner */ /* Banner */
/* ======================= */ /* ======================= */
#banner { #banner {
grid-area: banner; grid-area: banner;
} }
#banner div { #banner div {
color: var(--link-c); color: var(--link-c);
background-color: var(--nav-bg-c); background-color: var(--nav-bg-c);
margin: 2em; margin: 2em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
padding-bottom: 1em; padding-bottom: 1em;
padding-top: 2.5em; padding-top: 2.5em;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: var(--link-c); border-color: var(--link-c);
} }
/* ======================= */ /* ======================= */
/* Main */ /* Main */
/* ======================= */ /* ======================= */
#main{ #main{
grid-area: main; grid-area: main;
} }
/* ======================= */ /* ======================= */
/* Table */ /* Table */
/* ======================= */ /* ======================= */
table { table {
margin:1em; margin:1em;
padding:1em; padding:1em;
margin-right: auto; margin-right: auto;
font-size: var(--table-font-size); font-size: var(--table-font-size);
width: 100%; width: 100%;
} }
th { th {
text-align:left; text-align:left;
padding:0.5em; padding:0.5em;
word-wrap: break-word; word-wrap: break-word;
border-bottom: solid 1px var(--table-border);
} }
td { td {
text-align:left; text-align:left;
padding:0.5em; padding-left:0.5em;
word-wrap: break-word; padding-right:0.5em;
border-bottom: solid 1px var(--table-border); padding-top:1.25em;
word-wrap: break-word;
border-top: solid 1px var(--table-border);
} }
th a { th a {
text-decoration:none; text-decoration:none;
} }
td a { td a {
text-decoration: none; text-decoration: none;
} }
.dropdown { .dropdown {
float:right; float:right;
} }
/* ======================= */ /* ======================= */
/* Footer */ /* dropdown-box */
/* ======================= */ /* ======================= */
/*footer {*/
/* display: flex;*/
/* text-align: center;*/
/* width:100%;*/
/* z-index:999;*/
/* flex-direction: row;*/
/* align-items: center;*/
/* justify-content: flex-start;*/
/* grid-area: footer;*/
/* color: var(--link-c);*/
/* background-color: var(--nav-bg-c);*/
/*}*/
/*footer div {*/
/* margin: 2em;*/
/*}*/
/* ======================= */ .dropdown-toggle {
/* desktop provisions */ display: none;
/* ======================= */ }
@media only screen and (min-width: 768px) {
/*body {*/
/* display: grid;*/
/* grid-template-rows: 4em auto auto auto;*/
/* grid-template-columns: 3fr 0.5fr 16fr 0.5fr;*/
/* grid-template-areas:*/
/* "header header header header"*/
/* "nav . banner ."*/
/* "nav . main ."*/
/* "nav footer footer footer";*/
/* min-height: 100vh;*/
/* font-size: var(--body-font-size);*/
/* font-family: var(--main-font-family);*/
/* font-weight: var(--main-font-weight);*/
/* margin: 0;*/
/*}*/
header {
background-color: var(--main-bg-c);
}
#nav { .dropdown-container {
background-color: var(--nav-bg-c); padding:0em;
} border:none;
display:table-cell;
}
nav { .dropdown-label {
width: 100%; float: right;
padding: 0em; height: 1.25em;
margin-left: 0em; position: relative;
} top: -1.5em;
}
nav > ul { /*
width: 100%; .dropdown-toggle:checked ~ .dropdown-label:first-of-type {
} border: 3px solid black;
}
*/
nav > ul > li { .dropdown-box {
font-variant: normal; background-color: var(--caption-bg-c);
display:none;
}
.dropdown-toggle:checked ~ div.dropdown-box:first-of-type {
display: block;
}
/* ======================= */
/* Footer */
/* ======================= */
footer {
display: flex; display: flex;
text-align: center;
width:100%;
z-index:999;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-left: 1em; justify-content: flex-start;
} grid-area: footer;
color: var(--link-c);
nav > ul > li > a { background-color: var(--nav-bg-c);
width: 100%; }
}
nav > ul > li > a > span > img {
display: inline;
}
.nav-toggle ~ nav {
display: block;
}
.nav-toggle-label { footer div {
display: none; margin: 2em;
}
} }
/* ======================= */
/* desktop provisions */
/* ======================= */
@media only screen and (min-width: 768px) {
body {
display: grid;
grid-template-rows: 4em auto auto auto;
grid-template-columns: 3fr 0.5fr 16fr 0.5fr;
grid-template-areas:
"header header header header"
"nav . banner ."
"nav . main ."
"nav footer footer footer";
min-height: 100vh;
font-size: var(--body-font-size);
font-family: var(--main-font-family);
font-weight: var(--main-font-weight);
margin: 0;
}
header {
background-color: var(--main-bg-c);
}
#nav {
background-color: var(--nav-bg-c);
}
nav {
width: 100%;
padding: 0em;
margin-left: 0em;
}
nav > ul {
width: 100%;
}
nav > ul > li {
font-variant: normal;
font-size: 90%;
display: flex;
flex-direction: row;
align-items: center;
padding-left: 1em;
}
nav > ul > li > a {
width: 100%;
}
nav > ul > li > a > span > img {
display: inline;
}
.nav-toggle ~ nav {
display: block;
}
.nav-toggle-label {
display: none;
}
/* ======================= */
/* pagination */
/* ======================= */
.center {
text-align: center;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment