Commit eeaf4aec authored by Phil Hughes's avatar Phil Hughes

Merge branch '43215-update-design-for-verifying-domains' into 'master'

Polish design of domain verification for Gitlab Pages

Closes #43215

See merge request gitlab-org/gitlab-ce!17767
parents 42849263 78ff68a2
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
color: $list-text-disabled-color; color: $list-text-disabled-color;
} }
&:not(.ui-sort-disabled):hover {
background: $row-hover;
}
&.unstyled { &.unstyled {
&:hover { &:hover {
background: none; background: none;
...@@ -34,14 +38,15 @@ ...@@ -34,14 +38,15 @@
background-color: $list-warning-row-bg; background-color: $list-warning-row-bg;
border-color: $list-warning-row-border; border-color: $list-warning-row-border;
color: $list-warning-row-color; color: $list-warning-row-color;
}
&.smoke { background-color: $gray-light; } &:hover {
background: $list-warning-row-bg;
}
&:not(.ui-sort-disabled):hover {
background: $row-hover;
} }
&.smoke { background-color: $gray-light; }
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
......
...@@ -289,6 +289,11 @@ body { ...@@ -289,6 +289,11 @@ body {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.with-button {
line-height: 34px;
}
} }
.page-title-empty { .page-title-empty {
......
.pages-domain-list {
&-item {
position: relative;
display: flex;
align-items: center;
.domain-status {
display: inline-flex;
left: $gl-padding;
position: absolute;
}
.domain-name {
flex-grow: 1;
}
}
&.has-verification-status > li {
padding-left: 3 * $gl-padding;
}
}
.status-badge {
display: inline-flex;
margin-bottom: $gl-padding-8;
// Most of the following settings "stolen" from btn-sm
// Border radius is overwritten for both
.label,
.btn {
padding: $gl-padding-4 $gl-padding-8;
font-size: $gl-font-size;
line-height: $gl-btn-line-height;
border-radius: 0;
display: flex;
align-items: center;
}
.btn svg {
top: auto;
}
:first-child {
border-bottom-left-radius: $border-radius-default;
border-top-left-radius: $border-radius-default;
}
:not(:first-child) {
border-left: 0;
}
:last-child {
border-bottom-right-radius: $border-radius-default;
border-top-right-radius: $border-radius-default;
}
}
- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
- if can?(current_user, :update_pages, @project) && @domains.any? - if can?(current_user, :update_pages, @project) && @domains.any?
.panel.panel-default .panel.panel-default
.panel-heading .panel-heading
Domains (#{@domains.count}) Domains (#{@domains.count})
%ul.well-list %ul.well-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
- @domains.each do |domain| - @domains.each do |domain|
%li %li.pages-domain-list-item.unstyled
.pull-right
= link_to 'Details', project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped"
= link_to 'Remove', project_pages_domain_path(@project, domain), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
.clearfix
- if verification_enabled - if verification_enabled
- tooltip, status = domain.unverified? ? ['Unverified', 'failed'] : ['Verified', 'success'] - tooltip, status = domain.unverified? ? [_('Unverified'), 'failed'] : [_('Verified'), 'success']
= link_to domain.url, title: tooltip, class: 'has-tooltip' do .domain-status.ci-status-icon.has-tooltip{ class: "ci-status-icon-#{status}", title: tooltip }
= sprite_icon("status_#{status}", size: 16, css_class: "has-tooltip ci-status-icon ci-status-icon-#{status}") = sprite_icon("status_#{status}", size: 16 )
= domain.domain .domain-name
- else = link_to domain.url do
= link_to domain.domain, domain.url = domain.url
%p = icon('external-link')
- if domain.subject - if domain.subject
%p
%span.label.label-gray Certificate: #{domain.subject} %span.label.label-gray Certificate: #{domain.subject}
- if domain.expired? - if domain.expired?
%span.label.label-danger Expired %span.label.label-danger Expired
%div
= link_to 'Details', project_pages_domain_path(@project, domain), class: "btn btn-sm btn-grouped"
= link_to 'Remove', project_pages_domain_path(@project, domain), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
- if verification_enabled && domain.unverified? - if verification_enabled && domain.unverified?
%li.warning-row %li.warning-row
#{domain.domain} is not verified. To learn how to verify ownership, visit your #{domain.domain} is not verified. To learn how to verify ownership, visit your
= link_to 'domain details', project_pages_domain_path(@project, domain) #{link_to 'domain details', project_pages_domain_path(@project, domain)}.
- page_title 'Pages' - page_title 'Pages'
%h3.page_title %h3.page-title.with-button
Pages Pages
- if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https) - if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https)
= link_to new_project_pages_domain_path(@project), class: 'btn btn-new pull-right', title: 'New Domain' do = link_to new_project_pages_domain_path(@project), class: 'btn btn-new pull-right', title: 'New Domain' do
%i.fa.fa-plus
New Domain New Domain
%p.light %p.light
......
- add_to_breadcrumbs "Pages", project_pages_path(@project) - add_to_breadcrumbs "Pages", project_pages_path(@project)
- breadcrumb_title @domain.domain - breadcrumb_title @domain.domain
- page_title @domain.domain - page_title @domain.domain
%h3.page_title %h3.page-title
= @domain.domain = @domain.domain
%hr.clearfix %hr.clearfix
%div %div
......
- add_to_breadcrumbs "Pages", project_pages_path(@project) - add_to_breadcrumbs "Pages", project_pages_path(@project)
- page_title 'New Pages Domain' - page_title 'New Pages Domain'
%h3.page_title %h3.page-title
New Pages Domain New Pages Domain
%hr.clearfix %hr.clearfix
%div %div
......
- add_to_breadcrumbs "Pages", project_pages_path(@project) - add_to_breadcrumbs "Pages", project_pages_path(@project)
- breadcrumb_title @domain.domain - breadcrumb_title @domain.domain
- page_title "#{@domain.domain}", 'Pages Domains' - page_title "#{@domain.domain}", 'Pages Domains'
- dns_record = "#{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}."
- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled? - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
- if verification_enabled && @domain.unverified? - if verification_enabled && @domain.unverified?
%p.alert.alert-warning = content_for :flash_message do
%strong .alert.alert-warning
This domain is not verified. You will need to verify ownership before .container-fluid.container-limited
access is enabled. This domain is not verified. You will need to verify ownership before access is enabled.
%h3.page-title %h3.page-title.with-button
Pages Domain
= link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success pull-right' = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success pull-right'
Pages Domain
.table-holder .table-holder
%table.table %table.table
...@@ -19,31 +21,41 @@ ...@@ -19,31 +21,41 @@
%td %td
Domain Domain
%td %td
= link_to @domain.domain, @domain.url = link_to @domain.url do
= @domain.url
= icon('external-link')
%tr %tr
%td %td
DNS DNS
%td %td
%p .input-group
To access this domain create a new DNS record: = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
%pre .input-group-btn
#{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}. = clipboard_button(target: '#domain_dns', class: 'btn-default hidden-xs')
%p.help-block
To access this domain create a new DNS record
- if verification_enabled - if verification_enabled
- verification_record = "#{@domain.verification_domain} TXT #{@domain.keyed_verification_code}"
%tr %tr
%td %td
Verification status Verification status
%td %td
%p = form_tag verify_project_pages_domain_path(@project, @domain) do
.status-badge
- text, status = @domain.unverified? ? [_('Unverified'), 'label-danger'] : [_('Verified'), 'label-success']
.label{ class: status }
= text
%button.btn.has-tooltip{ type: "submit", data: { container: 'body' }, title: _("Retry verification") }
= sprite_icon('redo')
.input-group
= text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
.input-group-btn
= clipboard_button(target: '#domain_verification', class: 'btn-default hidden-xs')
%p.help-block
- help_link = help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record') - help_link = help_page_path('user/project/pages/getting_started_part_three.md', anchor: 'dns-txt-record')
To #{link_to 'verify ownership', help_link} of your domain, create To #{link_to 'verify ownership', help_link} of your domain,
this DNS record: add the above key to a TXT record within to your DNS configuration.
%pre
#{@domain.verification_domain} TXT #{@domain.keyed_verification_code}
%p
- if @domain.verified?
#{@domain.domain} has been successfully verified.
- else
= button_to 'Verify ownership', verify_project_pages_domain_path(@project, @domain), class: 'btn btn-save btn-sm'
%tr %tr
%td %td
......
---
title: Polish design for verifying domains
merge_request: 17767
author:
type: changed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment