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

css: Enforce one selector per line. 

While it's sometimes nice to put a few selectors on the same line,
it is generally better to have a consistent way of formatting our
selectors, and most of our code up until now lists them vertically.
This change fixes the linter to enforce one selector per line, and
it cleans up the places in the CSS where we had multiple selectors
on the same line.

The advantages of one-per-line are as followers:
    * cleaner diffs
    * easier to see when multiple areas of the app may have the
      same format
    * less likely to go over 80 cols
    * makes it more clear where we have deep nesting in the
      individual selectors
    * makes it easier for our linting tools to enforce
      whitespace violations

This also fixed an old bug where we had ".landing_page h2, h4", which
sets "h4" styles outside of the landing page.
This commit is contained in:
Steve Howell 2017-03-26 13:24:35 -07:00 committed by showell
parent 3d76088f59
commit c0a6038a95
7 changed files with 70 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_static/theme_overrides.css vendored
View File

@ -1,5 +1,6 @@
/* override table width restrictions */
.wy-table-responsive table td, .wy-table-responsive table th {
.wy-table-responsive table td,
.wy-table-responsive table th {
/* !important prevents the common CSS stylesheets from
overriding this as on RTD they are loaded after this stylesheet */
white-space: normal !important;

15
static/styles/landing-page.css
View File

@ -219,7 +219,9 @@ nav ul li.active::after {
/* -- generic styles -- */
h1, h2, h3 {
h1,
h2,
h3 {
margin: 10px 0px;
font-weight: 300;
@ -232,7 +234,9 @@ p {
line-height: 1.5;
}
a, a:hover, a:visited {
a,
a:hover,
a:visited {
color: #4fc0ad;
}
@ -334,7 +338,9 @@ a:not(.no-style):hover:before {
padding: 0 !important;
}
.header, .footer, .portico-os-announcement {
.header,
.footer,
.portico-os-announcement {
display: none;
}
@ -1060,7 +1066,8 @@ a:not(.no-style):hover:before {
padding-top: 20px;
}
.main, .portico-landing.integrations .main {
.main,
.portico-landing.integrations .main {
width: 100%;
margin: 0;
}

6
static/styles/media.css
View File

@ -127,7 +127,8 @@
width: 250px;
}
body, html,
body,
html,
.app-main,
.header-main {
min-width: 350px;
@ -264,7 +265,8 @@
top: 5px;
}
#searchbox .search_button, #searchbox .search_button[disabled]:hover {
#searchbox .search_button,
#searchbox .search_button[disabled]:hover {
top: 2px;
}

36
static/styles/portico.css
View File

@ -60,7 +60,8 @@
padding-bottom: 0;
}
.footer, .push {
.footer,
.push {
height: 56px;
}
@ -315,7 +316,8 @@ img.screenshot {
padding-bottom: 2em;
}
.landing-page h2, h4 {
.landing-page h2,
.landing-page h4 {
font-weight: lighter;
}
@ -368,7 +370,8 @@ input.text-error {
outline-color: red;
}
.header, .footer {
.header,
.footer {
position: absolute;
z-index: 100;
width: 100%;
@ -453,7 +456,8 @@ input.text-error {
margin-left: 60px;
}
.feature-block.left p, .feature-block.left h4 {
.feature-block.left p,
.feature-block.left h4 {
margin-right: 40px;
}
@ -883,7 +887,8 @@ input.new-organization-button {
margin-right: auto;
}
.login-form .control-label, .register-form .control-label {
.login-form .control-label,
.register-form .control-label {
margin-bottom: 2px;
}
@ -897,7 +902,8 @@ input.new-organization-button {
width: 100%;
}
.login-form .control-group, .register-form .control-group {
.login-form .control-group,
.register-form .control-group {
margin-right: 10px;
}
@ -909,7 +915,10 @@ input.new-organization-button {
font-weight: 300;
}
.login-google, .register-google, .login-sso, .login-github {
.login-google,
.register-google,
.login-sso,
.login-github {
max-width: 100%;
min-width: 300px;
margin: auto;
@ -917,7 +926,9 @@ input.new-organization-button {
margin-top: 30px;
}
.login-google-button, .register-google-button, .login-github-button {
.login-google-button,
.register-google-button,
.login-github-button {
margin-left: 10px;
}
@ -1037,7 +1048,8 @@ input.new-organization-button {
padding-top: 16px;
}
.footer-navigation li, .footer-navigation li a {
.footer-navigation li,
.footer-navigation li a {
display: inline-block;
vertical-align: middle;
color: #888;
@ -1414,7 +1426,8 @@ input.new-organization-button {
padding: 0px !important;
}
.input-medium, .input-large {
.input-medium,
.input-large {
display: block !important;
width: 100% !important;
min-height: 30px !important;
@ -1452,7 +1465,8 @@ input.new-organization-button {
display: block;
}
.feature-block.left p, .feature-block.left h4 {
.feature-block.left p,
.feature-block.left h4 {
margin-right: 0px;
}

36
static/styles/settings.css
View File

@ -62,14 +62,16 @@ label {
width: 214px;
}
.user-avatar-section, .realm-icon-section {
.user-avatar-section,
.realm-icon-section {
float: right;
background-color: #fff;
margin: 20px 0px;
padding: 20px;
}
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
.user-avatar-section .inline-block,
.realm-icon-section .inline-block {
display: block;
}
@ -177,7 +179,8 @@ td .button {
box-shadow: 0px 0px 4px rgba(56,177,232,1);
}
.dynamic-input div, .dynamic-input label {
.dynamic-input div,
.dynamic-input label {
display: inline-block;
margin: 0;
}
@ -200,7 +203,8 @@ td .button {
color: #aaa;
}
.button, .input-group {
.button,
.input-group {
margin: 20px 0px;
}
@ -217,7 +221,8 @@ input[type=checkbox] + .inline-block {
margin-left: 10px;
}
#user-settings-avatar, #realm-icon-section {
#user-settings-avatar,
#realm-icon-section {
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
@ -455,7 +460,8 @@ input[type=checkbox].inline-block {
margin-top: 20px;
}
#admin-filter-pattern-status, #admin-filter-format-status {
#admin-filter-pattern-status,
#admin-filter-format-status {
margin: 20px 0 0 0;
}
@ -631,7 +637,8 @@ input[type=checkbox].inline-block {
margin-right: 20px;
}
#upload_avatar_spinner, #upload_icon_spinner {
#upload_avatar_spinner,
#upload_icon_spinner {
font-size: 14px;
margin: auto;
}
@ -652,7 +659,8 @@ input[type=checkbox].inline-block {
position: inherit;
}
#alert_words_list, #attachments_list {
#alert_words_list,
#attachments_list {
list-style-type: none;
margin: auto;
background-color: #fff;
@ -663,7 +671,8 @@ input[type=checkbox].inline-block {
margin-top: 8px;
}
#alert_words_list .edit-alert-word-buttons, #attachments_list .edit-attachment-buttons {
#alert_words_list .edit-alert-word-buttons,
#attachments_list .edit-attachment-buttons {
position: absolute;
right: 20px;
top: 5px;
@ -983,12 +992,14 @@ input[type=text]#settings_search {
width: calc(50% - 10px);
}
.user-avatar-section, .realm-icon-section {
.user-avatar-section,
.realm-icon-section {
float: none;
display: inline-block;
}
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
.user-avatar-section .inline-block,
.realm-icon-section .inline-block {
display: inline-block;
vertical-align: top;
}
@ -1003,7 +1014,8 @@ input[type=text]#settings_search {
}
@media (max-width: 856px) {
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
.user-avatar-section .inline-block,
.realm-icon-section .inline-block {
display: block;
margin: 0;
}

3
static/styles/zulip.css
View File

@ -280,7 +280,8 @@ li,
line-height: 100%;
}
.copy_message, .copy_message:focus {
.copy_message,
.copy_message:focus {
background-image: url('/static/images/clippy.svg');
background-size: contain;
background-repeat: no-repeat;

15
tools/lib/css_parser.py
View File

@ -418,15 +418,7 @@ class CssSelectorList(object):
def text(self):
# type: () -> str
res = ''
for i, sel in enumerate(self.selectors):
sel_list_render = sel.text()
if i != 0 and sel_list_render[0] != '\n':
res += ' '
res += sel_list_render
if i != len(self.selectors) - 1:
res += ','
return res
return ',\n'.join(sel.text() for sel in self.selectors)
class CssSelector(object):
def __init__(self, tokens, pre_fluff, post_fluff, levels):
@ -438,10 +430,7 @@ class CssSelector(object):
def text(self):
# type: () -> str
res = ''
res += handle_prefluff(self.pre_fluff)
res += ' '.join(level.s for level in self.levels)
res += handle_postfluff(self.post_fluff)
res = ' '.join(level.s for level in self.levels)
return res
class CssDeclarationBlock(object):