Skip to content
Snippets Groups Projects
Verified Commit 40a3a569 authored by Pavel Břoušek's avatar Pavel Břoušek
Browse files

fix: language bar layout 

rewrite using grid classes, reduce copy-paste
parent e1ed047d
No related branches found
No related tags found
1 merge request!21language bar layout using grid
Show whitespace changes
Inline Side-by-side
templates/selectsource.twig
+ 1
− 1
View file @ 40a3a569
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="wrap{% if not muni_jvs %} container{% endif %}"> <div class="wrap{% if not muni_jvs %} container{% endif %}">
{% block content %} {% block content %}
<div class="{% if muni_jvs %}grid{% else %}row{% endif %}"> <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 %} {% for component_configuration in wayf_config.components %}
{% if component_configuration.name == 'local_login' %} {% if component_configuration.name == 'local_login' %}
......
themes/campus/default/_header.twig
+ 94
− 110
View file @ 40a3a569
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
{% if muni_jvs %} {% if muni_jvs %}
<header class="header"> <header class="header">
<div class="header-container"> <div class="row-main header__wrap">
<div class="language-bar-margin"> <div class="grid">
<div class="grid__cell size--m--2-4 push--m--2-4 center">
<div class="header__side"> <div class="header__side">
{% if wayf_config.languages | length > 2 %} {% if wayf_config.languages | length > 2 %}
<nav class="menu-lang menu-lang--select" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}"> <nav class="menu-lang menu-lang--select" aria-label="{{ '{campusmultiauth:lang_selection}'|trans }}">
...@@ -63,43 +64,32 @@ ...@@ -63,43 +64,32 @@
</nav> </nav>
</div> </div>
</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 %}"/> <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>
</div>
</div>
</header> </header>
{% elseif wayf_config is defined %} {% elseif wayf_config is defined %}
<header class="header border-top border-primary border-5"> <header class="header border-top border-primary border-5">
<div class="header-container"> <div class="container">
<div class="row">
<div class="col-md-6 order-md-last text-md-end">
{% if wayf_config.languages | length > 2 %} {% if wayf_config.languages | length > 2 %}
<div class="dropdown mobile-language language-bar-margin"> <div class="dropdown language-bar mt-3">
<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"> <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">
{{ 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 }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</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 %} {% if attribute(wayf_config.languages, currentLanguage) is defined %}
{{ attribute(wayf_config.languages, currentLanguage) }} <span class="d-md-none">{{ currentLanguage | upper }}</span><span class="d-none d-md-inline">{{ attribute(wayf_config.languages, currentLanguage) }}</span>
{% else %} {% else %}
{{ currentLanguage | upper }} {{ currentLanguage | upper }}
{% endif %} {% endif %}
</a> </a>
<ul class="dropdown-menu" aria-labelledby="dropdown-language-desktop"> <ul class="dropdown-menu" aria-labelledby="dropdown-language">
{% for langKey, langName in wayf_config.languages %} {% for langKey, langName in wayf_config.languages %}
{% if langKey != currentLanguage %} {% if langKey != currentLanguage %}
<li> <li>
<a class="dropdown-item text-primary" href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}"> <a class="dropdown-item text-primary" href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}">
{{ langName }} <span class="d-md-none">{{ langKey | upper }}</span><span class="d-none d-md-inline">{{ langName }}</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
...@@ -107,28 +97,22 @@ ...@@ -107,28 +97,22 @@
</ul> </ul>
</div> </div>
{% else %} {% else %}
<p class="mobile-language language-bar-margin"> <p class="language-bar mt-3">
{% for langKey, langName in wayf_config.languages %} {% for langKey, langName in wayf_config.languages %}
{% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %} {% if langKey != currentLanguage and currentUrl ~ "&language=" ~ langKey %}
<a href="{{ currentUrl ~ "?language=" ~ langKey }}{%- for name, value in queryParams %}{{ "&" ~ name ~ "=" ~ value }}{%- endfor %}" <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"> rel="alternate" hreflang="{{ langKey }}" lang="{{ langKey }}" class="text-decoration-none text-primary">
{{ langKey | upper }} <span class="d-md-none">{{ langKey | upper }}</span><span class="d-none d-md-inline">{{ langName }}</span>
</a> </a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</p> </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 %} {% endif %}
{% endfor %} </div>
</p> <div class="col-md-6 order-md-first text-md-start">
{% endif %} <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 %}"/>
<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>
</div> </div>
</header> </header>
{% endif %} {% endif %}
www/resources/campus-idp.css
+ 22
− 53
View file @ 40a3a569
...@@ -71,10 +71,6 @@ html, body { ...@@ -71,10 +71,6 @@ html, body {
margin-top: -24px; margin-top: -24px;
} }
.desktop-language {
display: none;
}
.framework_muni .external { .framework_muni .external {
margin-bottom: 24px; margin-bottom: 24px;
} }
...@@ -98,12 +94,9 @@ html, body { ...@@ -98,12 +94,9 @@ html, body {
} }
.header-img { .header-img {
width: 170px; object-fit: contain;
margin: 0 auto 0 36px; max-width: 100%;
} max-height: 50px;
.framework_muni .header-img {
margin-left: 24px;
} }
.hrline { .hrline {
...@@ -203,7 +196,7 @@ html, body { ...@@ -203,7 +196,7 @@ html, body {
margin-left: 12px; margin-left: 12px;
} }
.language-bar-margin { .framework_muni .language-bar-margin {
margin-top: 12px; margin-top: 12px;
margin-bottom: 12px; margin-bottom: 12px;
} }
...@@ -296,11 +289,6 @@ html, body { ...@@ -296,11 +289,6 @@ html, body {
background-color: #EEEEEE; background-color: #EEEEEE;
} }
.mobile-language {
margin: 12px 36px 12px 0;
text-align: right;
}
.footer { .footer {
padding: 0 18px 36px 36px; padding: 0 18px 36px 36px;
} }
...@@ -370,10 +358,6 @@ body { ...@@ -370,10 +358,6 @@ body {
flex-direction: column; flex-direction: column;
} }
.header-container {
text-align: left;
}
.wrap-col { .wrap-col {
padding: 0 0 0; padding: 0 0 0;
} }
...@@ -411,27 +395,6 @@ body { ...@@ -411,27 +395,6 @@ body {
margin-right: 15%; 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 { .header {
margin-bottom: 100px; margin-bottom: 100px;
} }
...@@ -440,20 +403,20 @@ body { ...@@ -440,20 +403,20 @@ body {
border-left: 0; 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; 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; border-right: 1px solid #757575;
margin-right: -1px; margin-right: -1px;
} }
.col-md-6:not(:first-child) { .framework_bootstrap5 #content .col-md-6:not(:first-child) {
border-left: 1px solid #757575; 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; border-right: 1px solid #757575;
margin-right: -1px; margin-right: -1px;
} }
...@@ -470,14 +433,6 @@ body { ...@@ -470,14 +433,6 @@ body {
padding: 0 12px 36px 5%; padding: 0 12px 36px 5%;
} }
.mobile-language {
display: none;
}
.desktop-language {
display: inline;
}
.framework_muni #content { .framework_muni #content {
margin: 0; margin: 0;
border: none; border: none;
...@@ -520,3 +475,17 @@ h4 { ...@@ -520,3 +475,17 @@ h4 {
font-size: var(--bs-body-font-size) !important; font-size: var(--bs-body-font-size) !important;
font-weight: bold; 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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment