✨ css improvement to countdown button (#324)

Parent issue: sequentech/meta#147

avUi/common-header-directive/common-header-directive.html

@@ -68,6 +68,7 @@
                 class="log-out-button"
                 ng-click="confirmLogoutModal()"
               >
+                <div class="logout-bottom"></div>
                 <div class="logout-bar"></div>
                 <span class="glyphicon glyphicon-off"></span>
                 <span class="logout-text hidden-xs" ng-i18next>avBooth.logout</span>

avUi/common-header-directive/common-header-directive.less

@@ -107,13 +107,21 @@
     .logout-bar {
         position: absolute;
         background-color: #CCE5FF;
-        border-bottom: 2px solid #0F054C;
         border-radius: 4px 0px 0px 4px;
         z-index: -1;
         height: 100%;
         left: 0;
     }
 
+    .logout-bottom {
+        position: absolute;
+        border-bottom: 2px solid #0F054C;
+        border-radius: 4px;
+        height: 100%;
+        left: 0;
+        width: 100%;
+    }
+
     .logout-container {
         position: relative;
 

dist/appCommon-v9.0.0.js

@@ -1756,7 +1756,7 @@ angular.module("avTest", []), angular.module("avTest").controller("UnitTestE2ECo
     $templateCache.put("avUi/change-lang-directive/change-lang-directive.html", '<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="lang-dropdown-toggle" role="button" aria-expanded="false" aria-label="{{ (\'avCommon.changeLanguageMenu\' | i18next) || \'Change Language\' }}"><i class="fa fa-fw fa-lg fa-language"></i> <span class="selected-lang hidden-xs">{{ (\'avRegistration.languageName\' | i18next) || deflang }}</span> <span class="caret"></span></a><ul class="dropdown-menu" role="menu"><li ng-repeat="lang in langs"><a role="menuitem" ng-click="changeLang(lang)" ng-space-click tabindex="0">{{ (\'avRegistration.languageName\' | i18next:{lng:lang}) || lang}}</a></li></ul>'), 
     $templateCache.put("avUi/children-elections-directive/children-elections-directive.html", '<div class="row" ng-if="mode === \'toggle-and-callback\' && !hideParent"><div class="col-xs-12"><div class="btn btn-success btn-election" ng-class="{\'selected\': selectedElectionId === parentElectionId}" ng-click="click({event_id: parentElectionId})"><span ng-i18next>avAdmin.childrenElections.main</span></div></div></div><div ng-repeat="category in childrenElectionInfo.presentation.categories" ng-if="!category.hidden" class="row"><div class="col-xs-12"><h3>{{category.title}}</h3><div ng-repeat="election in category.events" class="btn btn-success btn-election" ng-disabled="election.disabled" ng-if="!election.hidden" ng-class="{\'selected\': selectedElectionId === election.event_id}" data-election-id="{{election.event_id}}" ng-click="click(election)"><i ng-if="mode === \'checkbox\'" class="fa-fw fa" ng-class="{\'fa-square-o\': !election.data, \'fa-check-square-o\': !!election.data}" aria-hidden="true"></i> {{election.title}}</div></div></div>'), 
     $templateCache.put("avUi/common-footer-directive/common-footer-directive.html", '<div class="hidden" ng-cloak av-affix-bottom ng-if="!float" class="footer-wrapper"><div class="container footer-container row"><i ng-i18next="[html:i18next]({url: configService.organization.orgUrl, name: configService.organization.orgName})avCommon.poweredBy"></i></div></div><div ng-if="!!float" class="footer-wrapper"><div class="container footer-container row"><i ng-i18next="[html:i18next]({url: configService.organization.orgUrl, name: configService.organization.orgName})avCommon.poweredBy"></i></div></div>'), 
-    $templateCache.put("avUi/common-header-directive/common-header-directive.html", '\x3c!-- top navbar --\x3e<nav class="header-navbar" av-affix-top=".navbar-unfixed-top" role="navigation"><div class="header-container container"><div class="col-xs-4 header-left"><span class="logo-img-container" ng-class="{\'default-logo\': !election.logo_url}"><img alt="{{election.title}}" class="logo-img" ng-src="{{election.logo_url || defaultLogo}}"></span></div><div class="col-xs-8 header-right"><div class="hidden-xs social-container" ng-if="!!isElectionPortal && !!buttonsInfo"><span ng-repeat="q in buttonsInfo"><a href="{{ q.link }}" target="_blank" class="{{ q.class }}"><img class="social-img" ng-src="{{ q.img }}" alt="{{ q.network }}"> {{ q.button_text|truncate:25 }}</a></span></div><a ng-if="!!configService.mainVersion" target="_top" tabindex="0" class="config-version" ng-click="showVersionsModal()"><span class="hidden-xs" ng-i18next="[i18next]({version: configService.mainVersion})avCommon.showVersion"></span> <span class="visible-xs-block">{{configService.mainVersion}} </span></a><span class="dropdown" role="menuitem" av-change-lang></span> <span class="logout-container" ng-if="enableLogOut() && !isElectionPortal" ng-class="{ \'countdown\': showCountdown}"><a target="_top" tabindex="0" class="log-out-button" ng-click="confirmLogoutModal()"><div class="logout-bar"></div><span class="glyphicon glyphicon-off"></span> <span class="logout-text hidden-xs" ng-i18next>avBooth.logout</span></a><div class="custom-tooltip"><i class="fa fa-fw fa-lg fa-caret-up"></i><div class="tooltip-inner"><b ng-i18next>avBooth.countdownTooltip.title</b><p ng-if="countdownSecs >= 60" ng-i18next="[i18next]({mins: countdownMins})avBooth.countdownTooltip.contentMins"></p><p ng-if="countdownSecs < 60" ng-i18next="[i18next]({secs: countdownSecs})avBooth.countdownTooltip.contentSecs"></p></div></div></span></div></div></nav><div id="avb-toggle" class="text-center item-block hidden"><span class="glyphicon glyphicon-play"></span></div><div class="bottom-absolute" ng-if="ballotHash"><div class="ballot-hash"><div class="hash-box"><i class="fa fa-check" aria-hidden="true"></i><div class="hash-text" ng-i18next="[i18next]({hash: ballotHash})avBooth.reviewScreen.ballotIdMessage"></div><i class="pull-right fa fa-lg fa-question-circle" ng-click="hashHelp()"></i></div></div></div>'), 
+    $templateCache.put("avUi/common-header-directive/common-header-directive.html", '\x3c!-- top navbar --\x3e<nav class="header-navbar" av-affix-top=".navbar-unfixed-top" role="navigation"><div class="header-container container"><div class="col-xs-4 header-left"><span class="logo-img-container" ng-class="{\'default-logo\': !election.logo_url}"><img alt="{{election.title}}" class="logo-img" ng-src="{{election.logo_url || defaultLogo}}"></span></div><div class="col-xs-8 header-right"><div class="hidden-xs social-container" ng-if="!!isElectionPortal && !!buttonsInfo"><span ng-repeat="q in buttonsInfo"><a href="{{ q.link }}" target="_blank" class="{{ q.class }}"><img class="social-img" ng-src="{{ q.img }}" alt="{{ q.network }}"> {{ q.button_text|truncate:25 }}</a></span></div><a ng-if="!!configService.mainVersion" target="_top" tabindex="0" class="config-version" ng-click="showVersionsModal()"><span class="hidden-xs" ng-i18next="[i18next]({version: configService.mainVersion})avCommon.showVersion"></span> <span class="visible-xs-block">{{configService.mainVersion}} </span></a><span class="dropdown" role="menuitem" av-change-lang></span> <span class="logout-container" ng-if="enableLogOut() && !isElectionPortal" ng-class="{ \'countdown\': showCountdown}"><a target="_top" tabindex="0" class="log-out-button" ng-click="confirmLogoutModal()"><div class="logout-bottom"></div><div class="logout-bar"></div><span class="glyphicon glyphicon-off"></span> <span class="logout-text hidden-xs" ng-i18next>avBooth.logout</span></a><div class="custom-tooltip"><i class="fa fa-fw fa-lg fa-caret-up"></i><div class="tooltip-inner"><b ng-i18next>avBooth.countdownTooltip.title</b><p ng-if="countdownSecs >= 60" ng-i18next="[i18next]({mins: countdownMins})avBooth.countdownTooltip.contentMins"></p><p ng-if="countdownSecs < 60" ng-i18next="[i18next]({secs: countdownSecs})avBooth.countdownTooltip.contentSecs"></p></div></div></span></div></div></nav><div id="avb-toggle" class="text-center item-block hidden"><span class="glyphicon glyphicon-play"></span></div><div class="bottom-absolute" ng-if="ballotHash"><div class="ballot-hash"><div class="hash-box"><i class="fa fa-check" aria-hidden="true"></i><div class="hash-text" ng-i18next="[i18next]({hash: ballotHash})avBooth.reviewScreen.ballotIdMessage"></div><i class="pull-right fa fa-lg fa-question-circle" ng-click="hashHelp()"></i></div></div></div>'), 
     $templateCache.put("avUi/confirm-modal-controller/confirm-modal-controller.html", '<div class="confirm-modal-controller"><div class="modal-header dialog-header-warning"><h4 class="modal-title"><span class="glyphicon glyphicon-warning-sign"></span> <span class="title" ng-bind-html="data.i18n.header"></span> <button type="button" class="close pull-right" ng-click="cancel()"><i class="fa fa-times-circle"></i></button></h4></div><div class="modal-body"><p><span class="body-data" ng-bind-html="data.i18n.body"></span></p></div><div class="modal-footer"><button class="btn btn-success" ng-click="ok()">{{ data.i18n.confirmButton }}</button> <button class="btn btn-cancel" ng-click="cancel()" ng-if="!data.hideCancelButton" ng-i18next="avCommon.cancel">avCommon.cancel</button></div></div>'), 
     $templateCache.put("avUi/documentation-directive/documentation-directive.html", '<div><h2 class="text-center text-av-secondary" ng-i18next="avDocumentation.documentation.title"></h2><p ng-i18next="avDocumentation.documentation.first_line"></p><ul class="docu-ul"><li ng-if="!!documentation.faq"><a href="{{documentation.faq}}" target="_blank" ng-i18next="avDocumentation.documentation.faq"></a></li><li ng-if="!!documentation.overview"><a href="{{documentation.overview}}" target="_blank" ng-i18next="avDocumentation.documentation.overview"></a></li><li><a href="{{auths_url}}" target="_blank" ng-i18next="avDocumentation.documentation.authorities"></a></li><li ng-if="!!documentation.technical"><a href="{{documentation.technical}}" target="_blank" ng-i18next="avDocumentation.documentation.technical"></a></li><li ng-if="!!documentation.security_contact"><a href="{{documentation.security_contact}}" target="_blank" ng-i18next="avDocumentation.documentation.security_contact"></a></li></ul><div class="documentation-html-include" av-plugin-html ng-bind-html="documentation_html_include"></div></div>'), 
     $templateCache.put("avUi/foot-directive/foot-directive.html", '<div class="commonfoot"><div class="social" style="text-align: center;"><span class="powered-by pull-left" ng-i18next="[html:i18next]({url: organization.orgUrl, name: organization.orgName})avCommon.poweredBy"></span> <a href="{{social.facebook}}" target="_blank" ng-if="!!social.facebook" aria-label="Facebook"><i class="fa fa-fw fa-lg fa-facebook"></i></a> <a href="{{social.twitter}}" target="_blank" ng-if="!!social.twitter" aria-label="Twitter"><i class="fa fa-fw fa-lg fa-twitter"></i></a> <a href="{{social.googleplus}}" target="_blank" ng-if="!!social.googleplus" aria-label="Google Plus"><i class="fa fa-fw fa-lg fa-google-plus"></i></a> <a href="{{social.youtube}}" target="_blank" ng-if="!!social.youtube" aria-label="Youtube"><i class="fa fa-fw fa-lg fa-youtube-play"></i></a> <a href="{{social.github}}" target="_blank" ng-if="!!social.github" aria-label="Github"><i class="fa fa-fw fa-lg fa-github"></i></a></div></div>'), 

dist/less/avUi/common-header-directive/common-header-directive.less

@@ -107,13 +107,21 @@
     .logout-bar {
         position: absolute;
         background-color: #CCE5FF;
-        border-bottom: 2px solid #0F054C;
         border-radius: 4px 0px 0px 4px;
         z-index: -1;
         height: 100%;
         left: 0;
     }
 
+    .logout-bottom {
+        position: absolute;
+        border-bottom: 2px solid #0F054C;
+        border-radius: 4px;
+        height: 100%;
+        left: 0;
+        width: 100%;
+    }
+
     .logout-container {
         position: relative;