Fix breaking layout in IE6

author: Bobby <[email protected]> 2023-04-22 19:18:03 -0400
committer: Bobby <[email protected]> 2023-04-22 19:18:03 -0400
commit: 6e3748deb07a4916c516a6b38197a29b91f35c8a (patch)
tree: f5c400c45d9025014701a3dfdc26a5d3de193f59
parent: 595cca134dce3e826f0f3bf63050b4a6f99baa38 (diff)
download: thatcomputerscientist-6e3748deb07a4916c516a6b38197a29b91f35c8a.tar.xz
thatcomputerscientist-6e3748deb07a4916c516a6b38197a29b91f35c8a.zip
5 files changed, 115 insertions, 118 deletions
diff --git a/blog/context_processors.py b/blog/context_processors.py
index 53a16417..968034b4 100644
--- a/blog/context_processors.py
+++ b/blog/context_processors.py
@@ -69,7 +69,7 @@ def highlight_code_blocks(code_block):
         lexer = get_lexer_by_name('text')
 
     # highlight the code
-    formatter = HtmlFormatter(noclasses=True, style='native')
+    formatter = HtmlFormatter(noclasses=True, style='native', wrapcode=True)
     highlighted_code = highlight(cb, lexer, formatter)
 
     return highlighted_code
diff --git a/static/css/styles.css b/static/css/styles.css
index 54ce683f..bed7d0be 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -291,21 +291,15 @@ blockquote {
 }
 
 #sidebar {
-    float: left;
-    margin: 0px;
-    padding: 0px;
     width: 250px;
-    height: 100%;
-    display: inline;
 }
 
 #content {
-    float: left;
-    margin: 0px;
-    padding: 0px 0px 0px 20px;
     width: 730px;
-    height: 100%;
-    display: inline;
+} 
+
+#article, #comments, #new-comment {
+    width: 730px;
 }
 
 #footer {
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index 9feedeaf..5104251b 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -28,15 +28,17 @@
   <body>
     <div id="wrap">
       <div id="header"></div>
-      
-      <div id="main-section">
-        <div id="sidebar" style="display: inline;">
-          {% include 'blog/partials/sidebar.html' %}
-        </div>
-        <div id="content" style="display: inline;">
-          {% block content %} {% endblock %}
-        </div>
-      </div>
+
+      <table id="main-section" cellpadding="0" cellspacing="0">
+        <tr>
+          <td id="sidebar" valign="top">
+            {% include 'blog/partials/sidebar.html' %}
+          </td>
+          <td id="content" valign="top" style="padding-left: 20px;">
+            {% block content %} {% endblock %}
+          </td>
+        </tr>
+      </table>            
 
       <div id="footer" style="clear: both">
         <hr style="margin: 2rem 0" />
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index dd9f8828..b47b3657 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -4,52 +4,61 @@
 <div id="login-area">
     <h2>Login</h2>
     <form method="post" action="{% url 'users:login' %}" id="login-form">
