openstack/horizon
Code Issues Proposed changes

Clean up horizon.scss - Keypairs

Browse Source 
A major part of the css reorg is a better organization of the css
styles themselves. horizon.scss should be a global import level file.

Keypair details was, for some reason, using a textarea element to
display non-form 'Public Key'.  Textarea is used for allowing users
to input data, this is a read only display. Replaced with a simple
<div> and removed the unnecessary styles from horizon.scss.  Added
a util class for easier use.

Cleaned up class name for 'key-text' class name.  Adding classes,
even if they are unused, allows for rich customization hooks for
consumers of Horizon.

Change-Id: I3d5ce1cb0a4cae6774e515206e511f61e2a9d10e
Partially-Implements: blueprint horizon-theme-css-reorg
This commit is contained in:
Diana Whitten
2015-12-22 09:47:20 -07:00
parent 0175b62c66
commit 32e076af5b
4 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
openstack_dashboard/dashboards/project/access_and_security/templates/access_and_security/keypairs/detail.html
View File

@@ -10,28 +10,24 @@
{% endblock %}
{% block main %}
<div class="row-fluid">
<div class="info detail col-sm-12">
<h4>{% trans "Information" %}</h4>
<hr class="header_rule">
<dl class="dl-horizontal">
<dt>{% trans "Name" %}</dt>
<dd>{{ keypair.name|default:_("None") }}</dd>
<dt>{% trans "ID" %}</dt>
<dd>{{ keypair.id|default:_("None") }}</dd>
<dt>{% trans "Fingerprint" %}</dt>
<dd>{{ keypair.fingerprint|default:_("None") }}</dd>
<dt>{% trans "Created" %}</dt>
<dd>{{ keypair.created_at|parse_isotime}}</dd>
{% if keypair.updated_at %}
<dt>{% trans "Updated" %}
<dd>{{ keypair.updated_at|parse_isotime}}</dd>
{% endif %}
<dt>{% trans "User ID" %}</dt>
<dd>{{ keypair.user_id|default:_("None") }}</dd>
<dt>{% trans "Public Key" %}</dt>
<dd><textarea class="key_text">{{ keypair.public_key|default:_("None") }}</textarea></dd>
</dl>
</div>
</div>
<dl class="dl-horizontal">
<dt>{% trans "Name" %}</dt>
<dd>{{ keypair.name|default:_("None") }}</dd>
<dt>{% trans "ID" %}</dt>
<dd>{{ keypair.id|default:_("None") }}</dd>
<dt>{% trans "Fingerprint" %}</dt>
<dd>{{ keypair.fingerprint|default:_("None") }}</dd>
<dt>{% trans "Created" %}</dt>
<dd>{{ keypair.created_at|parse_isotime}}</dd>
{% if keypair.updated_at %}
<dt>{% trans "Updated" %}
<dd>{{ keypair.updated_at|parse_isotime}}</dd>
{% endif %}
<dt>{% trans "User ID" %}</dt>
<dd>{{ keypair.user_id|default:_("None") }}</dd>
<dt>{% trans "Public Key" %}</dt>
<dd>
<div class="key-text word-wrap">{{ keypair.public_key|default:_("None") }}</div>
</dd>
</dl>
{% endblock %}

6
openstack_dashboard/static/dashboard/scss/_util.scss
View File

@@ -16,3 +16,9 @@
word-wrap: normal;
}
}
// Set on an element that you would like to word wrap to container size
.word-wrap {
width: 100%;
word-wrap: break-word;
}

8
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@@ -881,14 +881,6 @@ input::-ms-clear, input::-ms-reveal {
display: none;
}
/* public key text area */
textarea.key_text {
width: 55em;
height: 11em;
resize: none;
border: none;
}
/**** Form Horizontal Override ****/
.form-horizontal {
.form-group {

9
openstack_dashboard/themes/default/horizon/_styles.scss
View File

@@ -34,3 +34,12 @@ form label {
line-height: $line-height-small;
}
}
// Note (hurgleburgler) : the combination of display: table-cell, width: 100%
// and max-width has strange consequences in CSS. This is required to make sure
// that the width does not stretch beyond 100%. Please see the answer to
// this question for specifics:
// http://stackoverflow.com/questions/26292408/why-does-this-behave-the-way-it-does-with-max-width-0
#content_body {
max-width: 0;
}