improve style and responsibility of the public shared credential page

Signed-off-by: binsky <timo@binsky.org>

css/public-page.css

@@ -68,70 +68,102 @@ header {
   padding-top: 0; }
 
 .share-controller {
-  width: 100%; }
+  width: 100%;
+  overflow-y: scroll;
+  align-items: center; }
   .share-controller .share-container {
-    margin-top: 50px;
+    width: 100%;
-    margin-left: auto;
+    padding: 20px; }
-    margin-right: auto;
+    .share-controller .share-container .credential_container {
-    width: 25%; }
+      max-width: 800px;
-
+      width: 90%;
-.credential_container {
+      margin: 20px auto;
-  margin-top: 20px;
+      padding: 30px;
-  margin-bottom: 20px;
+      filter: drop-shadow(0 2px 4px var(--color-box-shadow));
-  padding: 20px;
-  filter: drop-shadow(0 1px 3px var(--color-box-shadow));
       background: var(--color-main-background);
-  -webkit-border-radius: 5px;
+      -webkit-border-radius: 8px;
-  border-radius: 5px;
+      border-radius: 8px;
       background-clip: padding-box;
       /* stops bg color from leaking outside the border: */ }
-  .credential_container .text {
+      .share-controller .share-container .credential_container .text {
-    text-align: center; }
+        text-align: center;
-  .credential_container h2 {
+        font-size: 1.1em;
-    font-weight: bold; }
+        margin: 15px 0; }
-  .credential_container button, .credential_container .text {
+      .share-controller .share-container .credential_container h2 {
-    margin: 0 auto;
+        font-weight: bold;
+        text-align: center;
         margin-bottom: 25px;
-    display: block; }
+        color: var(--color-primary); }
-    .credential_container button i, .credential_container .text i {
+      .share-controller .share-container .credential_container button {
-      margin-right: 5px; }
+        margin: 15px auto;
+        display: block;
+        padding: 8px 20px;
+        font-size: 1.1em; }
+        .share-controller .share-container .credential_container button i {
+          margin-right: 8px; }
+      .share-controller .share-container .credential_container table {
+        width: 100%;
+        margin: 20px 0; }
+        .share-controller .share-container .credential_container table td:first-child {
+          width: 140px;
+          font-weight: 600;
+          padding-right: 15px; }
+        .share-controller .share-container .credential_container table td {
+          padding: 12px 8px;
+          word-break: break-word; }
+        .share-controller .share-container .credential_container table td.whitespace_normal_field > span > div > span {
+          white-space: normal; }
 
 .credential_field {
-  overflow: hidden; }
+  /* overflow: hidden; */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center; }
   .credential_field .cell, .credential_field .value {
-    float: left; }
+    margin-right: 10px; }
   .credential_field .tools {
-    margin-left: 10px;
+    display: flex;
-    overflow: hidden;
+    gap: 8px; }
-    float: left; }
     .credential_field .tools .cell {
       cursor: pointer;
-      margin-right: 4px; }
+      opacity: 0.8;
-
+      transition: opacity 0.2s; }
-table {
+      .credential_field .tools .cell:hover {
-  white-space: normal; }
+        opacity: 1; }
-  table td:first-child {
-    min-width: 110px; }
-  table td {
-    padding-bottom: 1em;
-    vertical-align: top; }
 
+.tags {
+  gap: 6px;
+  display: flex;
+  flex-wrap: wrap; }
   .tags .tag {
-  background-color: rgba(240, 240, 240, 0.9);
+    background-color: var(--color-background-dark);
-  padding: 4px;
+    color: var(--color-text-maxcontrast);
-  font-size: 12px;
+    padding: 6px 12px;
-  margin-right: 3px;
+    font-size: 0.9em;
-  -webkit-border-radius: 5px;
+    margin-right: 6px;
-  border-radius: 5px;
+    margin-bottom: 6px;
+    display: inline-block;
+    -webkit-border-radius: 20px;
+    border-radius: 20px;
     background-clip: padding-box;
     /* stops bg color from leaking outside the border: */ }
