Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

streams: Make stream settings inputs responsive to narrow screens. 

This makes the inputs and buttons responsive to narrow screens by
gracefully resizing and falling in place.

Fixes: #7712.
This commit is contained in:
Brock Whittaker 2017-12-13 12:37:40 -08:00 committed by Steve Howell
parent bb54aab7c0
commit bfda5bbf2b
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/styles/subscriptions.css
View File

@ -296,6 +296,10 @@ form#add_new_subscription {
-webkit-overflow-scrolling: touch;
}
.subscriber_list_container .form_inline input {
vertical-align: top;
}
.subscriber-list {
width: 100%;
margin: auto;
@ -798,6 +802,10 @@ form#add_new_subscription {
margin-top: -5px;
}
#subscription_overlay .stream-header .button-group {
float: right;
}
#subscription_overlay .stream-header .subscribe-button.unsubscribed {
color: hsl(156, 39%, 54%);
border-color: hsl(156, 39%, 77%);
@ -975,6 +983,28 @@ form#add_new_subscription {
.search-container {
text-align: center;
}
.subscriber_list_settings input {
float: left;
margin: 0px 5px 0px 0px;
width: calc(50% - 45px);
}
#subscription_overlay .stream-header .button-group {
float: none;
display: block;
clear: both;
margin-top: 10px;
}
#subscription_overlay .stream-header .button-group > * {
float: none !important;
vertical-align: top;
}
#subscription_overlay .stream-header .subscribe-button {
margin-top: -7px;
}
}
@media (max-width: 700px) {
@ -1041,6 +1071,15 @@ form#add_new_subscription {
}
}
@media (max-width: 367px) {
#subscription_overlay .subscription_settings .button-group {
margin-top: 10px;
float: none;
display: inline-block;
vertical-align: top;
}
}
#stream-creation #invites-warning-modal .modal-footer {
position: static;
}

8
static/templates/subscription_settings.handlebars
View File

@ -16,9 +16,11 @@
<span class="checkmark" data-finish-editing=".stream-name-editable">✓</span>
{{/if}}
</div>
<button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" title="{{t 'Toggle subscription'}} (S)">
{{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
<a href="{{preview_url}}" class="button small rounded" id="preview-stream-button" role="button" title="{{t 'View stream'}} (V)">{{t "View stream"}}</a>
<div class="button-group">
<button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" title="{{t 'Toggle subscription'}} (S)">
{{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
<a href="{{preview_url}}" class="button small rounded" id="preview-stream-button" role="button" title="{{t 'View stream'}} (V)">{{t "View stream"}}</a>
</div>
</div>
<div class="stream-description" data-no-description="{{t 'No description.' }}">
<span class="stream-description-editable editable-section">{{{rendered_description}}}</span>