may/1KA_F2F
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drupal - porpavljen dropdown user menu na malih zaslonih

Browse Source
This commit is contained in:
urospodkriznik 2022-11-04 17:07:48 +01:00
parent 94c47fa2b5
commit fb06da36ac
4 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/drupal9/web/themes/custom/pro1ka/css/style.css
View File

@ -2274,15 +2274,23 @@ nav.tabs {
background-color: #fff; background-color: #fff;
color: #1e88e5; } color: #1e88e5; }
#user-menu { #user-menu,
#user-menu-mobile {
position: absolute; } position: absolute; }
#user-menu ul.user-menu-link { #user-menu ul.user-menu-link,
#user-menu-mobile ul.user-menu-link {
list-style: none; list-style: none;
background-color: white;
padding-inline-start: 0; padding-inline-start: 0;
border: 1px solid #D1D1D1; border: 1px solid #D1D1D1;
padding: 10px 15px; padding: 10px 15px;
margin-top: 6px; } margin-top: 6px; }
#user-menu-mobile ul.user-menu-link {
margin-left: 20px;
border-left: 2px solid #D1D1D1;
background-color: unset; }
.mobile-nav-menu { .mobile-nav-menu {
position: fixed; position: fixed;
left: 0%; left: 0%;

5
frontend/drupal9/web/themes/custom/pro1ka/js/login.js
View File

@ -54,6 +54,11 @@
jQuery('#user-menu').toggle(); jQuery('#user-menu').toggle();
}); });
// Odpremo drop down menu za uporabnika
jQuery('#user-login-menu-mobile').on('click', function () {
jQuery('#user-menu-mobile').toggle();
});
// Obnovitev gesla // Obnovitev gesla
jQuery('#open-modal-lost-password').on('click', function () { jQuery('#open-modal-lost-password').on('click', function () {
jQuery('#modal-login').hide(); jQuery('#modal-login').hide();

12
frontend/drupal9/web/themes/custom/pro1ka/sass/components/_menu.scss
View File

@ -329,11 +329,13 @@ nav.tabs {
} }
} }
#user-menu { #user-menu,
#user-menu-mobile {
position: absolute; position: absolute;
ul.user-menu-link { ul.user-menu-link {
list-style: none; list-style: none;
background-color: white;
padding-inline-start: 0; padding-inline-start: 0;
border: 1px solid $siva; border: 1px solid $siva;
padding: 10px 15px; padding: 10px 15px;
@ -341,6 +343,14 @@ nav.tabs {
} }
} }
#user-menu-mobile{
ul.user-menu-link {
margin-left: 20px;
border-left: 2px solid #D1D1D1;
background-color: unset;
}
}
.mobile-nav-menu { .mobile-nav-menu {
position: fixed; position: fixed;
left: 0%; left: 0%;

4
frontend/drupal9/web/themes/custom/pro1ka/templates/parts/header.html.twig
View File

@ -112,12 +112,12 @@
{% if uporabnik is not empty %} {% if uporabnik is not empty %}
<div class="usem-menu"> <div class="usem-menu">
<a href="#" class="login" id="user-login-menu"> <a href="#" class="login" id="user-login-menu-mobile">
{{ uporabnik }} {{ uporabnik }}
<img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow" <img src="/tema1ka/svg/icons8-chevron-right.svg" loading="lazy" alt="" class="button-right-arrow"
style="transform: rotateZ(90deg);"> style="transform: rotateZ(90deg);">
</a> </a>
<div id="user-menu" style="display: none;"> <div id="user-menu-mobile" style="display: none;">
<div name="odjava" method="post" action="/api/drupal/logout"> <div name="odjava" method="post" action="/api/drupal/logout">
<ul class="user-menu-link"> <ul class="user-menu-link">
<li> <li>