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

Add bookmark_card.html, move bookmark_card css to cards.css.

Browse source
This commit is contained in:
voussoir 2021-01-08 13:41:49 -08:00
parent fabbbaf17f
commit 7373730f90
3 changed files with 84 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
frontends/etiquette_flask/static/css/cards.css
View file

@ -77,6 +77,59 @@
/* ########################################################################## */ /* ########################################################################## */
/* ########################################################################## */ /* ########################################################################## */
.bookmark_card
{
position: relative;
display: inline-grid;
grid-template:
"title" auto
"url" auto
"toolbox" auto
/1fr;
padding: 8px;
margin: 8px;
max-width: 500px;
border-radius: 8px;
background-color: var(--color_secondary);
}
.bookmark_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
}
.bookmark_card .bookmark_title
{
grid-area: "title";
}
.bookmark_card .bookmark_url
{
grid-area: "url";
}
.bookmark_card .bookmark_toolbox
{
grid-area: "toolbox";
}
.bookmark_card input
{
width: 100%;
}
.bookmark_card .bookmark_url
{
color: #aaa;
}
/* ########################################################################## */
/* ########################################################################## */
/* ########################################################################## */
.photo_card .photo_card
{ {
background-color: var(--color_secondary); background-color: var(--color_secondary);

20
frontends/etiquette_flask/templates/bookmark_card.html Normal file
View file

@ -0,0 +1,20 @@
{% macro create_bookmark_card(bookmark, add_delete_button=False) %}
<div class="bookmark_card" data-id="{{bookmark.id}}">
<a href="{{bookmark.url}}" class="bookmark_title">{{bookmark.display_name}}</a>
<a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
<div class="bookmark_toolbox">
{% if add_delete_button %}
<button
class="red_button button_with_confirm"
data-onclick="return delete_bookmark_form(event);"
data-prompt="Delete Bookmark?"
data-cancel-class="gray_button"
>
Delete
</button>
{% endif %}
</div>
</div>
{% endmacro %}

67
frontends/etiquette_flask/templates/bookmarks.html
View file

@ -1,12 +1,14 @@
<!DOCTYPE html5> <!DOCTYPE html5>
<html> <html>
<head> <head>
{% import "bookmark_card.html" as bookmark_card %}
{% import "header.html" as header %} {% import "header.html" as header %}
<title>Bookmarks</title> <title>Bookmarks</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/static/css/common.css"> <link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/css/etiquette.css"> <link rel="stylesheet" href="/static/css/etiquette.css">
<link rel="stylesheet" href="/static/css/cards.css">
{% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %} {% if theme %}<link rel="stylesheet" href="/static/css/theme_{{theme}}.css">{% endif %}
<script src="/static/js/common.js"></script> <script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script> <script src="/static/js/api.js"></script>
@ -20,36 +22,6 @@
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
} }
.bookmark_card,
.new_bookmark_card
{
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
align-items: baseline;
padding: 8px;
margin: 8px;
max-width: 500px;
border-radius: 8px;
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
background-color: var(--color_secondary);
}
.bookmark_card input,
.new_bookmark_card input
{
width: 100%;
}
.bookmark_card .bookmark_url
{
color: #aaa;
}
</style> </style>
</head> </head>
@ -59,36 +31,15 @@
<div id="bookmark_list"> <div id="bookmark_list">
<h2>Bookmarks</h2> <h2>Bookmarks</h2>
{% for bookmark in bookmarks %} {% for bookmark in bookmarks %}
<div class="bookmark_card" data-id="{{bookmark.id}}"> {{bookmark_card.create_bookmark_card(bookmark, add_delete_button=True)}}
<a
href="{{bookmark.url}}"
class="bookmark_title"
>
{{-bookmark.display_name-}}
</a>
<a
href="{{bookmark.url}}"
class="bookmark_url"
>
{{-bookmark.url-}}
</a>
<button
class="red_button button_with_confirm"
data-onclick="return delete_bookmark_form(event);"
data-prompt="Delete Bookmark?"
data-cancel-class="gray_button"
>
Delete
</button>
</div>
{% endfor %} {% endfor %}
<div class="new_bookmark_card"> <div class="bookmark_card new_bookmark_card">
<input id="new_bookmark_title" type="text" placeholder="title (optional)"> <input id="new_bookmark_title" type="text" placeholder="title (optional)">
<input id="new_bookmark_url" type="text" placeholder="url"> <input id="new_bookmark_url" type="text" placeholder="url">
<button id="new_bookmark_button" class="green_button" onclick="return create_bookmark_form();">Create</button> <div class="bookmark_toolbox">
<button id="new_bookmark_button" class="green_button" onclick="return create_bookmark_form();">Create</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -156,6 +107,10 @@ function create_editors()
const cards = document.getElementsByClassName("bookmark_card"); const cards = document.getElementsByClassName("bookmark_card");
for (const card of cards) for (const card of cards)
{ {
if (card.classList.contains("new_bookmark_card"))
{
continue;
}
const ed_elements = [ const ed_elements = [
{ {
"id": "title", "id": "title",