domaininfo: move "main domain" info in card header

app/src/components/globals/Card.vue

@@ -6,6 +6,7 @@
           <component :is="titleTag" class="custom-header-title">
             <icon v-if="icon" :iname="icon" class="mr-2" />{{ title }}
           </component>
+          <slot name="header-next" />
         </slot>
 
         <div v-if="hasButtons" class="mt-2 w-100 custom-header-buttons" :class="{ [`ml-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]: buttonUnbreak }">

app/src/components/globals/ExplainWhat.vue

@@ -4,7 +4,7 @@
     <span class="explain-what-popover-container">
       <b-button
         :id="id" href="#"
-        variant="dark"
+        variant="light"
       >
         <icon iname="question" />
         <span class="sr-only">{{ $t('details_about', { subject: title }) }}</span>
@@ -41,24 +41,14 @@ export default {
 
 <style lang="scss" scoped>
 .explain-what {
-  // cursor: help;
+  line-height: 1.2;
-
-  &-popover-container {
-    position: relative;
-    top: -5px;
-    left: -3px;
-    margin-right: -3px;
-  }
 
   .btn {
     padding: 0;
+    margin-left: .1rem;
     border-radius: 50rem;
-    width: 1rem;
+    line-height: inherit;
-    height: 1rem;
+    font-size: inherit;
-    background-color: transparent;
-    color: $dark;
-    line-height: 1.2;
-    border: none;
   }
 
   &-popover {

app/src/i18n/locales/en.json

@@ -134,6 +134,7 @@
     "delete": "Delete",
     "description": "Description",
     "details": "Details",
+    "details_about": "Show more details about {subject}",
     "domain_dns_conf_is_just_a_recommendation": "This page shows you the *recommended* configuration. It does *not* configure the DNS for you. It is your responsibility to configure your DNS zone in your DNS registrar according to this recommendation.",
     "diagnosis": "Diagnosis",
     "diagnosis_experimental_disclaimer": "Be aware that the diagnosis feature is still experimental and being polished, and it may not be fully reliable.",
@@ -161,12 +162,6 @@
         "auto_config_ignored": "ignored, won't be changed by YunoHost unless you check the overwrite option",
         "auto_config_ok": "Automatic configuration seems to be OK!",
         "auto_config_zone": "Current DNS zone",
-        "semi_auto_status": {
-          "activable": "Activable",
-          "activated": "Activated",
-          "has_changes": "Has changes",
-          "unavailable": "Unavailable"
-        },
         "methods": {
           "auto": "Automatic",
           "handled_in_parent": "Handled in parent domain",
@@ -188,13 +183,10 @@
       "info": {
         "apps_on_domain": "Apps installed on domain",
         "certificate_authority": "SSL Certification authority",
-        "domain_type": "Domain type",
         "registrar": "Registrar"
       },
       "see_parent_domain": "See parent domain",
       "types": {
-        "parent_domain": "Parent domain",
-        "subdomain": "Subdomain",
         "main_domain": "Main domain"
       },
       "toggle_subdomains": "Toggle subdomains"
@@ -215,8 +207,6 @@
     "domain_dns_push_managed_in_parent_domain": "The automatic DNS records feature is managed in the parent domain <a href='#/domains/{parent_domain}/dns'>{parent_domain}</a>.",
     "domain_dns_push_not_applicable": "The automatic DNS records feature is not applicable to domain {domain},<br> You should manually configure your DNS records following the <a href='https://yunohost.org/dns'>documentation</a> and the suggested configuration below.",
     "domain_name": "Domain name",
-    "domain_visit": "Visit",
-    "domain_visit_url": "Visit {url}",
     "domains": "Domains",
     "download": "Download",
     "enable": "Enable",

app/src/views/domain/DomainInfo.vue

@@ -5,6 +5,18 @@
   >
     <!-- INFO CARD -->
     <card v-if="domain" :title="name" icon="globe">
+      <template v-if="isMainDomain" #header-next>
+        <b-badge variant="info" class="main-domain-badge">
+          <explain-what
+            id="explain-main-domain"
+            :title="$t('domain.types.main_domain')"
+            :content="$t('domain.explain.main_domain', { domain: name })"
+          >
+            <icon iname="star" /> {{ $t('domain.types.main_domain') }}
+          </explain-what>
+        </b-badge>
+      </template>
+
       <template #header-buttons>
         <!-- DEFAULT DOMAIN -->
         <b-button v-if="!isMainDomain" @click="setAsDefaultDomain" variant="info">
@@ -24,21 +36,6 @@
         </b-link>
       </description-row>
 
-      <!-- DOMAIN TYPE -->
-      <description-row
-        :term="$t('domain.info.domain_type')"
-      >
-        <span v-if="isMainDomain">
-          <icon iname="star" class="mr-1" />
-          <explain-what
-            id="explain-main-domain"
-            :title="$t('domain.types.main_domain')"
-            :content="$t('domain.explain.main_domain', { domain: name })"
-          >{{ $t('domain.types.main_domain') }}</explain-what>,&nbsp;
-        </span>
-        {{ $t('domain.types.' + (parentName ? 'subdomain' : 'parent_domain' )) }}
-      </description-row>
-
       <!-- DOMAIN CERT AUTHORITY -->
       <description-row :term="$t('domain.info.certificate_authority')">
         <icon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
@@ -216,3 +213,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.main-domain-badge {
+  font-size: .75rem;
+  padding-right: .2em;
+}
+</style>