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