Bootstrap classes for form elements

pull/2/head
Noah 2014-10-15 18:25:45 -07:00
parent cea93cbf34
commit 001db8d714
19 changed files with 77 additions and 79 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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>

View File

@ -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>

View File

@ -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>