Commit 9f9e46f044ea8fd31051793c5ba808f762ea2117

Authored by Zambom
1 parent 70a42793

Adjusting popover mobile display

amadeus/static/css/base/amadeus_responsive.css
@@ -100,6 +100,11 @@ @@ -100,6 +100,11 @@
100 padding: 5px 20px; 100 padding: 5px 20px;
101 font-size: 12px; 101 font-size: 12px;
102 } 102 }
  103 +
  104 + .btn-popover-mobile {
  105 + padding: 4px 15px;
  106 + font-size: 10px;
  107 + }
103 /* End Buttons */ 108 /* End Buttons */
104 109
105 .subject-period { 110 .subject-period {
@@ -513,6 +518,10 @@ @@ -513,6 +518,10 @@
513 } 518 }
514 519
515 @media(min-width: 769px) { 520 @media(min-width: 769px) {
  521 + .btn-popover-mobile {
  522 + padding: 5px 20px;
  523 + font-size: 12px;
  524 + }
516 525
517 #profile-menu{ 526 #profile-menu{
518 float:right; 527 float:right;
amadeus/static/js/mural.js
@@ -31,6 +31,9 @@ $(function () { @@ -31,6 +31,9 @@ $(function () {
31 function setUserDataPopover() { 31 function setUserDataPopover() {
32 $('[data-toggle="popover"]').popover({ 32 $('[data-toggle="popover"]').popover({
33 html: true, 33 html: true,
  34 + placement: function () {
  35 + return window.innerWidth <= 768 ? 'bottom' : 'right';
  36 + },
34 content: function () { 37 content: function () {
35 return $(this).parent().find(".popover").html(); 38 return $(this).parent().find(".popover").html();
36 } 39 }
mural/templates/mural/_view.html
@@ -18,18 +18,18 @@ @@ -18,18 +18,18 @@
18 18
19 <br clear="all" /> 19 <br clear="all" />
20 20
21 - <div class="col-md-3 col-sm-3 user-img"> 21 + <div class="col-md-3 col-sm-3 col-xs-3 user-img">
22 <img src="{{ post.user.image_url }}" class="img-responsive" /> 22 <img src="{{ post.user.image_url }}" class="img-responsive" />
23 </div> 23 </div>
24 - <div class="col-md-9 col-sm-9 user-info"> 24 + <div class="col-md-9 col-sm-9 col-xs-9 user-info">
25 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ post.user }}</h4> 25 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ post.user }}</h4>
26 </div> 26 </div>
27 </div> 27 </div>
28 <div class="popover-footer"> 28 <div class="popover-footer">
29 - <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"> 29 + <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">
30 {% trans 'See Profile' %} 30 {% trans 'See Profile' %}
31 </a> 31 </a>
32 - <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"> 32 + <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">
33 {% trans 'Send Message' %} 33 {% trans 'Send Message' %}
34 </a> 34 </a>
35 </div> 35 </div>
mural/templates/mural/_view_comment.html
@@ -19,18 +19,18 @@ @@ -19,18 +19,18 @@
19 19
20 <br clear="all" /> 20 <br clear="all" />
21 21
22 - <div class="col-md-3 col-sm-3 user-img"> 22 + <div class="col-md-3 col-sm-3 col-xs-3 user-img">
23 <img src="{{ comment.user.image_url }}" class="img-responsive" /> 23 <img src="{{ comment.user.image_url }}" class="img-responsive" />
24 </div> 24 </div>
25 - <div class="col-md-9 col-sm-9 user-info"> 25 + <div class="col-md-9 col-sm-9 col-xs-9 user-info">
26 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ comment.user }}</h4> 26 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ comment.user }}</h4>
27 </div> 27 </div>
28 </div> 28 </div>
29 <div class="popover-footer"> 29 <div class="popover-footer">
30 - <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"> 30 + <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">
31 {% trans 'See Profile' %} 31 {% trans 'See Profile' %}
32 </a> 32 </a>
33 - <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"> 33 + <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">
34 {% trans 'Send Message' %} 34 {% trans 'Send Message' %}
35 </a> 35 </a>
36 </div> 36 </div>
subjects/templates/subjects/view.html
@@ -99,18 +99,18 @@ @@ -99,18 +99,18 @@
99 99
100 <br clear="all" /> 100 <br clear="all" />
101 101
102 - <div class="col-md-3 col-sm-3 user-img"> 102 + <div class="col-md-3 col-sm-3 col-xs-3 user-img">
103 <img src="{{ participant.image_url }}" class="img-responsive" /> 103 <img src="{{ participant.image_url }}" class="img-responsive" />
104 </div> 104 </div>
105 - <div class="col-md-9 col-sm-9 user-info"> 105 + <div class="col-md-9 col-sm-9 col-xs-9 user-info">
106 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ participant }}</h4> 106 <h4><a class="status {{ status }}" data-toggle="tooltip" title="{{ status|status_text }}"></a> {{ participant }}</h4>
107 </div> 107 </div>
108 </div> 108 </div>
109 <div class="popover-footer"> 109 <div class="popover-footer">
110 - <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"> 110 + <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">
111 {% trans 'See Profile' %} 111 {% trans 'See Profile' %}
112 </a> 112 </a>
113 - <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"> 113 + <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">
114 {% trans 'Send Message' %} 114 {% trans 'Send Message' %}
115 </a> 115 </a>
116 </div> 116 </div>
@@ -148,6 +148,9 @@ @@ -148,6 +148,9 @@
148 148
149 $('[data-toggle="popover"]').popover({ 149 $('[data-toggle="popover"]').popover({
150 html: true, 150 html: true,
  151 + placement: function () {
  152 + return window.innerWidth <= 768 ? 'bottom' : 'left';
  153 + },
151 content: function () { 154 content: function () {
152 return $(this).parent().find(".popover").html(); 155 return $(this).parent().find(".popover").html();
153 } 156 }