Fix styling of verification box to popover
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
17ad8120fd
commit
08a33cc475
3 changed files with 19 additions and 50 deletions
|
@ -141,10 +141,10 @@ input#openid, input#webdav { width:20em; }
|
|||
|
||||
#personal-settings-container .verify {
|
||||
float: right;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#personal-settings-container .verify-action {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -1030,47 +1030,16 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
|
|||
|
||||
/* verify accounts */
|
||||
#verification-dialog {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
.verification-dialog-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto; /* 15% from the top and centered */
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 60%; /* Could be more or less, depending on screen size */
|
||||
}
|
||||
|
||||
#verify-dialog-close {
|
||||
float: right;
|
||||
width: 34px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin: 0 !important;
|
||||
border-radius: 0;
|
||||
right: 0;
|
||||
opacity: 0.3;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#verify-dialog-close:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
#verification-dialog p {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#verification-dialog .verificationCode {
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
margin: 20px 20px 20px 0;
|
||||
}
|
||||
|
|
|
@ -203,8 +203,8 @@ $(document).ready(function () {
|
|||
|
||||
var showVerifyDialog = function(howToVerify, verificationCode) {
|
||||
var dialog = document.getElementById('verification-dialog');
|
||||
$(".verification-dialog-content span.explainVerification").text(howToVerify);
|
||||
$(".verification-dialog-content span.verificationCode").text(verificationCode);
|
||||
$(".verification-dialog-content .explainVerification").text(howToVerify);
|
||||
$(".verification-dialog-content .verificationCode").text(verificationCode);
|
||||
dialog.style.display = "block";
|
||||
};
|
||||
|
||||
|
|
|
@ -8,13 +8,12 @@
|
|||
/** @var \OCP\Defaults $theme */
|
||||
?>
|
||||
|
||||
<div id="verification-dialog">
|
||||
<div id="verification-dialog" class="popovermenu bubble menu hidden">
|
||||
|
||||
<!-- dialog used to verify personal information such as the users website, email address, etc -->
|
||||
<div class="verification-dialog-content">
|
||||
<button id="verify-dialog-close" class="icon-close svg"></button>
|
||||
<span class="explainVerification">How to verify your account details</span><br />
|
||||
<span class="verificationCode">verification code</span>
|
||||
<p class="explainVerification">How to verify your account details</p>
|
||||
<p class="verificationCode">Verification code</p>
|
||||
<p>It can take up to 24 hours before the account is displayed as verified.</p>
|
||||
</div>
|
||||
|
||||
|
@ -111,11 +110,11 @@
|
|||
<label for="email"><?php p($l->t('Email')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
</h2>
|
||||
<span class="verify">
|
||||
<img id="verify-email" <?php
|
||||
<div class="verify">
|
||||
<img id="verify-email" class="verify-action" <?php
|
||||
switch($_['emailVerification']) {
|
||||
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
|
||||
break;
|
||||
case \OC\Accounts\AccountManager::VERIFIED:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
|
||||
|
@ -124,7 +123,7 @@
|
|||
print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify"');
|
||||
}
|
||||
?>>
|
||||
</span>
|
||||
</div>
|
||||
<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
|
||||
<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
|
||||
placeholder="<?php p($l->t('Your email address')); ?>"
|
||||
|
@ -177,11 +176,11 @@
|
|||
<label for="website"><?php p($l->t('Website')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
</h2>
|
||||
<span class="verify">
|
||||
<div class="verify">
|
||||
<img id="verify-website" <?php
|
||||
switch($_['websiteVerification']) {
|
||||
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
|
||||
break;
|
||||
case \OC\Accounts\AccountManager::VERIFIED:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
|
||||
|
@ -190,7 +189,7 @@
|
|||
print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify" class="verify-action"');
|
||||
}
|
||||
?>>
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
|
||||
placeholder="<?php p($l->t('Your website')); ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
|
@ -204,11 +203,11 @@
|
|||
<label for="twitter"><?php p($l->t('Twitter')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
</h2>
|
||||
<span class="verify">
|
||||
<div class="verify">
|
||||
<img id="verify-twitter" <?php
|
||||
switch($_['twitterVerification']) {
|
||||
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying..."');
|
||||
print_unescaped('src="' . image_path('core', 'actions/verifying.svg') . '" title="Verifying …"');
|
||||
break;
|
||||
case \OC\Accounts\AccountManager::VERIFIED:
|
||||
print_unescaped('src="' . image_path('core', 'actions/verified.svg') . '" title="Verified"');
|
||||
|
@ -217,6 +216,7 @@
|
|||
print_unescaped('src="' . image_path('core', 'actions/verify.svg') . '" title="Verify" class="verify-action"');
|
||||
}
|
||||
?>>
|
||||
</div>
|
||||
<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
|
||||
placeholder="<?php p($l->t('Your Twitter handle')); ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
|
|
Loading…
Reference in a new issue