Properly align 'Description' field in all widths
authorJustin J. Novack <jnovack@gmail.com>
Sun, 7 Oct 2012 04:27:28 +0000 (00:27 -0400)
committerChristian Weiske <cweiske@cweiske.de>
Wed, 24 Oct 2012 13:00:42 +0000 (15:00 +0200)
data/templates/edit.htm
data/templates/new.htm
www/css/phorkie.css

index 521a7c2..db1f3f5 100644 (file)
@@ -6,10 +6,12 @@
 {% endblock %}
 
 {% block content %}
-<form method="post" action="{{repo.getLink('edit')}}" enctype="multipart/form-data">
- <div class="control-group pastedata">
-   <label for="description">Description</label>
+<form method="post" action="{{repo.getLink('edit')}}" enctype="multipart/form-data" class="form-horizontal">
+ <div class="control-group">
+  <label class="control-label" for="description">Description</label>
+  <div class="controls">
    <input type="text" name="description" id="description" value="{{repo.getDescription}}"/>
+  </div>
  </div>
 
  {% for fileid, file in repo.getFiles %}
index 4a748bf..295b76d 100644 (file)
@@ -2,10 +2,12 @@
 {% block title %}New paste{% endblock %}
 
 {% block content %}
-<form method="post" action="/new" enctype="multipart/form-data">
- <div class="control-group pastedata">
-   <label for="description">Description</label>
+<form method="post" action="/new" enctype="multipart/form-data" class="form-horizontal">
+ <div class="control-group">
+  <label class="control-label" for="description">Description</label>
+  <div class="controls">
    <input type="text" name="description" id="description" value="{{description}}"/>
+  </div>
  </div>
 
  {% include 'edit-file.htm' with {'file': file[1], 'fileid': 0, 'newfile': true} %}
index f5de225..1b524f7 100644 (file)
@@ -108,17 +108,6 @@ ul.pager {
     margin-top: 2ex;
 }
 
-.pastedata label {
-    display: block;
-    float: left;
-    width: 100px;
-    margin-top: 4px;
-}
-.pastedata input {
-    display: block;
-    margin-left: 110px;
-    width: 590px !important;
-}
 .formbuttons {
     margin-top: 2ex;
 }
@@ -153,6 +142,15 @@ form label.inline {
     display: inline;
 }
 
+.form-horizontal .control-label {
+    text-align: left;
+    width: 8em;
+}
+
+.form-horizontal .controls {
+    margin-left: 8em;
+}
+
 .btn [class^="icon-"], .btn [class*=" icon-"] {
     line-height: 1.1em;
 }