css update plus links from cross sites and stuff working also multiple listing of tickets fixed

app/assets/javascripts/search.js

@@ -1,19 +1,19 @@
 (function(){
     document.getElementById("search-form").reset();
-    $("#serach-btn").on("click",function(){
+    // $("#serach-btn").on("click",function(){
-      var el = $(this);
+    //   var el = $(this);
-      if(el.hasClass("opened")){
+    //   if(el.hasClass("opened")){
-        $(".search-box input").stop().animate({"width":"0"},function(){
+    //     $(".search-box input").stop().animate({"width":"0"},function(){
-          $(".search-box").hide();
+    //       $(".search-box").hide();
-          el.removeClass("opened");
+    //       el.removeClass("opened");
-        }).val("");
+    //     }).val("");
-      }else{
+    //   }else{
-        $(".search-box").show();
+    //     $(".search-box").show();
-        el.addClass("opened");
+    //     el.addClass("opened");
-        $(".search-box input").stop().animate({"width":"200px"}).focus();
+    //     $(".search-box input").stop().animate({"width":"200px"}).focus();
-      }
+    //   }
-      return false;
+    //   return false;
-    })
+    // })
 
     var regex = new RegExp(/[a-z]+:/);
     $("#smart-field-select").on("change",function(){

app/assets/stylesheets/_ticket_variables.scss

@@ -1,9 +0,0 @@
-@charset "utf-8";
-
-// colors
-$blue: #326cc1;
-$light-blue: #dce5e8;
-$white: #fff;
-
-// units
-$main-width: 1000px;

app/assets/stylesheets/ticket_index.scss

@@ -1,38 +0,0 @@
-@charset "utf-8";
-@import 'ticket_variables';
-
-
-.ticket-container {
-    max-width: $main-width;
-    width: 96%;
-    margin: auto;
-    background-color: $white;
-}
-
-
-.ticket-section-heading {
-    background-color: $blue;
-    color: $white;
-    padding: 10px 14px;
-}
-.ticket-section-container {
-    padding: 0 1rem;
-    margin-bottom: 20px;
-}
-.ticket-category-title {
-    background-color: #fff;
-}
-
-.ticket-item {
-    padding: 8px 5px;
-    border-bottom: 1px solid $light-blue;
-}
-
-.ticket-item:first-child {
-    border-top: 1px solid $light-blue;
-}
-
-.ticket-section-view-all {
-    text-align: right;
-    margin: 20px 5px 40px;
-} 

app/assets/stylesheets/ticket_variables.scss

@@ -1,9 +0,0 @@
-@charset "utf-8";
-
-// colors
-$blue: #326cc1;
-$light-blue: #dce5e8;
-
-
-// units
-$main-width: 1000px;

app/assets/stylesheets/tickets.css

@@ -1,28 +0,0 @@
-hr{
-	border-color: #8E8E8E -moz-use-text-color #ffffff;
-	margin-top: 5px;
-}
-
-.ticket{
-}
-
-.ticket .ticket-title{
-	font-size: 14px;
-	margin-left: 15px;
-	line-height: 45px;
-}
-
-.category_ticket_wrap .search-wrap{
-	/*float: left;
-	margin-top: -43px;
-	margin-left: 200px;*/
-	display: inline;
-}
-
-.category_ticket_wrap h3{
-	width: auto;
-}
-
-.urgent-container{
-	/*background-color: #F7EEE2;*/
-}

app/assets/stylesheets/tickets/_classes.scss

@@ -0,0 +1,15 @@
+@charset "utf-8";
+@import 'ticket_variables';
+@import 'common';
+
+.t-round {
+    border-radius: $t-round;
+}
+
+.t-strong-round {
+    border-radius: $t-strong-round;
+}
+
+.t-uppercase {
+    text-transform: uppercase;
+}

app/assets/stylesheets/tickets/_common.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+#filter {
+    display: none;
+}

app/assets/stylesheets/tickets/_ticket_variables.scss

@@ -0,0 +1,32 @@
+@charset "utf-8";
+@import url(http://fonts.googleapis.com/css?family=Roboto);
+
+// font stacks
+$main-font: 'Roboto', sans-serif;
+
+// colors
+$primary: #2980b9;
+$second: #489ad8;
+
+$red: #d95f49;
+$yellow: #F28A31;
+$green: #69B556;
+$purple: #9f57b9;
+
+$light-blue: #f8fbff;
+$dark-blue: #2e3e4f;
+
+$gray: #888;
+$subtle-gray: #f1f1f1;
+$light-gray: #edf0f1;
+
+$white: #fff;
+$black: #000;
+
+// units
+$main-width: 1000px;
+$t-round: 0.125rem;
+$t-strong-round: 0.25rem;
+
+$t-normal: .3s;
+$t-fast: .15s;

app/assets/stylesheets/tickets/ticket_index.scss

@@ -0,0 +1,119 @@
+@charset "utf-8";
+@import 'ticket_variables';
+@import 'common';
+@import 'classes';
+body {
+    background-color: $subtle-gray;
+}
+
+.ticket-container {
+    a {
+        color: $primary;
+        &:hover {
+            color: lighten($primary, 10%);
+        }
+    }
+}
+
+.ticket-container,
+.ticket-search-wrap {
+    max-width: $main-width;
+    width: 96%;
+    margin: auto;
+}
+
+.ticket-search-option {
+    width: 10%;
+}
+
+input.ticket-search-field {
+    width: 80%;
+    height: 30px;
+    margin-bottom: 0;
+}
+
+.ticket-section {
+    margin-bottom: 20px;
+}
+
+.ticket-section-heading {
+    background-color: $primary;
+    color: $white;
+    padding: 16px 14px;
+    margin-bottom: 0;
+    font-family: $main-font;
+    &.type--ugrent {
+        background-color: $red;
+    }
+    &.type--normal {
+        background-color: $second;
+    }
+}
+
+.ticket-section-heading-icon {
+    margin-right: 8px;
+}
+
+.ticket-section-container {
+    background-color: $white;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.ticket-category-title {
+    margin: 0;
+    padding: 20px 16px;
+    background-color: #fbfbfb;
+    font-family: $main-font;
+    border-bottom: 1px solid $light-gray;
+}
+
+.ticket-category-title-icon {
+    margin-right: 5px;
+}
+
+.ticket-item {
+    padding: 16px 20px;
+    border-bottom: 1px solid $light-gray;
+    font-family: $main-font;
+    &:hover {
+        background-color: $light-blue;
+    }
+}
+
+.ticket-item:first-child {
+    border-top: 1px solid $light-gray;
+}
+
+.ticket-label {
+    white-space: nowrap;
+}
+
+.ticket-section-view-all {
+    position: absolute;
+    right: 2rem;
+    top: 20px;
+    &:hover {
+        .ticket-section-view-all-icon {
+            top: 0;
+        }
+    }
+    .ticket-section-view-all-btn {
+        overflow: hidden;
+        display: block;
+        font-size: 12px;
+        color: $gray;
+        font-family: $main-font;
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+.ticket-section-view-all-icon {
+    position: relative;
+    top: 40px;
+    color: $second;
+    -webkit-webkit-transition: $t-fast all;
+    transition: $t-fast all;
+}

app/assets/stylesheets/tickets/ticket_show.scss

@@ -1,5 +1,8 @@
-
 @charset "utf-8";
+@import 'ticket_variables';
+@import 'common';
+@import 'classes';
+
 #main-wrap .wrap-inner {
     padding-top: 20px !important;
 }
@@ -32,7 +35,6 @@
 
 #ticket_footer_pagination {
     text-align: center;
-
     @media screen and (max-width: 50rem) {
         text-align: left;
     }
@@ -108,18 +110,7 @@
     }
 }
 
-// Ticket page
+
-// helper classes
-$primary: #2980b9;
-$second: #489ad8;
-$red: #d95f49;
-$yellow: #F28A31;
-$green: #69B556;
-$dark-blue: #2e3e4f;
-$gray: #888;
-$light-gray: #edf0f1;
-$white: #fff;
-$black: #000;
 
 .t-list-unstyled {
     list-style: none;
@@ -158,13 +149,12 @@ $black: #000;
     background-color: $gray;
 }
 
-.t-status-in-progress {
+.t-status-processing {
     color: $white;
-    background-color: $primary;
+    background-color: $purple;
 }
 
 .t-category {
-    text-transform: uppercase;
     border-radius: 0.125rem;
     display: inline-block;
     padding: 4px 0.375rem;
@@ -176,12 +166,35 @@ $black: #000;
     background-color: $yellow;
 }
 
-.t-btn {
+.t-item {
     font-size: 0.8125rem;
     color: $gray;
     background-color: $white;
 }
 
+.t-btn {
+    font-size: 0.75rem;
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    background-color: $white;
+    padding: 7px 0.625rem;
+    border-radius: $t-round;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+.t-btn-primary {
+    background-color: $primary;
+}
+
+.t-btn-danger {
+    color: $white;
+    background-color: $red;
+    &:hover {
+        color: $white;
+    }
+}
+
 .t-depth-1 {
     margin-left: 1.5625rem;
 }
@@ -194,20 +207,67 @@ $black: #000;
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     > li {
         text-shadow: none;
+        font-size: 0.8125rem;
     }
 }
 
+// ticket notification
+.notice {
+    position: fixed;
+    top: -5rem;
+    font-size: 0.8125rem;
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    -webkit-transition: .15s all ease-in-out;
+    transition: .15s all ease-in-out;
+    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+    margin: 0;
+
+}
+
+.notice-pop {
+    left: 100px;
+    padding: 20px 2rem;
+    color: $white;
+    background-color: rgba($black, .85);
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+    &.in {
+        top: 60px;
+    }
+}
+
+.notice-close {
+    margin-left: 0.625rem;
+    font-size: 1.0375rem;
+    vertical-align: middle;
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.notice-bar-on {
+    #main-wrap {
+        padding-top: 70px;
+    }
+}
+.notice-bar {
+    position: fixed;
+    left: 61px;
+    width: 100%;
+    color: $white;
+    background-color: $red;
+    padding: 10px;
+    text-indent: 1rem;
+    &.in {
+        top: 40px;
+    }
+}
+
+.notice-bar-close {
+
+}
+
 .ticket-wrap {
     position: relative;
-    background-color: $white;
-    -webkit-border-bottom-right-radius: 0.25rem;
-    -webkit-border-bottom-left-radius: 0.25rem;
-    -moz-border-radius-bottomright: 0.25rem;
-    -moz-border-radius-bottomleft: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2);
-    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2);
     max-width: 1000px;
     width: 96%;
     margin: 0 auto;
@@ -221,11 +281,8 @@ $black: #000;
     -moz-border-radius-topright: 4px;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    &:hover {
+    &.active {
-      .ticket-action {
+        background-color: $red;
-        top: 1.4rem;
-        opacity: 1;
-      }
     }
     .ticket-heading {
         color: $white;
@@ -244,17 +301,34 @@ $black: #000;
         color: #EDF0F1;
         float: left;
         font-size: 0.8125rem;
+        @media screen and(max-width: 39.375rem) {
+            margin-bottom: 10px;
+        }
     }
     .ticket-state {
         float: right;
     }
+    .ticket-urgent-btn {
+        margin-right: 3px;
+        color: $white;
+        background-color: $gray;
+        &.active {
+            background-color: $red;
+            color: $white;
+        }
+    }
+    // 630px
+    @media screen and (max-width: 39.375rem) {
+        > div[class^="ticket-"] {
+            float: none;
+        }
+    }
 }
 
 .ticket-action {
     position: absolute;
     right: 1.4rem;
-    top: -0.2rem;
+    top: 1.4rem;
-    opacity: 0;
     transition: .3s all;
     .dropdown-menu {
         top: 120%;
@@ -312,18 +386,84 @@ $black: #000;
     }
 }
 
-.ticket-content {
+.ticket-category {
-    padding: 10px 1.8rem 20px;
+   position: relative; 
-    overflow: auto;
+}
+.ticket-category-dropdown {
+    text-transform: uppercase;
+    color: $white;
+    &:hover {
+        color: $white;
+    }
+}
+
+.ticket-category-select {
+    top: 120%;
+    left: auto;
+    right: 0;
+    padding: 15px 0;
+    border: none;
+    border-radius: 0.125rem;
+    min-width: 140px;
+    .t-btn {
+        i {
+            margin-right: 0.3125rem;
+        }
+    }
+    > li {
+        > a {
+            padding: 3px 0.75rem;
+        }
+    }
+    li {
+        > a {
+            &:hover {
+                background-color: $second;
+                background-image: none;
+            }
+        }
+    }
+    li {
+        > .ticket-delete {
+            &:hover {
+                background-color: $red;
+            }
+        }
+        > .ticket-close {
+            &:hover {
+                background-color: $yellow;
+            }
+        }
+    }
+}
+
+.ticket-query-wrap {
+    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+    background-color: $white;
+    padding: 10px 1.875rem 30px 1.875rem;
+    margin-bottom: 30px;
 }
 
 .ticket-query {
-    margin: 15px 0 20px 0;
+    padding: 15px 0 20px 0;
     font-size: 0.9375rem;
 }
 
-// response
+.ticket-query-wrap:first-child {
+    -webkit-border-bottom-right-radius: 0.25rem;
+    -webkit-border-bottom-left-radius: 0.25rem;
+    -moz-border-radius-bottomright: 0.25rem;
+    -moz-border-radius-bottomleft: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+}
 
+.ticket-query-wrap:nth-child(1n+2) {
+    border-radius: 0.25rem;
+}
+
+// response
 .ticket-response {
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     border: 1px solid lighten($gray, 40%);
@@ -337,12 +477,33 @@ $black: #000;
     color: $white;
     font-size: 0.9375rem;
     margin: 0 0 20px;
+    cursor: pointer;
+    -webkit-transition: .15s all;
+    transition: .15s all;
+    &.collapsed {
+        margin: 0;
+        background-color: $gray;
+        outline-color: $gray;
+        &:hover {
+            background-color: $second;
+            outline-color: $second;
+        }
+    }
+    .ticket-response-heading-collapse {
+        font-size: 1.2rem;
+        padding: 2px 5px;
+    }
 }
 
 .ticket-response-heading-icon {
     margin-right: 0.5rem;
 }
-
+.ticket-response-wrap {
+    &.collapsed {
+        height: 0;
+        overflow: hidden;
+    }
+}
 .ticket-response-item {
     margin: 35px auto;
     width: 90%;
@@ -389,6 +550,29 @@ $black: #000;
     padding: 10px 1.8rem 20px;
 }
 
+// Go back top
+.go-back-top {
+    background: $gray;
+    color: $white;
+    border-radius: 4px;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    -webkit-transition: .15s all;
+    transition: .15s all;
+    &:hover {
+        border-radius: 50%;
+        background-color: $primary;
+    }
+}
+
+
 // ticket table
 .ticket-table {
     td {
@@ -396,38 +580,45 @@ $black: #000;
     }
 }
 
-
+// create ticket
-
+.ticket-create-form {
-// TODO joshua pleae change it
+    .ticket-create-subject {
-.ticket-category-select{
+        width: 77%;
-    border: medium none;
+        margin-right: 0.625rem;
-    text-decoration: none;
+        height: 30px;
-    color: $white;
-    border-radius: 0.125rem;
-    left: auto;
-    min-width: 100px;
-    padding: 15px 0;
-    right: 0;
-    top: 8.3%;
-}
-
-.ticket-category-dropdown{
-    color: $white;
-    text-decoration: none;
-    &:hover{
-        color : $white;
-        text-decoration: none;
     }
-     &:active{
+    .ticket-create-type {
-        outline:none;
+        width: 20%;
-    }
+        height: 40px;
-     &:focus{
-        outline:none;
     }
 }
 
-.popover[class*=tour-]{
+
-    z-index: 1101;
+// .ticket-category-select{
-}
+//     border: medium none;
+//     text-decoration: none;
+//     color: $white;
+//     border-radius: 0.125rem;
+//     left: auto;
+//     min-width: 100px;
+//     padding: 15px 0;
+//     right: 0;
+//     top: 8.3%;
+// }
+
+// .ticket-category-dropdown{
+//     color: $white;
+//     text-decoration: none;
+//     &:hover{
+//         color : $white;
+//         text-decoration: none;
+//     }
+//      &:active{
+//         outline:none;
+//     }
+//      &:focus{
+//         outline:none;
+//     }
+// }
 
 // till here

app/controllers/admin/tickets_controller.rb

@@ -1,5 +1,7 @@
 class Admin::TicketsController < OrbitAdminController
 
+  include TicketsHelper
+
   before_action :set_smart_tags
 
 	def index
@@ -11,8 +13,8 @@ class Admin::TicketsController < OrbitAdminController
 			if authorizations.count == 0
         @categories = ModuleApp.find_by_key("ticket").categories rescue []
         @categories.each do |category|
-          @tickets[category] = Ticket.open.not_urgent.limit(5).asc(:created_at)
+          @tickets[category] = Ticket.where(:category_id => category.id).open.not_urgent.limit(5).asc(:created_at)
-          @urgent_tickets[category] = Ticket.open.all_urgent.asc(:created_at)
+          @urgent_tickets[category] = Ticket.where(:category_id => category.id).open.all_urgent.asc(:created_at)
         end
   		else
         @categories = authorizations.collect{|authorization| authorization.category}
@@ -143,7 +145,7 @@ class Admin::TicketsController < OrbitAdminController
     tq = TicketQuery.find(params[:ticket_query_id]) rescue nil
     if !tq.nil?
       response = TicketQueryResponse.new
-      response.response = params[:ticket_query_response]
+      response.response = smart_store_link_parser(params[:ticket_query_response])
       response.response_by = current_user.id
       response.save
       tq.ticket_query_responses << response

app/helpers/tickets_helper.rb

@@ -0,0 +1,13 @@
+module TicketsHelper
+	def smart_links_parser(html,site)
+		html = html.gsub("href=\"/uploads/","href=\"http://#{site.site_domain}/uploads/")
+		html = html.gsub("src=\"/uploads/","src=\"http://#{site.site_domain}/uploads/")
+		return html
+	end
+
+	def smart_store_link_parser(html)
+		html = html.gsub("href=\"/uploads/","href=\"http://#{request.host_with_port}/uploads/")
+		html = html.gsub("src=\"/uploads/","src=\"http://#{request.host_with_port}/uploads/")
+		return html
+	end
+end

app/views/admin/tickets/_query.html.erb

@@ -1,7 +1,8 @@
-<div class="query ticket-query">
+<div class="ticket-query-wrap">
-  <%= query.query.html_safe %>
+  <div class="query ticket-query">
-</div>
+    <%= smart_links_parser(query.query, @ticket.registered_site).html_safe %>
-<div class="ticket-response t-depth-1">
+  </div>
+  <div class="ticket-response t-depth-1">
       <h4 class="ticket-response-heading">
         <i class="ticket-response-heading-icon fa fa-commenting"></i>
          Response
@@ -22,4 +23,5 @@
             <div>Posting your response.</div>
           </div>
       <% end %>
+  </div>
 </div>

app/views/admin/tickets/_search_form.html.erb

@@ -1,18 +1,18 @@
-<div class="search-wrap">
+<div class="search-wrap ticket-search-wrap">
-  <a href="#" id="serach-btn" style="font-size:20px;"><i class="icons-search"></i></a>
+  <!-- <a href="#" id="serach-btn"><i class="icons-search"></i></a> -->
   <% if params[:keywords].present? %>
-    <a href="/admin/tickets" style="font-size:20px;"><i class="icons-cycle"></i></a>
+    <a href="/admin/tickets"><i class="icons-cycle"></i></a>
     <span>Searched for <b><i><%= params[:keywords] %></i></b></span>
   <% end %>
-  <span class="search-box" style="display:none;">
+  <span class="search-box">
     <form action="/admin/tickets/search" method="get" id="search-form">
-      <select id="smart-field-select" style="width:100px;">
+      <select id="smart-field-select" class="ticket-search-option">
         <option value="">general</option>
         <% @smart_search_fields.each do |ssf| %>
          <option value="<%= ssf %>"><%= ssf %></option>
         <% end %>
       </select>
-      <input type="text" placeholder="Search" style="width:0;" name="keywords" />
+      <input class="ticket-search-field" type="text" placeholder="Search" name="keywords" />
     </form>
   </span>
 </div>

app/views/admin/tickets/_ticket.html.erb

@@ -5,12 +5,12 @@
   when "closed"
     badge_class = "t-status-close"
   when "commenced"
-    badge_class = "t-status-in-progress"
+    badge_class = "t-status-processing"
   end
 %>
 <div class="ticket ticket-item" id="ticket_<%= ticket.id.to_s %>" data-id="<%= ticket.id.to_s %>">
-	#<%= ticket.uid %> - <a href="<%= admin_ticket_path(ticket.id) %>"><span class="ticket-title"><%= ticket.subject %></span> </a><a href="http://<%= ticket.registered_site.site_domain %>" target="_blank">(<%= ticket.registered_site.title %>)</a>
+	#<%= ticket.uid %> - <a class="ticket-link" href="<%= admin_ticket_path(ticket.id) %>"><span class="ticket-title"><%= ticket.subject %></span> </a><a href="http://<%= ticket.registered_site.site_domain %>" target="_blank">(<%= ticket.registered_site.title %>)</a>
-	<div class="pull-right">
+	<div class="ticket-label pull-right">
   <% if ticket.is_urgent? %>
     <span class="label label-danger">Urgent</span>
   <% end %>

app/views/admin/tickets/index.html.erb

@@ -1,29 +1,43 @@
 <% content_for :page_specific_css do %>
+  <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
   <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" %>
-  <%= stylesheet_link_tag "ticket_index" %>
+  <%= stylesheet_link_tag "tickets/ticket_index" %>
-  <%= stylesheet_link_tag "tickets" %>
-  <%= stylesheet_link_tag "ticket" %>
 <% end %>
 <%= render :partial => "search_form" %>
 <div class="ticket-container">
-  <div class="ticket-section-container">
+  <div class="ticket-section">
-    <h3 class="ticket-section-heading">Urgent Tickets</h3>
+    <h3 class="ticket-section-heading type--ugrent">
+      <i class="ticket-section-heading-icon fa fa-fire"></i>
+      Urgent Tickets
+    </h3>
     <% @categories.each do |category| %>
       <% if !@urgent_tickets[category].nil? %>
-      <div class="ticket-section-container">
+      <div class="ticket-section-container t-strong-round">
-        <h4 class="ticket-category-title"><%= category.title %></h4>
+        <h4 class="ticket-category-title">
+          <i class="ticket-category-title-icon fa fa-tags"></i>
+          <%= category.title %>
+        </h4>
           <%= render :partial => "ticket", :collection => @urgent_tickets[category] %>
       </div>
       <% end %>
   <% end %>
   </div>
-<h3 class="ticket-section-heading">Normal Tickets</h3>
+<h3 class="ticket-section-heading type--normal">
+  <i class="ticket-section-heading-icon fa fa-clock-o"></i>
+  Tickets
+</h3>
 <% @categories.each do |category| %>
-	<div class="ticket-section-container">
+	<div class="ticket-section-container t-strong-round">
-		<h4 class="ticket-category-title"><%= category.title %></h4>
+		<h4 class="ticket-category-title">
+      <i class="ticket-category-title-icon fa fa-tags"></i>
+      <%= category.title %>
+    </h4>
    	 	<%= render :partial => "ticket", :collection => @tickets[category] %>
       <div class="ticket-section-view-all">
-        <a class="btn btn-primary" href="/admin/tickets/category/<%= category.id.to_s %>">View all tickets from <%= category.title %></a>
+        <a class="ticket-section-view-all-btn" href="/admin/tickets/category/<%= category.id.to_s %>">
+          <i class="ticket-section-view-all-icon fa fa-share"></i>
+          View all tickets from <%= category.title %>
+        </a>
       </div>
   </div>
 <% end %>

app/views/admin/tickets/my_tickets.html.erb

@@ -1,6 +1,4 @@
 <% content_for :page_specific_css do %>
-  <%= stylesheet_link_tag "tickets" %>
-  <%= stylesheet_link_tag "ticket" %>
 <% end %>
 <%= render :partial => "search_form" %>
 <div class="pull-right">

app/views/admin/tickets/show.html.erb

@@ -1,6 +1,6 @@
 <% content_for :page_specific_css do %>
   <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
-  <%= stylesheet_link_tag "ticket" %>
+  <%= stylesheet_link_tag "tickets/ticket_show" %>
 <% end %>
 <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "lib/jquery.form.js" %>
@@ -13,12 +13,16 @@
   when "closed"
     badge_class = "t-status-close"
   when "commenced"
-    badge_class = "t-status-in-progress"
+    badge_class = "t-status-processing"
   end
 %>
+  <ul class="ticket-breadcrumb breadcrumb">
+    <li class="ticket-breadcrumb-item"><a href="/admin/tickets"><i class="icons-arrow-left"></i> Dashboard</a> <span class="divider">/</span></li>
+    <li class="ticket-breadcrumb-itme ticket-breadcrumb-active active"><%= @ticket.subject %></li>
+  </ul>
   <div class="ticket-wrap">
     <div class="ticket-header">
-     <div id="ticket-urgent-marker" class="ticket-heading-wrap" <%= "style=background-color:#C61C2D;" if @ticket.is_urgent? %>>
+     <div id="ticket-urgent-marker" class="ticket-heading-wrap <%= "active" if @ticket.is_urgent? %>" >
        <h3 class="ticket-heading">#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %>
        <% if !@ticket.taken_by.nil? %>
         <% user = User.find(@ticket.taken_by) %>
@@ -33,26 +37,26 @@
            <ul class="t-list-unstyled dropdown-menu" role="menu">
              <% if @ticket.status == "open" %>
               <li>
-                 <a class="ticket-start t-btn" href="/admin/tickets/<%= @ticket.id.to_s %>/start" data-ticket-id="<%= @ticket.id.to_s %>">
+                 <a class="ticket-start t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/start" data-ticket-id="<%= @ticket.id.to_s %>">
                    <i class="fa fa-times-circle"></i>
                    Start
                  </a>
                </li>
                <li>
-                 <a class="ticket-close t-btn" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
+                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                    <i class="fa fa-eye-slash"></i>
                    Close
                  </a>
                </li>
              <% elsif @ticket.status == "commenced" %>
                <li>
-                 <a class="ticket-start t-btn" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>/leave" data-ticket-id="<%= @ticket.id.to_s %>">
+                 <a class="ticket-start t-item" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>/leave" data-ticket-id="<%= @ticket.id.to_s %>">
                    <i class="fa fa-times-circle"></i>
                    Leave
                  </a>
                </li>
                <li>
-                 <a class="ticket-close t-btn" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
+                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                    <i class="fa fa-eye-slash"></i>
                    Close
                  </a>
@@ -61,7 +65,7 @@
                <% if  @ticket.can_be_reopened? %>
                <li>
                  <% if params[:reopen] == "true" %>
-                   <a href="#" class="reopen-back-btn t-btn" >Cancel</a>
+                   <a href="#" class="reopen-back-btn t-item" >Cancel</a>
                  <% else %>
                    <a href="/admin/tickets/<%= @ticket.id.to_s %>?reopen=true" class="t-btn">Reopen</a>
                  <% end %>
@@ -89,7 +93,10 @@
            </div>
            <div class="ticket-state">
             <% if @ticket.status != "closed" %>
-             <a href="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent" class="btn btn-danger <%= "active" if @ticket.is_urgent? %>" id="toggle-urgent">Urgent</a>
+             <a href="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent" class="ticket-urgent-btn t-btn t-btn-danger t-uppercase <%= "active" if @ticket.is_urgent? %>" id="toggle-urgent">
+              <i class="fa fa-fire"></i>
+              Urgent
+            </a>
             <% end %>
              <span class="ticket-status t-status <%= badge_class %>">
                <i class="fa fa-eye"></i>
@@ -104,7 +111,7 @@
                 <ul class="ticket-category-select dropdown-menu" role="menu">
                 <% @categories.each do |category| %>
                   <li>
-                    <a class="ticket-start t-btn ticket-category-select-option" href="#" data-category-id="<%= category.id.to_s %>">
+                    <a class="ticket-start t-item ticket-category-select-option" href="#" data-category-id="<%= category.id.to_s %>">
                       <%= category.title %>
                     </a>
                   </li>
@@ -203,13 +210,13 @@
       if(response.success){
         if(mark_urgent){
           if(response.can_make_urgent){
-            $("#ticket-urgent-marker").css("background-color","#C61C2D");
+            $("#ticket-urgent-marker").addClass('active');
             el.addClass("active");
           }else{
             alert("Urgent quota for this category is already over.");
           }
         }else{
-          $("#ticket-urgent-marker").css("background-color","#2980b9");
+          $("#ticket-urgent-marker").removeClass('active');
           el.removeClass("active");
         }
       }

app/views/admin/tickets/tickets_by_category.html.erb

@@ -1,5 +1,4 @@
 <% content_for :page_specific_css do %>
-  <%= stylesheet_link_tag "tickets" %>
 <% end %>
 <div class="category_ticket_wrap">
 <% if !@category.nil? %>