EZP-24015: Improve Language Switcher flags and logic

Link to Jira task: https://jira.ez.no/browse/EZP-24015

Resources/public/css/bootstrap.css

@@ -7069,13 +7069,13 @@ input#recaptcha_response_field {
 .embed-gallery .gallery-navigator .next,
 .block-gallery .gallery-navigator .next {
   right: 0;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -55px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -55px -22px;
 }
 .full-gallery .gallery-navigator .prev,
 .embed-gallery .gallery-navigator .prev,
 .block-gallery .gallery-navigator .prev {
   left: 0;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -35px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -35px -22px;
 }
 .full-gallery .gallery-navigator .images,
 .embed-gallery .gallery-navigator .images,
@@ -7197,7 +7197,7 @@ header {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f3f3', GradientType=1);
 }
 header > .container {
-  background: transparent url('../bundles/ezdemo/images/bgr-header.png') no-repeat left bottom;
+  background: transparent url('../images/bgr-header.png') no-repeat left bottom;
 }
 header .logo {
   display: block;
@@ -7221,7 +7221,7 @@ header .form-search label:before {
   top: 9px;
   left: 8px;
   z-index: 1;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat left top;
+  background: transparent url('../images/ez-sprite.png') no-repeat left top;
 }
 header .form-search label input.search-query {
   padding-left: 25px;
@@ -7853,7 +7853,7 @@ aside > .content-view-aside:last-child > article:last-child:after {
   content: "";
   display: block;
   position: absolute;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -92px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -92px -22px;
   width: 36px;
   height: 35px;
   left: 8px;
@@ -7971,7 +7971,7 @@ aside > .content-view-aside:last-child > article:last-child:after {
   top: 15px;
   width: 9px;
   height: 17px;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -137px top;
+  background: transparent url('../images/ez-sprite.png') no-repeat -137px top;
 }
 .comment .comment-content-wrapper .header,
 .comment .comment-content-wrapper .comment-headline {
@@ -8309,16 +8309,16 @@ aside > .content-view-aside:last-child > article:last-child:after {
   position: relative;
 }
 .content-view-children .contacts-container article .image-and-data-set ul li.phone.mobile:before {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -61px 0;
+  background: transparent url('../images/ez-sprite.png') no-repeat -61px 0;
 }
 .content-view-children .contacts-container article .image-and-data-set ul li.phone.landline:before {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -80px 0;
+  background: transparent url('../images/ez-sprite.png') no-repeat -80px 0;
 }
 .content-view-children .contacts-container article .image-and-data-set ul li.messenger.skype:before {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -99px 0;
+  background: transparent url('../images/ez-sprite.png') no-repeat -99px 0;
 }
 .content-view-children .contacts-container article .image-and-data-set ul li.social.twitter:before {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -118px 0;
+  background: transparent url('../images/ez-sprite.png') no-repeat -118px 0;
 }
 .attribute-star-rating {
   border-top: 1px solid #ebebeb;
@@ -8610,11 +8610,11 @@ aside > .content-view-aside:last-child > article:last-child:after {
   display: inline-block;
   width: 11px;
   height: 11px;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat left -13px;
+  background: transparent url('../images/ez-sprite.png') no-repeat left -13px;
 }
 .attribute-byline.with-comments .comments:hover:before,
 .attribute-byline.with-comments .comments:focus:before {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat left -24px;
+  background: transparent url('../images/ez-sprite.png') no-repeat left -24px;
 }
 .flyout {
   display: block;
@@ -8916,7 +8916,7 @@ del:hover {
   position: relative;
 }
 .navbar.extra-navi .nav {
-  background: transparent url('../bundles/ezdemo/images/bgr-extra-navi.png') no-repeat center bottom;
+  background: transparent url('../images/bgr-extra-navi.png') no-repeat center bottom;
 }
 .navbar.extra-navi .nav > li {
   border: none;
@@ -8942,7 +8942,7 @@ del:hover {
 }
 .navbar.extra-navi #lang-selector a {
   display: inline-block;
-  padding: 5px 10px 5px 30px;
+  padding: 5px 10px;
 }
 .navbar.extra-navi #lang-selector ul {
   margin: 0;
@@ -8951,6 +8951,7 @@ del:hover {
   left: 170px;
   top: -1000px;
   z-index: 15;
+  padding: 0;
   background-image: -webkit-linear-gradient(top, #007ea6 0%, #006a8d 100%);
   background-image: -o-linear-gradient(top, #007ea6 0%, #006a8d 100%);
   background-image: linear-gradient(to bottom, #007ea6 0%, #006a8d 100%);
@@ -8971,13 +8972,21 @@ del:hover {
 }
 .navbar.extra-navi #lang-selector ul > .current {
   background: #004d66;
+  padding: 5px 10px;
+  color: #ffffff;
 }
 .navbar.extra-navi #lang-selector:target ul {
   overflow: hidden;
   top: 0;
 }
 .navbar.extra-navi #lang-selector:target a {
   color: #ffffff;
+  padding-left: 10px;
+}
+.flag-icon {
+  width: 18px;
+  height: 12px;
+  margin-right: 5px;
 }
 .extra-navi .navbar-collapse {
   margin-top: -1px;
@@ -9041,7 +9050,7 @@ del:hover {
   position: absolute;
   width: 10px;
   height: 16px;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -132px -28px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -132px -28px;
   right: 7px;
   top: 7px;
 }
@@ -9316,7 +9325,7 @@ a.teaser-link:focus h5,
 }
 .block-type-campaign .indicator li {
   display: inline-block;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -13px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -13px -22px;
   width: 11px;
   height: 11px;
   opacity: 0.8;
@@ -9326,7 +9335,7 @@ a.teaser-link:focus h5,
   display: none;
 }
 .block-type-campaign .indicator .selected {
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -24px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -24px -22px;
 }
 .block-type-campaign .navig {
   display: inline-block;
@@ -9341,11 +9350,11 @@ a.teaser-link:focus h5,
 }
 .block-type-campaign .next {
   right: 0px;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -55px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -55px -22px;
 }
 .block-type-campaign .prev {
   left: 0px;
-  background: transparent url('../bundles/ezdemo/images/ez-sprite.png') no-repeat -35px -22px;
+  background: transparent url('../images/ez-sprite.png') no-repeat -35px -22px;
 }
 .block-type-campaign .images {
   margin: 0;
@@ -9508,7 +9517,7 @@ table.list tbody tr:hover th {
 .ezsr-star-rating a:active,
 .ezsr-star-rating a:focus,
 .ezsr-star-rating .ezsr-current-rating {
-  background: url(../bundles/ezdemo/images/star.png) left -1000px repeat-x;
+  background: url(../images/star.png) left -1000px repeat-x;
 }
 .ezsr-star-rating {
   position: relative;

Resources/public/css/video.css

@@ -138,21 +138,21 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
 /* Play Icon */
-.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../bundles/ezdemo/images/video-js.png'); margin: 0.5em auto 0; }
-.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../bundles/ezdemo/images/video-js.png') -25px 0; margin: 0.5em auto 0; }
+.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
+.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png') -25px 0; margin: 0.5em auto 0; }
 
 /* Rewind
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
-.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('../bundles/ezdemo/images/video-js.png'); margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
 
 /* Volume/Mute
 -------------------------------------------------------------------------------- */
 .vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
-.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../bundles/ezdemo/images/video-js.png') -75px -25px; margin: 0.5em auto 0; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('../bundles/ezdemo/images/video-js.png') 0 -25px; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('../bundles/ezdemo/images/video-js.png') -25px -25px; }
-.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('../bundles/ezdemo/images/video-js.png') -50px -25px; }
+.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../images/video-js.png') -75px -25px; margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('../images/video-js.png') 0 -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('../images/video-js.png') -25px -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('../images/video-js.png') -50px -25px; }
 
 
 .vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
@@ -275,7 +275,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   margin-top: -0.3em;
   left: 0; top: 0; /*Needed for IE6*/
 
-  background: url('../bundles/ezdemo/images/video-js.png') 0 -50px;
+  background: url('../images/video-js.png') 0 -50px;
   /* CSS Curved Corners. Needed to make shadows curved. */
   -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
   /* CSS Shadows */
@@ -321,9 +321,9 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 .vjs-secondary-controls { float: right; }
 
 .vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
-.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../bundles/ezdemo/images/video-js.png') -50px 0; margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../images/video-js.png') -50px 0; margin: 0.5em auto 0; }
 
-.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('../bundles/ezdemo/images/video-js.png') -75px 0; }
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
 
 
 /* Big Play Button (at start)
@@ -355,7 +355,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   position: absolute; top: 50%; left: 50%;
   display: block; width: 35px; height: 42px;
   margin: -20px 0 0 -15px; /* Using negative margin to center image. */
-  background: url('../bundles/ezdemo/images/video-js.png') -100px 0;
+  background: url('../images/video-js.png') -100px 0;
 }
 
 /* Loading Spinner
@@ -453,7 +453,7 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
   background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 }
 /* Button Icon */
-.vjs-default-skin .vjs-menu-button div { background: url('../bundles/ezdemo/images/video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
+.vjs-default-skin .vjs-menu-button div { background: url('../images/video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
 
 /* Button Pop-up Menu */
 .vjs-default-skin .vjs-menu-button ul {
@@ -472,7 +472,7 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
 .vjs-default-skin .vjs-menu-button:focus ul,
 .vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
 .vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
-.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('../bundles/ezdemo/images/video-js.png') -125px -50px no-repeat; }
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('../images/video-js.png') -125px -50px no-repeat; }
 .vjs-default-skin .vjs-menu-button ul li:focus,
 .vjs-default-skin .vjs-menu-button ul li:hover,
 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,

Resources/public/less/layouts.less

@@ -11,7 +11,7 @@ header {
 }
 
 header > .container {
-  background: transparent url('../bundles/ezdemo/images/bgr-header.png') no-repeat left bottom;
+  background: transparent url('../images/bgr-header.png') no-repeat left bottom;
 }
 
 header .logo {

Resources/public/less/navbar.less

@@ -33,7 +33,7 @@
   &.extra-navi {
     position: relative;
     .nav {
-      background: transparent url('../bundles/ezdemo/images/bgr-extra-navi.png') no-repeat center bottom;
+      background: transparent url('../images/bgr-extra-navi.png') no-repeat center bottom;
       > li {
         border: none;
         position: relative;
@@ -60,7 +60,7 @@
       }
       a {
         display: inline-block;
-        padding: 5px 10px 5px 30px;
+        padding: 5px 10px;
       }
       ul {
         margin: 0;
@@ -69,6 +69,7 @@
         left: 170px;
         top: -1000px;
         z-index: 15;
+        padding: 0;
         #gradient > .vertical(@blue, @blueDark);
         .border-radius(0px 0px 3px 3px);
         .box-shadow(0 5px 5px rgba(0,0,0,0.35));
@@ -79,6 +80,8 @@
         }
         > .current {
           background: @blueDarker;
+          padding: 5px 10px;
+          color: @white;
         }
       }
       &:target {
@@ -88,12 +91,19 @@
         }
         a {
           color: @white;
+          padding-left: 10px;
         }
       }
     }
   }
 }
 
+.flag-icon {
+  width: 18px;
+  height: 12px;
+  margin-right: 5px;
+}
+
 .extra-navi .navbar-collapse {
   margin-top: -1px;
 }

Resources/public/less/star-rating.less

@@ -11,7 +11,7 @@
 .ezsr-star-rating a:active,
 .ezsr-star-rating a:focus,
 .ezsr-star-rating .ezsr-current-rating {
-  background: url(../bundles/ezdemo/images/star.png) left -1000px repeat-x;
+  background: url(../images/star.png) left -1000px repeat-x;
 }
 
 .ezsr-star-rating {

Resources/public/less/variables.less

@@ -30,7 +30,7 @@
 
 @primaryButtonBackground:    @linkColor;
 
-@spriteURL:                         url('../bundles/ezdemo/images/ez-sprite.png');
+@spriteURL:                         url('../images/ez-sprite.png');
 
 @navbarHeight:                    33px;
 @navbarExtraNaviHeight:           26px;

Resources/views/page_head_style.html.twig

@@ -1,6 +1,7 @@
-{% stylesheets
-    '@eZDemoBundle/Resources/public/css/bootstrap.css'
-    '@eZDemoBundle/Resources/public/css/video.css'
+{% stylesheets filter='cssrewrite'
+    'bundles/ezdemo/css/video.css'
+    'bundles/ezdemo/css/bootstrap.css'
+    'bundles/ezplatformuiassets/vendors/flag-icon-css/css/flag-icon.min.css'
 %}
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
 {% endstylesheets %}

Resources/views/parts/languages_switcher.html.twig

@@ -4,19 +4,29 @@
 #    - 'currentLanguage'
 #    - 'availableLanguages'
 #}
-<div id="lang-selector">
-    {# Looping over all available languages to display the links #}
 
-    {% for lang in availableLanguages %}
-        {# This time, we alter the "siteaccess" parameter directly. #}
-        {# We get the right siteaccess with the help of ezpublish.translationSiteAccess() helper #}
+{% if availableLanguages|length > 1 %}
+    <div id="lang-selector" class="transition-showed">
+        <ul class="lang-select">
 
-        {% do routeRef.set( "siteaccess", ezpublish.translationSiteAccess( lang ) ) %}
-        {% if lang != currentLanguage %}
-            <a href="{{ url( routeRef ) }}" title="{{ 'Switch to %siteaccess%'|trans({ '%siteaccess%': siteaccess[lang] })  }}">
-                <img src="{{ asset( 'bundles/ezdemo/images/flags/' ~ lang ~ '.gif' ) }}" title="{{ lang }}">
-                {{ siteaccess[lang]}}
-            </a>
-        {% endif %}
-    {% endfor %}
-</div>
+            {% for lang in availableLanguages %}
+                {% do routeRef.set( "siteaccess", ezpublish.translationSiteAccess( lang ) ) %}
+                    {% if lang == currentLang %}
+                        <li class="current">
+                            <span class="flag-icon flag-icon-background flag-icon-{{ lang[4:]|lower }}"></span>{{ lang[:3]|lower|capitalize }}
+                        </li>
+                    {% else %}
+                        <li>
+                            <a href="{{ url( routeRef ) }}">
+                                <span class="flag-icon flag-icon-background flag-icon-{{ lang[4:]|lower }}"></span>{{ lang[:3]|lower|capitalize }}
+                            </a>
+                        </li>
+                    {% endif %}
+            {% endfor %}
+        </ul>
+
+        <a href="#lang-selector" class="current-lang">
+            <span class="current-language flag-icon flag-icon-background flag-icon-{{ currentLanguage[4:]|lower }}"></span>{{ currentLanguage[:3]|lower|capitalize }}&nbsp;↴
+        </a>
+    </div>
+{% endif %}