From 9f9e46f044ea8fd31051793c5ba808f762ea2117 Mon Sep 17 00:00:00 2001
From: Zambom <erikzambom@hotmail.com>
Date: Sat, 14 Oct 2017 18:34:17 -0300
Subject: [PATCH] Adjusting popover mobile display

---
 amadeus/static/css/base/amadeus_responsive.css |  9 +++++++++
 amadeus/static/js/mural.js                     |  3 +++
 mural/templates/mural/_view.html               |  8 ++++----
 mural/templates/mural/_view_comment.html       |  8 ++++----
 subjects/templates/subjects/view.html          | 11 +++++++----
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/amadeus/static/css/base/amadeus_responsive.css b/amadeus/static/css/base/amadeus_responsive.css
index 322e3e6..096343b 100755
--- a/amadeus/static/css/base/amadeus_responsive.css
+++ b/amadeus/static/css/base/amadeus_responsive.css
@@ -100,6 +100,11 @@
 		padding: 5px 20px;
 		font-size: 12px;
 	}
+
+	.btn-popover-mobile {
+		padding: 4px 15px;
+    	font-size: 10px;
+	}
 	/* End Buttons */
 
 	.subject-period {
@@ -513,6 +518,10 @@
 }
 
 @media(min-width: 769px) {
+	.btn-popover-mobile {
+		padding: 5px 20px;
+		font-size: 12px;
+	}
 
 	#profile-menu{
 		float:right;
diff --git a/amadeus/static/js/mural.js b/amadeus/static/js/mural.js
index 8cdda61..3b59ec8 100644
--- a/amadeus/static/js/mural.js
+++ b/amadeus/static/js/mural.js
@@ -31,6 +31,9 @@ $(function () {
 function setUserDataPopover() {
     $('[data-toggle="popover"]').popover({
         html: true,
+        placement: function () {
+            return window.innerWidth <= 768 ? 'bottom' : 'right';
+        },
         content: function () {
             return $(this).parent().find(".popover").html();
         }
diff --git a/mural/templates/mural/_view.html b/mural/templates/mural/_view.html
index 44eb0f8..e7a5815 100644
--- a/mural/templates/mural/_view.html
+++ b/mural/templates/mural/_view.html
@@ -18,18 +18,18 @@
 
 	                        <br clear="all" />
 
-	                        <div class="col-md-3 col-sm-3 user-img">
+	                        <div class="col-md-3 col-sm-3 col-xs-3 user-img">
 	                            <img src="{{ post.user.image_url }}" class="img-responsive" />
 	                        </div>
-	                        <div class="col-md-9 col-sm-9 user-info">
+	                        <div class="col-md-9 col-sm-9 col-xs-9 user-info">
 	                            <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ post.user }}</h4>
 	                        </div>
 	                    </div>
 	                    <div class="popover-footer">
-	                        <a href="#" onclick="getModalInfo($(this), '{{ post|chat_space }}', '{{ post|chat_space_type }}'); return false;" data-url='{% url "chat:profile" post.user.email %}' class="btn btn-default btn-sm btn-raised pull-left">
+	                        <a href="#" onclick="getModalInfo($(this), '{{ post|chat_space }}', '{{ post|chat_space_type }}'); return false;" data-url='{% url "chat:profile" post.user.email %}' class="btn btn-default btn-raised pull-left btn-popover-mobile">
 	                            {% trans 'See Profile' %}
 	                        </a>
-	                        <a href="#" onclick="getModalInfo($(this), '{{ post|chat_space }}', '{{ post|chat_space_type }}'); return false;" data-url='{% url "chat:talk" post.user.email %}' class="btn btn-success btn-sm btn-raised pull-right">
+	                        <a href="#" onclick="getModalInfo($(this), '{{ post|chat_space }}', '{{ post|chat_space_type }}'); return false;" data-url='{% url "chat:talk" post.user.email %}' class="btn btn-success btn-raised pull-right btn-popover-mobile">
 	                            {% trans 'Send Message' %}
 	                        </a>
 	                    </div>
diff --git a/mural/templates/mural/_view_comment.html b/mural/templates/mural/_view_comment.html
index db2dbe4..1ffdd45 100644
--- a/mural/templates/mural/_view_comment.html
+++ b/mural/templates/mural/_view_comment.html
@@ -19,18 +19,18 @@
 
                         <br clear="all" />
 
-                        <div class="col-md-3 col-sm-3 user-img">
+                        <div class="col-md-3 col-sm-3 col-xs-3 user-img">
                             <img src="{{ comment.user.image_url }}" class="img-responsive" />
                         </div>
-                        <div class="col-md-9 col-sm-9 user-info">
+                        <div class="col-md-9 col-sm-9 col-xs-9 user-info">
                             <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ comment.user }}</h4>
                         </div>
                     </div>
                     <div class="popover-footer">
-                        <a href="#" onclick="getModalInfo($(this), '{{ comment.post|chat_space }}', '{{ comment.post|chat_space_type }}'); return false;" data-url='{% url "chat:profile" comment.user.email %}' class="btn btn-default btn-sm btn-raised pull-left">
+                        <a href="#" onclick="getModalInfo($(this), '{{ comment.post|chat_space }}', '{{ comment.post|chat_space_type }}'); return false;" data-url='{% url "chat:profile" comment.user.email %}' class="btn btn-default btn-raised pull-left btn-popover-mobile">
                             {% trans 'See Profile' %}
                         </a>
-                        <a href="#" onclick="getModalInfo($(this), '{{ comment.post|chat_space }}', '{{ comment.post|chat_space_type }}'); return false;" data-url='{% url "chat:talk" comment.user.email %}' class="btn btn-success btn-sm btn-raised pull-right">
+                        <a href="#" onclick="getModalInfo($(this), '{{ comment.post|chat_space }}', '{{ comment.post|chat_space_type }}'); return false;" data-url='{% url "chat:talk" comment.user.email %}' class="btn btn-success btn-raised pull-right btn-popover-mobile">
                             {% trans 'Send Message' %}
                         </a>
                     </div>
diff --git a/subjects/templates/subjects/view.html b/subjects/templates/subjects/view.html
index f27e8ef..4da6c80 100755
--- a/subjects/templates/subjects/view.html
+++ b/subjects/templates/subjects/view.html
@@ -99,18 +99,18 @@
 
                                     <br clear="all" />
 
-                                    <div class="col-md-3 col-sm-3 user-img">
+                                    <div class="col-md-3 col-sm-3 col-xs-3 user-img">
                                         <img src="{{ participant.image_url }}" class="img-responsive" />
                                     </div>
-                                    <div class="col-md-9 col-sm-9 user-info">
+                                    <div class="col-md-9 col-sm-9 col-xs-9 user-info">
                                         <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ participant }}</h4>
                                     </div>
                                 </div>
                                 <div class="popover-footer">
