From 27fac76da8813254fdc3fa8e3ff214a895fad907 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Wed, 23 Oct 2019 20:38:18 -0700 Subject: [PATCH] styles: Move media queries into the files they override. Webpack code splitting will make the inclusion order of CSS files less obvious, and we need to guarantee that these rules follow the rules they override. Signed-off-by: Anders Kaseorg --- static/js/bundles/app.js | 1 - static/styles/app_components.scss | 9 + static/styles/compose.scss | 39 +++ static/styles/media.scss | 363 ------------------------ static/styles/right-sidebar.scss | 35 +++ static/styles/settings.scss | 14 + static/styles/subscriptions.scss | 6 + static/styles/typing_notifications.scss | 14 + static/styles/zulip.scss | 277 ++++++++++++++++++ tools/webpack.assets.json | 1 - 10 files changed, 394 insertions(+), 365 deletions(-) delete mode 100644 static/styles/media.scss diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index 7a2b962c72..b3afa027e6 100644 --- a/static/js/bundles/app.js +++ b/static/js/bundles/app.js @@ -224,7 +224,6 @@ import "../../styles/left-sidebar.scss"; import "../../styles/right-sidebar.scss"; import "../../styles/lightbox.scss"; import "../../styles/popovers.scss"; -import "../../styles/media.scss"; import "../../styles/typing_notifications.scss"; import "../../styles/hotspots.scss"; import "../../styles/night_mode.scss"; diff --git a/static/styles/app_components.scss b/static/styles/app_components.scss index 20f279f5e3..58be086faf 100644 --- a/static/styles/app_components.scss +++ b/static/styles/app_components.scss @@ -372,3 +372,12 @@ transform: rotate(45deg); } } + +@media (max-width: 767px) { + /* Override Bootstrap's responsive grid to display input at full width */ + .input-append .stream-list-filter { + /* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */ + width: calc(100% - 34px); + margin-left: 10px; + } +} diff --git a/static/styles/compose.scss b/static/styles/compose.scss index 43a640ae1d..ab40613a2f 100644 --- a/static/styles/compose.scss +++ b/static/styles/compose.scss @@ -513,3 +513,42 @@ a#undo_markdown_preview { .compose_mobile_private_button i { margin-right: 4px; } + +/* This max-width must be synced with message_viewport.is_narrow */ +@media (max-width: 1165px) { + .compose-content { + margin-right: 7px; + } +} + +@media (max-width: 775px) { + .compose-content { + margin-right: 7px; + margin-left: 7px; + } +} + +@media (max-width: 500px) { + .compose_stream_button, + .compose_private_button, + .compose_reply_button { + padding: 5px 10px 5px 10px; + } + + textarea.new_message_textarea { + height: 30px !important; + min-height: 30px !important; + } +} + +@media (max-width: 370px) { + #stream_message_recipient_topic.recipient_box { + width: calc(100% - 175px); + min-width: 95px; + } + + .compose-content { + margin-right: 5px; + margin-left: 5px; + } +} diff --git a/static/styles/media.scss b/static/styles/media.scss deleted file mode 100644 index 826ef895fe..0000000000 --- a/static/styles/media.scss +++ /dev/null @@ -1,363 +0,0 @@ -/* This max-width must be synced with message_viewport.is_narrow */ -@media (max-width: 1165px) { - .app-main, - .header-main { - min-width: 750px; - } - - .column-right { - display: none; - } - - #sidebar-keyboard-shortcuts { - /* This is supposed to fix this appearing improperly in narrow - windows. It's likely the wrong solution; a proper fix likely - involves replacing `position: fixed` in #keyboard-icon so that - it still appears in the right sidebar overlay. */ - display: none; - } - - .column-right.expanded { - display: block; - position: absolute; - float: none; - right: 15px; - top: 0px; - } - - .column-right.expanded .right-sidebar { - background-color: hsla(0, 0%, 100%, 1.0); - box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1); - border-left: 1px solid hsl(0, 0%, 87%); - margin-top: 40px; - padding: 10px 15px 0px 15px; - height: 100%; - right: 0px; - } - - .header-main .column-right { - display: inline-block; - width: 30px; - } - - #top_navbar.rightside-userlist .navbar-search { - margin-right: 100px; - } - - #top_navbar.rightside-userlist #navbar-buttons { - margin-right: 41px; - } - - .navbar-search { - margin-right: 60px; - } - - #userlist-toggle { - display: block; - } - - .compose-content { - margin-right: 7px; - } - - #typing_notifications { - margin-right: 7px; - } - - .nav .dropdown-menu { - min-width: 180px; - box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); - } - - .nav .dropdown-menu::after { - right: 10px; - } - - .column-middle { - margin-right: 7px; - } -} - -@media (max-width: 775px) { - body { - padding: 0px; - } - - #user_search_section .user-list-filter { - /* input should be 100% - 6px padding x2 - 1px border x2. */ - width: calc(100% - 12px - 2px); - } - - .column-left { - display: none; - } - - .column-left.expanded { - display: block; - position: absolute; - float: none; - left: 0px; - top: 0px; - } - - .column-left.expanded .left-sidebar { - background-color: hsla(0, 0%, 100%, 1.0); - box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1); - border-right: 1px solid hsl(0, 0%, 87%); - margin-top: 40px; - padding-top: 10px; - height: 100%; - padding-left: 10px; - width: 250px; - } - - body, - html, - .app-main, - .header-main { - min-width: 350px; - } - - .column-middle, - .app-main .column-middle { - margin-left: 7px; - margin-right: 7px; - } - - .header-main .column-middle { - margin-left: 0px; - } - - .column-middle-inner { - margin-left: 0px; - margin-right: 15px; - } - - .app-main .column-middle .column-middle-inner { - margin-right: 0px; - } - - .skinny-user-gravatar { - position: absolute; - top: 0px; - } - - #streamlist-toggle { - display: block; - } - - .compose-content { - margin-right: 7px; - margin-left: 7px; - } - - #typing_notifications { - margin-right: 7px; - margin-left: 7px; - } - - #searchbox, - #searchbox_legacy { - margin-left: 42px; - } - - #top_navbar.rightside-userlist .navbar-search { - margin-right: 127px; - } - - .navbar-search { - margin-right: 81px; - } -} - -@media (max-width: 767px) { - /* Override Bootstrap's responsive grid to display input at full width */ - .input-append .stream-list-filter { - /* Input width = 100% - 10px margin x2 - 6px padding x2 - 1px border x2. */ - width: calc(100% - 34px); - margin-left: 10px; - } -} - -@media (max-width: 500px) { - .column-right.expanded .right-sidebar, - .column-left.expanded .left-sidebar { - margin-top: 31px; - } - - .column-left.expanded .left-sidebar { - padding: 0px; - } - - .column-left.expanded .left-sidebar #streams_header { - padding-right: 10px; - } - - .column-left.expanded .narrows_panel { - margin-top: 10px; - } - - .compose_stream_button, - .compose_private_button, - .compose_reply_button { - padding: 5px 10px 5px 10px; - } - - #streamlist-toggle, - #userlist-toggle, - #navbar-buttons, - .navbar-search, - #tab_bar, - #searchbox, - #searchbox_legacy, - #tab_list li, - #tab_list, - .header { - height: 30px; - line-height: 30px; - } - - #search_query { - height: 30px !important; - vertical-align: text-bottom; - } - - #streamlist-toggle-button, - #userlist-toggle-button { - height: 30px; - padding-top: 0px; - padding-bottom: 0px; - } - - #navbar-buttons ul.nav .dropdown-toggle, - #navbar-buttons ul.nav li.active .dropdown-toggle { - top: -5px; - } - - #top_navbar.rightside-userlist .navbar-search { - margin-right: 115px; - } - - #searchbox, - #searchbox_legacy { - .input-append .fa-search { - top: 5px; - } - - .search_button, - .search_button[disabled]:hover { - top: 2px; - } - } - - #tab_bar_underpadding { - top: 30px; - } - - .messagebox-content { - padding-right: 15px; - } - - .message_time { - right: auto; - left: -3px; - } - - .message_controls { - width: 56px; - right: -10px; - top: 0px; - } - - .include-sender .message_controls { - background: none !important; - padding: none !important; - border: none !important; - top: -3px; - } - - .message_time { - left: auto; - right: -5px; - } - - .message_controls { - right: 40px; - } - - .sender_name { - max-width: 250px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - line-height: 15px; - } - - textarea.new_message_textarea { - height: 30px !important; - min-height: 30px !important; - } - - #tab_bar_underpadding { - height: 10px; - } - - #floating_recipient_bar { - top: 40px; - } - - .message_content { - padding-right: 50px; - } -} - -@media (max-width: 370px) { - #stream_message_recipient_topic.recipient_box { - width: calc(100% - 175px); - min-width: 95px; - } - - .compose-content { - margin-right: 5px; - margin-left: 5px; - } -} - -@media (max-width: 350px) { - html { - overflow-x: hidden; - } - - .stream_row .description { - display: none; - } - - body, - html, - .app-main, - .header-main { - min-width: 320px; - } -} - -@media only screen and (min-width: 300px) and (max-width: 700px) { - #feedback_container { - width: calc(90% - 30px); - left: 5%; - top: 5%; - } -} - -@media only screen and (min-width: 700px) and (max-width: 875px) { - .bots_list .bot-information-box { - width: calc(100% - 10px); - max-height: unset; - } -} - -@media only screen and (max-width: 625px) { - .bots_list .bot-information-box { - width: calc(100% - 10px); - max-height: unset; - } -} diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.scss index be76e41f3d..17f703b011 100644 --- a/static/styles/right-sidebar.scss +++ b/static/styles/right-sidebar.scss @@ -244,3 +244,38 @@ #sidebar-keyboard-shortcuts { color: inherit; } + +/* This max-width must be synced with message_viewport.is_narrow */ +@media (max-width: 1165px) { + #sidebar-keyboard-shortcuts { + /* This is supposed to fix this appearing improperly in narrow + windows. It's likely the wrong solution; a proper fix likely + involves replacing `position: fixed` in #keyboard-icon so that + it still appears in the right sidebar overlay. */ + display: none; + } + + #userlist-toggle { + display: block; + } +} + +@media (max-width: 775px) { + #user_search_section .user-list-filter { + /* input should be 100% - 6px padding x2 - 1px border x2. */ + width: calc(100% - 12px - 2px); + } +} + +@media (max-width: 500px) { + #userlist-toggle { + height: 30px; + line-height: 30px; + } + + #userlist-toggle-button { + height: 30px; + padding-top: 0px; + padding-bottom: 0px; + } +} diff --git a/static/styles/settings.scss b/static/styles/settings.scss index 8928c33c06..f0bf2b6d04 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -1928,3 +1928,17 @@ input[type=text]#settings_search { .admin_exports_table { margin: 20px; } + +@media only screen and (min-width: 700px) and (max-width: 875px) { + .bots_list .bot-information-box { + width: calc(100% - 10px); + max-height: unset; + } +} + +@media only screen and (max-width: 625px) { + .bots_list .bot-information-box { + width: calc(100% - 10px); + max-height: unset; + } +} diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.scss index 7e7aed359e..649517af08 100644 --- a/static/styles/subscriptions.scss +++ b/static/styles/subscriptions.scss @@ -1104,3 +1104,9 @@ ul.grey-box { #stream-creation #invites-warning-modal .modal-footer { position: static; } + +@media (max-width: 350px) { + .stream_row .description { + display: none; + } +} diff --git a/static/styles/typing_notifications.scss b/static/styles/typing_notifications.scss index 650c0d9e84..e6fccf2d00 100644 --- a/static/styles/typing_notifications.scss +++ b/static/styles/typing_notifications.scss @@ -9,3 +9,17 @@ list-style: none; margin: 0; } + +/* This max-width must be synced with message_viewport.is_narrow */ +@media (max-width: 1165px) { + #typing_notifications { + margin-right: 7px; + } +} + +@media (max-width: 775px) { + #typing_notifications { + margin-right: 7px; + margin-left: 7px; + } +} diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index b0055c145a..c548aeb349 100644 --- a/static/styles/zulip.scss +++ b/static/styles/zulip.scss @@ -2467,3 +2467,280 @@ div.topic_edit_spinner .loading_indicator_spinner { .flatpickr-months .numInputWrapper span { display: none; } + +/* This max-width must be synced with message_viewport.is_narrow */ +@media (max-width: 1165px) { + .app-main, + .header-main { + min-width: 750px; + } + + .column-right { + display: none; + } + + .column-right.expanded { + display: block; + position: absolute; + float: none; + right: 15px; + top: 0px; + } + + .column-right.expanded .right-sidebar { + background-color: hsla(0, 0%, 100%, 1.0); + box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1); + border-left: 1px solid hsl(0, 0%, 87%); + margin-top: 40px; + padding: 10px 15px 0px 15px; + height: 100%; + right: 0px; + } + + .header-main .column-right { + display: inline-block; + width: 30px; + } + + #top_navbar.rightside-userlist .navbar-search { + margin-right: 100px; + } + + #top_navbar.rightside-userlist #navbar-buttons { + margin-right: 41px; + } + + .navbar-search { + margin-right: 60px; + } + + .nav .dropdown-menu { + min-width: 180px; + box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); + } + + .nav .dropdown-menu::after { + right: 10px; + } + + .column-middle { + margin-right: 7px; + } +} + +@media (max-width: 775px) { + body { + padding: 0px; + } + + .column-left { + display: none; + } + + .column-left.expanded { + display: block; + position: absolute; + float: none; + left: 0px; + top: 0px; + } + + .column-left.expanded .left-sidebar { + background-color: hsla(0, 0%, 100%, 1.0); + box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1); + border-right: 1px solid hsl(0, 0%, 87%); + margin-top: 40px; + padding-top: 10px; + height: 100%; + padding-left: 10px; + width: 250px; + } + + body, + html, + .app-main, + .header-main { + min-width: 350px; + } + + .column-middle, + .app-main .column-middle { + margin-left: 7px; + margin-right: 7px; + } + + .header-main .column-middle { + margin-left: 0px; + } + + .column-middle-inner { + margin-left: 0px; + margin-right: 15px; + } + + .app-main .column-middle .column-middle-inner { + margin-right: 0px; + } + + .skinny-user-gravatar { + position: absolute; + top: 0px; + } + + #streamlist-toggle { + display: block; + } + + #searchbox, + #searchbox_legacy { + margin-left: 42px; + } + + #top_navbar.rightside-userlist .navbar-search { + margin-right: 127px; + } + + .navbar-search { + margin-right: 81px; + } +} + +@media (max-width: 500px) { + .column-right.expanded .right-sidebar, + .column-left.expanded .left-sidebar { + margin-top: 31px; + } + + .column-left.expanded .left-sidebar { + padding: 0px; + } + + .column-left.expanded .left-sidebar #streams_header { + padding-right: 10px; + } + + .column-left.expanded .narrows_panel { + margin-top: 10px; + } + + #streamlist-toggle, + #navbar-buttons, + .navbar-search, + #tab_bar, + #searchbox, + #searchbox_legacy, + #tab_list li, + #tab_list, + .header { + height: 30px; + line-height: 30px; + } + + #search_query { + height: 30px !important; + vertical-align: text-bottom; + } + + #streamlist-toggle-button { + height: 30px; + padding-top: 0px; + padding-bottom: 0px; + } + + #navbar-buttons ul.nav .dropdown-toggle, + #navbar-buttons ul.nav li.active .dropdown-toggle { + top: -5px; + } + + #top_navbar.rightside-userlist .navbar-search { + margin-right: 115px; + } + + #searchbox, + #searchbox_legacy { + .input-append .fa-search { + top: 5px; + } + + .search_button, + .search_button[disabled]:hover { + top: 2px; + } + } + + #tab_bar_underpadding { + top: 30px; + } + + .messagebox-content { + padding-right: 15px; + } + + .message_time { + right: auto; + left: -3px; + } + + .message_controls { + width: 56px; + right: -10px; + top: 0px; + } + + .include-sender .message_controls { + background: none !important; + padding: none !important; + border: none !important; + top: -3px; + } + + .message_time { + left: auto; + right: -5px; + } + + .message_controls { + right: 40px; + } + + .sender_name { + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 15px; + } + + #tab_bar_underpadding { + height: 10px; + } + + #floating_recipient_bar { + top: 40px; + } + + .message_content { + padding-right: 50px; + } +} + +@media (max-width: 350px) { + html { + overflow-x: hidden; + } + + body, + html, + .app-main, + .header-main { + min-width: 320px; + } +} + +@media only screen and (min-width: 300px) and (max-width: 700px) { + #feedback_container { + width: calc(90% - 30px); + left: 5%; + top: 5%; + } +} diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json index 5aac1c8db0..febebb8f67 100644 --- a/tools/webpack.assets.json +++ b/tools/webpack.assets.json @@ -90,7 +90,6 @@ "katex/dist/katex.css", "./static/styles/rendered_markdown.scss", "./static/styles/zulip.scss", - "./static/styles/media.scss", "./static/styles/portico/archive.scss" ] }