Commit 9f9e46f044ea8fd31051793c5ba808f762ea2117
1 parent
70a42793
Exists in
master
and in
2 other branches
Adjusting popover mobile display
Showing
5 changed files
with
27 additions
and
12 deletions
Show diff stats
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 | } | ... | ... |