-                                    <a href="#" onclick="getModalInfo($(this), '{{ subject.id }}', 'subject'); return false;" data-url='{% url "chat:profile" participant.email %}' class="btn btn-default btn-sm btn-raised pull-left">
+                                    <a href="#" onclick="getModalInfo($(this), '{{ subject.id }}', 'subject'); return false;" data-url='{% url "chat:profile" participant.email %}' class="btn btn-default btn-raised pull-left btn-popover-mobile">
                                         {% trans 'See Profile' %}
                                     </a>
-                                    <a href="#" onclick="getModalInfo($(this), '{{ subject.id }}', 'subject'); return false;" data-url='{% url "chat:talk" participant.email %}' class="btn btn-success btn-sm btn-raised pull-right">
+                                    <a href="#" onclick="getModalInfo($(this), '{{ subject.id }}', 'subject'); return false;" data-url='{% url "chat:talk" participant.email %}' class="btn btn-success btn-raised pull-right btn-popover-mobile">
                                         {% trans 'Send Message' %}
                                     </a>
                                 </div>
@@ -148,6 +148,9 @@
 
             $('[data-toggle="popover"]').popover({
                 html: true,
+                placement: function () {
+                    return window.innerWidth <= 768 ? 'bottom' : 'left';
+                },
                 content: function () {
                     return $(this).parent().find(".popover").html();
                 }
--
libgit2 0.21.2