-.tags .tag:last-child {
-  margin-right: 8px; }
 
 .footer {
-  font-size: 10px;
+  font-size: 0.9em;
-  position: relative;
+  margin-top: 30px;
-  bottom: -20px;
   text-align: center; }
+  .footer a.link {
+    color: var(--color-primary);
+    text-decoration: none;
+    margin: 0 8px; }
+    .footer a.link:hover {
+      text-decoration: underline; }
+
+@media (max-width: 768px) {
+  .share-controller .share-container .credential_container {
+    width: 95%;
+    padding: 20px; }
+    .share-controller .share-container .credential_container table td:first-child {
+      width: 100px; } }
 
 /*# sourceMappingURL=public-page.css.map */

css/public-page.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;ACpBH;;;;;;;;;;;;;;;;;;;;GAoBG;ACpBH;;;;;;;;;;;;;;;;;;;;GAoBG;AFIH,MAAO;EACL,OAAO,EAAE,IAAI;;AAGf,gBAAiB;EACf,WAAW,EAAE,CAAC;;AAGhB,iBAAiB;EACf,KAAK,EAAE,IAAI;EACX,kCAAgB;IACd,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,KAAK,EAAE,GAAG;;AAId,qBAAqB;EACnB,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,8CAA8C;EACtD,UAAU,EAAE,4BAA4B;EEdxC,qBAAqB,EFgBE,GAAG;EEf1B,aAAa,EFeU,GAAG;EEd1B,eAAe,EAAE,WAAW;EAAG,qDAAqD;EFepF,2BAAK;IACJ,UAAU,EAAE,MAAM;EAEnB,wBAAE;IACA,WAAW,EAAE,IAAI;EAEnB,yDAAa;IACX,MAAM,EAAE,MAAM;IACd,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,KAAK;IACd,6DAAC;MACC,YAAY,EAAE,GAAG;;AAKvB,iBAAkB;EAChB,QAAQ,EAAE,MAAM;EAChB,iDAAc;IACZ,KAAK,EAAE,IAAI;EAEb,wBAAO;IACL,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,IAAI;IACX,8BAAM;MACJ,MAAM,EAAE,OAAO;MACf,YAAY,EAAE,GAAG;;AAIvB,KAAK;EACF,WAAW,EAAE,MAAM;EAClB,oBAAc;IACZ,SAAS,EAAE,KAAK;EAElB,QAAE;IACA,cAAc,EAAE,GAAG;IACnB,cAAc,EAAE,GAAG;;AAKvB,UAAK;EACH,gBAAgB,EAAE,wBAAuB;EACzC,OAAO,EAAE,GAAG;EACZ,SAAS,EAAE,IAAI;EACf,YAAY,EAAE,GAAG;EEhEnB,qBAAqB,EFiEI,GAAG;EEhE5B,aAAa,EFgEY,GAAG;EE/D5B,eAAe,EAAE,WAAW;EAAG,qDAAqD;AFiEpF,qBAAgB;EACd,YAAY,EAAE,GAAG;;AAGrB,OAAO;EACL,SAAS,EAAE,IAAI;EACf,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM",
+"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;ACpBH;;;;;;;;;;;;;;;;;;;;GAoBG;ACpBH;;;;;;;;;;;;;;;;;;;;GAoBG;AFIH,MAAO;EACL,OAAO,EAAE,IAAI;;AAGf,gBAAiB;EACf,WAAW,EAAE,CAAC;;AAGhB,iBAAkB;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EAEnB,kCAAiB;IACf,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IAEb,wDAAsB;MACpB,SAAS,EAAE,KAAK;MAChB,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,SAAS;MACjB,OAAO,EAAE,IAAI;MACb,MAAM,EAAE,8CAA8C;MACtD,UAAU,EAAE,4BAA4B;MEd5C,qBAAqB,EFeM,GAAG;MEd9B,aAAa,EFcc,GAAG;MEb9B,eAAe,EAAE,WAAW;MAAG,qDAAqD;MFehF,8DAAM;QACJ,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,MAAM;MAGhB,2DAAG;QACD,WAAW,EAAE,IAAI;QACjB,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,oBAAoB;MAG7B,+DAAO;QACL,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE,KAAK;QAEhB,iEAAE;UACA,YAAY,EAAE,GAAG;MAIrB,8DAAM;QACJ,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,MAAM;QAEd,6EAAe;UACb,KAAK,EAAE,KAAK;UACZ,WAAW,EAAE,GAAG;UAChB,aAAa,EAAE,IAAI;QAGrB,iEAAG;UACD,OAAO,EAAE,QAAQ;UACjB,UAAU,EAAE,UAAU;QAExB,6GAA+C;UAC7C,WAAW,EAAE,MAAM;;AAO7B,iBAAkB;EAChB,uBAAuB;EACvB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,MAAM;EAEnB,iDAAc;IACZ,YAAY,EAAE,IAAI;EAGpB,wBAAO;IACL,OAAO,EAAE,IAAI;IACb,GAAG,EAAE,GAAG;IAER,8BAAM;MACJ,MAAM,EAAE,OAAO;MACf,OAAO,EAAE,GAAG;MACZ,UAAU,EAAE,YAAY;MAExB,oCAAQ;QACN,OAAO,EAAE,CAAC;;AAMlB,KAAM;EACJ,GAAG,EAAE,GAAG;EACR,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;EAEf,UAAK;IACH,gBAAgB,EAAE,4BAA4B;IAC9C,KAAK,EAAE,6BAA6B;IACpC,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,KAAK;IAChB,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,YAAY;IErGvB,qBAAqB,EFsGI,IAAI;IErG7B,aAAa,EFqGY,IAAI;IEpG7B,eAAe,EAAE,WAAW;IAAG,qDAAqD;;AFwGtF,OAAQ;EACN,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,MAAM;EAElB,cAAO;IACL,KAAK,EAAE,oBAAoB;IAC3B,eAAe,EAAE,IAAI;IACrB,MAAM,EAAE,KAAK;IAEb,oBAAQ;MACN,eAAe,EAAE,SAAS;;AAMhC,yBAA0B;EACxB,wDAAyD;IACvD,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,IAAI;IAEb,6EAAqB;MACnB,KAAK,EAAE,KAAK",
 "sources": ["../sass/public-page.scss","../sass/variables.scss","../sass/mixins.scss"],
 "names": [],
 "file": "public-page.css"

