improve template styling consistency

This commit is contained in:
glyph 2021-11-18 11:48:37 +02:00
parent 925051a379
commit da51070ccd
5 changed files with 35 additions and 71 deletions

View File

@ -4,47 +4,22 @@
<div class="card center"> <div class="card center">
<div class="form-container"> <div class="form-container">
<form id="changePassword" action="/settings/change_password" method="post"> <form id="changePassword" action="/settings/change_password" method="post">
<div class="input-wrapper"> <!-- input for current password -->
<!-- input for old password --> <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
<label id="old_password" class="label-small input-label font-near-black"> <!-- input for new password -->
<label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label> <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
<input id="old_password" class="form-input" style="margin-bottom: 0;" <!-- input for duplicate new password -->
name="old_password" type="password" title="old password" value=""> <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
</label>
</div>
<div class="input-wrapper">
<!-- input for new password1 -->
<label id="new_password1" class="label-small input-label font-near-black">
<label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
<input id="new_password1" class="form-input" style="margin-bottom: 0;"
name="new_password1" title="new_password1" type="password" value="">
</label>
</div>
<div class="input-wrapper">
<!-- input for new password2 -->
<label id="new_password2" class="label-small input-label font-near-black">
<label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
<input id="new_password2" class="form-input" style="margin-bottom: 0;"
name="new_password2" title="new_password2" type="password" value="">
</label>
</div>
<div id="buttonDiv"> <div id="buttonDiv">
<input id="changePasswordButton" class="button button-primary center" title="Add" type="submit" value="Save"> <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
<a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
</div> </div>
<a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
</form> </form>
<!-- FLASH MESSAGE --> <!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %} {% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED --> <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %} {% include "snippets/noscript" %}
</div> </div>
</div> </div>
<script type="text/javascript" src="/js/change_password.js"></script> <script type="text/javascript" src="/js/change_password.js"></script>
{%- endblock card -%} {%- endblock card -%}

View File

@ -1,25 +1,20 @@
{%- extends "nav" -%} {%- extends "nav" -%}
{%- block card %} {%- block card %}
<!--PUBLIC PAGE FOR SENDING A NEW TEMPORARY PASSWORD TO BE USED TO RESET YOUR PASSWORD --> <!-- PASSWORD RESET REQUEST CARD -->
<div class="card center"> <div class="card center">
<p class="text-notice" style="width: 80%; margin:auto; margin-bottom: 35px; margin-top: 20px;"> <div class="capsule capsule-container info-border">
Click the button below to send a new temporary password which can be used to change your device password. <p class="card-text">Click the button below to send a new temporary password which can be used to change your device password.
<br/><br/> </br></br>
The temporary password will be sent in an SSB private message to the admin of this device. The temporary password will be sent in an SSB private message to the admin of this device.</p>
</p> </div>
<form id="sendPasswordReset" action="/send_password_reset" method="post"> <form id="sendPasswordReset" action="/send_password_reset" method="post">
<div id="buttonDiv"> <div id="buttonDiv">
<input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/> <input class="button button-primary center" style="margin-top: 1rem;" type="submit" value="Send Password Reset" title="Send Password Reset Link"/>
</div> </div>
</form> </form>
<!-- FLASH MESSAGE --> <!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %} {% include "snippets/flash_message" %}
<!-- NO SCRIPT FOR WHEN JS IS DISABLED --> <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
{% include "snippets/noscript" %} {% include "snippets/noscript" %}
</div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

View File

@ -2,12 +2,10 @@
{%- block card %} {%- block card %}
<!-- ADMIN SETTINGS MENU --> <!-- ADMIN SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
<a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a> <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
<a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

View File

@ -2,13 +2,11 @@
{%- block card %} {%- block card %}
<!-- SETTINGS MENU --> <!-- SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
<a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a> <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
<a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a> <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
<a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}

View File

@ -2,19 +2,17 @@
{%- block card %} {%- block card %}
<!-- SCUTTLEBUTT SETTINGS MENU --> <!-- SCUTTLEBUTT SETTINGS MENU -->
<div class="card center"> <div class="card center">
<div class="card-container"> <!-- BUTTONS -->
<!-- BUTTONS --> <div id="settingsButtons">
<div id="settingsButtons"> <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
<a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a> <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
<a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a> <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
<a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a> <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
<a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a> <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
<a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a> <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
<a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a> <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
<a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a> <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
<a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a> <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
<a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
</div>
</div> </div>
</div> </div>
{%- endblock card -%} {%- endblock card -%}