Commit 9f9e46f044ea8fd31051793c5ba808f762ea2117

Authored by Zambom
1 parent 70a42793

Adjusting popover mobile display

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