voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rewrite tags.html with more Grid.

Browse source
This commit is contained in:
voussoir 2018-02-21 22:13:46 -08:00
parent a9248d8cab
commit 2adadf9871
2 changed files with 81 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontends/etiquette_flask/static/common.css
View file

@ -21,14 +21,8 @@ body
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 8px;
background-color: var(--color_site_theme); background-color: var(--color_site_theme);
} }
li
{
position:relative;
}
#header #header
{ {
display: grid; display: grid;
@ -256,9 +250,6 @@ is hovered over.
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-height: 300px;
width: 100%;
height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);

180
frontends/etiquette_flask/templates/tags.html
View file

@ -16,88 +16,74 @@
<style> <style>
body body
{ {
display:flex; display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"left right";
} }
#content_body #header
{ {
flex: 1; grid-area: header;
word-break: break-word;
} }
#left #left
{ {
flex: 1; word-break: break-word;
height: auto; grid-area: left;
padding: 8px;
}
#description_text
{
padding: 8px;
background-color: rgba(0, 0, 0, 0.1);
font-family: initial;
} }
#right #right
{ {
width: 316px;
}
#right_inner
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
position: fixed; position: fixed;
top: 30px;
right: 8px; right: 8px;
bottom: 8px; bottom: 8px;
top: 30px;
width: 300px; width: 300px;
grid-area: right;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"editor_area"
"message_area";
padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
#editor_area #editor_area
{ {
display: flex; grid-area: editor_area;
flex-direction: row; margin: auto;
justify-content center;
align-items: center;
flex: 1;
} }
#message_area #message_area
{ {
display: flex; grid-area: message_area;
flex-direction: column; margin: 8px;
justify-content center;
align-items: center;
flex: 2;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
{ {
#content_body body
{ {
flex-direction: column; grid-template-columns: 1fr;
grid-template-rows: auto 1fr 150px;
grid-template-areas:
"header"
"left"
"right";
} }
#right #right
{ {
width: initial; top: unset;
height: 216px; width: unset;
} left: 8px;
#right_inner right: 8px;
{ bottom: 8px;
flex-direction: row; height: 150px;
position: initial; grid-template-areas:
left: initial; "editor_area message_area";
right: initial; grid-template-rows: 1fr;
bottom: initial; grid-template-columns: 1fr 1fr;
top: initial;
width: initial;
height: 200px;
} }
} }
</style> </style>
@ -106,56 +92,52 @@ body
<body> <body>
{{header.make_header(session=session)}} {{header.make_header(session=session)}}
<div id="content_body"> <div id="left">
<div id="left"> {% if specific_tag is not none %}
{% if specific_tag is not none %} <h2>
<h2> <span
<span id="name_text"
id="name_text" data-editor-id="name"
data-editor-id="name" data-editor-placeholder="name"
data-editor-placeholder="name"
>
{{-specific_tag.name-}}
</span>
</h2>
<pre
id="description_text"
data-editor-id="description"
data-editor-placeholder="description"
{% if specific_tag.description == "" %}class="hidden"{% endif -%}
> >
{{-specific_tag.description-}} {{-specific_tag.name-}}
</pre> </span>
{% endif %} </h2>
<ul> <pre
{% for tag in tags %} id="description_text"
{% set qualified_name = tag.qualified_name() %} data-editor-id="description"
data-editor-placeholder="description"
{% if specific_tag.description == "" %}class="hidden"{% endif -%}
>
{{-specific_tag.description-}}
</pre>
{% endif %}
<ul>
{% for tag in tags %}
{% set qualified_name = tag.qualified_name() %}
<li>
{{tag_object.tag_object(tag, innertext='(?)', link='info')}}
{{tag_object.tag_object(tag, link='search', qualified_name=True, with_alt_qualified_name=False)}}<!--
--><button class="remove_tag_button red_button" onclick="delete_tag('{{tag.name}}', receive_callback);"></button>
</li>
{% if include_synonyms %}
{% for synonym in tag.get_synonyms() %}
<li> <li>
{{tag_object.tag_object(tag, innertext='(?)', link='info')}} {{tag_object.tag_object(tag, innertext='(+)', link=none)}}
{{tag_object.tag_object(tag, link='search', qualified_name=True, with_alt_qualified_name=False)}}<!-- {{tag_object.tag_object(tag, innertext=qualified_name + '+' + synonym, link='search')}}<!--
--><button class="remove_tag_button red_button" onclick="delete_tag('{{tag.name}}', receive_callback);"></button> --><button class="remove_tag_button red_button" onclick="delete_tag_synonym('{{synonym}}', receive_callback);"></button>
</li> </li>
{% if include_synonyms %}
{% for synonym in tag.get_synonyms() %}
<li>
{{tag_object.tag_object(tag, innertext='(+)', link=none)}}
{{tag_object.tag_object(tag, innertext=qualified_name + '+' + synonym, link='search')}}<!--
--><button class="remove_tag_button red_button" onclick="delete_tag_synonym('{{synonym}}', receive_callback);"></button>
</li>
{% endfor %}
{% endif %}
{% endfor %} {% endfor %}
</ul> {% endif %}
{% endfor %}
</ul>
</div>
<div id="right">
<div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button green_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
</div> </div>
<div id="right"> <div id="message_area">
<div id="right_inner">
<div id="editor_area">
<input type="text" id="add_tag_textbox" autofocus>
<button class="add_tag_button green_button" id="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
</div>
<div id="message_area">
</div>
</div>
</div> </div>
</div> </div>
</body> </body>