roundabout,
created on Monday, 4 March 2024, 17:34:25 (1709573665),
received on Wednesday, 31 July 2024, 06:54:42 (1722408882)
Author identity: vlad <vlad.muntoiu@gmail.com>
229ba7e9846ed1f1effb15e63d04226d70349039
static/efficient-ui/icons/expand.svg
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none" />
<path fill="currentColor" d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6z" />
</svg>
static/style.css
@@ -275,4 +275,52 @@ x-buttonbox.segmented > * {
.vote-score {
min-width: 3ch;
text-align: center;
}
.reply-area {
box-shadow: var(--shadow-card);
margin: var(--margin-card);
border-radius: var(--radius-card);
background: var(--color-card);
color: var(--color-card-text);
border: var(--border-card);
overflow: hidden; /* So rounded corners can cut through the content */
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.reply-area > summary {
display: flex;
align-items: center;
cursor: pointer;
padding: var(--padding-card);
padding-top: var(--padding-card-top);
text-transform: uppercase;
font-weight: 500;
transition: box-shadow 250ms cubic-bezier(0.33, 1, 0.68, 1);
}
.reply-area > form {
padding: var(--padding-card);
padding-top: var(--padding-card-top);
}
.reply-area > summary::before {
content: " ";
background-image: url("/static/efficient-ui/icons/expand.svg");
transform: rotate(-90deg);
width: 1.5em;
height: 1.5em;
background-size: contain;
background-repeat: no-repeat;
transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
}
.reply-area[open] > summary::before {
transform: rotate(0);
}
.reply-area[open] > summary {
box-shadow: var(--shadow-card);
}
templates/default.html
@@ -16,7 +16,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% endblock %}
</head>
<body style="overflow: hidden;">
<body>
<dialog id="sidenav" class="sheet-left">
<x-frame style="--width: 320px; --margin: 0;">
<article class="card">
templates/post.html
@@ -32,7 +32,7 @@
</dt>
{% if logged_in_user %}
<dd>
<details>
<details class="reply-area">
<summary>Reply</summary>
<form method="POST" action="{{ post.number }}/reply">