[frio] Improve display of introduction action buttons on mobile

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 41ba31dc56fbb98ca9f2a917d47ac087b8915aed..927d557b4caac5fa428c70c9298ddee38b6988ab 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -198,6 +198,11 @@ blockquote {
     padding: 1px 5px;
     font-size: 12px;
 }
+.btn.btn-danger {
+       color: #FFFFFF;
+       background-color: #AE0F0F;
+}
+
 .btn.btn-primary {
     background: $nav_bg;
     color: $btn_primary_color;

diff --git a/view/theme/frio/templates/notifications/intros.tpl b/view/theme/frio/templates/notifications/intros.tpl
index 710cd4a38cc7ca9b83e7550d11a273ec57bd242d..6e083201e06b1152d31d048af8a354b89b28e418 100644 (file)
--- a/view/theme/frio/templates/notifications/intros.tpl
+++ b/view/theme/frio/templates/notifications/intros.tpl
@@ -38,14 +38,13 @@
 
                {{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
                {{if $is_mobile}}
-               <div class="intro-action-buttons">
-                       <form class="intro-form pull-left" action="notification/{{$intro_id}}" method="post">
-                               <button class="btn btn-small btn-default intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}">{{$ignore}}</button>
-                               {{if $discard}}<button class="btn btn-small btn-default intro-submit-discard" type="submit" name="submit" value="{{$discard}}">{{$discard}}</button>&nbsp;{{/if}}
-                       </form>
-                       <button class="btn btn-small btn-primary intro-submit-approve pull-right" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}')">{{$approve}}</button>
-               </div>
-               <div class="clear"></div>
+               <form class="intro-form" action="notification/{{$intro_id}}" method="post">
+                       <button class="btn btn-small btn-primary" type="button" onclick="addElmToModal('#intro-approve-wrapper-{{$intro_id}}');"><i class="fa fa-check" aria-hidden="true"></i> {{$approve}}</button>
+                       {{if $discard}}
+                               <button class="btn btn-small btn-warning intro-submit-discard" type="submit" name="submit" value="{{$discard}}"><i class="fa fa-trash-o" aria-hidden="true"></i> {{$discard}}</button>
+                       {{/if}}
+                       <button class="btn btn-small btn-danger intro-submit-ignore" type="submit" name="submit" value="{{$ignore}}"><i class="fa fa-ban" aria-hidden="true"></i> {{$ignore}}</button>
+               </form>
                {{else}}
                {{* The intro actions like approve, ignore, discard intro*}}
                <div class="intro-actions pull-right nav-pills preferences">