Fixed ticket view on admin side (for mobile devices)

admin/admin_ticket.php

@@ -761,13 +761,13 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
             /* Make sure original message is in correct color if newest are on top */
             $color = 'class="ticketMessageContainer"';
 		?>
-        <div <?php echo $color; ?>>
-            <div class="ticketHeader">
-			        <div class="ticketName"><?php echo $ticket['name']; ?></div>
-			        <div class="ticketEmail"><?php echo $ticket['email']; ?></div>
-                    <div class="ticketEmail"><?php echo $hesklang['ip']; ?>: <?php echo $ticket['ip']; ?></div>
-			</div>
-            <div class="ticketMessage">
+        <div class="row ticketMessageContainer">
+            <div class="col-md-3 col-xs-12">
+                <div class="ticketName"><?php echo $ticket['name']; ?></div>
+                <div class="ticketEmail"><?php echo $ticket['email']; ?></div>
+                <div class="ticketEmail"><?php echo $hesklang['ip']; ?>: <?php echo $ticket['ip']; ?></div>
+            </div>
+            <div class="col-md-9 col-xs-12 pushMarginLeft">
                 <div class="ticketMessageTop withBorder">
                     <!-- Action Buttons -->
                     <?php echo hesk_getAdminButtonsInTicket(0, $i); ?>
@@ -790,7 +790,7 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                 <div class="ticketMessageBottom">
                      <!-- Message -->
                     <p><b><?php echo $hesklang['message']; ?>:</b></p>
-		            <p><?php echo $ticket['message']; ?><br />&nbsp;</p>
+		            <p class="message"><?php echo $ticket['message']; ?><br />&nbsp;</p>
                 </div>
                 <div class="ticketMessageTop">
                          <!-- Custom Fields after Message -->
@@ -1102,11 +1102,11 @@ function hesk_printTicketReplies() {
 
 		$reply['dt'] = hesk_date($reply['dt']);
 		?>
-        <div <?php echo $color; ?>>
-            <div class="ticketHeader">
-                <div class="ticketName"><?php echo $reply['name']; ?></div>     
+        <div class="row ticketMessageContainer">
+            <div class="col-md-3 col-xs-12">
+                <div class="ticketName"><?php echo $reply['name']; ?></div>
             </div>
-            <div class="ticketMessage">
+            <div class="col-md-9 col-xs-12 pushMarginLeft">
                 <div class="ticketMessageTop withBorder">
                     <?php echo hesk_getAdminButtonsInTicket(); ?>
                     <div class="blankSpace"></div>
@@ -1114,10 +1114,10 @@ function hesk_printTicketReplies() {
                 </div>
                 <div class="ticketMessageBottom">
                     <p><b><?php echo $hesklang['message']; ?>:</b></p>
-			        <p><?php echo $reply['message']; ?></p>      
+			        <p><?php echo $reply['message']; ?></p> 
                 </div>
-                <div class="ticketMessageTop">
-                    <?php hesk_listAttachments($reply['attachments'],$i);
+                <div class="ticketMessageTop pushMargin">
+                     <?php hesk_listAttachments($reply['attachments'],$i);
                         /* Staff rating */
 			            if ($hesk_settings['rating'] && $reply['staffid'])
 			            {

css/hesk_newStyle.php

@@ -90,20 +90,10 @@
     border-bottom: 1px solid #ddd;
 }
 .ticketMessageContainer {
-    text-align: left;
-    vertical-align: top;
     background-color: #ededef;
-    margin: 0 0 20px;
-    background-position: 234px 0;
-    background-repeat: repeat-y;
     border: 1px solid #ddd;
-    position: relative;
+    margin-bottom: 20px;
 }
-.ticketHeader {
-    float: left;
-    width: 244px;
-    padding: 10px;
-    height: 100%}
 .ticketName {
     font-size: 20px;
     font-weight: 300;
@@ -117,14 +107,35 @@
     padding-top: 10px;
     padding-left: 10px;
     padding-right: 10px;
+    margin-right: -15px;
     color: #888;
+    background-color: #fff;
 }
+
+.pushMargin {
+    margin-top: -10px;
+    margin-bottom: -10px;
+}
+
+.pushMarginLeft {
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-right: 0;
+}
+
 .ticketMessageBottom {
     padding-left: 10px;
     padding-right: 10px;
+    margin-right: -15px;
     word-wrap: break-word;
     font-size: 15px;
+    background-color: #fff;
 }
+.ticketMessageBottom > p.message {
+    margin-bottom: 0px;
+
+}
+
 .ticketMessage {
     margin-left: 238px;
     background: #fff;