From 32e076af5be1ffa0772ce2854dd88329877a76b5 Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Tue, 22 Dec 2015 09:47:20 -0700
Subject: [PATCH] Clean up horizon.scss - Keypairs

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
---
 .../access_and_security/keypairs/detail.html  | 44 +++++++++----------
 .../static/dashboard/scss/_util.scss          |  6 +++
 .../static/dashboard/scss/horizon.scss        |  8 ----
 .../themes/default/horizon/_styles.scss       |  9 ++++
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/openstack_dashboard/dashboards/project/access_and_security/templates/access_and_security/keypairs/detail.html b/openstack_dashboard/dashboards/project/access_and_security/templates/access_and_security/keypairs/detail.html
index b71cf11d67..cd7ec37e13 100644
--- a/openstack_dashboard/dashboards/project/access_and_security/templates/access_and_security/keypairs/detail.html
+++ b/openstack_dashboard/dashboards/project/access_and_security/templates/access_and_security/keypairs/detail.html
@@ -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 %}
diff --git a/openstack_dashboard/static/dashboard/scss/_util.scss b/openstack_dashboard/static/dashboard/scss/_util.scss
index a2a44b31ec..c8233a053e 100644
--- a/openstack_dashboard/static/dashboard/scss/_util.scss
+++ b/openstack_dashboard/static/dashboard/scss/_util.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index d87f1eb0a6..6e83c9aa9d 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -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 {
diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss
index 10d083c514..3e33446bc8 100644
--- a/openstack_dashboard/themes/default/horizon/_styles.scss
+++ b/openstack_dashboard/themes/default/horizon/_styles.scss
@@ -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;
+}
\ No newline at end of file