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:
accounting-user-logout:
path: /user/logout
methods:
- GET
- POST
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
public function logout(): Response
{
// TODO mivanci make logout button available using HTTP POST
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 %}
{# 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 %}
{% include '@accounting/includes/_navigation.twig' %}
{% block contentwrapper %}
<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 banner %}{% endblock %}
{% block footer %}
<footer style="text-align: center;">
<div>
{% 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>
<section id="main">
{% block content %}{% endblock %}
</section>
{{ parent() }}
{% endblock %}
{% block postload %}
{# TODO mivanci add JS#}
{# <script src="{{ asset('js/src/default.js', 'accounting') }}"></script>#}
{% endblock %}
<footer>
<div>
{% 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>
</body>
</html>
\ No newline at end of file
templates/includes/_header.twig
+ 1
− 3
View file @ bd1b5533
<header>
<div id="logo">
<img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo">
</div>
<div id="logo"><img src="{{ asset('css/src/icons/fppp-logo.svg', 'accounting') }}" alt="Profile Page Logo"/></div>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</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">
<span class="pure-menu-heading"></span>
<ul class="pure-menu-list">
{# asset icon example #}
{# <li class="pure-menu-item">#}
{# <a href="personal-data">#}
{# <span class="navicon">#}
{# <img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}"#}
{# alt="Personal Data Icon">#}
{# </span>#}
{# <span>Personal Data</span>#}
{# </a>#}
{# </li>#}
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'personal-data' %}pure-menu-selected{% endif %}">
<a href="personal-data" class="pure-menu-link">Personal Data</a>
</li>
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'connected-organizations' %}pure-menu-selected{% endif %}">
<a href="connected-organizations" class="pure-menu-link">Connected Organizations</a>
</li>
<li class="pure-menu-item {% if pageMenuItem is defined and pageMenuItem == 'activity' %} pure-menu-selected{% endif %}">
<a href="activity" class="pure-menu-link">Activity</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Log Out</a>
</li>
</ul>
<div id="nav">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav role="navigation" aria-label="XXX-pagedesc-XXX">
<ul>
<li>
<a href="personal-data">
<span class="navicon">
<img src="{{ asset('css/src/icons/prof-page.svg', 'accounting') }}" alt="Profile Page Icon"/>
</span>
<span>{{ 'Personal Data'|trans }}</span>
</a>
</li>
<li>
<a href="connected-organizations">
<span class="navicon">
<img src="{{ asset('css/src/icons/conn-orgs.svg', 'accounting') }}"
alt="Connected Organizations Icon"/>
</span>
<span>{{ 'Connected Organizations'|trans }}</span>
</a>
</li>
<li>
<a href="activity">
<span class="navicon">
<img src="{{ asset('css/src/icons/activity.svg', 'accounting') }}" alt="Activity Icon"/>
</span>
<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>
\ 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 @@
{% set pageMenuItem = 'activity' %}
{% block content %}
<h2>{{ pagetitle }} </h2>
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
<table>
<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>
......@@ -30,19 +25,25 @@
{% endfor %}
</td>
</tr>
<tr class="panel">
<td colspan="3">
<strong>{{ 'IP address'|trans }}</strong>
<ul><li>{{ activity.getClientIpAddress }}</li></ul>
<tr>
<td class="dropdown-container" colspan="3">
<input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
<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>
<ul>
{% for name, value in activity.getUser.getAttributes %}
<li>
{{ name|trans }}: {{ value|join(', ') }}
</li>
{% endfor %}
</ul>
<strong>{{ 'Information transfered to service'|trans }}</strong>
<ul>
{% for name, value in activity.getUser.getAttributes %}
<li>
{{ name|trans }}: {{ value|join(', ') }}
</li>
{% endfor %}
</ul>
</div>
</td>
</tr>
{% else %}
......@@ -50,7 +51,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<br>
<div class="center">
......@@ -66,8 +66,3 @@
</div>
{% 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 @@
{% extends "@accounting/base.twig" %}
{% set pagetitle = 'Connected organizations'|trans %}
{% 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>
<table>
<!-- fixed table header -->
<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">
<tr>
<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>
<tr>
<td class="dropdown-container" colspan="3">
<input type="checkbox" id="dropdown-toggle-{{ loop.index }}" class="dropdown-toggle">
<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>{{ '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>
<ul>
{% for name, value in connectedServiceProvider.getUser.getAttributes %}
<strong>{{ 'Login details'|trans }}</strong>
<ul>
<li>
{{ name|trans }}: {{ value|join(', ') }}
{{ 'First access'|trans }}: {{ connectedServiceProvider.getFirstAuthenticationAt|date() }}
</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>
<li>
{{ 'Last access'|trans }}: {{ connectedServiceProvider.getLastAuthenticationAt|date() }}
</li>
</ul>
</div>
</td>
</tr>
{% else %}
......@@ -59,12 +61,6 @@
<td colspan="3">{{ 'No data available'|trans }}</td>
</tr>
{% endfor %}
</tbody>
<!-- end of repeating item -->
</table>
{% endblock %}
{% block postload %}
{{ parent() }}
{% include '@accounting/includes/_js-accordion.twig' %}
{% 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 @@
{% set pageMenuItem = 'personal-data' %}
{% block content %}
<h2>{{ pagetitle }} </h2>
{% block banner %}
<section id="banner">
<div>
{% trans %}This is what we know about you...{% endtrans %}
</div>
</section>
{% endblock %}
<table class="pure-table pure-table-striped pure-table-attributes">
<thead>
{% block content %}
<table>
<!-- fixed table header -->
<tr>
<th>{{ 'Attribute'|trans }}</th>
<th>{{ 'Your value'|trans }}</th>
</tr>
{% for name, value in normalizedAttributes %}
<tr>
<th><strong>Attribute</strong></th>
<th><strong>Your value</strong></th>
<td>
{{ name|trans }}
<a href="#"><img src="{{ asset('css/src/icons/i.svg', 'accounting') }}" alt="Info icon"></a>
</td>
<td>{{ value }}</td>
</tr>
</thead>
<tbody>
{% for name, value in normalizedAttributes %}
<tr>
<td>{{ name|trans }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
{% 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 {
/* */
--main-text-c: #181E3C;
--main-bg-c: #F5F5F5;
/* */
--main-text-c: #181E3C;
--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;
--button-text-c: #ffffff;
--table-font-size: 18pt;
--link-c: #4859B2;
--main-font-family: Raleway;
--main-font-weight: 500;
--mainfont-size: 18pt;
--table-font-size: 18pt;
--large-font-size: 24px;
--large-font-size: 24px;
}
/* raleway-300 - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-regular - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-500 - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-600 - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-regular - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-500 - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-600 - latin-ext_latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
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.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ======================= */
/* mobile-first body */
/* ======================= */
/*body {*/
/* display: grid;*/
/* grid-template-rows: 4em auto auto auto auto;*/
/* grid-template-columns: 1fr 18fr 1fr;*/
/* grid-template-areas:*/
/* "header header header"*/
/* "nav nav nav"*/
/* ". banner ."*/
/* ". main ."*/
/* "footer footer footer";*/
/* min-height: 100vh;*/
/* font-size: var(--main-font-size);*/
/* font-family: var(--main-font-family);*/
/* font-weight: var(--main-font-weight);*/
/* margin: 0;*/
/*}*/
body {
display: grid;
grid-template-rows: 4em auto auto auto auto;
grid-template-columns: 1fr 18fr 1fr;
grid-template-areas:
"header header header"
"nav nav nav"
". banner ."
". main ."
"footer footer footer";
min-height: 100vh;
font-size: var(--main-font-size);
font-family: var(--main-font-family);
font-weight: var(--main-font-weight);
margin: 0;
}
/* ======================= */
/* header and logo */
/* ======================= */
header {
grid-area: header;
background-color: var(--nav-bg-c);
color: var(--link-c);
display: flex;
text-align: center;
width:100%;
z-index:999;
flex-direction: row;
align-items: center;
justify-content: flex-start;
grid-area: header;
background-color: var(--nav-bg-c);
color: var(--link-c);
display: flex;
text-align: center;
width:100%;
z-index:999;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
#logo {
/*margin-left: 2em;*/
margin-left: 2em;
}
/* ======================= */
......@@ -109,250 +109,316 @@ header {
/* ======================= */
#nav{
grid-area: nav;
grid-area: nav;
}
nav {
width: 100%;
padding: 1em;
text-align: left;
display:none;
background-color: var(--nav-bg-c);
width: 100%;
padding: 1em;
text-align: left;
display:none;
background-color: var(--nav-bg-c);
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
align-items: left;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
align-items: left;
justify-content: flex-end;
}
nav li {
margin-left: 0.5em;
margin-right: 0.5em;
color: var(--alt-color);
margin-left: 0.5em;
margin-right: 0.5em;
color: var(--alt-color);
}
nav > ul > li {
font-variant: normal;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 0.5em;
font-variant: normal;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 0.5em;
}
nav > ul > li > a {
color: var(--banner-font-family);
text-decoration: none;
display: flex;
flex-direction: row;
justify-items: center;
color: var(--banner-font-family);
text-decoration: none;
display: flex;
flex-direction: row;
justify-items: center;
}
.nav-toggle {
display:none;
display:none;
}
.nav-toggle:checked ~ nav {
display: block;
display: block;
}
.nav-toggle:checked ~ div {
display: none;
display: none;
}
.nav-toggle-label {
margin-right: 1em;
margin-left: auto;
display: flex;
height: 100%;
align-items: center;
align-self: flex-end;
margin-right: 1em;
margin-left: auto;
display: flex;
height: 100%;
align-items: center;
align-self: flex-end;
}
.nav-toggle:not(:checked) ~ .nav-toggle-label {
margin-left: auto;
margin-left: auto;
}
.nav-toggle-label span,
.nav-toggle-label span:before,
.nav-toggle-label span:after {
display: block;
background: var(--link-c);;
height: 2px;
width: 2em;
position: relative;
display: block;
background: var(--link-c);;
height: 2px;
width: 2em;
position: relative;
}
.nav-toggle-label span:before,
.nav-toggle-label span:after {
content: '';
position: absolute;
content: '';
position: absolute;
}
.nav-toggle-label span:before {
bottom: 7px;
bottom: 7px;
}
.nav-toggle-label span:after {
top: 7px;
top: 7px;
}
.navicon {
display: inline-grid;
justify-content: center;
align-content: center;
width: 2em;
display: inline-grid;
justify-content: center;
align-content: center;
width: 2em;
}
/* ======================= */
/* Banner */
/* ======================= */
#banner {
grid-area: banner;
grid-area: banner;
}
#banner div {
color: var(--link-c);
background-color: var(--nav-bg-c);
margin: 2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-top: 2.5em;
color: var(--link-c);
background-color: var(--nav-bg-c);
margin: 2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-top: 2.5em;
border-width: 1px;
border-style: solid;
border-color: var(--link-c);
border-width: 1px;
border-style: solid;
border-color: var(--link-c);
}
/* ======================= */
/* Main */
/* ======================= */
#main{
grid-area: main;
grid-area: main;
}
/* ======================= */
/* Table */
/* ======================= */
table {
margin:1em;
padding:1em;
margin-right: auto;
font-size: var(--table-font-size);
width: 100%;
margin:1em;
padding:1em;
margin-right: auto;
font-size: var(--table-font-size);
width: 100%;
}
th {
text-align:left;
padding:0.5em;
word-wrap: break-word;
border-bottom: solid 1px var(--table-border);
text-align:left;
padding:0.5em;
word-wrap: break-word;
}
td {
text-align:left;
padding:0.5em;
word-wrap: break-word;
border-bottom: solid 1px var(--table-border);
text-align:left;
padding-left:0.5em;
padding-right:0.5em;
padding-top:1.25em;
word-wrap: break-word;
border-top: solid 1px var(--table-border);
}
th a {
text-decoration:none;
text-decoration:none;
}
td a {
text-decoration: none;
text-decoration: none;
}
.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;*/
/*}*/
/* ======================= */
/* 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);
}
.dropdown-toggle {
display: none;
}
#nav {
background-color: var(--nav-bg-c);
}
.dropdown-container {
padding:0em;
border:none;
display:table-cell;
}
nav {
width: 100%;
padding: 0em;
margin-left: 0em;
}
.dropdown-label {
float: right;
height: 1.25em;
position: relative;
top: -1.5em;
}
nav > ul {
width: 100%;
}
/*
.dropdown-toggle:checked ~ .dropdown-label:first-of-type {
border: 3px solid black;
}
*/
nav > ul > li {
font-variant: normal;
.dropdown-box {
background-color: var(--caption-bg-c);
display:none;
}
.dropdown-toggle:checked ~ div.dropdown-box:first-of-type {
display: block;
}
/* ======================= */
/* Footer */
/* ======================= */
footer {
display: flex;
text-align: center;
width:100%;
z-index:999;
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;
}
justify-content: flex-start;
grid-area: footer;
color: var(--link-c);
background-color: var(--nav-bg-c);
}
.nav-toggle-label {
display: none;
}
footer div {
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