sass/public-page.scss

@@ -32,79 +32,135 @@ header {
 
 .share-controller {
   width: 100%;
+  overflow-y: scroll;
+  align-items: center;
+  
   .share-container {
-    margin-top: 50px;
+    width: 100%;
-    margin-left: auto;
+    padding: 20px;
-    margin-right: auto;
-    width: 25%;
-  }
-}
     
     .credential_container {
-  margin-top: 20px;
+      max-width: 800px;
-  margin-bottom: 20px;
+      width: 90%;
-  padding: 20px;
+      margin: 20px auto;
-  filter: drop-shadow(0 1px 3px var(--color-box-shadow));
+      padding: 30px;
+      filter: drop-shadow(0 2px 4px var(--color-box-shadow));
       background: var(--color-main-background);
+      @include border-radius(8px);
 
-  @include border-radius(5px);
       .text {
         text-align: center;
+        font-size: 1.1em;
+        margin: 15px 0;
       }
+
       h2 {
         font-weight: bold;
-  }
+        text-align: center;
-  button, .text{
-    margin: 0 auto;
         margin-bottom: 25px;
+        color: var(--color-primary);
+      }
+
+      button {
+        margin: 15px auto;
         display: block;
+        padding: 8px 20px;
+        font-size: 1.1em;
+        
         i {
-      margin-right: 5px;
+          margin-right: 8px;
+        }
+      }
+
+      table {
+        width: 100%;
+        margin: 20px 0;
+        
+        td:first-child {
+          width: 140px;
+          font-weight: 600;
+          padding-right: 15px;
+        }
+
+        td {
+          padding: 12px 8px;
+          word-break: break-word;
+        }
+        td.whitespace_normal_field > span > div > span {
+          white-space: normal;
+        }
+      }
     }
   }
 }
 
 .credential_field {
-  overflow: hidden;
+  /* overflow: hidden; */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  
   .cell, .value {
-    float: left;
+    margin-right: 10px;
   }
+  
   .tools {
-    margin-left: 10px;
+    display: flex;
-    overflow: hidden;
+    gap: 8px;
-    float: left;
+    
     .cell {
       cursor: pointer;
-      margin-right: 4px;
+      opacity: 0.8;
+      transition: opacity 0.2s;
+      
+      &:hover {
+        opacity: 1;
       }
     }
   }
-table{
-   white-space: normal;
-    td:first-child{
-      min-width: 110px;
-    }
-    td{
-      padding-bottom: 1em;
-      vertical-align: top;
-    }
 }
 
 .tags {
+  gap: 6px;
+  display: flex;
+  flex-wrap: wrap;
+
   .tag {
-    background-color: rgba(240, 240, 240, .9);
+    background-color: var(--color-background-dark);
-    padding: 4px;
+    color: var(--color-text-maxcontrast);
-    font-size: 12px;
+    padding: 6px 12px;
-    margin-right: 3px;
+    font-size: 0.9em;
-    @include border-radius(5px);
+    margin-right: 6px;
-  }
+    margin-bottom: 6px;
-  .tag:last-child {
+    display: inline-block;
-    margin-right: 8px;
+    @include border-radius(20px);
   }
 }
+
 .footer {
-  font-size: 10px;
+  font-size: 0.9em;
-  position: relative;
+  margin-top: 30px;
-  bottom: -20px;
   text-align: center;
+  
+  a.link {
+    color: var(--color-primary);
+    text-decoration: none;
+    margin: 0 8px;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Add responsive styles
+@media (max-width: 768px) {
+  .share-controller .share-container .credential_container {
+    width: 95%;
+    padding: 20px;
+    
+    table td:first-child {
+      width: 100px;
+    }
+  }
 }

templates/public_share.php

@@ -70,7 +70,7 @@ style('passman', 'public-page');
 <div class="share-controller" ng-app="passmanApp" ng-controller="PublicSharedCredential">
 	<div class="share-container">
         <div class="row">
-		<div class="col-xs-8 col-xs-push-2 col-xs-pull-2 credential_container">
+		<div class="credential_container">
 			<h2>Passman</h2>
 			<div ng-if="!shared_credential && !expired">
 				<span class="text"><?php p($l->t("Someone has shared a credential with you.")); ?></span>
@@ -135,8 +135,8 @@ style('passman', 'public-page');
 						<td>
 							<?php p($l->t("URL")); ?>
 						</td>
-						<td>
+						<td class="whitespace_normal_field">
-					<span credential-field
+					<span credential-field url="true"
 						  value="shared_credential.url"></span>
 						</td>
 					</tr>
@@ -188,13 +188,15 @@ style('passman', 'public-page');
 							date:'dd-MM-yyyy @ HH:mm:ss'}}
 						</td>
 					</tr>
-
+					<tr ng-show="shared_credential.tags && shared_credential.tags.length > 0">
-				</table>
+						<td>
-
+							<?php p($l->t("Tags")); ?>
-				<div class="tags">
+						</td>
+						<td class="tags">
 							<span class="tag" ng-repeat="tag in shared_credential.tags">{{tag.text}}</span>
-
+						</td>
-				</div>
+					</tr>
+				</table>
 			</div>
 			<div class="footer">
 				<a href="https://github.com/nextcloud/passman" target="_blank"