Resolves #223 - Support for Tablets/Mobile (Responsive).

app/assets/javascripts/app/controllers/_dashboard/first_steps_clues.coffee

@@ -15,21 +15,22 @@ class App.FirstStepsClues extends App.Controller
       actions: []
     }
     {
-      container: '.user-menu'
+      container: '.user-menu .add'
       headline: 'Create'
       text: 'Here you can create new tickets. Also if you have the permissions you can create new customers and organizations.'
       actions: [
-        'click .add .js-action',
-        'hover .add'
+        'hover .navigation',
+        'hover .user-menu .add'
       ]
     }
     {
-      container: '.user-menu'
+      container: '.user-menu .user .dropdown-menu'
       headline: 'Personal Settings'
       text: 'Here you can sign out, change the frontend language and see your last viewed items.'
       actions: [
-        'click .user .js-action',
-        'hover .user'
+        'hover .navigation',
+        'click .user-menu .user .js-action',
+        'hover .user-menu .user'
       ]
     }
     {
@@ -191,7 +192,7 @@ class App.FirstStepsClues extends App.Controller
     maxHeight = $(window).height()
 
     # try to place it parallel to the larger side
-    if target.height > target.width
+    if target.height > target.width && window.matchMedia('(min-width: 768px').matches
       # try to place it aside
       # prefer right
       if target.right + modal.width <= maxWidth
@@ -317,7 +318,7 @@ class App.FirstStepsClues extends App.Controller
       else
         # 'click .target'
         eventName = action.substr 0, action.indexOf(' ')
-        target = container.find( action.substr action.indexOf(' ') + 1 )
+        target = $( action.substr action.indexOf(' ') + 1 )
 
       switch eventName
         when 'click'

app/assets/javascripts/app/controllers/_ui_element/richtext_additions/_rich_text_tool_button.coffee

@@ -30,7 +30,7 @@ class App.UiElement.richtext.additions.RichTextToolButton
       html:      true
       animation: false
       delay:     0
-      placement: 'auto right'
+      placement: 'auto'
       theme:     'dark'
       content:   content
       container: 'body'

app/assets/javascripts/app/controllers/agent_ticket_create.coffee

@@ -3,6 +3,7 @@ class App.TicketCreate extends App.Controller
 
   elements:
     '.tabsSidebar': 'sidebar'
+    '.tabsSidebar-sidebarSpacer': 'sidebarSpacer'
 
   events:
     'click .type-tabs .tab':   'changeFormType'
@@ -171,6 +172,11 @@ class App.TicketCreate extends App.Controller
     @autosaveStart()
     @controllerBind('ticket_create_rerender', (template) => @renderQueue(template))
 
+    # initially hide sidebar on mobile
+    if window.matchMedia('(max-width: 767px').matches
+      @sidebar.addClass('is-closed')
+      @sidebarSpacer.addClass('is-closed')
+
   hide: =>
     @autosaveStop()
     @controllerUnbind('ticket_create_rerender', (template) => @renderQueue(template))

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -241,6 +241,11 @@ class App.TicketZoom extends App.Controller
     # set all notifications to seen
     App.OnlineNotification.seen('Ticket', @ticket_id)
 
+    # initially hide on mobile
+    if window.matchMedia('(max-width: 767px').matches
+      @el.find('.tabsSidebar').addClass('is-closed')
+      @el.find('.tabsSidebar-sidebarSpacer').addClass('is-closed')
+
     # if controller is executed twice, go to latest article (e. g. click on notification)
     if @activeState
       if @ticket_article_ids

app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee

@@ -47,9 +47,6 @@ class App.TicketZoomArticleNew extends App.Controller
 
     @render()
 
-    if @defaults.body or @isIE10()
-      @openTextarea(null, true)
-
     if _.isArray(@defaults.attachments)
       for attachment in @defaults.attachments
         @renderAttachment(attachment)
@@ -101,6 +98,9 @@ class App.TicketZoomArticleNew extends App.Controller
     @controllerBind('ui::ticket::shown', (data) =>
       return if data.ticket_id.toString() isnt @ticket.id.toString()
       @tokanice(@type)
+
+      if @defaults.body or @isIE10()
+        @openTextarea(null, true)
     )
 
     # rerender, e. g. on language change

app/assets/javascripts/app/lib/bootstrap/modal.js

@@ -11,6 +11,8 @@
   - add this.$body = $(options.container || document.body)
   modified by Felix Jul-2017
   - add rtl support
+  modified by Felix Feb-2021
+  - limit top position value to >= 0
 */
 
 
@@ -255,7 +257,7 @@
     var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
     var css = {
       left: this.$body.offset().left,
-      top: this.$body.offset().top,
+      top: Math.max(0, this.$body.offset().top),
       width: this.$body.width(),
       paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing && this.scrollbarWidth > 0 ? this.scrollbarWidth : '',
       paddingRight: this.bodyIsOverflowing && !modalIsOverflowing && this.scrollbarWidth > 0 ? this.scrollbarWidth : ''

app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco

@@ -12,14 +12,14 @@
 
 <div class="breadcrumbs-menu">
   <a href="<%= @search.url %>"
-     class="btn btn--action js-search <% if @search.enabled: %>btn--active<% end %>"
+     class="btn btn--action btn--only-icon js-search <% if @search.enabled: %>btn--active<% end %>"
      >
     <%- @Icon('magnifier') %>
   </a>
   <a href="<%= @externalUrl %>"
      target=_blank
      <% if !@externalUrl: %>disabled<% end %>
-     class="btn btn--action"
+     class="btn btn--action btn--only-icon"
      >
     <%- @Icon('external') %>
   </a>
@@ -33,7 +33,7 @@
   <% end %>
   <div class="btn btn--action btn--split--first js-pickedLanguage"><%= @kbLocales.selected?.systemLocale().locale %></div>
   <div class="dropdown dropdown--actions">
-    <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown" aria-expanded="false">
+    <div class="btn btn--action btn--split--last btn--slim btn--icon-only centered" data-toggle="dropdown" aria-expanded="false">
       <%- @Icon('arrow-down') %>
     </div>
     <ul class="dropdown-menu dropdown-menu-<%= @dir('right', 'left') %> dropdown-menu-full-height" role="menu">

app/assets/javascripts/app/views/navigation/personal.jst.eco

@@ -28,7 +28,7 @@
       </ul>
     </li>
   <% else: %>
-    <li class="settings">
+    <li class="settings<%= if item.class then ' '+ item.class %>">
       <a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti(item.name) %>">
         <%- @Icon(item.icon, 'user-menu-icon') %>
       </a>

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -27,5 +27,7 @@
 
   <div class="tabsSidebar tabsSidebar--attributeBarSpacer vertical"></div>
 
-  <div class="attributeBar js-attributeBar"></div>
+  <div class="attributeBar">
+    <div class="attributeBar-inner js-attributeBar"></div>
+  </div>
 </div>

app/assets/javascripts/app/views/ticket_zoom/attribute_bar.jst.eco

@@ -1,4 +1,4 @@
-<div class="flex horizontal js-avatars"></div>
+<div class="attributeBar-avatars flex horizontal js-avatars"></div>
 <div class="buttonDropdown btn js-reset <% if !@resetButtonShown: %>hide<% end %>"><%- @T('Discard your unsaved changes.') %></div>
 <div class="buttonDropdown dropdown dropdown--actions dropup">
   <div class="btn btn--text btn--icon--last" data-toggle="dropdown">
@@ -30,7 +30,7 @@
 <% else: %>
   <div class="buttonDropdown dropdown dropup js-submitDropdown">
     <button class="btn btn--primary btn--split--first js-submit"><%- @T('Update') %></button>
-    <button class="btn btn--primary btn--slim btn--split--last js-openDropdownMacro"><%- @Icon('arrow-up') %></button>
+    <button class="btn btn--primary btn--slim btn--only-icon btn--split--last js-openDropdownMacro"><%- @Icon('arrow-up') %></button>
     <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
       <% for macro in @macros: %>
         <li class="js-dropdownActionMacro" role="menuitem" data-id="<%= macro.id %>"><%- macro.displayName() %>

app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco

@@ -2,7 +2,7 @@
   <%- @Icon('marker', 'js-highlight-icon') %>
 </div>
 <div class="dropdown dropdown--actions">
-  <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown" aria-expanded="true">
+  <div class="btn btn--action btn--split--last btn--slim btn--icon-only centered" data-toggle="dropdown" aria-expanded="true">
     <%- @Icon('arrow-down') %>
   </div>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">

app/assets/javascripts/app/views/widget/button_with_dropdown.jst.eco

@@ -1,6 +1,6 @@
 <button class="btn btn--primary btn--split--first <%= @mainActionIdentifier %>"><%- @T(@mainActionLabel) %></button>
 <span class="dropdown-menu-accessories" tabindex="1">
-  <button class="btn btn--primary btn--slim btn--split--last"><%- @Icon('arrow-up') %></button>
+  <button class="btn btn--primary btn--slim btn--only-icon btn--split--last"><%- @Icon('arrow-up') %></button>
   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
     <% for action in @actions: %>
       <li

app/views/layouts/application.html.erb

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=1024">
+  <meta name="viewport" content="width=device-width">
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title><%= Setting.get('product_name') %></title>
   <link rel="apple-touch-icon" href="apple-touch-icon.png" />