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,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 | } |