Jaculabilis
/
amanuensis
1
1
Fork 0
Code Issues 19 Pull Requests Projects 1 Releases Activity

Replace divs with semantic elements

This commit is contained in:
Tim Van Baak 2021-09-20 18:43:55 -07:00
parent 0d022af335
commit ffaf881707
5 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
amanuensis/resources/editor.css
View File

@ -17,7 +17,7 @@ div#editor-left {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
div#editor-left div.contentblock { div#editor-left section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 10px 5px 10px 10px; margin: 10px 5px 10px 10px;
@ -48,7 +48,7 @@ textarea#editor-content {
div#editor-right { div#editor-right {
overflow-y: scroll; overflow-y: scroll;
} }
div#editor-right div.contentblock { div#editor-right section {
margin: 10px 5px 10px 10px; margin: 10px 5px 10px 10px;
} }
span.message-warning { span.message-warning {

36
amanuensis/resources/page.css
View File

@ -8,14 +8,14 @@ body {
line-height: 1.4; line-height: 1.4;
font-size: 16px; font-size: 16px;
} }
div#wrapper { main {
max-width: 800px; max-width: 800px;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
} }
div#header { header {
padding: 5px; padding: 5px;
margin: 5px; margin: 5px;
background-color: #ffffff; background-color: #ffffff;
@ -24,7 +24,7 @@ div#header {
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
div#header p, div#header h2 { header p, header h2 {
margin: 5px; margin: 5px;
} }
div#login-status { div#login-status {
@ -33,7 +33,7 @@ div#login-status {
top: 10px; top: 10px;
right: 10px; right: 10px;
} }
div#sidebar { nav {
width: 200px; width: 200px;
float:left; float:left;
margin:5px; margin:5px;
@ -46,7 +46,7 @@ div#sidebar {
img#logo { img#logo {
max-width: 200px; max-width: 200px;
} }
div#sidebar table { nav table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
@ -63,32 +63,32 @@ table a {
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
} }
div#sidebar table a { nav table a {
justify-content: center; justify-content: center;
} }
table a:hover { table a:hover {
background-color: var(--button-hover); background-color: var(--button-hover);
} }
div#sidebar table a.current-page { nav table a.current-page {
background-color: var(--button-current); background-color: var(--button-current);
} }
div#sidebar table a.current-page:hover { nav table a.current-page:hover {
background-color: var(--button-current); background-color: var(--button-current);
} }
div#sidebar table td { nav table td {
padding: 0px; margin: 3px 0; padding: 0px; margin: 3px 0;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
div#content { article {
margin: 5px; margin: 5px;
} }
div.content-2col { article.content-2col {
position: absolute; position: absolute;
right: 0px; right: 0px;
left: 226px; left: 226px;
max-width: 564px; max-width: 564px;
} }
div.contentblock { section {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 2px 2px 10px #888888; box-shadow: 2px 2px 10px #888888;
margin-bottom: 5px; margin-bottom: 5px;
@ -216,26 +216,26 @@ details.setting-help {
width: 4em; width: 4em;
} }
@media only screen and (max-width: 816px) { @media only screen and (max-width: 816px) {
div#wrapper { main {
padding: 5px; padding: 5px;
} }
div#header { header {
max-width: 554px; max-width: 554px;
margin: 0 auto; margin: 0 auto;
} }
div#sidebar { nav {
max-width: 548px; max-width: 548px;
width: inherit; width: inherit;
float: inherit; float: inherit;
margin: 10px auto; margin: 10px auto;
} }
div#content{ article{
margin: 10px auto; margin: 10px auto;
} }
div.content-1col { article.content-1col {
max-width: 564px; max-width: 564px;
} }
div.content-2col { article.content-2col {
max-width: 564px; max-width: 564px;
position: static; position: static;
right: inherit; right: inherit;

16
amanuensis/server/page.jinja
View File

@ -8,8 +8,8 @@
<link rel="stylesheet" href="{{ url_for('static', filename='page.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='page.css') }}">
</head> </head>
<body> <body>
<div id="wrapper"> <main>
<div id="header"> <header>
<div id="login-status" {% block login_status_attr %}{% endblock %}> <div id="login-status" {% block login_status_attr %}{% endblock %}>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<b>{{ current_user.username -}}</b> <b>{{ current_user.username -}}</b>
@ -24,15 +24,15 @@
{% endif %} {% endif %}
</div> </div>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</div> </header>
{% block sidebar %}{% endblock %} {% block sidebar %}{% endblock %}
<div id="content" class="{% block content_class %}{% endblock %}"> <article class="{% block content_class %}{% endblock %}">
{% if not template_content_blocks %}{% set template_content_blocks = [] %}{% endif %} {% if not template_content_blocks %}{% set template_content_blocks = [] %}{% endif %}
{% if not content_blocks %}{% set content_blocks = [] %}{% endif %} {% if not content_blocks %}{% set content_blocks = [] %}{% endif %}
{% for content_block in template_content_blocks + content_blocks %}<div class="contentblock"> {% for content_block in template_content_blocks + content_blocks -%}
{{ content_block|safe }}</div> <section>{{ content_block|safe }}</div>
{% endfor %} {% endfor %}
</div> </article>
</div> </main>
</body> </body>
</html> </html>

4
amanuensis/server/page_2col.jinja
View File

@ -1,12 +1,12 @@
{% extends "page.jinja" %} {% extends "page.jinja" %}
{% block sidebar %} {% block sidebar %}
<div id="sidebar"> <nav>
{% if not template_sidebar_rows %}{% set template_sidebar_rows = [] %}{% endif %} {% if not template_sidebar_rows %}{% set template_sidebar_rows = [] %}{% endif %}
{% if not sidebar_rows %}{% set sidebar_rows = [] %}{% endif %} {% if not sidebar_rows %}{% set sidebar_rows = [] %}{% endif %}
<table> <table>
{% for row in template_sidebar_rows + sidebar_rows %} {% for row in template_sidebar_rows + sidebar_rows %}
<tr><td>{{ row|safe }}</td></tr>{% endfor %} <tr><td>{{ row|safe }}</td></tr>{% endfor %}
</table> </table>
</div> </nav>
{% endblock %} {% endblock %}
{% block content_class %}content-2col{% endblock %} {% block content_class %}content-2col{% endblock %}

10
amanuensis/server/session/session.editor.jinja
View File

@ -34,7 +34,7 @@
<body> <body>
<div id="wrapper"> <div id="wrapper">
<div id="editor-left" class="column"> <div id="editor-left" class="column">
<div class="contentblock"> <section>
{# Thin header bar #} {# Thin header bar #}
<div id="editor-header"> <div id="editor-header">
{# Header always includes backlink to lexicon #} {# Header always includes backlink to lexicon #}
@ -103,16 +103,16 @@
{# #}{{ article.contents }}{# {# #}{{ article.contents }}{#
#}</textarea> #}</textarea>
{% endif %} {% endif %}
</div> </section>
</div> </div>
<div id="editor-right" class="column"> <div id="editor-right" class="column">
<div id="preview" class="contentblock"> <section id="preview">
<p>This editor requires Javascript to function.</p> <p>This editor requires Javascript to function.</p>
</div> </div>
<div id="preview-citations" class="contentblock"> <section id="preview-citations">
<p>&nbsp;</p> <p>&nbsp;</p>
</div> </div>
<div id="preview-control" class="contentblock"> <section id="preview-control">
<p>&nbsp;</p> <p>&nbsp;</p>
</div> </div>
</div> </div>