Polish design of domain verification for Gitlab Pages

app/assets/stylesheets/framework/lists.scss

@@ -24,6 +24,10 @@
       color: $list-text-disabled-color;
     }
+    &:not(.ui-sort-disabled):hover {
+      background: $row-hover;
+    }
+
     &.unstyled {
       &:hover {
         background: none;
@@ -34,14 +38,15 @@
       background-color: $list-warning-row-bg;
       border-color: $list-warning-row-border;
       color: $list-warning-row-color;
-    }
-    &.smoke { background-color: $gray-light; }
-    &:not(.ui-sort-disabled):hover {
-      background: $row-hover;
+      &:hover {
+        background: $list-warning-row-bg;
+      }
     }
+    &.smoke { background-color: $gray-light; }
+
     &:last-child {
       border-bottom: 0;

app/assets/stylesheets/framework/typography.scss

@@ -289,6 +289,11 @@ body {
   &:last-child {
     margin-bottom: 0;
   }
+
+  &.with-button {
+    line-height: 34px;
+  }
+
 }
 .page-title-empty {

app/assets/stylesheets/pages/pages.scss

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

app/views/projects/pages/_list.html.haml

+- verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+
 - if can?(current_user, :update_pages, @project) && @domains.any?
   .panel.panel-default
     .panel-heading
       Domains (#{@domains.count})
-    %ul.well-list
-      - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
+    %ul.well-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
       - @domains.each do |domain|
-        %li
-          .pull-right
+        %li.pages-domain-list-item.unstyled
+          - if verification_enabled
+            - tooltip, status = domain.unverified? ? [_('Unverified'), 'failed'] : [_('Verified'), 'success']
+            .domain-status.ci-status-icon.has-tooltip{ class: "ci-status-icon-#{status}", title: tooltip }
+              = sprite_icon("status_#{status}", size: 16 )
+          .domain-name
+            = link_to domain.url do
+              = domain.url
+              = icon('external-link')
+            - if domain.subject
+              %p
+                %span.label.label-gray Certificate: #{domain.subject}
+                - if domain.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"
-          .clearfix
-            - if verification_enabled
-              - tooltip, status = domain.unverified? ? ['Unverified', 'failed'] : ['Verified', 'success']
-              = link_to domain.url, title: tooltip, class: 'has-tooltip' do
-                = sprite_icon("status_#{status}", size: 16, css_class: "has-tooltip ci-status-icon ci-status-icon-#{status}")
-                = domain.domain
-            - else
-              = link_to domain.domain, domain.url
-          %p
-            - if domain.subject
-              %span.label.label-gray Certificate: #{domain.subject}
-            - if domain.expired?
-              %span.label.label-danger Expired
         - if verification_enabled && domain.unverified?
           %li.warning-row
             #{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)}.

app/views/projects/pages/show.html.haml

 - page_title 'Pages'
-%h3.page_title
+%h3.page-title.with-button
   Pages
   - 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
-      %i.fa.fa-plus
       New Domain
 %p.light

app/views/projects/pages_domains/edit.html.haml

 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - page_title @domain.domain
-%h3.page_title
+%h3.page-title
   = @domain.domain
 %hr.clearfix
 %div

app/views/projects/pages_domains/new.html.haml

 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - page_title 'New Pages Domain'
-%h3.page_title
+%h3.page-title
   New Pages Domain
 %hr.clearfix
 %div

app/views/projects/pages_domains/show.html.haml

 - add_to_breadcrumbs "Pages", project_pages_path(@project)
 - breadcrumb_title @domain.domain
 - 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?
+
 - if verification_enabled && @domain.unverified?
-  %p.alert.alert-warning
-    %strong
-      This domain is not verified. You will need to verify ownership before
-      access is enabled.
-%h3.page-title
-  Pages Domain
+  = content_for :flash_message do
+    .alert.alert-warning
+      .container-fluid.container-limited
+        This domain is not verified. You will need to verify ownership before access is enabled.
+%h3.page-title.with-button
   = link_to 'Edit', edit_project_pages_domain_path(@project, @domain), class: 'btn btn-success pull-right'
+  Pages Domain
 .table-holder
   %table.table
@@ -19,31 +21,41 @@
       %td
         Domain
       %td
-        = link_to @domain.domain, @domain.url
+        = link_to @domain.url do
+          = @domain.url
+          = icon('external-link')
     %tr
       %td
         DNS
       %td
-        %p
-          To access this domain create a new DNS record:
-        %pre
-          #{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}.
+        .input-group
+          = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
+          .input-group-btn
+            = 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
+      - verification_record = "#{@domain.verification_domain} TXT #{@domain.keyed_verification_code}"
       %tr
         %td
           Verification status
         %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')
-            To #{link_to 'verify ownership', help_link} of your domain, create
-            this DNS record:
-          %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'
+            To #{link_to 'verify ownership', help_link} of your domain,
+            add the above key to a TXT record within to your DNS configuration.
     %tr
       %td

changelogs/unreleased/43215-update-design-for-verifying-domains.yml

+---
+title: Polish design for verifying domains
+merge_request: 17767
+author:
+type: changed