mirror of
https://github.com/nextcloud/passman.git
synced 2025-10-09 13:07:13 +08:00
improve style and responsibility of the public shared credential page
Signed-off-by: binsky <timo@binsky.org>
This commit is contained in:
binsky
parent
fcc7a1c4d1
commit
2df552a2c4
4 changed files with 209 additions and 119 deletions
|
|
@ -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;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 25%; }
|
||||
|
||||
.credential_container {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
|
||||
width: 100%;
|
||||
padding: 20px; }
|
||||
.share-controller .share-container .credential_container {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
filter: drop-shadow(0 2px 4px var(--color-box-shadow));
|
||||
background: var(--color-main-background);
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
/* stops bg color from leaking outside the border: */ }
|
||||
.credential_container .text {
|
||||
text-align: center; }
|
||||
.credential_container h2 {
|
||||
font-weight: bold; }
|
||||
.credential_container button, .credential_container .text {
|
||||
margin: 0 auto;
|
||||
.share-controller .share-container .credential_container .text {
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
margin: 15px 0; }
|
||||
.share-controller .share-container .credential_container h2 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
display: block; }
|
||||
.credential_container button i, .credential_container .text i {
|
||||
margin-right: 5px; }
|
||||
color: var(--color-primary); }
|
||||
.share-controller .share-container .credential_container button {
|
||||
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;
|
||||
overflow: hidden;
|
||||
float: left; }
|
||||
display: flex;
|
||||
gap: 8px; }
|
||||
.credential_field .tools .cell {
|
||||
cursor: pointer;
|
||||
margin-right: 4px; }
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s; }
|
||||
.credential_field .tools .cell:hover {
|
||||
opacity: 1; }
|
||||
|
||||
table {
|
||||
white-space: normal; }
|
||||
table td:first-child {
|
||||
min-width: 110px; }
|
||||
table td {
|
||||
padding-bottom: 1em;
|
||||
vertical-align: top; }
|
||||
|
||||
.tags .tag {
|
||||
background-color: rgba(240, 240, 240, 0.9);
|
||||
padding: 4px;
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
.tags {
|
||||
gap: 6px;
|
||||
display: flex;
|
||||
flex-wrap: wrap; }
|
||||
.tags .tag {
|
||||
background-color: var(--color-background-dark);
|
||||
color: var(--color-text-maxcontrast);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.9em;
|
||||
margin-right: 6px;
|
||||
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;
|
||||
position: relative;
|
||||
bottom: -20px;
|
||||
font-size: 0.9em;
|
||||
margin-top: 30px;
|
||||
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 */
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -30,81 +30,137 @@ header {
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
.share-controller{
|
||||
.share-controller {
|
||||
width: 100%;
|
||||
.share-container{
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
overflow-y: scroll;
|
||||
align-items: center;
|
||||
|
||||
.credential_container{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
.share-container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
|
||||
background: var(--color-main-background);
|
||||
|
||||
@include border-radius(5px);
|
||||
.text{
|
||||
.credential_container {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
filter: drop-shadow(0 2px 4px var(--color-box-shadow));
|
||||
background: var(--color-main-background);
|
||||
@include border-radius(8px);
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
margin: 15px 0;
|
||||
}
|
||||
h2{
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
button, .text{
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 15px auto;
|
||||
display: block;
|
||||
i{
|
||||
margin-right: 5px;
|
||||
padding: 8px 20px;
|
||||
font-size: 1.1em;
|
||||
|
||||
i {
|
||||
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;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.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);
|
||||
padding: 4px;
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
.tag:last-child {
|
||||
margin-right: 8px;
|
||||
background-color: var(--color-background-dark);
|
||||
color: var(--color-text-maxcontrast);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.9em;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
display: inline-block;
|
||||
@include border-radius(20px);
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
bottom: -20px;
|
||||
|
||||
.footer {
|
||||
font-size: 0.9em;
|
||||
margin-top: 30px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<span credential-field
|
||||
<td class="whitespace_normal_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>
|
||||
|
||||
</table>
|
||||
|
||||
<div class="tags">
|
||||
<tr ng-show="shared_credential.tags && shared_credential.tags.length > 0">
|
||||
<td>
|
||||
<?php p($l->t("Tags")); ?>
|
||||
</td>
|
||||
<td class="tags">
|
||||
<span class="tag" ng-repeat="tag in shared_credential.tags">{{tag.text}}</span>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="https://github.com/nextcloud/passman" target="_blank"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue