From 43cddc03d1cc9b2cf8c604d20b94135f1c812403 Mon Sep 17 00:00:00 2001
From: Julien Fraichot <julien.fraichot@hyland.com>
Date: Thu, 24 Oct 2024 17:11:47 +0200
Subject: [PATCH] feat(VCv2): improve display with description

---
 .../_components.fullscreen-certificate-css.js      |  2 +-
 .../_components.fullscreen-certificate.scss        | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate-css.js b/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate-css.js
index 08be2f3b..5e78c5fd 100644
--- a/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate-css.js
+++ b/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate-css.js
@@ -1,2 +1,2 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-o-text-11{font-size:11px}.buv-o-text-12{font-size:12px}.buv-o-text-13{font-size:13px}.buv-o-text-15{font-size:15px;line-height:20px}.buv-o-text-bold{font-weight:bold}.buv-c-certificate--fixed-width{max-width:460px;min-width:0;margin:0 auto}.buv-c-fullscreen-certificate{z-index:200;position:fixed;top:0;left:0;background-color:#fff;width:100vw;height:100vh;overflow:auto;box-sizing:border-box}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate{padding-top:170px}}.buv-c-fullscreen-certificate-header{box-shadow:0 1px 5px rgba(0,0,0,.15);width:100%;background-color:#fff}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate-header{position:fixed;top:0;z-index:10}}.buv-c-fullscreen-certificate-header__content{max-width:1440px;margin:0 auto;padding:20px;display:flex;align-items:center;position:relative;box-sizing:border-box}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate-header__content{flex-direction:column;justify-content:left;align-items:unset}}.buv-c-fullscreen-certificate__title{margin:0 30px 0 0}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__title{margin-bottom:10px}}.buv-c-fullscreen-certificate__close{top:27px;right:20px}.buv-c-fullscreen-certificate__content{padding:20px;display:flex;max-width:1440px;margin:20px auto 0}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__content{flex-direction:column-reverse;margin-top:0}}.buv-c-fullscreen-certificate__details{display:flex;flex-grow:1;flex-direction:column;max-width:280px;min-width:220px;margin-right:20px}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__details{max-width:100vw;margin:20px 0 0}}.buv-c-fullscreen-certificate__verification-status{margin-bottom:15px}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__verification-status{position:absolute;top:90px;width:calc(100% - 40px);margin:0}}.buv-c-fullscreen-certificate__details-item{margin-top:5px}.buv-c-fullscreen-certificate__separator{margin-top:30px;padding-top:30px;border-top:1px solid #f1f2f3}.buv-c-fullscreen-certificate__certificate{box-shadow:0 1px 5px rgba(0,0,0,.15);padding:20px;background-color:#fff;font-family:serif;text-align:center;color:#49555f;font-size:12px;word-wrap:break-word;min-height:calc(100vh - 145px);box-sizing:border-box;margin:0 auto;min-width:600px;line-height:initial}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__certificate{min-width:unset;width:100%;overflow:auto}}.buv-c-fullscreen-certificate__verify-other{margin-top:20px}.buv-c-fullscreen-certificate .buv-c-full-certificate-img{max-width:125px;max-height:125px}.buv-c-full-certificate__titles::before,.buv-c-full-certificate__titles::after{content:" ";display:block;background-color:#edf1f4;width:30%;text-align:center;margin:20px auto;height:2px}.buv-c-full-certificate__title{font-weight:normal;margin:0}.buv-c-full-certificate__title--name{color:#000;font-size:30px;margin-bottom:10px}.buv-c-full-certificate__title--main{font-size:21px;margin-bottom:10px}.buv-c-full-certificate__title--sub{font-size:16px;font-style:italic}.buv-c-full-certificate__description{margin:0 0 40px;line-height:1.5}.buv-c-full-certificate-signatures{list-style-type:none;display:flex;justify-content:space-around;width:100%;margin:0 0 20px;padding:0}.buv-c-full-certificate-signatures__signature{margin-right:30px;display:flex;flex-direction:column;justify-content:center}.buv-c-full-certificate-signatures__signature:last-child{margin:0}.buv-c-full-certificate-img--secondary{max-width:150px;max-height:150px}</style>`;
+export default html`<style>.buv-o-text-11{font-size:11px}.buv-o-text-12{font-size:12px}.buv-o-text-13{font-size:13px}.buv-o-text-15{font-size:15px;line-height:20px}.buv-o-text-bold{font-weight:bold}.buv-c-certificate--fixed-width{max-width:460px;min-width:0;margin:0 auto}.buv-c-fullscreen-certificate{z-index:200;position:fixed;top:0;left:0;background-color:#fff;width:100vw;height:100vh;overflow:auto;box-sizing:border-box}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate{padding-top:180px}}.buv-c-fullscreen-certificate-header{box-shadow:0 1px 5px rgba(0,0,0,.15);width:100%;background-color:#fff}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate-header{position:fixed;top:0;z-index:10}}.buv-c-fullscreen-certificate-header__content{max-width:1440px;margin:0 auto;padding:20px;align-items:center;position:relative;box-sizing:border-box}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate-header__content{flex-direction:column;justify-content:left;align-items:unset}}.buv-c-fullscreen-certificate__title{margin:0 30px 10px 0}.buv-c-fullscreen-certificate__description{margin:0;font-size:12px}.buv-c-fullscreen-certificate__close{top:27px;right:20px}.buv-c-fullscreen-certificate__content{padding:20px;display:flex;max-width:1440px;margin:20px auto 0}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__content{flex-direction:column-reverse;margin-top:0}}.buv-c-fullscreen-certificate__details{display:flex;flex-grow:1;flex-direction:column;max-width:280px;min-width:220px;margin-right:20px}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__details{max-width:100vw;margin:20px 0 0}}.buv-c-fullscreen-certificate__verification-status{margin-bottom:15px}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__verification-status{position:absolute;top:100px;width:calc(100% - 40px);margin:0}}.buv-c-fullscreen-certificate__details-item{margin-top:5px}.buv-c-fullscreen-certificate__separator{margin-top:30px;padding-top:30px;border-top:1px solid #f1f2f3}.buv-c-fullscreen-certificate__certificate{box-shadow:0 1px 5px rgba(0,0,0,.15);padding:20px;background-color:#fff;font-family:serif;text-align:center;color:#49555f;font-size:12px;word-wrap:break-word;min-height:calc(100vh - 145px);box-sizing:border-box;margin:0 auto;min-width:600px;line-height:initial}@media only screen and (max-width: 750px){.buv-c-fullscreen-certificate__certificate{min-width:unset;width:100%;overflow:auto}}.buv-c-fullscreen-certificate__verify-other{margin-top:20px}.buv-c-fullscreen-certificate .buv-c-full-certificate-img{max-width:125px;max-height:125px}.buv-c-full-certificate__titles::before,.buv-c-full-certificate__titles::after{content:" ";display:block;background-color:#edf1f4;width:30%;text-align:center;margin:20px auto;height:2px}.buv-c-full-certificate__title{font-weight:normal;margin:0}.buv-c-full-certificate__title--name{color:#000;font-size:30px;margin-bottom:10px}.buv-c-full-certificate__title--main{font-size:21px;margin-bottom:10px}.buv-c-full-certificate__title--sub{font-size:16px;font-style:italic}.buv-c-full-certificate__description{margin:0 0 40px;line-height:1.5}.buv-c-full-certificate-signatures{list-style-type:none;display:flex;justify-content:space-around;width:100%;margin:0 0 20px;padding:0}.buv-c-full-certificate-signatures__signature{margin-right:30px;display:flex;flex-direction:column;justify-content:center}.buv-c-full-certificate-signatures__signature:last-child{margin:0}.buv-c-full-certificate-img--secondary{max-width:150px;max-height:150px}</style>`;
diff --git a/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate.scss b/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate.scss
index a80fb01c..d4927307 100644
--- a/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate.scss
+++ b/src/components/organisms/FullScreenCertificate/_components.fullscreen-certificate.scss
@@ -14,7 +14,7 @@
   box-sizing: border-box;
 
   @media only screen and (max-width: $breakpoint) {
-    padding-top: 170px; // header height + verification status
+    padding-top: 180px; // header height + verification status
   }
 }
 
@@ -34,7 +34,6 @@
   max-width: 1440px;
   margin: 0 auto;
   padding: 20px;
-  display: flex;
   align-items: center;
   position: relative;
   box-sizing: border-box;
@@ -47,11 +46,12 @@
 }
 
 .buv-c-fullscreen-certificate__title {
-  margin: 0 30px 0 0;
+  margin: 0 30px 10px 0;
+}
 
-  @media only screen and (max-width: $breakpoint) {
-    margin-bottom: 10px;
-  }
+.buv-c-fullscreen-certificate__description {
+  margin: 0;
+  font-size: 12px;
 }
 
 .buv-c-fullscreen-certificate__close {
@@ -90,7 +90,7 @@
 
   @media only screen and (max-width: $breakpoint) {
     position: absolute;
-    top: 90px;
+    top: 100px;
     width: calc(100% - 40px); // 40px is buv-c-fullscreen-certificate__content padding
     margin: 0;
   }