-        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" style="display: none;">
-        <div>
-            <span style="width: 70px;">Username:</span>
-            <span style="width: 156px;">
-                <input type="text" style="width: 156px;" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}">
-            </span>
-        </div>
-        <div>
-            <span style="width: 70px;">Password:</span>
-            <span style="width: 156px;">
-                <input type="password" style="width: 156px;" id="password" name="password" placeholder="Password" autocomplete="off">
-            </span>
-        </div>
-        <div>
-            <input type="hidden" name="next" value="{{ request.path }}" style="display: none;">
-            <input class="button button-special" type="submit" value="Login">
-            {% if not user.is_authenticated %}
-            <span style="margin-left: 10px; width: 90px;">
-                <a href="{% url 'blog:register' %}" class="button button" style="text-decoration: none;">
-                    New User?
-                </a>
-            </span>
-            {% endif %}
-        </div>
-    </form>
-    {% for message in messages %}
-        {% if 'loginError' in message.tags %}
-            {% if message.message == "EVERR" and request.GET.username %}
-            <form method="post" action="{% url 'users:sendverificationemail' %}" >
-                <p class="message {{message.tags}}">
-                    Your email is unverified. Please check your inbox for a verification email or to request a new verification email by clicking{% csrf_token %}<input type="hidden" name="username" value="{{ request.GET.username }}"><input style="display: inline; background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; margin: 0;" type="submit" value="here.">
-                </p>
+        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
+        <table style="width: 100%; table-layout: fixed;">
+            <tbody>
+                <tr>
+                    <td style="width: 70px; padding-right: 10px;"><label for="username"><b>Username:</b></label></td>
+                    <td style="padding-top: 10px; width: 160px;"><input style="width: 140px;" type="text" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}"></td>
+                </tr>
+                <tr>
+                    <td style="width: 70px; padding-right: 10px;"><label for="password"><b>Password:</b></label></td>
+                    <td style="padding-top: 10px; width: 160px;"><input style="width: 140px;" type="password" id="password" name="password" placeholder="Password" autocomplete="off"></td>
+                </tr>
+                <tr>
+                    <td style="padding-top: 10px;" colspan="2">
+                        <input type="hidden" name="next" value="{{ request.path }}">
+                        <input class="button button-special" type="submit" value="Login">
+                        {% if not user.is_authenticated %}
+                        <a href="{% url 'blog:register' %}" class="button button" style="text-decoration: none;">
+                            New User?
+                        </a>
+                        {% endif %}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        {% for message in messages %}
+            {% if 'loginError' in message.tags %}
+                {% if message.message == "EVERR" and request.GET.username %}
+                <form method="post" action="{% url 'users:sendverificationemail' %}">
+                    <p class="message {{message.tags}}">
+                        Your email is unverified. Please check your inbox for a verification email or to request a new verification email by clicking{% csrf_token %}<input type="hidden" name="username" value="{{ request.GET.username }}"><input style="display: inline; background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; margin: 0;" type="submit" value="here.">
+                    </p>
                 </form>
-            {% else %}
-            <p class="message {{message.tags}}">{{message.message}}</p>
+                {% else %}
+                <p class="message {{message.tags}}">{{message.message}}</p>
+                {% endif %}
             {% endif %}
-        {% endif %}
-    {% endfor %}
+        {% endfor %}
+    </form>
 </div>
 {% endif %}
 
+
 <div id="search-area" {% if not user.is_authenticated %}class="mtsbitem"{% endif %}>
     <h2>Search</h2>
     <form action="{% url 'blog:search' %}" method="get">
-        <input type="text" name="query" placeholder="Search..." autocomplete="off" style="width: 166px;" value="{{ request.GET.query }}">
-        <input type="submit" align="center" class="button button-special" value="Search" style="width: 60px;">
+        <table style="width: 250px; border-spacing: 0; border-collapse: separate;">
+            <tr>
+                <td style="width: 150px; padding-right: 10px;">
+                    <input type="text" name="query" placeholder="Search..." autocomplete="off" style="width: 100%; box-sizing: border-box;" value="{{ request.GET.query }}">
+                </td>
+                <td style="width: 80px;">
+                    <input type="submit" align="center" class="button button-special" value="Search" style="width: 100%;">
+                </td>
+            </tr>
+        </table>
     </form>
 </div>
 {% if user.is_authenticated %}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index f05b27b1..040f9e34 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -113,78 +113,70 @@
     <p><em>You must be logged in to leave a comment.</em></p>
 </div>
 {% endif %}
-<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
-<script>
+<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
+<script type="text/javascript">
     function editComment(id) {
-        $('#comment-body-' + id).hide();
-        $('#edit-form-' + id).show();
+        document.getElementById('comment-body-' + id).style.display = 'none';
+        document.getElementById('edit-form-' + id).style.display = 'block';
     }
 
     function cancelEdit(id) {
-        $('#comment-body-' + id).show();
-        $('#edit-form-' + id).hide();
+        document.getElementById('comment-body-' + id).style.display = 'block';
+        document.getElementById('edit-form-' + id).style.display = 'none';
     }
 
