Bootstrap classes for form elements

rophako/modules/account/templates/account/login.html

@@ -11,12 +11,12 @@
     <legend>Log In</legend>
 
     <strong>Username:</strong><br>
-    <input type="text" size="20" name="username" id="username"><p>
+    <input type="text" class="form-control" size="20" name="username" id="username"><p>
 
     <strong>Passphrase:</strong><br>
-    <input type="password" size="20" name="password"><p>
+    <input type="password" class="form-control" size="20" name="password"><p>
 
-    <button type="submit">Log In</button>
+    <button type="submit" class="btn btn-primary">Log In</button>
 </fieldset>
 </form>
 

rophako/modules/account/templates/account/setup.html

@@ -22,20 +22,20 @@ to create the initial Administrator user account.<p>
     a typical username.<p>
 
     <strong>Username:</strong><br>
-    <input type="text" size="40" name="username" id="username" placeholder="admin"><p>
+    <input type="text" class="form-control" size="40" name="username" id="username" placeholder="admin"><p>
 
     <strong>Real name:</strong><br>
-    <input type="text" size="40" name="name" placeholder="John Doe"><p>
+    <input type="text" class="form-control" size="40" name="name" placeholder="John Doe"><p>
 
     <strong>Passphrase:</strong><br>
     This can be as long as you want. Pick something
     <a href="http://xkcd.com/936/" target="_blank">secure!</a><br>
-    <input type="password" size="40" id="pw1" name="password1" placeholder="correct horse battery staple"><p>
+    <input type="password" class="form-control" size="40" id="pw1" name="password1" placeholder="correct horse battery staple"><p>
 
     <strong>Confirm Passphrase:</strong><br>
-    <input type="password" size="40" id="pw2" name="password2" placeholder="correct horse battery staple"><p>
+    <input type="password" class="form-control" size="40" id="pw2" name="password2" placeholder="correct horse battery staple"><p>
 
-    <button type="submit">Next</button>
+    <button type="submit" class="btn btn-primary">Next</button>
 </fieldset>
 </form>
 

rophako/modules/admin/templates/admin/edit_user.html

