From 0b8a2a6449c53d517469911aefc90b56a41cc394 Mon Sep 17 00:00:00 2001 From: trueskawka Date: Wed, 26 Oct 2016 00:13:39 -0400 Subject: [PATCH] css: Create a separate file for subscriptions CSS. Moves all subscriptions page CSS from zulip.css to a new file, subscriptions.css. --- static/styles/subscriptions.css | 384 ++++++++++++++++++++++++++++++++ static/styles/zulip.css | 384 +------------------------------- zproject/settings.py | 2 + 3 files changed, 389 insertions(+), 381 deletions(-) create mode 100644 static/styles/subscriptions.css diff --git a/static/styles/subscriptions.css b/static/styles/subscriptions.css new file mode 100644 index 0000000000..79c7b17387 --- /dev/null +++ b/static/styles/subscriptions.css @@ -0,0 +1,384 @@ +#subs_page_loading_indicator { + margin: 10px auto; +} + +.subscriber_list_loading_indicator { + margin: 10px auto; +} + +.subscription-email-hint-image { + float: right; + width: 80px; + padding-right: 60px; +} + +.subscription_header.collapsed { + background-color: inherit; +} + +.subscription_settings, +.subscription_header, +.subscription_header.active { + background-color: #fefefe; +} + +.color_swatch { + display: inline-block; + height: 18px; + width: 18px; + padding: 0; + margin: 0 0 0 10px; + vertical-align: middle; +} + +.subscriptions { + margin-top: 55px; + padding-left: 15px; +} + +#subscriptions_table .subscription_block { + padding-left: 0.5em; + vertical-align: middle; +} + +.subscription-info-container { + display: inline-block; + /* subtract out the width of the subscribe button and arrow. */ + width: calc(100% - 260px); + /* to center the container vertically. */ + margin-top: 13px; +} + +.subscription-setting-icon { + vertical-align: top; + display: inline-block; +} + +.subscription-info { + display: inline-block; + /* to provide space for the setting-icon. */ + max-width: calc(100% - 31px); + margin-top: 1px; + overflow: hidden; + word-wrap: normal; + white-space: nowrap; + text-overflow: ellipsis; +} + +.subscription-info .light { + font-weight: 300; +} + +#add_new_subscription { + text-align: left; +} + +#create_or_filter_stream_row > .subscription_table_elem { + text-align: left; +} + +#subscriptions-status { + position: fixed; + z-index: 999; + display: block; + left: 300px; + right: 300px; + margin: 0px auto; + opacity: 0.9 !important; + top: 55px; + max-width: 800px; +} + +#close-subscriptions-status { + position: absolute; + top: 8px; + cursor: pointer; + font-size: 17px; + right: 8px; +} + +.subscription_header { + min-height: 47px; +} + +.subscription-name-row { + display: inline-block; +} + +.subscription-name-row, +.subscription-description-row { + vertical-align: top; +} + +.subscription_header .subscription_lock { + font-size: 23px; + display: inline-block; + vertical-align: middle; + margin-left: 12px; + margin-right: 1px; +} + +.subscription_settings { + width: 100%; + position: relative; + top: -1px; +} + +.subscription_settings form { + text-align: center; +} + +.subscription_settings ul { + list-style-type: none; +} + +.subscription-type { + text-align: center; + padding: 5px; + width: 80%; + margin: auto; + font-weight: 300; +} + +.stream-email { + width: 80%; + margin: auto; + margin-top: 5px; + text-align: center; + padding: 5px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; +} + +.subscription-control-label { + display: inline-block; + vertical-align: middle; + line-height: 18px; + padding: 5px; +} + +.sp-preview { + width: 20px; + border: none; + box-shadow: 0px 0px 1px rgba(0,0,0,1); +} + +.sp-replacer { + margin-right: 12px; + border: none; + box-shadow: 0px 0px 2px rgba(0,0,0,0.8); +} + +.subscription-config { + width: 270px; + margin: auto; + margin-top: 25px; +} + +.stream-email-box, +.subscriber_list_settings, +.rename-stream { + margin: 20px 15px 20px 15px; +} + +.subscription_row { + position: relative; + border-top: 1px solid #ddd; +} + +.stream-email .email-address { + width: 90%; + display: block; + margin: auto; + white-space: -moz-pre-wrap !important; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-all; + white-space: normal; +} + +.sub_setting_control[type="checkbox"] { + margin: 0 30px 5px 20px; +} + +.muted-sub { + color: #A3A3A3; +} + +.mute-note { + font-size: 90%; + font-color: #525252; +} + +.hide-mute-note { + display: none; +} + +.sub_setting_control { + display: inline-block; + margin-right: 10px; +} + +.subscription_row:hover .preview-stream { + display: inline-block; +} + +.preview-stream { + display: none; + float: right; + padding: 3px 10px; + border: 1px solid #ccc; + margin: 9px 10px 0px 0px; + color: #333; +} + +.preview-stream:hover { + color: #333; + text-decoration: none; + background-color: #ebebeb; + border: 1px solid #adadad; +} + +.sub_unsub_button { + display: inline-block; + min-width: 140px; + float: right; + margin-top: 9px; + margin-right: 10px; +} + +.sub_arrow { + float: right; + line-height: 47px; + padding: 0 15px 0 0; +} + +#create_or_filter_stream_row td { + background-color: #f3f3f3; + border-color: #BBB; + border-bottom: 1px solid #BBB; +} + +#create_or_filter_stream_row input[type="text"] { + width: 220px; + margin: 5px 0 20px 38px; +} + +form#add_new_subscription { + display: inline; +} + +#create_stream_button { + min-width: 140px; + float: right; + margin-top: 9px; + /* margin-right: 38px will align with .sub_unsub_button + 10px will align with the right edge of #subscriptions_table */ + margin-right: 38px; +} + +#stream_name_error { + display: none; + margin-left: 2px; + color: #FF0000; +} + +.sub_settings_title { + line-height: 30px; + margin: 10px 0; + font-weight: 300; + font-size: 16px; +} + +.new-stream-name, +.stream-rename-button { + margin-top: 10px; +} + +.settings_committed { + margin: 10px; +} + +.subscriber-list-box { + text-align: center; +} + +.subscriber_list_container { + margin-top: 10px; + display: inline-block; + margin: auto; + max-height: 300px; + overflow: auto; + text-align: left; +} + +.subscriber-list { + width: auto; + margin: auto; + margin-bottom: 20px; + background: #efefef; + border-radius: 6px; +} + +.subscriber-list tr:nth-child(even) { + background: #fafafa; +} + +.subscriber-name, +.subscriber-email { + padding: 5px; +} + +.subscriber-name { + padding-left: 8px; +} + +.subscriber-email { + margin-left: 20px; + padding-right: 8px; +} + +.subscriber_list_add { + margin: auto; + text-align: center; +} + +.add-subscriber-button, +.stream-rename-button { + margin-left: 5px; +} + +.remove-subscriber-form { + margin: 0px 0px 0px 0px; +} + +#subscription-status { + width: 200px; + position: absolute; + left: 50%; + margin-left: -100px; + bottom: 30px; + text-align: center; + border-radius: 2px; +} + +#subscriptions h1 { + font-size: 25px; + font-weight: 300; + padding-top: 40px; +} + +#subscriptions .streams-icon { + margin-right: 10px; + font-size: 20px; +} + +.change-stream-privacy { + width: 100%; + text-align: center; +} + +.change-stream-privacy-feedback { + display: none; +} diff --git a/static/styles/zulip.css b/static/styles/zulip.css index cf239b7f83..dbacd03f83 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -2552,14 +2552,6 @@ div.floating_recipient { margin: 10px auto; } -#subs_page_loading_indicator { - margin: 10px auto; -} - -.subscriber_list_loading_indicator { - margin: 10px auto; -} - .table-striped thead th { background-color: #444; color: white; @@ -2570,42 +2562,11 @@ div.floating_recipient { table-layout: fixed; } -.subscription-email-hint-image { - float: right; - width: 80px; - padding-right: 60px; -} - -.subscription_header.collapsed { - background-color: inherit; -} - -.subscription_settings, -.subscription_header, -.subscription_header.active { - background-color: #fefefe; -} - -.color_swatch { - display: inline-block; - height: 18px; - width: 18px; - padding: 0; - margin: 0 0 0 10px; - vertical-align: middle; -} - -.administration, -.subscriptions { +.administration { margin-top: 55px; padding-left: 15px; } -#subscriptions_table .subscription_block { - padding-left: 0.5em; - vertical-align: middle; -} - #stream_filters .subscription_block { padding-bottom: 3px; line-height: 12px; @@ -2618,62 +2579,6 @@ div.floating_recipient { margin-right: 38px; } -.subscription-info-container { - display: inline-block; - /* subtract out the width of the subscribe button and arrow. */ - width: calc(100% - 260px); - /* to center the container vertically. */ - margin-top: 13px; -} - -.subscription-setting-icon { - vertical-align: top; - display: inline-block; -} - -.subscription-info { - display: inline-block; - /* to provide space for the setting-icon. */ - max-width: calc(100% - 31px); - margin-top: 1px; - overflow: hidden; - word-wrap: normal; - white-space: nowrap; - text-overflow: ellipsis; -} - -.subscription-info .light { - font-weight: 300; -} - -#add_new_subscription { - text-align: left; -} - -#create_or_filter_stream_row > .subscription_table_elem { - text-align: left; -} - -#subscriptions-status { - position: fixed; - z-index: 999; - display: block; - left: 300px; - right: 300px; - margin: 0px auto; - opacity: 0.9 !important; - top: 55px; - max-width: 800px; -} - -#close-subscriptions-status { - position: absolute; - top: 8px; - cursor: pointer; - font-size: 17px; - right: 8px; -} - .subject-name { display: block; line-height: 1.3em; @@ -2690,112 +2595,6 @@ div.floating_recipient { overflow: hidden; } -.subscription_header { - min-height: 47px; -} - -.subscription-name-row { - display: inline-block; -} - -.subscription-name-row, -.subscription-description-row { - vertical-align: top; -} - -.subscription_header .subscription_lock { - font-size: 23px; - display: inline-block; - vertical-align: middle; - margin-left: 12px; - margin-right: 1px; -} - -.subscription_settings { - width: 100%; - position: relative; - top: -1px; -} - -.subscription_settings form { - text-align: center; -} - -.subscription_settings ul { - list-style-type: none; -} - -.subscription-type { - text-align: center; - padding: 5px; - width: 80%; - margin: auto; - font-weight: 300; -} - -.stream-email { - width: 80%; - margin: auto; - margin-top: 5px; - text-align: center; - padding: 5px; - font-family: Monaco, Menlo, Consolas, "Courier New", monospace; -} - - -.subscription-control-label { - display: inline-block; - vertical-align: middle; - line-height: 18px; - padding: 5px; -} - -.sp-preview { - width: 20px; - border: none; - box-shadow: 0px 0px 1px rgba(0,0,0,1); -} - -.sp-replacer { - margin-right: 12px; - border: none; - box-shadow: 0px 0px 2px rgba(0,0,0,0.8); -} - -.subscription-config { - width: 270px; - margin: auto; - margin-top: 25px; -} - -.stream-email-box, -.subscriber_list_settings, -.rename-stream { - margin: 20px 15px 20px 15px; -} - -.subscription_row { - position: relative; - border-top: 1px solid #ddd; -} - -.stream-email .email-address { - width: 90%; - display: block; - margin: auto; - white-space: -moz-pre-wrap !important; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; - word-break: break-all; - white-space: normal; -} - -.sub_setting_control[type="checkbox"] { - margin: 0 30px 5px 20px; -} - #user-checkboxes { margin-top: 10px; } @@ -2809,19 +2608,6 @@ div.floating_recipient { float: none; } -.muted-sub { - color: #A3A3A3; -} - -.mute-note { - font-size: 90%; - font-color: #525252; -} - -.hide-mute-note { - display: none; -} - .streams_popover .sp-container { background: white; cursor: pointer; @@ -2841,39 +2627,6 @@ div.floating_recipient { margin-right: 10px; } -.sub_setting_control { - display: inline-block; - margin-right: 10px; -} - -.subscription_row:hover .preview-stream { - display: inline-block; -} - -.preview-stream { - display: none; - float: right; - padding: 3px 10px; - border: 1px solid #ccc; - margin: 9px 10px 0px 0px; - color: #333; -} - -.preview-stream:hover { - color: #333; - text-decoration: none; - background-color: #ebebeb; - border: 1px solid #adadad; -} - -.sub_unsub_button { - display: inline-block; - min-width: 140px; - float: right; - margin-top: 9px; - margin-right: 10px; -} - .streams_popover .popover_sub_unsub_button { margin-top: 0px; float: none; @@ -2917,112 +2670,6 @@ button.topic_edit_cancel { margin-top: -1px; } -.sub_arrow { - float: right; - line-height: 47px; - padding: 0 15px 0 0; -} - -#create_or_filter_stream_row td { - background-color: #f3f3f3; - border-color: #BBB; - border-bottom: 1px solid #BBB; -} - -#create_or_filter_stream_row input[type="text"] { - width: 220px; - margin: 5px 0 20px 38px; -} - -form#add_new_subscription { - display: inline; -} - -#create_stream_button { - min-width: 140px; - float: right; - margin-top: 9px; - /* margin-right: 38px will align with .sub_unsub_button - 10px will align with the right edge of #subscriptions_table */ - margin-right: 38px; -} - -#stream_name_error { - display: none; - margin-left: 2px; - color: #FF0000; -} - -.sub_settings_title { - line-height: 30px; - margin: 10px 0; - font-weight: 300; - font-size: 16px; -} - -.new-stream-name, -.stream-rename-button { - margin-top: 10px; -} - -.settings_committed { - margin: 10px; -} - -.subscriber-list-box { - text-align: center; -} - -.subscriber_list_container { - margin-top: 10px; - display: inline-block; - margin: auto; - max-height: 300px; - overflow: auto; - text-align: left; -} - -.subscriber-list { - width: auto; - margin: auto; - margin-bottom: 20px; - background: #efefef; - border-radius: 6px; -} - -.subscriber-list tr:nth-child(even) { - background: #fafafa; -} - - -.subscriber-name, -.subscriber-email { - padding: 5px; -} - -.subscriber-name { - padding-left: 8px; -} - -.subscriber-email { - margin-left: 20px; - padding-right: 8px; -} - -.subscriber_list_add { - margin: auto; - text-align: center; -} - -.add-subscriber-button, -.stream-rename-button { - margin-left: 5px; -} - -.remove-subscriber-form { - margin: 0px 0px 0px 0px; -} - .modal { overflow: hidden; margin-top: 0; @@ -3079,16 +2726,6 @@ form#add_new_subscription { text-align: center; } -#subscription-status { - width: 200px; - position: absolute; - left: 50%; - margin-left: -100px; - bottom: 30px; - text-align: center; - border-radius: 2px; -} - #empty_narrow_private_message p, #empty_narrow_message p { text-align: center; @@ -3490,19 +3127,13 @@ li.expanded_private_message { } #administration h1, -#settings h1, -#subscriptions h1 { +#settings h1 { font-size: 25px; font-weight: 300; } -#subscriptions h1 { - padding-top: 40px; -} - #administration .administration-icon, -#settings .settings-icon, -#subscriptions .streams-icon { +#settings .settings-icon { margin-right: 10px; font-size: 20px; } @@ -3696,15 +3327,6 @@ li.show-more-private-messages a { display: none; } -.change-stream-privacy { - width: 100%; - text-align: center; -} - -.change-stream-privacy-feedback { - display: none; -} - .user-list-filter , .add-user-list-filter { width: 80%; diff --git a/zproject/settings.py b/zproject/settings.py index 88a8014fa7..1b32cb3dcd 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -652,6 +652,7 @@ PIPELINE = { 'styles/zulip.css', 'styles/media.css', 'styles/settings.css', + 'styles/subscriptions.css', 'styles/overlay.css', 'styles/pygments.css', 'styles/thirdparty-fonts.css', @@ -668,6 +669,7 @@ PIPELINE = { 'styles/zulip.css', 'styles/media.css', 'styles/settings.css', + 'styles/subscriptions.css', 'styles/overlay.css', 'styles/pygments.css', 'styles/thirdparty-fonts.css',