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