templates/layout/includes/settings.html.twig line 1

Open in your IDE?
  1. {% set currentLanguage = app.request.locale %}
  2. {#<style>#}
  3. {#    .shadow-1 {#}
  4. {#        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);#}
  5. {#    }#}
  6. {#    .shadow-2 {#}
  7. {#        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);#}
  8. {#    }#}
  9. {#    .shadow-3 {#}
  10. {#        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);#}
  11. {#    }#}
  12. {#    .shadow-4 {#}
  13. {#        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);#}
  14. {#    }#}
  15. {#    .shadow-5 {#}
  16. {#        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);#}
  17. {#    }#}
  19. {#    .language-dropdown {#}
  20. {#        display: inline-block;#}
  21. {#        margin: 5px 5px;#}
  22. {#        position: relative; /* Agregamos posición relativa para que el menú desplegable se posicione en relación a este elemento */#}
  23. {#    }#}
  25. {#    .language-dropdown .lang-en {#}
  26. {#        border-left: 4px solid #E2162C;#}
  27. {#    }#}
  29. {#    .language-dropdown .lang-en .flag {#}
  30. {#        background-image: url("https://icons.iconarchive.com/icons/twitter/twemoji-flags/48/United-Kingdom-Flag-icon.png");#}
  31. {#    }#}
  33. {#    .language-dropdown .lang-es {#}
  34. {#        border-left: 4px solid #106eea;#}
  35. {#    }#}
  37. {#    .language-dropdown .lang-es .flag {#}
  38. {#        background-image: url("https://icons.iconarchive.com/icons/wikipedia/flags/48/ES-Spain-Flag-icon.png");#}
  39. {#    }#}
  41. {#    .language-dropdown label,#}
  42. {#    .language-dropdown ul li {#}
  43. {#        display: block;#}
  44. {#        width: 50px;#}
  45. {#        height: 38px;#}
  46. {#        background: #fff;#}
  47. {#        padding: 0px 6px;#}
  48. {#        cursor: pointer;#}
  49. {#    }#}
  51. {#    .language-dropdown ul.lang-list {#}
  52. {#        position: absolute; /* Cambiamos la posición a absoluta para que el menú desplegable aparezca por encima de otros elementos */#}
  53. {#        display: none;#}
  54. {#        z-index: 10; /* Establecemos un z-index alto para asegurarnos de que el menú desplegable esté en la parte superior */#}
  55. {#    }#}
  57. {#    .language-dropdown ul.lang-list li {#}
  58. {#        border-bottom: 1px solid #ECECEC;#}
  59. {#    }#}
  61. {#    .language-dropdown ul.lang-list li:last-child {#}
  62. {#        border-bottom-right-radius: 2px;#}
  63. {#        border-bottom-left-radius: 2px;#}
  64. {#    }#}
  66. {#    .language-dropdown ul.lang-list li.selected {#}
  67. {#        display: none;#}
  68. {#    }#}
  70. {#    .language-dropdown label {#}
  71. {#        position: relative;#}
  72. {#        border-bottom: 1px solid #ECECEC;#}
  73. {#        border-radius: 3px;#}
  74. {#        z-index: 2;#}
  75. {#    }#}
  77. {#    .language-dropdown .lang-flag .flag,#}
  78. {#    .language-dropdown .lang-list .lang .flag {#}
  79. {#        float: left;#}
  80. {#        width: 100%;#}
  81. {#        height: 100%;#}
  82. {#        cursor: pointer;#}
  83. {#        background-size: 35px 35px;#}
  84. {#        background-repeat: no-repeat;#}
  85. {#        background-position: center;#}
  86. {#    }#}
  88. {#    .language-dropdown.open ul.lang-list {#}
  89. {#        display: block;#}
  90. {#    }#}
  92. {#    .language-dropdown.open label {#}
  93. {#        border-bottom-left-radius: 0px;#}
  94. {#        border-bottom-right-radius: 0px;#}
  95. {#    }#}
  97. {#    .animate {#}
  98. {#        cursor: pointer;#}
  99. {#        transition: all .5s;#}
  100. {#        backface-visibility: hidden;#}
  101. {#    }#}
  103. {#    .language-dropdown .lang-flag,#}
  104. {#    .language-dropdown .lang-list {#}
  105. {#        transition: all .5s;#}
  106. {#        backface-visibility: hidden;#}
  107. {#    }#}
  108. {#</style>#}
  109. <div class="setting-link iconset pe-0">
  110.     {% if currentLanguage == 'es' %}
  111.     <a href="{{ pimcore_document(1) ~ 'en'}}">
  112.     <img class="lang-image" src="{{ asset('assets/images/icons8-great-britain-48.png') }}" alt=""/></a>
  113.     <span class="tooltip-label">English</span>
  114.     {% elseif currentLanguage == 'en' %}
  115.     <a href="{{ pimcore_document(1) ~ 'es'}}">
  116.         <img class="lang-image" src="{{ asset('assets/images/icons8-spain-48.png') }}" alt=""/></a>
  117.     <span class="tooltip-label">Español</span>
  118.     {% endif %}
  119. </div>
  120. {#<div id="settingsBox">#}
  121. {#    <div class="language-picker">#}
  122. {#        <span class="ttl">{{ "SELECT LANGUAGE" | trans | upper }}</span>#}
  123. {#        <ul id="language" class="cnrLangList">#}
  124. {#            <li><a href="{{ pimcore_document(1) ~ 'es' }}" class="{{ currentLanguage == 'es' ? 'active':'' }}">Español</a></li>#}
  125. {#            <li><a href="{{ pimcore_document(1) ~ 'en' }}" class="{{ currentLanguage == 'en' ? 'active':'' }}" >English</a></li>#}
  126. {#        </ul>#}
  127. {#    </div>#}
  128. {#</div>#}
  129. {#<div id="lang_selector" class="language-dropdown">#}
  130. {#    <label for="toggle" class="lang-flag lang-{{currentLanguage}}" title="Click to select the language">#}
  131. {#        <span class="flag"></span>#}
  132. {#    </label>#}
  133. {#    <ul class="lang-list">#}
  134. {#        <li class="lang lang-es" title="ES">#}
  135. {#            <span class="flag"></span>#}
  136. {#        </li>#}
  137. {#        <li class="lang lang-en" title="EN">#}
  138. {#            <span class="flag"></span>#}
  139. {#        </li>#}
  140. {#    </ul>#}
  141. {#</div>#}
  143. {#<script>#}
  144. {#    $(document).ready(function(){#}
  145. {#        $(".lang-flag").click(function(){#}
  146. {#            $(".language-dropdown").toggleClass("open");#}
  147. {#        });#}
  148. {#        $("ul.lang-list li").click(function(){#}
  149. {#            var selectedLang = 'en';#}
  150. {#            if($(this).hasClass('lang-es')){#}
  151. {#                selectedLang = 'es';#}
  152. {#            }#}
  153. {#            window.location.href = "/" + selectedLang;#}
  154. {#        });#}
  155. {#    })#}
  156. {#</script>#}