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 <anders@zulipchat.com>

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";

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

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

static/styles/media.scss

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

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

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

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

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

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%;
+    }
+}

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