diff --git a/templates/selectsource.twig b/templates/selectsource.twig
index bd8c1b76d3bb1c04f159325a404b38a62f93f864..4dea312e3a9aab5e950a6b104d9b77a849555158 100644
--- a/templates/selectsource.twig
+++ b/templates/selectsource.twig
@@ -30,7 +30,7 @@
<div class="wrap{% if not muni_jvs %} container{% endif %}">
{% block content %}
<div class="{% if muni_jvs %}grid{% else %}row{% endif %}">
- <div class="{% if muni_jvs %}grid__cell size--m--2-4 wrap-col first-col{% else %}col-md-6 wrap-col{% endif %}">
+ <div class="{% if muni_jvs %}grid__cell size--m--2-4 first-col{% else %}col-md-6{% endif %} wrap-col">
{% for component_configuration in wayf_config.components %}
{% if component_configuration.name == 'local_login' %}
diff --git a/themes/campus/default/_header.twig b/themes/campus/default/_header.twig
index c22533c997578ef5c13b19bf5a347022e9e8fcfb..b652ec383329ae5b3c5c36dca46f45c7b8194390 100644
--- a/themes/campus/default/_header.twig
+++ b/themes/campus/default/_header.twig
@@ -4,131 +4,115 @@
{% if muni_jvs %}
<header class="header">
- <div class="header-container">
- <div class="language-bar-margin">
- <div class="header__side">
- {% if wayf_config.languages | length > 2 %}
- <nav class="menu-lang menu-lang--select" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}">
- <p class="menu-lang__selected">
- {% if attribute(wayf_config.languages, currentLanguage) is defined %}
- <a href="#" class="menu-lang__selected__link">
- {{ attribute(wayf_config.languages, currentLanguage) }}
- </a>
- {% endif %}
- </p>
- <p class="menu-lang__popup">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
- <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
- rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-lang__popup__link">
- {{ langName }}
- </a>
- {% endif %}
- {% endfor %}
- </p>
- </nav>
- {% else %}
- <nav class="menu-lang" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}">
- <p class="menu-lang__selected">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
- <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
- rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-lang__selected__link">
- {{ langName }}
+ <div class="row-main header__wrap">
+ <div class="grid">
+ <div class="grid__cell size--m--2-4 push--m--2-4 center">
+ <div class="header__side">
+ {% if wayf_config.languages | length > 2 %}
+ <nav class="menu-lang menu-lang--select" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}">
+ <p class="menu-lang__selected">
+ {% if attribute(wayf_config.languages, currentLanguage) is defined %}
+ <a href="#" class="menu-lang__selected__link">
+ {{ attribute(wayf_config.languages, currentLanguage) }}
</a>
{% endif %}
- {% endfor %}
- </p>
- </nav>
- {% endif %}
- <nav class="menu-mobile" aria-label="{{ '{campusmultiauth:mobile_lang_selection}'|trans }}">
- <div class="menu-mobile__wrap">
- <div class="row-main">
- <ul class="menu-mobile__list">
- {% set counter = 0 %}
+ </p>
+ <p class="menu-lang__popup">
+ {% for langKey, langName in wayf_config.languages %}
+ {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
+ <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
+ rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-lang__popup__link">
+ {{ langName }}
+ </a>
+ {% endif %}
+ {% endfor %}
+ </p>
+ </nav>
+ {% else %}
+ <nav class="menu-lang" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}">
+ <p class="menu-lang__selected">
{% for langKey, langName in wayf_config.languages %}
- {% if counter < 5 and langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
- <li class="menu-mobile__item">
- <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
- rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-mobile__link menu-mobile__link--lang">
- {{ langKey|upper }}
- </a>
- </li>
- {% set counter = counter + 1 %}
+ {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
+ <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
+ rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-lang__selected__link">
+ {{ langName }}
+ </a>
{% endif %}
{% endfor %}
- </ul>
+ </p>
+ </nav>
+ {% endif %}
+ <nav class="menu-mobile" aria-label="{{ '{campusmultiauth:mobile_lang_selection}'|trans }}">
+ <div class="menu-mobile__wrap">
+ <div class="row-main">
+ <ul class="menu-mobile__list">
+ {% set counter = 0 %}
+ {% for langKey, langName in wayf_config.languages %}
+ {% if counter < 5 and langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
+ <li class="menu-mobile__item">
+ <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
+ rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="menu-mobile__link menu-mobile__link--lang">
+ {{ langKey|upper }}
+ </a>
+ </li>
+ {% set counter = counter + 1 %}
+ {% endif %}
+ {% endfor %}
+ </ul>
+ </div>
</div>
- </div>
- </nav>
+ </nav>
+ </div>
+ </div>
+ <div class="grid__cell size--m--2-4 pull--m--2-4 center">
+ <img src="{% if wayf_config.logo is defined %}{{ wayf_config.logo }}{% endif %}" class="header-img" alt="{% if wayf_config.name is defined %}{{ wayf_config.name }}{% endif %}"/>
</div>
</div>
- <img src="{% if wayf_config.logo is defined %}{{ wayf_config.logo }}{% endif %}" class="header-img" alt="{% if wayf_config.name is defined %}{{ wayf_config.name }}{% endif %}"/>
</div>
</header>
{% elseif wayf_config is defined %}
<header class="header border-top border-primary border-5">
- <div class="header-container">
- {% if wayf_config.languages | length > 2 %}
- <div class="dropdown mobile-language language-bar-margin">
- <a id="dropdown-language-mobile" class="btn btn-secondary dropdown-toggle text-primary bg-white border-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- {{ currentLanguage | upper }}
- </a>
- <ul class="dropdown-menu" aria-labelledby="dropdown-language-mobile">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage %}
- <li>
- <a class="dropdown-item text-primary" href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}">
- {{ langKey | upper }}
+ <div class="container">
+ <div class="row">
+ <div class="col-md-6 order-md-last text-md-end">
+ {% if wayf_config.languages | length > 2 %}
+ <div class="dropdown language-bar mt-3">
+ <a id="dropdown-language" class="btn btn-secondary dropdown-toggle text-primary bg-white border-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+ {% if attribute(wayf_config.languages, currentLanguage) is defined %}
+ <span class="d-md-none">{{ currentLanguage | upper }}</span><span class="d-none d-md-inline">{{ attribute(wayf_config.languages, currentLanguage) }}</span>
+ {% else %}
+ {{ currentLanguage | upper }}
+ {% endif %}
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="dropdown-language">
+ {% for langKey, langName in wayf_config.languages %}
+ {% if langKey != currentLanguage %}
+ <li>
+ <a class="dropdown-item text-primary" href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}">
+ <span class="d-md-none">{{ langKey | upper }}</span><span class="d-none d-md-inline">{{ langName }}</span>
+ </a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ </div>
+ {% else %}
+ <p class="language-bar mt-3">
+ {% for langKey, langName in wayf_config.languages %}
+ {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
+ <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
+ rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="text-decoration-none text-primary">
+ <span class="d-md-none">{{ langKey | upper }}</span><span class="d-none d-md-inline">{{ langName }}</span>
</a>
- </li>
- {% endif %}
- {% endfor %}
- </ul>
+ {% endif %}
+ {% endfor %}
+ </p>
+ {% endif %}
</div>
- <div class="dropdown desktop-language language-bar-margin">
- <a id="dropdown-language-desktop" class="btn btn-secondary dropdown-toggle text-primary bg-white border-0" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- {% if attribute(wayf_config.languages, currentLanguage) is defined %}
- {{ attribute(wayf_config.languages, currentLanguage) }}
- {% else %}
- {{ currentLanguage | upper }}
- {% endif %}
- </a>
- <ul class="dropdown-menu" aria-labelledby="dropdown-language-desktop">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage %}
- <li>
- <a class="dropdown-item text-primary" href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}">
- {{ langName }}
- </a>
- </li>
- {% endif %}
- {% endfor %}
- </ul>
+ <div class="col-md-6 order-md-first text-md-start">
+ <img src="{% if wayf_config.logo is defined %}{{ wayf_config.logo }}{% endif %}" class="header-img mt-3" alt="{% if wayf_config.name is defined %}{{ wayf_config.name }}{% endif %}"/>
</div>
- {% else %}
- <p class="mobile-language language-bar-margin">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
- <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
- rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="text-decoration-none text-primary">
- {{ langKey | upper }}
- </a>
- {% endif %}
- {% endfor %}
- </p>
- <p class="desktop-language language-bar-margin">
- {% for langKey, langName in wayf_config.languages %}
- {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
- <a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"
- rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="text-decoration-none text-primary">
- {{ langName }}
- </a>
- {% endif %}
- {% endfor %}
- </p>
- {% endif %}
- <img src="{% if wayf_config.logo is defined %}{{ wayf_config.logo }}{% endif %}" class="header-img" alt="{% if wayf_config.name is defined %}{{ wayf_config.name }}{% endif %}"/>
+ </div>
</div>
</header>
{% endif %}
diff --git a/www/resources/campus-idp.css b/www/resources/campus-idp.css
index 84f0711c50996ec92c1f8341f662d396bbf07772..2301d5534999ecc45291f658a47b16414bdd7c2b 100644
--- a/www/resources/campus-idp.css
+++ b/www/resources/campus-idp.css
@@ -71,10 +71,6 @@ html, body {
margin-top: -24px;
}
-.desktop-language {
- display: none;
-}
-
.framework_muni .external {
margin-bottom: 24px;
}
@@ -98,12 +94,9 @@ html, body {
}
.header-img {
- width: 170px;
- margin: 0 auto 0 36px;
-}
-
-.framework_muni .header-img {
- margin-left: 24px;
+ object-fit: contain;
+ max-width: 100%;
+ max-height: 50px;
}
.hrline {
@@ -203,7 +196,7 @@ html, body {
margin-left: 12px;
}
-.language-bar-margin {
+.framework_muni .language-bar-margin {
margin-top: 12px;
margin-bottom: 12px;
}
@@ -296,11 +289,6 @@ html, body {
background-color: #EEEEEE;
}
-.mobile-language {
- margin: 12px 36px 12px 0;
- text-align: right;
-}
-
.footer {
padding: 0 18px 36px 36px;
}
@@ -370,10 +358,6 @@ body {
flex-direction: column;
}
-.header-container {
- text-align: left;
-}
-
.wrap-col {
padding: 0 0 0;
}
@@ -411,27 +395,6 @@ body {
margin-right: 15%;
}
- .language-bar-margin {
- margin: 10px 15% 0 auto;
- }
-
- .header-container {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap-reverse;
- height: 50px;
- text-align: center;
- }
-
- .header-img {
- height: 50px;
- margin: 20px auto 0 10%;
- }
-
- .framework_muni .header-img {
- margin-left: 10%;
- }
-
.header {
margin-bottom: 100px;
}
@@ -440,20 +403,20 @@ body {
border-left: 0;
}
- .size--m--2-4:not(:first-child) {
+ .framework_muni #content .size--m--2-4:not(:first-child) {
border-left: 1px solid #757575;
}
- .size--m--2-4:not(:last-child) {
+ .framework_muni #content .size--m--2-4:not(:last-child) {
border-right: 1px solid #757575;
margin-right: -1px;
}
- .col-md-6:not(:first-child) {
+ .framework_bootstrap5 #content .col-md-6:not(:first-child) {
border-left: 1px solid #757575;
}
- .col-md-6:not(:last-child) {
+ .framework_bootstrap5 #content .col-md-6:not(:last-child) {
border-right: 1px solid #757575;
margin-right: -1px;
}
@@ -470,14 +433,6 @@ body {
padding: 0 12px 36px 5%;
}
- .mobile-language {
- display: none;
- }
-
- .desktop-language {
- display: inline;
- }
-
.framework_muni #content {
margin: 0;
border: none;
@@ -520,3 +475,17 @@ h4 {
font-size: var(--bs-body-font-size) !important;
font-weight: bold;
}
+
+.framework_muni .header .grid {
+ width: 100%;
+}
+
+@media screen and (min-width: 700px) {
+ .framework_muni .header .grid__cell:first-child {
+ text-align: right;
+ }
+
+ .framework_muni .header .grid__cell:last-child {
+ text-align: left;
+ }
+}