From 143b77e10d984d3790382758c0b797215850b024 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Tue, 22 Aug 2017 04:59:03 +0900 Subject: Increase contrast in landing pages (#4567) * Increase contrast in about and about/more page * Lighten em color in landing pages * Increase contrast in landing pages Fix about.scss --- app/javascript/styles/forms.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles/forms.scss') diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 62094e98e..8e41bb002 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -32,10 +32,10 @@ code { line-height: 18px; margin-top: 15px; margin-bottom: 0; - color: $ui-base-lighter-color; + color: $ui-primary-color; a { - color: $ui-primary-color; + color: $ui-highlight-color; } } } -- cgit From 07994eed002375025f0c377079500d25e87cb641 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Mon, 28 Aug 2017 07:01:07 +0900 Subject: Adjust "signed in as" pages (#4720) * Adjust "signed in as" pages Fix min-width Set width of .account-header .name To apply text-overflow and overflow settings Set overflow for detailed-status__display-name * Remove trailing whitespace --- app/javascript/styles/components.scss | 2 ++ app/javascript/styles/containers.scss | 6 +++++- app/javascript/styles/forms.scss | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles/forms.scss') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 32cf450b7..3a6672b9f 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1057,6 +1057,8 @@ strong, span { display: block; + text-overflow: ellipsis; + overflow: hidden; } strong { diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index cfe8ea643..af2589e23 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -72,7 +72,7 @@ margin-bottom: -30px; margin-top: 40px; - @media screen and (max-width: 400px) { + @media screen and (max-width: 440px) { width: 100%; margin: 0; margin-bottom: 10px; @@ -97,10 +97,13 @@ .name { flex: 1 1 auto; color: $ui-secondary-color; + width: calc(100% - 88px); .username { display: block; font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; } } @@ -108,5 +111,6 @@ display: block; font-size: 32px; line-height: 40px; + margin-left: 8px; } } diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 8e41bb002..78f13270a 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -359,6 +359,10 @@ code { color: $ui-secondary-color; font-weight: 500; } + + @media screen and (max-width: 740px) and (min-width: 441px) { + margin-top: 40px; + } } .qr-wrapper { -- cgit From cfe39fb58d42ef649dc1ebb6f39e77814bbfbe96 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Sat, 2 Sep 2017 22:49:28 +0900 Subject: Adjust settings pages (#4765) * views: Adjust heading positions * Adjust settings pages Adjust label. Adjust tables. Adjust admin/reports/* pages. Fix 2FA QR code style for narrow devices. Widen several pages. Increase contrast. * Remove trailing whitespace --- app/javascript/styles/admin.scss | 59 +++++++++++++++++++---------- app/javascript/styles/forms.scss | 39 +++++++++++++++---- app/javascript/styles/tables.scss | 2 +- app/views/auth/registrations/edit.html.haml | 2 +- 4 files changed, 73 insertions(+), 29 deletions(-) (limited to 'app/javascript/styles/forms.scss') diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index 4c3bbdfc5..b86de75b6 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -32,7 +32,7 @@ a { display: block; - padding: 15px 25px; + padding: 15px; color: rgba($primary-text-color, 0.7); text-decoration: none; transition: all 200ms linear; @@ -61,6 +61,7 @@ a { border: 0; + padding: 15px 35px; &.selected { color: $primary-text-color; @@ -98,7 +99,7 @@ h6 { font-size: 16px; - color: $ui-primary-color; + color: $ui-secondary-color; line-height: 28px; font-weight: 400; } @@ -123,10 +124,10 @@ } .muted-hint { - color: lighten($ui-base-color, 27%); + color: $ui-primary-color; a { - color: $ui-primary-color; + color: $ui-highlight-color; } } @@ -139,15 +140,23 @@ .simple_form { max-width: 400px; - .label_input { - label.select { - width: 50%; - } + &.edit_user, + &.new_form_admin_settings, + &.new_form_two_factor_confirmation, + &.new_form_delete_confirmation, + &.new_import, + &.new_domain_block, + &.edit_domain_block { + max-width: none; + } - select { - width: 50%; - float: right; - } + .form_two_factor_confirmation_code, + .form_delete_confirmation_password { + max-width: 400px; + } + + .actions { + max-width: 400px; } } @@ -227,27 +236,25 @@ .report-accounts { display: flex; + flex-wrap: wrap; margin-bottom: 20px; } .report-accounts__item { - flex: 1 1 0; display: flex; + flex: 250px; flex-direction: column; + margin: 0 5px; & > strong { display: block; - margin-bottom: 10px; + margin: 0 0 10px -5px; font-weight: 500; font-size: 14px; line-height: 18px; color: $ui-secondary-color; } - &:first-child { - margin-right: 10px; - } - .account-card { flex: 1 1 auto; } @@ -261,6 +268,11 @@ .activity-stream { flex: 2 0 0; margin-right: 20px; + max-width: calc(100% - 60px); + + .entry { + border-radius: 4px; + } } } @@ -280,18 +292,25 @@ .batch-form-box { display: flex; - margin-bottom: 10px; + flex-wrap: wrap; + margin-bottom: 5px; #form_status_batch_action { - margin-right: 5px; + margin: 0 5px 5px 0; font-size: 14px; } + input.button { + margin: 0 5px 5px 0; + } + .media-spoiler-toggle-buttons { margin-left: auto; .button { overflow: visible; + margin: 0 0 5px 5px; + float: right; } } } diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 78f13270a..747610237 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -24,7 +24,7 @@ code { p.hint { margin-bottom: 15px; - color: lighten($ui-base-color, 32%); + color: $ui-primary-color; &.subtle-hint { text-align: center; @@ -53,7 +53,6 @@ code { label { flex: 0 0 auto; - width: 100px; } input { @@ -65,12 +64,37 @@ code { padding: 15px 0; margin-bottom: 0; + .label_input { + flex-wrap: wrap; + align-items: flex-start; + } + + &.select .label_input { + align-items: initial; + } + .label_input > label { font-family: inherit; font-size: 16px; color: $primary-text-color; display: block; padding-top: 5px; + margin-bottom: 5px; + flex: 1; + min-width: 150px; + word-wrap: break-word; + + &.select { + flex: 0; + } + + & ~ * { + margin-left: 10px; + } + } + + ul { + flex: 390px; } &.boolean { @@ -367,13 +391,15 @@ code { .qr-wrapper { display: flex; + flex-wrap: wrap; + align-items: flex-start; } .qr-code { flex: 0 0 auto; background: $simple-background-color; padding: 4px; - margin-bottom: 20px; + margin: 0 10px 20px 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); display: inline-block; @@ -384,8 +410,9 @@ code { } .qr-alternative { - margin-left: 10px; - color: $ui-primary-color; + margin-bottom: 20px; + color: $ui-secondary-color; + flex: 150px; samp { display: block; @@ -395,7 +422,6 @@ code { .table-form { p { - max-width: 400px; margin-bottom: 15px; strong { @@ -407,7 +433,6 @@ code { .simple_form, .table-form { .warning { - max-width: 400px; box-sizing: border-box; background: rgba($error-value-color, 0.5); color: $primary-text-color; diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index 6e54c59c0..f6e57e196 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -46,7 +46,7 @@ &.inline-table { td, th { - padding: 8px 0; + padding: 8px 2px; } & > tbody > tr:nth-child(odd) > td, diff --git a/app/views/auth/registrations/edit.html.haml b/app/views/auth/registrations/edit.html.haml index f016a4883..145f5cd9e 100644 --- a/app/views/auth/registrations/edit.html.haml +++ b/app/views/auth/registrations/edit.html.haml @@ -1,7 +1,7 @@ - content_for :page_title do = t('auth.change_password') -= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| += simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: 'auth_edit' }) do |f| = render 'shared/error_messages', object: resource = f.input :email, placeholder: t('simple_form.labels.defaults.email'), input_html: { 'aria-label' => t('simple_form.labels.defaults.email') } -- cgit