@@ -21,23 +21,23 @@ $(document).ready(function() {
     <legend>User Details</legend>
 
     <strong>Username:</strong><br>
-    <input type="text" size="20" name="username" value="{{ info['username'] }}"><p>
+    <input type="text" class="form-control" size="20" name="username" value="{{ info['username'] }}"><p>
 
     <strong>Real name:</strong><br>
-    <input type="text" size="20" name="name" value="{{ info['name'] }}"><p>
+    <input type="text" class="form-control" size="20" name="name" value="{{ info['name'] }}"><p>
 
     <strong>Reset Password:</strong><br>
-    <input type="password" size="20" name="password1"><br>
-    <input type="password" size="20" name="password2"><p>
+    <input type="password" class="form-control" size="20" name="password1"><br>
+    <input type="password" class="form-control" size="20" name="password2"><p>
 
     <strong>Role:</strong><br>
-    <select name="role">
+    <select name="role" class="form-control">
         <option value="user"{% if info["role"] == "user" %} selected{% endif %}>User</option>
         <option value="admin"{% if info["role"] == "admin" %} selected{% endif %}>Admin</option>
     </select><p>
 
-    <button type="submit" name="action" value="save">Save Changes</button>
-    <button type="submit" name="action" id="delete_button" value="delete">Delete User</button>
+    <button type="submit" class="btn btn-primary" name="action" value="save">Save Changes</button>
+    <button type="submit" class="btn btn-warning" name="action" id="delete_button" value="delete">Delete User</button>
 </fieldset>
 </form>
 

rophako/modules/admin/templates/admin/users.html

@@ -13,24 +13,24 @@
     <legend>Create New User</legend>
 
     <strong>Username:</strong><br>
-    <input type="text" size="40" name="username" placeholder="soandso"><p>
+    <input type="text" class="form-control" size="40" name="username" placeholder="soandso"><p>
 
     <strong>Real name:</strong><br>
-    <input type="text" size="40" name="name" placeholder="John Smith"><p>
+    <input type="text" class="form-control" size="40" name="name" placeholder="John Smith"><p>
 
     <strong>Passphrase:</strong><br>
-    <input type="password" size="40" name="password1" placeholder="correct horse battery staple"><p>
+    <input type="password" class="form-control" size="40" name="password1" placeholder="correct horse battery staple"><p>
 
     <strong>Confirm:</strong><br>
-    <input type="password" size="40" name="password2" placeholder="correct horse battery staple"><p>
+    <input type="password" class="form-control" size="40" name="password2" placeholder="correct horse battery staple"><p>
 
     <strong>Role:</strong><br>
-    <select name="role">
+    <select name="role" class="form-control">
         <option value="user" selected>User</option>
         <option value="admin">Admin</option>
     </select>
 
-    <button type="submit">Create</button>
+    <button type="submit" class="btn btn-primary">Create</button>
 </fieldset>
 
 <h2>User List</h2>

rophako/modules/blog/templates/blog/delete.html

@@ -11,7 +11,7 @@
     Are you sure you want to delete the blog post,
     "{{ subject }}"?<p>
 
-    <button type="submit">Confirm Deletion</button>
+    <button type="submit" class="btn btn-warning">Confirm Deletion</button>
 </form>
 
 {% endblock %}

rophako/modules/blog/templates/blog/update.html

@@ -18,12 +18,12 @@
     <input type="hidden" name="token" value="{{ csrf_token() }}">
 
     <strong>Subject:</strong><br>
-    <input type="text" size="80" name="subject" value="{{ subject }}"><p>
+    <input type="text" class="form-control" size="80" name="subject" value="{{ subject }}"><p>
 
     <strong>Friendly ID:</strong><br>
     You can leave this blank if this is a new post. It defaults to be based
     on the subject.<br>
-    <input type="text" size="80" name="fid" value="{{ fid }}"><p>
+    <input type="text" class="form-control" size="80" name="fid" value="{{ fid }}"><p>
 
     <strong>Body:</strong><br>
     <label>
@@ -32,12 +32,12 @@
     <label>
         <input type="radio" name="format" value="html"{% if format == "html" %} checked{% endif %}> HTML
     </label><br>
-    <textarea cols="80" rows="12" name="body">{{ body }}</textarea><br>
+    <textarea class="form-control input-lg" cols="80" rows="12" name="body">{{ body }}</textarea><br>
     <a href="{{ url_for('emoticons.index') }}" target="_blank">Emoticon reference</a> (opens in new window)<p>
 
     <strong>Avatar:</strong><br>
     <span id="avatar-preview"></span>
-    <select name="avatar" id="avatar">
+    <select name="avatar" id="avatar" class="form-control">
         <option value=""{% if avatar == "" %} selected{% endif %}>Use my profile picture</option>
         {% for pic in avatars %}
         <option value="{{ pic }}"{% if avatar == pic %} selected{% endif %}>{{ pic }}</option>
@@ -46,10 +46,10 @@
 
     <strong>Categories:</strong><br>
     <small>Comma-separated list, e.g. General, HTML, Perl, Web Design</small><br>
-    <input type="text" size="40" name="categories" value="{{ categories }}"><p>
+    <input type="text" class="form-control" size="40" name="categories" value="{{ categories }}"><p>
 
     <strong>Privacy:</strong><br>
-    <select name="privacy">
+    <select name="privacy" class="form-control">
         <option value="public"{% if privacy == "public" %} selected{% endif %}>
             Public: everybody can see this blog entry
         </option>
@@ -69,20 +69,20 @@
     </label><p>
 
     <strong>Time Stamp:</strong><br>
-    <input type="text" size="2" name="month" id="month" value="{{ month }}"> /
-    <input type="text" size="2" name="day" id="day" value="{{ day }}"> /
-    <input type="text" size="4" name="year" id="year" value="{{ year }}"> @
-    <input type="text" size="2" name="hour" id="hour" value="{{ hour }}"> :
-    <input type="text" size="2" name="min" id="min" value="{{ min }}"> :
-    <input type="text" size="2" name="sec" id="sec" value="{{ sec }}"><br>
+    <input type="text" class="form-control input-sm inline" size="2" name="month" id="month" value="{{ month }}"> /
+    <input type="text" class="form-control input-sm inline" size="2" name="day" id="day" value="{{ day }}"> /
+    <input type="text" class="form-control input-sm inline" size="4" name="year" id="year" value="{{ year }}"> @
+    <input type="text" class="form-control input-sm inline" size="2" name="hour" id="hour" value="{{ hour }}"> :
+    <input type="text" class="form-control input-sm inline" size="2" name="min" id="min" value="{{ min }}"> :
+    <input type="text" class="form-control input-sm inline" size="2" name="sec" id="sec" value="{{ sec }}"><br>
     mm / dd / yyyy @ hh:mm:ss<br>
     <label>
         <input type="checkbox" id="autoup" value="yes"{% if post_id == "" %} checked{% endif %}>
         Automatically update
     </label><p>
 
-    <button type="submit" name="action" value="preview">Preview</button>
-    <button type="submit" name="action" value="publish">Publish Entry</button>
+    <button type="submit" class="btn btn-default" name="action" value="preview">Preview</button>
+    <button type="submit" class="btn btn-primary" name="action" value="publish">Publish Entry</button>
 </form>
 
 {% endblock %}

rophako/modules/comment/templates/comment/edit.html

@@ -16,15 +16,14 @@ Current preview of the comment:<p>
     <input type="hidden" name="token" value="{{ csrf_token() }}">
     <input type="hidden" name="url" value="{{ url }}">
 
-
     <strong>Message:</strong><br>
-    <textarea cols="40" rows="8" name="message">{{ comment["message"] }}</textarea><br>
+    <textarea class="form-control" cols="40" rows="8" name="message">{{ comment["message"] }}</textarea><br>
     <small>Comments can be formatted with <a href="/markdown" target="_blank">Markdown</a>,
     and you can use<br><a href="{{ url_for('emoticons.index') }}" target="_blank">emoticons</a>
     in your comment.</small><p>
 
-    <button type="submit" name="action" value="preview">Preview Comment</button>
-    <button type="submit" name="action" value="save">Save</button>
+    <button type="submit" class="btn btn-default" name="action" value="preview">Preview Comment</button>
+    <button type="submit" class="btn btn-primary" name="action" value="save">Save</button>
 </form>
 
 {% endblock %}

rophako/modules/comment/templates/comment/form.inc.html

@@ -14,7 +14,7 @@
             {% if session["login"] %}
                 <strong>{{ session["name"] }}</strong>
             {% else %}
-                <input type="text" size="40" name="name" value="{{ name }}">
+                <input type="text" class="form-control" size="40" name="name" value="{{ name }}">
             {% endif %}
         </td>
     </tr>
@@ -23,8 +23,7 @@
             Your Email:
         </td>
         <td align="left" valign="middle">
-            <input type="text" size="40" name="contact" value="{{ contact }}">
-            <small>(optional)</small>
+            <input type="text" class="form-control" size="40" name="contact" value="{{ contact }}" placeholder="(optional)">
         </td>
     </tr>
     <tr>
@@ -32,7 +31,7 @@
             Message:
         </td>
         <td align="left" valign="top">
-            <textarea cols="40" rows="8" name="message" style="width: 100%">{{ message }}</textarea><br>
+            <textarea class="form-control" cols="40" rows="8" name="message" style="width: 100%">{{ message }}</textarea><br>
             <small>Comments can be formatted with <a href="/markdown" target="_blank">Markdown</a>,
             and you can use<br><a href="{{ url_for('emoticons.index') }}" target="_blank">emoticons</a>
             in your comment.</small>
@@ -51,15 +50,15 @@
 
 <div style="display: none">
     If you can see this, don't touch the following fields.<br>
-    <input type="text" name="website" value="http://"><br>
-    <input type="text" name="email" value="">
+    <input type="text" class="form-control" name="website" value="http://"><br>
+    <input type="text" class="form-control" name="email" value="">
 </div>
 
 {% if preview %}
-    <button type="submit" name="action" value="preview">Refresh Preview</button>
-    <button type="submit" name="action" value="submit">Submit Comment</button>
+    <button class="btn btn-default" type="submit" name="action" value="preview">Refresh Preview</button>
+    <button class="btn btn-primary" type="submit" name="action" value="submit">Submit Comment</button>
 {% else %}
-    <button type="submit" name="action" value="preview">Leave Comment</button>
+    <button class="btn btn-primary" type="submit" name="action" value="preview">Leave Comment</button>
 {% endif %}
 
 </form>

rophako/modules/comment/templates/comment/privacy.html

@@ -46,14 +46,14 @@ e-mail address in the form below.<p>
     <input type="hidden" name="thread" value="*">
 
     Enter the e-mail address to be unsubscribed from all threads:<br>
-    <input type="email" size="40" name="email"><p>
+    <input type="email" class="form-control" size="40" name="email"><p>
 
-    <button type="submit">Unsubscribe</button>
+    <button type="submit" class="btn btn-primary">Unsubscribe</button>
 
     <div style="display: none">
         If you can see this, do not touch these fields.<br>
-        <input type="text" name="url" value="http://"><br>
-        <input type="text" name="message" value="">
+        <input type="text" class="form-control" name="url" value="http://"><br>
+        <input type="text" class="form-control" name="message" value="">
     </div>
 </form>
 

rophako/modules/contact/templates/contact/index.html

@@ -13,35 +13,35 @@ You can use the form below to send me an e-mail.<p>
         <td width="50%" align="left" valign="middle">
             <strong>Your name:</strong><br>
             <small>(so I know who you are)</small><br>
-            <input type="text" size="40" name="name">
+            <input type="text" class="form-control"size="40" name="name">
         </td>
         <td width="50%" align="left" valign="middle">
             <strong>Your email:</strong><br>
             <small>(if you want a response)</small><br>
-            <input type="email" size="40" name="email">
+            <input type="email" class="form-control" size="40" name="email">
         </td>
     </tr>
     <tr>
         <td colspan="2" align="left" valign="middle">
             <strong>Message subject:</strong><br>
             <small>(optional)</small><br>
-            <input type="text" size="40" name="subject" style="width: 100%"><p>
+            <input type="text" class="form-control" size="40" name="subject" style="width: 100%"><p>
 
             <strong>Message:</strong><br>
             <small>(required)</small><br>
-            <textarea cols="40" rows="12" name="message" style="width: 100%"></textarea>
+            <textarea class="form-control" cols="40" rows="12" name="message" style="width: 100%"></textarea>
         </td>
     </tr>
     <tr>
         <td colspan="2" align="right" valign="middle">
-            <button type="submit">Send Message</button>
+            <button type="submit" class="btn btn-primary">Send Message</button>
         </td>
     </tr>
 </table>
 <div style="display: none">
     If you can see these boxes, don't touch them.<br>
-    <input type="text" size="40" name="contact" value=""><br>
-    <input type="text" size="40" name="website" value="http://">
+    <input type="text" class="form-control" size="40" name="contact" value=""><br>
+    <input type="text" class="form-control" size="40" name="website" value="http://">
 </div>
 </form>
 

rophako/modules/photo/templates/photos/arrange_albums.html

@@ -9,7 +9,7 @@ Drag and drop your albums in the positions you want them in.<p>
 <form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_albums') }}" method="POST">
     <input type="hidden" name="token" value="{{ csrf_token() }}">
     <input type="hidden" name="order" id="order" value="">
-    <button type="submit">Save Changes</button>
+    <button type="submit" class="btn btn-primary">Save Changes</button>
 </form>
 <p>
 

rophako/modules/photo/templates/photos/arrange_photos.html

@@ -9,7 +9,7 @@ Drag and drop your photos in the positions you want them in.<p>
 <form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_photos', album=album) }}" method="POST">
     <input type="hidden" name="token" value="{{ csrf_token() }}">
     <input type="hidden" name="order" id="order" value="">
-    <button type="submit">Save Changes</button>
+    <button type="submit" class="btn btn-primary">Save Changes</button>
 </form>
 <p>
 

rophako/modules/photo/templates/photos/crop.html

@@ -26,7 +26,7 @@ crop.<p>
                 <input type="hidden" name="y" id="y" value="0">
                 <input type="hidden" name="length" id="length" value="0">
 
-                <button type="submit">Crop Photo!</button>
+                <button type="submit" class="btn btn-primary">Crop Photo!</button>
             </form>
         </td>
     </tr>

rophako/modules/photo/templates/photos/delete.html

@@ -10,7 +10,7 @@
     <input type="hidden" name="token" value="{{ csrf_token() }}">
     Are you <strong>sure</strong> you want to delete this photo?<p>
 
-    <button type="submit">Yes, Delete This Photo</button>
+    <button type="submit" class="btn btn-warning">Yes, Delete This Photo</button>
 </form>
 
 {% endblock %}

rophako/modules/photo/templates/photos/delete_album.html

@@ -8,7 +8,7 @@
     <input type="hidden" name="token" value="{{ csrf_token() }}">
     Are you <strong>sure</strong> you want to delete the album <strong>{{ album }}</strong>?<p>
 
-    <button type="submit">Yes, Delete This Album</button>
+    <button type="submit" class="btn btn-warning">Yes, Delete This Album</button>
 </form>
 
 {% endblock %}

rophako/modules/photo/templates/photos/edit.html

@@ -10,10 +10,10 @@
     <input type="hidden" name="token" value="{{ csrf_token() }}">
 
     <strong>Photo Caption:</strong><br>
-    <input type="text" size="40" name="caption" value="{{ photo['caption'] }}"><p>
+    <input type="text"  class="form-control"size="40" name="caption" value="{{ photo['caption'] }}"><p>
 
     <strong>Description:</strong><br>
-    <textarea cols="50" rows="6" name="description">{{ photo['description'] }}</textarea><br>
+    <textarea class="form-control" cols="50" rows="6" name="description">{{ photo['description'] }}</textarea><br>
     <small>Use <a href="/markdown">Markdown</a> syntax.</small><p>
 
     Rotate:
@@ -30,7 +30,7 @@
         <input type="radio" name="rotate" value="180"> 180&deg;
     </label><p>
 
-    <button type="submit">Save Changes</button>
+    <button type="submit" class="btn btn-primary">Save Changes</button>
 </form>
 
 {% endblock %}

rophako/modules/photo/templates/photos/edit_album.html

@@ -8,10 +8,10 @@
     <input type="hidden" name="token" value="{{ csrf_token() }}">
 
     <strong>Album Title:</strong><br>
-    <input type="text" size="40" name="name" value="{{ album }}"><p>
+    <input type="text" class="form-control" size="40" name="name" value="{{ album }}"><p>
 
     <strong>Description:</strong><br>
-    <textarea cols="50" rows="6" name="description">{{ album_info["description"] }}</textarea><br>
+    <textarea class="form-control" cols="50" rows="6" name="description">{{ album_info["description"] }}</textarea><br>
     <small>Use <a href="/markdown" target="_blank">Markdown</a> syntax.</small><p>
 
     <strong>Display Format:</strong><br>
@@ -24,7 +24,7 @@
         <strong>Vertical:</strong> Display all full size photos in one vertical view.
     </label><p>
 
-    <button type="submit">Save Changes</button>
+    <button type="submit" class="btn btn-primary">Save Changes</button>
 
 </form>
 

rophako/modules/photo/templates/photos/edit_captions.html

@@ -17,16 +17,16 @@ All captions use <a href="/markdown">Markdown</a> syntax.<p>
             </td>
             <td align="left" valign="top">
                 <strong>Caption:</strong><br>
-                <input type="text" size="40" name="{{ photo['key'] }}:caption" value="{{ photo['data']['caption'] }}"><p>
+                <input type="text" class="form-control" size="40" name="{{ photo['key'] }}:caption" value="{{ photo['data']['caption'] }}"><p>
 
                 <strong>Description:</strong><br>
-                <textarea cols="50" rows="6" name="{{ photo['key'] }}:description">{{ photo['data']['description'] }}</textarea>
+                <textarea class="form-control" cols="50" rows="6" name="{{ photo['key'] }}:description">{{ photo['data']['description'] }}</textarea>
             </td>
         </tr>
     {% endfor %}
     </table><p>
 
-    <button type="submit">Save Changes</button>
+    <button type="submit" class="btn btn-primary">Save Changes</button>
 
 </form>
 

rophako/modules/photo/templates/photos/upload.html

@@ -30,7 +30,7 @@ somewhere else on the Internet.
 
         <div id="pic-www" class="location-div">
             <strong>Upload a picture from the Internet</strong><br>
-            <input type="text" size="40" name="url" placeholder="http://" autocomplete="off">
+            <input type="text" class="form-control" size="40" name="url" placeholder="http://" autocomplete="off">
         </div>
         <p>
 
@@ -43,7 +43,7 @@ somewhere else on the Internet.
         <legend>Photo Options</legend>
 
         <strong>Photo album:</strong><br>
-        <select id="album" name="album">
+        <select id="album" name="album" class="form-control">
             <optgroup label="Albums">
             {% for album in album_list %}
                 <option value="{{ album }}"{% if album == selected %} selected{% endif %}>{{ album }}</option>
@@ -54,10 +54,10 @@ somewhere else on the Internet.
 
         <blockquote id="create-album">
             <strong>New album:</strong><br>
-            <input type="text" size="20" id="new-album" name="new-album"><p>
+            <input type="text" class="form-control" size="20" id="new-album" name="new-album"><p>
 
             <strong>Album Description:</strong><br>
-            <textarea cols="50" rows="6" name="new-description"></textarea><br>
+            <textarea cols="50" class="form-control" rows="6" name="new-description"></textarea><br>
             <small>Shows up at the top of the album.
             Use <a href="/markdown" target="_blank">Markdown</a> formatting.</small>
         </blockquote>
@@ -73,7 +73,7 @@ somewhere else on the Internet.
     </fieldset>
     <p>
 
-    <button type="submit" id="upload-button">Upload Picture</button>
+    <button type="submit" class="btn btn-primary" id="upload-button">Upload Picture</button>
 
 </form>