From 2c2f5e3b0e93fd33a2d69e71703bbb677cbebee9 Mon Sep 17 00:00:00 2001
From: Dan Gray <dan.gray@delta-net.co.uk>
Date: Fri, 31 Jul 2020 14:24:47 +0100
Subject: [PATCH 1/8] Update LESS, template and JS for FW v5

---
 js/adapt-flipcard-audio.js   | 16 ++++++++--------
 less/flipcard-audio.less     | 18 +++++++++---------
 templates/flipcard-audio.hbs |  6 +++---
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/js/adapt-flipcard-audio.js b/js/adapt-flipcard-audio.js
index 67cbf65..07f4593 100644
--- a/js/adapt-flipcard-audio.js
+++ b/js/adapt-flipcard-audio.js
@@ -1,7 +1,8 @@
 define([
     'core/js/adapt',
-    'core/js/views/componentView'
-], function(Adapt, ComponentView) {
+    'core/js/views/componentView',
+    'core/js/models/componentModel'
+], function(Adapt, ComponentView, ComponentModel) {
 
     var FlipcardAudio = ComponentView.extend({
 
@@ -204,7 +205,6 @@ define([
         },
 
         flipItem: function(index, active) {
-
           var $item = this.$('.flipcard-audio-item').eq(index);
 
           var flipTime = this.model.get('_flipTime') || 'fast';
@@ -217,7 +217,6 @@ define([
 
           // If item isn't flipped
           if (this.itemFlipped[index] == false && active) {
-
             $item.addClass('flipcard-audio-flip');
             this.itemFlipped[index] = true;
 
@@ -232,7 +231,7 @@ define([
             ///// End of Audio /////
 
             this.setVisited(index);
-            $item.addClass("visited");
+            $item.addClass("is-visited");
 
             $backflipcard.a11y_cntrl_enabled(true);
 
@@ -283,8 +282,9 @@ define([
 
     });
 
-    Adapt.register('flipcard-audio', FlipcardAudio);
-
-    return FlipcardAudio;
+    return Adapt.register('flipcard-audio', {
+      model: ComponentModel.extend({}),
+      view: FlipcardAudio
+    });
 
 });
diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
index d2a1df9..4f47c8c 100644
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -4,6 +4,7 @@
 @flipcard-audio-item-rotate-Y-plus180deg: rotateY(180deg);
 @flipcard-audio-item-rotate-Y-0deg: rotateY(0deg);
 
+
 .vendor-prefix (@property, @value) {
   -webkit-@{property}: @value;
   -moz-@{property}: @value;
@@ -12,7 +13,7 @@
   @{property}: @value;
 }
 
-.flipcard-audio-component {
+.flipcard-audio {
 
   .flipcard-audio-widget {
 		position: relative;
@@ -22,22 +23,22 @@
   .flipcard-audio-listitem {
     position: relative;
     display: inline-block;
-    margin-top: @component-padding;
+    margin-top: @item-margin;
   }
 
   .flipcard-audio-item {
     vertical-align: top;
     margin-left: 1%;
     margin-right: 1%;
-    color: @primary-color-inverted;
+    color: @font-color-inverted;
 
     &:hover {
-      color: @primary-color-inverted;
+      color: @font-color-inverted;
     }
 
-    &.visited {
+    &.is-visited {
       .flipcard-audio-item-front {
-        border: 3px solid @item-color-visited;
+        border: 3px solid @visited;
       }
     }
   }
@@ -107,12 +108,11 @@
   }
 
   .flipcard-audio-item-back-title {
-    padding-bottom: @component-padding;
-    .sub-title;
+    padding-bottom: @item-padding;
   }
 
   .flipcard-audio-item-back-body {
-    font-weight: @body-text-font-weight;
+    font-weight: @font-weight-regular;
   }
 
   @media all and (max-width: @device-width-medium) {
diff --git a/templates/flipcard-audio.hbs b/templates/flipcard-audio.hbs
index 2663772..ad6e83a 100644
--- a/templates/flipcard-audio.hbs
+++ b/templates/flipcard-audio.hbs
@@ -1,10 +1,10 @@
-<div class="flipcard-audio-inner component-inner">
+<div class="component__inner flipcard-audio__inner">
     {{> component this}}
-    <div class="component-widget flipcard-audio-widget">
+    <div class="component__widget flipcard-audio-widget">
         <div role="list" class="flipcard-audio-items">
             {{#each _items}}
             <div role="listitem" class="flipcard-audio-listitem">
-                <button class="base flipcard-audio-item{{#if _isVisited}} visited{{/if}}" data-index="{{@index}}">
+                <button class="base flipcard-audio-item{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
                     <span class="aria-label">
                         {{#if frontImage.alt}}{{frontImage.alt}}{{else}}{{../_globals._accessibility._ariaLabels.item}} {{numbers @index}}{{/if}}.{{#if frontImage.alt}} {{frontImage.alt}}.{{/if}}
                     </span>

From 8c2b52ba50f32e5164313902bf38a71bd94413cf Mon Sep 17 00:00:00 2001
From: deltanetdan <dan.gray@delta-net.co.uk>
Date: Tue, 8 Sep 2020 14:24:48 +0100
Subject: [PATCH 2/8] Replace redundant LESS variables

---
 less/flipcard-audio.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 less/flipcard-audio.less

diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
old mode 100644
new mode 100755
index 4f47c8c..d07aaf1
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -58,7 +58,7 @@
 
   .flipcard-audio-item-back {
     padding: @item-padding;
-    border: 3px solid @primary-color;
+    border: 3px solid @item-color;
     width: 100%;
 
     .vendor-prefix (box-sizing, border-box);
@@ -77,7 +77,7 @@
     width: 100%;
     height: auto;
     min-height: 100%;
-    background: @primary-color;
+    background: @item-color;
     cursor: pointer;
 
     text-align: left;

From 5c05cef362bb7ae2cb7dc4f7b3164910cd8665d5 Mon Sep 17 00:00:00 2001
From: deltanetdan <dan.gray@delta-net.co.uk>
Date: Wed, 9 Sep 2020 11:22:28 +0100
Subject: [PATCH 3/8] Update with new class names

---
 README.md                    |  4 +-
 bower.json                   |  6 +--
 js/adapt-flipcard-audio.js   | 64 ++++++++++++------------
 less/flipcard-audio.less     | 94 ++++++++++++++++++------------------
 templates/flipcard-audio.hbs | 18 +++----
 5 files changed, 95 insertions(+), 91 deletions(-)

diff --git a/README.md b/README.md
index 7ad79b3..0f52bb3 100644
--- a/README.md
+++ b/README.md
@@ -53,8 +53,8 @@ The attributes listed below are used in *components.json* to configure **Flip ca
 No known limitations.  
 
 ----------------------------
-**Version number:**  3.0.2  
-**Framework versions:** 4+  
+**Version number:**  4.0.0  
+**Framework versions:** 5+  
 **Author / maintainer:** Deltanet with [contributors](https://github.com/deltanet/adapt-flipcard-audio/graphs/contributors)  
 **Accessibility support:** yes   
 **RTL support:** yes   
diff --git a/bower.json b/bower.json
index 3fdf287..6c78c1c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
 	"name": "adapt-flipcard-audio",
-	"version": "3.0.2",
-	"framework": ">=4",
+	"version": "4.0.0",
+	"framework": ">=5",
 	"homepage": "https://github.com/deltanet/adapt-flipcard-audio",
 	"issues": "https://github.com/deltanet/adapt-flipcard-audio/issues",
 	"description": "A component that displays clickable images, which reveal display text.",
@@ -12,5 +12,5 @@
 		"adapt-plugin",
 		"adapt-component"
 	],
-	"license": "GPLv3"
+	"license": "GPL-3.0"
 }
diff --git a/js/adapt-flipcard-audio.js b/js/adapt-flipcard-audio.js
index 07f4593..30fd1be 100644
--- a/js/adapt-flipcard-audio.js
+++ b/js/adapt-flipcard-audio.js
@@ -7,7 +7,7 @@ define([
     var FlipcardAudio = ComponentView.extend({
 
         events: {
-            'click .flipcard-audio-item': 'onClickFlipItem'
+            'click .js-flipcard-toggle': 'onClickFlipItem'
         },
 
         preRender: function() {
@@ -27,11 +27,11 @@ define([
         },
 
         postRender: function() {
-            this.$('.flipcard-audio-item-front').addClass('animated');
-            this.$('.flipcard-audio-item-back').addClass('animated');
-            this.$('.flipcard-audio-item-face').addClass('animated');
+            this.$('.flipcard-audio__item-front').addClass('animated');
+            this.$('.flipcard-audio__item-back').addClass('animated');
+            this.$('.flipcard-audio__item-face').addClass('animated');
 
-            this.$('.flipcard-audio-widget').imageready(_.bind(function() {
+            this.$('.flipcard-audio__widget').imageready(_.bind(function() {
                 this.setReadyStatus();
                 this.reRender();
             }, this));
@@ -65,23 +65,23 @@ define([
                 var inRow = this.model.get("_inRow");
                 var itemInRow = (98 / inRow) - inRow;
 
-                this.$(".flipcard-audio-listitem").css({
+                this.$(".flipcard-audio__listitem").css({
                     width: itemInRow + "%"
                 });
                 this.setItemlayout();
-                this.$(".flipcard-audio-listitem").css({ "margin-left" : "1%" });
-                this.$(".flipcard-audio-listitem").css({ "margin-right" : "1%" });
+                this.$(".flipcard-audio__listitem").css({ "margin-left" : "1%" });
+                this.$(".flipcard-audio__listitem").css({ "margin-right" : "1%" });
             } else {
-                this.$(".flipcard-audio-listitem").css({ "width" : "100%" });
-                this.$(".flipcard-audio-listitem").css({ "margin-left" : "0px" });
-                this.$(".flipcard-audio-listitem").css({ "margin-right" : "0px" });
+                this.$(".flipcard-audio__listitem").css({ "width" : "100%" });
+                this.$(".flipcard-audio__listitem").css({ "margin-left" : "0px" });
+                this.$(".flipcard-audio__listitem").css({ "margin-right" : "0px" });
             }
         },
 
         setItemlayout: function() {
             var columns = this.model.get("_inRow");
             var itemLength = this.model.get("_items").length;
-            var $items = this.$(".flipcard-audio-listitem");
+            var $items = this.$(".flipcard-audio__listitem");
             var itemRemainder = itemLength % columns;
             if (itemRemainder !== 0) {
                 if (itemRemainder === 1) {
@@ -121,7 +121,7 @@ define([
         },
 
         resizeHeights: function() {
-          var $items = this.$(".flipcard-audio-listitem");
+          var $items = this.$(".flipcard-audio__listitem");
           var itemLength = this.model.get("_items").length;
 
           for (var i = 0; i < itemLength; i++) {
@@ -129,10 +129,10 @@ define([
             var height = null;
 
             var $item = $items.eq(i);
-            var height = $item.find('.flipcard-audio-item-frontImage').height();
+            var height = $item.find('.flipcard-audio__item-frontImage').height();
 
-            var $frontflipcard = $item.find('.flipcard-audio-item-frontImage');
-            var $backflipcard = $item.find('.flipcard-audio-item-back');
+            var $frontflipcard = $item.find('.flipcard-audio__item-frontImage');
+            var $backflipcard = $item.find('.flipcard-audio__item-back');
 
             // reset
             $item.css('height','auto');
@@ -154,7 +154,9 @@ define([
         },
 
         handleTabs: function() {
-            this.$('.flipcard-audio-item-back').a11y_cntrl_enabled(false);
+            //this.$('.flipcard-audio__item-back').a11y_cntrl_enabled(false);
+            var $itemBack = this.$('.flipcard-audio__item-back');
+            Adapt.a11y.toggleAccessibleEnabled($itemBack, false);
         },
 
         onClickFlipItem: function(event) {
@@ -181,7 +183,7 @@ define([
         // This function will be responsible to perform All flip on flipcard where all cards can flip and stay in the flipped state.
         performAllFlip: function($selectedElement) {
 
-          var flipcardElementIndex = this.$('.flipcard-audio-item').index($selectedElement);
+          var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
 
           // Flip item that is clicked on
           this.flipItem(flipcardElementIndex, true);
@@ -199,21 +201,21 @@ define([
         // This function will be responsible to perform Single flip on flipcard where only one card can flip and stay in the flipped state.
         performSingleFlip: function($selectedElement) {
 
-          var flipcardElementIndex = this.$('.flipcard-audio-item').index($selectedElement);
+          var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
 
           this.flipItem(flipcardElementIndex, true);
         },
 
         flipItem: function(index, active) {
-          var $item = this.$('.flipcard-audio-item').eq(index);
+          var $item = this.$('.flipcard-audio__item').eq(index);
 
           var flipTime = this.model.get('_flipTime') || 'fast';
 
-          var $frontflipcard = $item.find('.flipcard-audio-item-front');
-          var $backflipcard = $item.find('.flipcard-audio-item-back');
+          var $frontflipcard = $item.find('.flipcard-audio__item-front');
+          var $backflipcard = $item.find('.flipcard-audio__item-back');
 
-          var $itemTitle = $item.find('.flipcard-audio-item-back-title');
-          var $itemBody = $item.find('.flipcard-audio-item-back-body');
+          var $itemTitle = $item.find('.flipcard-audio__item-back-title');
+          var $itemBody = $item.find('.flipcard-audio__item-back-body');
 
           // If item isn't flipped
           if (this.itemFlipped[index] == false && active) {
@@ -233,13 +235,15 @@ define([
             this.setVisited(index);
             $item.addClass("is-visited");
 
-            $backflipcard.a11y_cntrl_enabled(true);
+            //$backflipcard.a11y_cntrl_enabled(true);
+            Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
 
           } else {
             // Flip it back
             $item.removeClass('flipcard-audio-flip');
 
-            $backflipcard.a11y_cntrl_enabled(false);
+            //$backflipcard.a11y_cntrl_enabled(false);
+            Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
 
             this.itemFlipped[index] = false;
           }
@@ -270,11 +274,11 @@ define([
                 // Change each items title and body
                 for (var i = 0; i < this.model.get('_items').length; i++) {
                     if(value == 0) {
-                        this.$('.flipcard-audio-item-back-title').eq(i).html(this.model.get('_items')[i].backTitle);
-                        this.$('.flipcard-audio-item-back-body').eq(i).html(this.model.get('_items')[i].backBody);
+                        this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitle);
+                        this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBody);
                     } else {
-                        this.$('.flipcard-audio-item-back-title').eq(i).html(this.model.get('_items')[i].backTitleReduced);
-                        this.$('.flipcard-audio-item-back-body').eq(i).html(this.model.get('_items')[i].backBodyReduced);
+                        this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitleReduced);
+                        this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBodyReduced);
                     }
                 }
             }
diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
index d07aaf1..c65f73b 100755
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -15,18 +15,18 @@
 
 .flipcard-audio {
 
-  .flipcard-audio-widget {
+  &__widget {
 		position: relative;
 		text-align: center;
 	}
 
-  .flipcard-audio-listitem {
+  &__listitem {
     position: relative;
     display: inline-block;
     margin-top: @item-margin;
   }
 
-  .flipcard-audio-item {
+  &__item {
     vertical-align: top;
     margin-left: 1%;
     margin-right: 1%;
@@ -37,38 +37,18 @@
     }
 
     &.is-visited {
-      .flipcard-audio-item-front {
-        border: 3px solid @visited;
-      }
+      border: 3px solid @visited;
     }
-  }
 
-  .flipcard-audio-item-front {
-    border: 3px solid @item-color;
-    &:hover {
-      border: 3px solid @item-color-hover;
-    }
-    img {
-      vertical-align: top;
-    }
-    &.animated {
-      .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-0deg);
+    @media all and (max-width: @device-width-medium) {
+      width: 100%;
+      margin-left: 0%;
+      margin-right: 0%;
     }
-  }
-
-  .flipcard-audio-item-back {
-    padding: @item-padding;
-    border: 3px solid @item-color;
-    width: 100%;
-
-    .vendor-prefix (box-sizing, border-box);
 
-    &.animated {
-      .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-minus180deg);
-    }
   }
 
-  .flipcard-audio-item-face {
+  &__item-face {
     float: none;
     position: absolute;
     top: 0;
@@ -92,34 +72,54 @@
     .vendor-prefix (backface-visibility, hidden);
   }
 
-  .flipcard-audio-item .flipcard-audio-item-frontImage {
-    width: 100%;
-    height: auto;
+  &__item-front {
+    border: 3px solid @item-color;
+    &:hover {
+      border: 3px solid @item-color-hover;
+    }
+    img {
+      vertical-align: top;
+    }
+    &.animated {
+      .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-0deg);
+    }
+    &.is-visited {
+      border: 3px solid @visited;
+    }
   }
 
-  .flipcard-audio-flip .flipcard-audio-item-front {
-    .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-plus180deg);
-  }
+  &__item-back {
+    padding: @item-padding;
+    border: 3px solid @item-color;
+    width: 100%;
 
-  .flipcard-audio-flip .flipcard-audio-item-back {
-    overflow-x: hidden;
-    overflow-y: auto;
-    .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-0deg);
+    .vendor-prefix (box-sizing, border-box);
+
+    &.animated {
+      .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-minus180deg);
+    }
   }
 
-  .flipcard-audio-item-back-title {
+  &__item-back-title {
     padding-bottom: @item-padding;
   }
 
-  .flipcard-audio-item-back-body {
+  &__item-back-body {
     font-weight: @font-weight-regular;
   }
 
-  @media all and (max-width: @device-width-medium) {
-    .flipcard-audio-item {
-      width: 100%;
-      margin-left: 0%;
-      margin-right: 0%;
-    }
+  .flipcard-audio-item .flipcard-audio__item-frontImage {
+    width: 100%;
+    height: auto;
+  }
+
+  .flipcard-audio-flip .flipcard-audio__item-front {
+    .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-plus180deg);
+  }
+
+  .flipcard-audio-flip .flipcard-audio__item-back {
+    overflow-x: hidden;
+    overflow-y: auto;
+    .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-0deg);
   }
 }
diff --git a/templates/flipcard-audio.hbs b/templates/flipcard-audio.hbs
index ad6e83a..84a2671 100644
--- a/templates/flipcard-audio.hbs
+++ b/templates/flipcard-audio.hbs
@@ -1,24 +1,24 @@
 <div class="component__inner flipcard-audio__inner">
     {{> component this}}
-    <div class="component__widget flipcard-audio-widget">
-        <div role="list" class="flipcard-audio-items">
+    <div class="component__widget flipcard-audio__widget">
+        <div role="list" class="flipcard-audio__items">
             {{#each _items}}
-            <div role="listitem" class="flipcard-audio-listitem">
-                <button class="base flipcard-audio-item{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
+            <div role="listitem" class="flipcard-audio__listitem">
+                <button class="base flipcard-audio__item js-flipcard-toggle{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
                     <span class="aria-label">
                         {{#if frontImage.alt}}{{frontImage.alt}}{{else}}{{../_globals._accessibility._ariaLabels.item}} {{numbers @index}}{{/if}}.{{#if frontImage.alt}} {{frontImage.alt}}.{{/if}}
                     </span>
-                    <div class="flipcard-audio-item-face flipcard-audio-item-front">
-                        <img src="{{frontImage.src}}" class="flipcard-audio-item-frontImage">
+                    <div class="flipcard-audio__item-face flipcard-audio__item-front">
+                        <img src="{{frontImage.src}}" class="flipcard-audio__item-frontImage">
                     </div>
-                    <div class="flipcard-audio-item-face flipcard-audio-item-back" aria-hidden="true">
+                    <div class="flipcard-audio__item-face flipcard-audio__item-back" aria-hidden="true">
                         {{#if backTitle}}
-                        <div class="flipcard-audio-item-back-title">
+                        <div class="flipcard-audio__item-back-title">
                           {{{compile backTitle}}}
                         </div>
                         {{/if}}
                         {{#if backBody}}
-                        <div class="flipcard-audio-item-back-body">
+                        <div class="flipcard-audio__item-back-body">
                           {{{compile backBody}}}
                         </div>
                         {{/if}}

From c2880f41d5ec7431e2e54ac8d731195fd9884f14 Mon Sep 17 00:00:00 2001
From: deltanetdan <dan.gray@delta-net.co.uk>
Date: Wed, 9 Sep 2020 12:26:56 +0100
Subject: [PATCH 4/8] Fix js file format to latest standard

---
 js/adapt-flipcard-audio.js | 523 ++++++++++++++++++-------------------
 1 file changed, 258 insertions(+), 265 deletions(-)

diff --git a/js/adapt-flipcard-audio.js b/js/adapt-flipcard-audio.js
index 30fd1be..009716d 100644
--- a/js/adapt-flipcard-audio.js
+++ b/js/adapt-flipcard-audio.js
@@ -1,294 +1,287 @@
 define([
-    'core/js/adapt',
-    'core/js/views/componentView',
-    'core/js/models/componentModel'
+  'core/js/adapt',
+  'core/js/views/componentView',
+  'core/js/models/componentModel'
 ], function(Adapt, ComponentView, ComponentModel) {
 
-    var FlipcardAudio = ComponentView.extend({
-
-        events: {
-            'click .js-flipcard-toggle': 'onClickFlipItem'
-        },
-
-        preRender: function() {
-            this.listenTo(Adapt, 'device:resize', this.reRender, this);
-            this.checkIfResetOnRevisit();
-
-            // Listen for text change on audio extension
-            this.listenTo(Adapt, "audio:changeText", this.replaceText);
-
-            this.itemFlipped = [];
-
-            var itemLength = this.model.get("_items").length;
-
-            for (var i = 0; i < itemLength; i++) {
-              this.itemFlipped[i] = false;
-            }
-        },
-
-        postRender: function() {
-            this.$('.flipcard-audio__item-front').addClass('animated');
-            this.$('.flipcard-audio__item-back').addClass('animated');
-            this.$('.flipcard-audio__item-face').addClass('animated');
-
-            this.$('.flipcard-audio__widget').imageready(_.bind(function() {
-                this.setReadyStatus();
-                this.reRender();
-            }, this));
-
-            if (Adapt.audio && this.model.get('_audio') && this.model.get('_audio')._reducedTextisEnabled) {
-                this.replaceText(Adapt.audio.textSize);
-            }
-        },
-
-        checkIfResetOnRevisit: function() {
-            var isResetOnRevisit = this.model.get('_isResetOnRevisit');
-
-            // If reset is enabled set defaults
-            if (isResetOnRevisit) {
-                this.model.reset(isResetOnRevisit);
-            }
-
-            _.each(this.model.get('_items'), function(item) {
-                item._isVisited = false;
-            });
-        },
-
-        reRender: function() {
-            this.checkInRow();
-            this.resizeHeights();
-            this.handleTabs();
-        },
-
-        checkInRow: function($selectedElement) {
-            if (Adapt.device.screenSize === "large") {
-                var inRow = this.model.get("_inRow");
-                var itemInRow = (98 / inRow) - inRow;
-
-                this.$(".flipcard-audio__listitem").css({
-                    width: itemInRow + "%"
-                });
-                this.setItemlayout();
-                this.$(".flipcard-audio__listitem").css({ "margin-left" : "1%" });
-                this.$(".flipcard-audio__listitem").css({ "margin-right" : "1%" });
-            } else {
-                this.$(".flipcard-audio__listitem").css({ "width" : "100%" });
-                this.$(".flipcard-audio__listitem").css({ "margin-left" : "0px" });
-                this.$(".flipcard-audio__listitem").css({ "margin-right" : "0px" });
-            }
-        },
-
-        setItemlayout: function() {
-            var columns = this.model.get("_inRow");
-            var itemLength = this.model.get("_items").length;
-            var $items = this.$(".flipcard-audio__listitem");
-            var itemRemainder = itemLength % columns;
-            if (itemRemainder !== 0) {
-                if (itemRemainder === 1) {
-                    var index = itemLength - 1;
-                    var $item = $items.eq(index);
-                    this.centerItem($item);
-                } else {
-                    var itemToAlignIndex = itemLength - itemRemainder;
-                    var $item = $items.eq(itemToAlignIndex);
-                    this.alignItem($item, itemRemainder);
-                }
-            }
-        },
-
-        centerItem: function(item) {
-            item.css({
-                float: "none",
-                margin: "auto"
-            });
-        },
-
-        alignItem: function(item, itemsToAlign) {
-            var columns = this.model.get("_inRow");
-            var itemWidth = 100 / columns;
-
-            if (Adapt.config.get('_defaultDirection') == 'rtl') {
-                var marginRight = itemWidth / 2;
-                item.css({
-                    marginRight: marginRight + "%"
-                });
-            } else {
-                var marginLeft = itemWidth / 2;
-                item.css({
-                    marginLeft: marginLeft + "%"
-                });
-            }
-        },
-
-        resizeHeights: function() {
-          var $items = this.$(".flipcard-audio__listitem");
-          var itemLength = this.model.get("_items").length;
-
-          for (var i = 0; i < itemLength; i++) {
-
-            var height = null;
-
-            var $item = $items.eq(i);
-            var height = $item.find('.flipcard-audio__item-frontImage').height();
-
-            var $frontflipcard = $item.find('.flipcard-audio__item-frontImage');
-            var $backflipcard = $item.find('.flipcard-audio__item-back');
-
-            // reset
-            $item.css('height','auto');
-
-            // Check if item is flipped
-            if(this.itemFlipped[i] == true) {
-              // Check if text is bigger than image
-              if($backflipcard.outerHeight() > height) {
-                height = $backflipcard.outerHeight();
-              } else {
-                height = $frontflipcard.height();
-              }
-            } else {
-              height = $frontflipcard.height();
-            }
-
-            $item.height(height);
+  var FlipcardAudio = ComponentView.extend({
+
+    events: {
+      'click .js-flipcard-toggle': 'onClickFlipItem'
+    },
+
+    preRender: function() {
+      this.listenTo(Adapt, 'device:resize', this.reRender, this);
+      this.checkIfResetOnRevisit();
+
+      // Listen for text change on audio extension
+      this.listenTo(Adapt, 'audio:changeText', this.replaceText);
+
+      this.itemFlipped = [];
+
+      var itemLength = this.model.get('_items').length;
+
+      for (var i = 0; i < itemLength; i++) {
+        this.itemFlipped[i] = false;
+      }
+    },
+
+    postRender: function() {
+      this.$('.flipcard-audio__item-front').addClass('animated');
+      this.$('.flipcard-audio__item-back').addClass('animated');
+      this.$('.flipcard-audio__item-face').addClass('animated');
+
+      this.$('.flipcard-audio__widget').imageready(_.bind(function() {
+        this.setReadyStatus();
+        this.reRender();
+      }, this));
+
+      if (Adapt.audio && this.model.get('_audio') && this.model.get('_audio')._reducedTextisEnabled) {
+        this.replaceText(Adapt.audio.textSize);
+      }
+    },
+
+    checkIfResetOnRevisit: function() {
+      var isResetOnRevisit = this.model.get('_isResetOnRevisit');
+
+      // If reset is enabled set defaults
+      if (isResetOnRevisit) {
+        this.model.reset(isResetOnRevisit);
+      }
+
+      _.each(this.model.get('_items'), function(item) {
+        item._isVisited = false;
+      });
+    },
+
+    reRender: function() {
+      this.checkInRow();
+      this.resizeHeights();
+      this.handleTabs();
+    },
+
+    checkInRow: function($selectedElement) {
+      if (Adapt.device.screenSize === 'large') {
+        var inRow = this.model.get('_inRow');
+        var itemInRow = (98 / inRow) - inRow;
+
+        this.$('.flipcard-audio__listitem').css({
+          width: itemInRow + '%'
+        });
+        this.setItemlayout();
+        this.$('.flipcard-audio__listitem').css({ 'margin-left': '1%' });
+        this.$('.flipcard-audio__listitem').css({ 'margin-right': '1%' });
+      } else {
+        this.$('.flipcard-audio__listitem').css({ 'width': '100%' });
+        this.$('.flipcard-audio__listitem').css({ 'margin-left': '0px' });
+        this.$('.flipcard-audio__listitem').css({ 'margin-right': '0px' });
+      }
+    },
+
+    setItemlayout: function() {
+      var columns = this.model.get('_inRow');
+      var itemLength = this.model.get('_items').length;
+      var $items = this.$('.flipcard-audio__listitem');
+      var itemRemainder = itemLength % columns;
+      if (itemRemainder !== 0) {
+        if (itemRemainder === 1) {
+          var index = itemLength - 1;
+          var $item = $items.eq(index);
+          this.centerItem($item);
+        } else {
+          var itemToAlignIndex = itemLength - itemRemainder;
+          var $item = $items.eq(itemToAlignIndex);
+          this.alignItem($item, itemRemainder);
+        }
+      }
+    },
+
+    centerItem: function(item) {
+      item.css({
+        float: 'none',
+        margin: 'auto'
+      });
+    },
+
+    alignItem: function(item, itemsToAlign) {
+      var columns = this.model.get('_inRow');
+      var itemWidth = 100 / columns;
+
+      if (Adapt.config.get('_defaultDirection') === 'rtl') {
+        var marginRight = itemWidth / 2;
+        item.css({
+          marginRight: marginRight + '%'
+        });
+      } else {
+        var marginLeft = itemWidth / 2;
+        item.css({
+          marginLeft: marginLeft + '%'
+        });
+      }
+    },
+
+    resizeHeights: function() {
+      var $items = this.$('.flipcard-audio__listitem');
+      var itemLength = this.model.get('_items').length;
+
+      for (var i = 0; i < itemLength; i++) {
+
+        var height = null;
+
+        var $item = $items.eq(i);
+        height = $item.find('.flipcard-audio__item-frontImage').height();
+
+        var $frontflipcard = $item.find('.flipcard-audio__item-frontImage');
+        var $backflipcard = $item.find('.flipcard-audio__item-back');
+
+        // reset
+        $item.css('height', 'auto');
+
+        // Check if item is flipped
+        if (this.itemFlipped[i] === true) {
+          // Check if text is bigger than image
+          if ($backflipcard.outerHeight() > height) {
+            height = $backflipcard.outerHeight();
+          } else {
+            height = $frontflipcard.height();
           }
-        },
-
-        handleTabs: function() {
-            //this.$('.flipcard-audio__item-back').a11y_cntrl_enabled(false);
-            var $itemBack = this.$('.flipcard-audio__item-back');
-            Adapt.a11y.toggleAccessibleEnabled($itemBack, false);
-        },
-
-        onClickFlipItem: function(event) {
-            if (event && event.preventDefault) event.preventDefault();
-
-            ///// Audio /////
-            if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
-                Adapt.trigger('audio:pauseAudio', this.model.get('_audio')._channel);
-            }
-            ///// End of Audio /////
-
-            var $selectedElement = $(event.currentTarget);
-
-            var flipType = this.model.get('_flipType');
-            if (flipType === 'allFlip') {
-                this.performAllFlip($selectedElement);
-            } else if (flipType === 'singleFlip') {
-                this.performSingleFlip($selectedElement);
-            }
+        } else {
+          height = $frontflipcard.height();
+        }
 
-            this.resizeHeights();
-        },
+        $item.height(height);
+      }
+    },
 
-        // This function will be responsible to perform All flip on flipcard where all cards can flip and stay in the flipped state.
-        performAllFlip: function($selectedElement) {
+    handleTabs: function() {
+      // this.$('.flipcard-audio__item-back').a11y_cntrl_enabled(false);
+      var $itemBack = this.$('.flipcard-audio__item-back');
+      Adapt.a11y.toggleAccessibleEnabled($itemBack, false);
+    },
 
-          var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
+    onClickFlipItem: function(event) {
+      if (event && event.preventDefault) event.preventDefault();
 
-          // Flip item that is clicked on
-          this.flipItem(flipcardElementIndex, true);
+      ///// Audio /////
+      if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status === 1) {
+        Adapt.trigger('audio:pauseAudio', this.model.get('_audio')._channel);
+      }
+      ///// End of Audio /////
 
-          // Flip all other items
-          var itemLength = this.model.get("_items").length;
+      var $selectedElement = $(event.currentTarget);
 
-          for (var i = 0; i < itemLength; i++) {
-            if(i != flipcardElementIndex) {
-              this.flipItem(i, false);
-            }
-          }
-        },
+      var flipType = this.model.get('_flipType');
+      if (flipType === 'allFlip') {
+        this.performAllFlip($selectedElement);
+      } else if (flipType === 'singleFlip') {
+        this.performSingleFlip($selectedElement);
+      }
 
-        // This function will be responsible to perform Single flip on flipcard where only one card can flip and stay in the flipped state.
-        performSingleFlip: function($selectedElement) {
+      this.resizeHeights();
+    },
 
-          var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
+    // This function will be responsible to perform All flip on flipcard where all cards can flip and stay in the flipped state.
+    performAllFlip: function($selectedElement) {
 
-          this.flipItem(flipcardElementIndex, true);
-        },
+      var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
 
-        flipItem: function(index, active) {
-          var $item = this.$('.flipcard-audio__item').eq(index);
+      // Flip item that is clicked on
+      this.flipItem(flipcardElementIndex, true);
 
-          var flipTime = this.model.get('_flipTime') || 'fast';
+      // Flip all other items
+      var itemLength = this.model.get('_items').length;
 
-          var $frontflipcard = $item.find('.flipcard-audio__item-front');
-          var $backflipcard = $item.find('.flipcard-audio__item-back');
+      for (var i = 0; i < itemLength; i++) {
+        if (i !== flipcardElementIndex) {
+          this.flipItem(i, false);
+        }
+      }
+    },
 
-          var $itemTitle = $item.find('.flipcard-audio__item-back-title');
-          var $itemBody = $item.find('.flipcard-audio__item-back-body');
+    // This function will be responsible to perform Single flip on flipcard where only one card can flip and stay in the flipped state.
+    performSingleFlip: function($selectedElement) {
 
-          // If item isn't flipped
-          if (this.itemFlipped[index] == false && active) {
-            $item.addClass('flipcard-audio-flip');
-            this.itemFlipped[index] = true;
+      var flipcardElementIndex = this.$('.flipcard-audio__item').index($selectedElement);
 
-            ///// Audio /////
-            var item = this.model.get('_items')[index];
-            if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status==1) {
-              // Reset onscreen id
-              Adapt.audio.audioClip[this.model.get('_audio')._channel].onscreenID = "";
-              // Trigger audio
-              Adapt.trigger('audio:playAudio', item._audio.src, this.model.get('_id'), this.model.get('_audio')._channel);
-            }
-            ///// End of Audio /////
+      this.flipItem(flipcardElementIndex, true);
+    },
 
-            this.setVisited(index);
-            $item.addClass("is-visited");
+    flipItem: function(index, active) {
+      var $item = this.$('.flipcard-audio__item').eq(index);
+      var $backflipcard = $item.find('.flipcard-audio__item-back');
 
-            //$backflipcard.a11y_cntrl_enabled(true);
-            Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
+      // If item isn't flipped
+      if (this.itemFlipped[index] === false && active) {
+        $item.addClass('flipcard-audio-flip');
+        this.itemFlipped[index] = true;
 
+        ///// Audio /////
+        var item = this.model.get('_items')[index];
+        if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status === 1) {
+          // Reset onscreen id
+          Adapt.audio.audioClip[this.model.get('_audio')._channel].onscreenID = '';
+          // Trigger audio
+          Adapt.trigger('audio:playAudio', item._audio.src, this.model.get('_id'), this.model.get('_audio')._channel);
+        }
+        ///// End of Audio /////
+
+        this.setVisited(index);
+        $item.addClass('is-visited');
+
+        // $backflipcard.a11y_cntrl_enabled(true);
+        Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
+
+      } else {
+        // Flip it back
+        $item.removeClass('flipcard-audio-flip');
+
+        // $backflipcard.a11y_cntrl_enabled(false);
+        Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
+
+        this.itemFlipped[index] = false;
+      }
+    },
+
+    setVisited: function(index) {
+      var item = this.model.get('_items')[index];
+      item._isVisited = true;
+      this.checkCompletionStatus();
+    },
+
+    getVisitedItems: function() {
+      return _.filter(this.model.get('_items'), function(item) {
+        return item._isVisited;
+      });
+    },
+
+    checkCompletionStatus: function() {
+      if (this.getVisitedItems().length === this.model.get('_items').length) {
+        this.setCompletionStatus();
+      }
+    },
+
+    // Reduced text
+    replaceText: function(value) {
+      // If enabled
+      if (this.model.get('_audio') && this.model.get('_audio')._reducedTextisEnabled) {
+        // Change each items title and body
+        for (var i = 0; i < this.model.get('_items').length; i++) {
+          if (value === 0) {
+            this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitle);
+            this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBody);
           } else {
-            // Flip it back
-            $item.removeClass('flipcard-audio-flip');
-
-            //$backflipcard.a11y_cntrl_enabled(false);
-            Adapt.a11y.toggleAccessibleEnabled($backflipcard, true);
-
-            this.itemFlipped[index] = false;
+            this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitleReduced);
+            this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBodyReduced);
           }
-        },
-
-        setVisited: function(index) {
-            var item = this.model.get('_items')[index];
-            item._isVisited = true;
-            this.checkCompletionStatus();
-        },
-
-        getVisitedItems: function() {
-            return _.filter(this.model.get('_items'), function(item) {
-                return item._isVisited;
-            });
-        },
-
-        checkCompletionStatus: function() {
-            if (this.getVisitedItems().length === this.model.get('_items').length) {
-                this.setCompletionStatus();
-            }
-        },
-
-        // Reduced text
-        replaceText: function(value) {
-            // If enabled
-            if (this.model.get('_audio') && this.model.get('_audio')._reducedTextisEnabled) {
-                // Change each items title and body
-                for (var i = 0; i < this.model.get('_items').length; i++) {
-                    if(value == 0) {
-                        this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitle);
-                        this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBody);
-                    } else {
-                        this.$('.flipcard-audio__item-back-title').eq(i).html(this.model.get('_items')[i].backTitleReduced);
-                        this.$('.flipcard-audio__item-back-body').eq(i).html(this.model.get('_items')[i].backBodyReduced);
-                    }
-                }
-            }
         }
+      }
+    }
 
-    });
+  });
 
-    return Adapt.register('flipcard-audio', {
-      model: ComponentModel.extend({}),
-      view: FlipcardAudio
-    });
+  return Adapt.register('flipcard-audio', {
+    model: ComponentModel.extend({}),
+    view: FlipcardAudio
+  });
 
 });

From 020f7e47613da5ee74b07e91958cf623e10688b6 Mon Sep 17 00:00:00 2001
From: Robert Peek <>
Date: Wed, 18 Nov 2020 17:19:05 +0000
Subject: [PATCH 5/8] Theming updates

---
 bower.json                   |  2 +-
 less/flipcard-audio.less     | 16 +++++++++-------
 templates/flipcard-audio.hbs |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/bower.json b/bower.json
index 6c78c1c..d27aed5 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
 	"name": "adapt-flipcard-audio",
-	"version": "4.0.0",
+	"version": "4.0.1",
 	"framework": ">=5",
 	"homepage": "https://github.com/deltanet/adapt-flipcard-audio",
 	"issues": "https://github.com/deltanet/adapt-flipcard-audio/issues",
diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
index c65f73b..c6efd45 100755
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -30,14 +30,18 @@
     vertical-align: top;
     margin-left: 1%;
     margin-right: 1%;
-    color: @font-color-inverted;
+    color: @item-color-inverted-selected;
 
     &:hover {
-      color: @font-color-inverted;
+      color: @item-color-inverted-selected;
     }
 
     &.is-visited {
       border: 3px solid @visited;
+
+      .flipcard-audio__item-front {
+        border: 3px solid @visited;
+      }
     }
 
     @media all and (max-width: @device-width-medium) {
@@ -57,7 +61,7 @@
     width: 100%;
     height: auto;
     min-height: 100%;
-    background: @item-color;
+    background: @item-color-selected;
     cursor: pointer;
 
     text-align: left;
@@ -83,14 +87,11 @@
     &.animated {
       .vendor-prefix (transform, @flipcard-audio-item-rotate-Y-0deg);
     }
-    &.is-visited {
-      border: 3px solid @visited;
-    }
   }
 
   &__item-back {
     padding: @item-padding;
-    border: 3px solid @item-color;
+    border: 3px solid @item-color-selected;
     width: 100%;
 
     .vendor-prefix (box-sizing, border-box);
@@ -102,6 +103,7 @@
 
   &__item-back-title {
     padding-bottom: @item-padding;
+    .item-title;
   }
 
   &__item-back-body {
diff --git a/templates/flipcard-audio.hbs b/templates/flipcard-audio.hbs
index 84a2671..08a60c1 100644
--- a/templates/flipcard-audio.hbs
+++ b/templates/flipcard-audio.hbs
@@ -4,7 +4,7 @@
         <div role="list" class="flipcard-audio__items">
             {{#each _items}}
             <div role="listitem" class="flipcard-audio__listitem">
-                <button class="base flipcard-audio__item js-flipcard-toggle{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
+                <button class="flipcard-audio__item js-flipcard-toggle{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
                     <span class="aria-label">
                         {{#if frontImage.alt}}{{frontImage.alt}}{{else}}{{../_globals._accessibility._ariaLabels.item}} {{numbers @index}}{{/if}}.{{#if frontImage.alt}} {{frontImage.alt}}.{{/if}}
                     </span>

From c79d5295c0b06df8ccb5c630edd6d314c4149dc4 Mon Sep 17 00:00:00 2001
From: deltanetdan <dan.gray@delta-net.co.uk>
Date: Fri, 27 Nov 2020 15:26:40 +0000
Subject: [PATCH 6/8] Fix issue with audio not playing on flip

---
 js/adapt-flipcard-audio.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/adapt-flipcard-audio.js b/js/adapt-flipcard-audio.js
index 009716d..b46aa01 100644
--- a/js/adapt-flipcard-audio.js
+++ b/js/adapt-flipcard-audio.js
@@ -163,7 +163,7 @@ define([
       if (event && event.preventDefault) event.preventDefault();
 
       ///// Audio /////
-      if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status === 1) {
+      if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status == 1) {
         Adapt.trigger('audio:pauseAudio', this.model.get('_audio')._channel);
       }
       ///// End of Audio /////
@@ -217,7 +217,7 @@ define([
 
         ///// Audio /////
         var item = this.model.get('_items')[index];
-        if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status === 1) {
+        if (Adapt.audio && this.model.has('_audio') && this.model.get('_audio')._isEnabled && Adapt.audio.audioClip[this.model.get('_audio')._channel].status == 1) {
           // Reset onscreen id
           Adapt.audio.audioClip[this.model.get('_audio')._channel].onscreenID = '';
           // Trigger audio

From 262abe306972b8584fda6008b4865ddf945f76c6 Mon Sep 17 00:00:00 2001
From: Robert Peek <>
Date: Fri, 4 Dec 2020 15:35:25 +0000
Subject: [PATCH 7/8] Layout fixes

---
 less/flipcard-audio.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
index c6efd45..8272c15 100755
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -37,8 +37,6 @@
     }
 
     &.is-visited {
-      border: 3px solid @visited;
-
       .flipcard-audio__item-front {
         border: 3px solid @visited;
       }
@@ -57,7 +55,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 110;
     width: 100%;
     height: auto;
     min-height: 100%;

From e8f583b3290d0679d9fb73c0aa10df28686963ab Mon Sep 17 00:00:00 2001
From: Robert Peek <robert@delta-net.co.uk>
Date: Wed, 20 Jan 2021 15:08:30 +0000
Subject: [PATCH 8/8] Fix for text line height

---
 bower.json               | 4 ++--
 less/flipcard-audio.less | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index d27aed5..6caaf3b 100644
--- a/bower.json
+++ b/bower.json
@@ -1,12 +1,12 @@
 {
 	"name": "adapt-flipcard-audio",
-	"version": "4.0.1",
+	"version": "4.0.4",
 	"framework": ">=5",
 	"homepage": "https://github.com/deltanet/adapt-flipcard-audio",
 	"issues": "https://github.com/deltanet/adapt-flipcard-audio/issues",
 	"description": "A component that displays clickable images, which reveal display text.",
 	"main": "/js/adapt-flipcard-audio.js",
-	"displayName" : "Flipcard - audio",
+	"displayName" : "Flipcard",
 	"component" : "flipcard-audio",
 	"keywords": [
 		"adapt-plugin",
diff --git a/less/flipcard-audio.less b/less/flipcard-audio.less
index 8272c15..68542fe 100755
--- a/less/flipcard-audio.less
+++ b/less/flipcard-audio.less
@@ -31,6 +31,7 @@
     margin-left: 1%;
     margin-right: 1%;
     color: @item-color-inverted-selected;
+    line-height: @body-line-height;
 
     &:hover {
       color: @item-color-inverted-selected;
@@ -47,7 +48,6 @@
       margin-left: 0%;
       margin-right: 0%;
     }
-
   }
 
   &__item-face {