-    // We are aiming to keep the JS to ES3 for compatibility with older browsers.
-    // Get all textareas and bind the shortkeys.
-    var textareas = $('textarea');
-
     function toggleTips() {
-        var tips = $('#tips');
-        if (tips.css('display') == 'none') {
-            tips.css('display', 'block');
+        var tips = document.getElementById('tips');
+        if (tips.style.display == 'none') {
+            tips.style.display = 'block';
         } else {
-            tips.css('display', 'none');
+            tips.style.display = 'none';
         }
     }
 
-    textareas.each(function() {
-        $(this).keydown(function(e) {
-            if (e.keyCode == 66 && (e.ctrlKey || e.metaKey)) {
-                e.preventDefault();
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                this.value = this.value.substring(0, start) + '**' + this.value.substring(start, end) + '**' + this.value.substring(end);
-                this.selectionStart = start + 2;
-                this.selectionEnd = end + 2;
-            } else if (e.keyCode == 73 && (e.ctrlKey || e.metaKey)) {
-                e.preventDefault();
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                this.value = this.value.substring(0, start) + '__' + this.value.substring(start, end) + '__' + this.value.substring(end);
-                this.selectionStart = start + 2;
-                this.selectionEnd = end + 2;
-            } else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey)) {
-                e.preventDefault();
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                this.value = this.value.substring(0, start) + '~~' + this.value.substring(start, end) + '~~' + this.value.substring(end);
-                this.selectionStart = start + 2;
-                this.selectionEnd = end + 2;
-            } else if (e.keyCode == 75 && (e.ctrlKey || e.metaKey)) {
-                e.preventDefault();
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                this.value = this.value.substring(0, start) + '```' + this.value.substring(start, end) + '```' + this.value.substring(end);
-                this.selectionStart = start + 3;
-                this.selectionEnd = end + 3;
-            }
-        });
-    });
+    var textareas = $('textarea');
+
+    function insertAtCursor(field, text) {
+        if (field.createTextRange) {
+            var range = field.createTextRange();
+            range.collapse(true);
+            range.moveStart('character', text.length);
+            range.select();
+        } else if (field.setSelectionRange) {
+            var start = field.selectionStart;
+            field.value = field.value.substring(0, start) + text + field.value.substring(field.selectionEnd);
+            field.setSelectionRange(start + text.length, start + text.length);
+            field.focus();
+        }
+    }
 
-    // Bind the tab key to indent textareas by 4 spaces.
-    textareas.each(function() {
-        $(this).keydown(function(e) {
-            if (e.keyCode == 9) {
-                e.preventDefault();
-                var start = this.selectionStart;
-                var end = this.selectionEnd;
-                this.value = this.value.substring(0, start) + '    ' + this.value.substring(end);
-                this.selectionStart = start + 4;
-                this.selectionEnd = end + 4;
-            }
-        });
-    });
+    function handleKeyDown(e) {
+        var field = e.target;
+        if (e.keyCode == 66 && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            insertAtCursor(field, '**');
+        } else if (e.keyCode == 73 && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            insertAtCursor(field, '__');
+        } else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            insertAtCursor(field, '~~');
+        } else if (e.keyCode == 75 && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            insertAtCursor(field, '```');
+        } else if (e.keyCode == 9) {
+            e.preventDefault();
+            var start = field.selectionStart;
+            var end = field.selectionEnd;
+            field.value = field.value.substring(0, start) + '    ' + field.value.substring(end);
+            field.setSelectionRange(start + 4, end + 4);
+        }
+    }
+
+    for (var i = 0; i < textareas.length; i++) {
+        textareas[i].onkeydown = handleKeyDown;
+    }
 </script>
+
 {% include 'blog/partials/mathjax.html' %}
 {% endblock %}
author	Bobby <[email protected]>	2023-04-22 19:18:03 -0400
committer	Bobby <[email protected]>	2023-04-22 19:18:03 -0400
commit	6e3748deb07a4916c516a6b38197a29b91f35c8a (patch)
tree	f5c400c45d9025014701a3dfdc26a5d3de193f59
parent	595cca134dce3e826f0f3bf63050b4a6f99baa38 (diff)
download	thatcomputerscientist-6e3748deb07a4916c516a6b38197a29b91f35c8a.tar.xz thatcomputerscientist-6e3748deb07a4916c516a6b38197a29b91f35c8a.zip