Revert "remove deprecated components (reminder: use admin settings to customize css); port search, explore, active users block #228"

This reverts commit 9404b02d75.

src/controller/meta_handler.rs

@@ -99,7 +99,11 @@ pub(crate) async fn home(
 static CSS: LazyLock<String> = LazyLock::new(|| {
     let mut css = include_str!("../../static/css/bulma.min.css").to_string();
     css.push('\n');
+    css.push_str(include_str!("../../static/css/bulma-list.css"));
+    css.push('\n');
     css.push_str(include_str!("../../static/css/fontawesome.min.css"));
+    css.push('\n');
+    css.push_str(include_str!("../../static/css/main.css"));
     css
 });
 

static/css/bulma-list.css

@@ -0,0 +1 @@
+.list{color:#4a4a4a;flex-direction:column;display:flex}.list.has-hidden-images .list-item-image{display:none}.list.has-hoverable-list-items .list-item:hover{background-color:#fafafa}.list.has-overflow-ellipsis .list-item-content{min-width:0;max-width:calc(var(--length)*1ch)}.list.has-overflow-ellipsis .list-item-content>*{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (hover:hover){.list:not(.has-visible-pointer-controls) .list-item-controls{opacity:0;visibility:hidden}}.list-item{align-items:center;transition:background-color .125s ease-out;display:flex;position:relative}@media (hover:hover){.list-item:hover .list-item-controls,.list-item:focus-within .list-item-controls{opacity:initial;visibility:initial}}.list-item:not(.box){padding:.75em}.list-item:not(:last-child):not(.box){border-bottom:1px solid #dbdbdb}@media screen and (max-width:768px){.list:not(.has-overflow-ellipsis) .list-item{flex-wrap:wrap}}.list-item-image{flex-shrink:0;margin-right:.75em}@media screen and (max-width:768px){.list-item-image{padding:.5rem 0}}.list-item-content{flex-direction:column;flex-grow:1;display:flex}@media screen and (max-width:768px){.list-item-content{padding:.5rem 0}}.list-item-title{color:#363636;font-weight:600}.list-item-description{color:#7a7a7a}.list-item-controls{flex-shrink:0;transition:opacity .125s ease-out}@media screen and (max-width:768px){.list-item-controls{flex-wrap:wrap;padding:.5rem 0}}@media screen and (min-width:769px),print{.list-item-controls{padding-left:.75em}.list:not(.has-visible-pointer-controls) .list-item-controls{height:100%;align-items:center;padding-right:.75em;display:flex;position:absolute;right:0}}

static/css/main.css

@@ -0,0 +1 @@
+/* reset by bulma v1.0.4 upgrade #228 */

templates/inn.html

@@ -228,52 +228,39 @@
 </div>
 {% endif %}
 
-<div class="box">
-    <div class="title is-4">
-        {{ "explore"|l10n(page_data.lang) }}
-        <i class="fa-solid fa-anchor"></i>
-        <a href="/inn/list">
-            {{ "inn"|l10n(page_data.lang) }}
-        </a>
+<div class="list has-visible-pointer-controls has-overflow-ellipsis box">
+    <div class="list-item">
+        <div class="list-item-content">
+            <div class="list-item-title">{{ "explore"|l10n(page_data.lang) }} <a href="/inn/list">⚓ inns</a></div>
+        </div>
     </div>
     {% for inn in inns %}
-    <div class="media">
-        <div class="media-left">
+    <div class="list-item">
+        <div class="list-item-image">
             <figure class="image is-64x64">
-                <a href="/inn/{{inn.0}}">
-                    <img class="is-rounded" src="/static/inn_icons/{{inn.0}}.png">
-                </a>
+                <a href="/inn/{{inn.0}}"><img class="is-rounded" src="/static/inn_icons/{{inn.0}}.png"></a>
             </figure>
         </div>
-        <div class="media-content">
-            <div class="content">
-                <a href="/inn/{{inn.1}}">{{inn.1}}</a>
-            </div>
-            <nav class="level is-mobile">
-                <div class="level-left">
-                    {% if inn.2 %}
-                    <a class="level-item" href="/post/edit/0?iid={{inn.0}}">
-                        <button class="button is-success is-small is-rounded">{{ "new"|l10n(page_data.lang) }}</button>
-                    </a>
-                    {% else %}
-                    <a class="level-item" href="/inn/{{inn.0}}/join">
-                        <button class="button is-success is-small is-rounded">{{ "join"|l10n(page_data.lang) }}</button>
-                    </a>
-                    {% endif %}
-                </div>
-            </nav>
+        <div class="list-item-content">
+            <div class="list-item-title"><a href="/inn/{{inn.1}}">{{inn.1}}</a></div>
+        </div>
+
+        <div class="list-item-controls">
+            {% if inn.2 %}
+                <a href="/post/edit/0?iid={{inn.0}}"><button class="button is-success is-small is-rounded">{{ "new"|l10n(page_data.lang) }}</button></a>
+            {% else %}
+                <a href="/inn/{{inn.0}}/join"><button class="button is-success is-small is-rounded">{{ "join"|l10n(page_data.lang) }}</button></a>
+            {% endif %}
         </div>
     </div>
     {% endfor %}
 </div>
 
 <div class="box">
-    <div class="title is-4">
-        {{ "active"|l10n(page_data.lang) }}
-        <i class="fa-solid fa-user"></i>
-        <a href="/user/list">
-            {{ "users"|l10n(page_data.lang) }}
-        </a>
+    <div class="list-item">
+        <div class="list-item-content">
+            <div class="list-item-title">{{ "active"|l10n(page_data.lang) }} <a href="/user/list">👤 {{ "users"|l10n(page_data.lang) }}</a></div>
+        </div>
     </div>
     <div class="is-flex is-flex-wrap-wrap m-2">
         {% for user in recommend_users %}

templates/layout.html

@@ -92,7 +92,7 @@
                     {% block aside %}
                         <div class="box">
                             <form id="search" action="/search" method="get">
-                                <fieldset class="field has-addons">
+                                <fieldset class="field has-addons has-addons-right">
                                     <div class="control">
                                         <input class="input" name="search" type="text" placeholder='{{ "search"|l10n(page_data.lang) }}'>
                                     </div>
@@ -108,27 +108,19 @@
                         </div>
                         {% match page_data.claim %} {% when Some with (val) %}
                             {% if val.role == 255 %}
-                                <div class="panel">
-                                    <div class="panel-block">
-                                        <a href="/admin">
-                                            <span class="tag is-info">{{ "site_settings"|l10n(page_data.lang) }}</span>
-                                        </a>
-                                    </div>
-                                    <div class="panel-block">
-                                        <a href="/admin/view">
-                                            <span class="tag is-info">{{ "db_view"|l10n(page_data.lang) }}</span>
-                                        </a>
-                                    </div>
-                                    <div class="panel-block">
-                                        <a href="/admin/view?tree_name=user_stats">
-                                            <span class="tag is-info">{{ "stats"|l10n(page_data.lang) }}</span>
-                                        </a>
-                                    </div>
-                                    <div class="panel-block">
-                                        <a href="/admin/gallery">
-                                            <span class="tag is-info">{{ "gallery"|l10n(page_data.lang) }}</span>
-                                        </a>
-                                    </div>
+                                <div class="box">
+                                    <a href="/admin">
+                                        <span class="tag is-info">{{ "site_settings"|l10n(page_data.lang) }}</span>
+                                    </a>
+                                    <a href="/admin/view">
+                                        <span class="tag is-info">{{ "db_view"|l10n(page_data.lang) }}</span>
+                                    </a>
+                                    <a href="/admin/view?tree_name=user_stats">
+                                        <span class="tag is-info">{{ "stats"|l10n(page_data.lang) }}</span>
+                                    </a>
+                                    <a href="/admin/gallery">
+                                        <span class="tag is-info">{{ "gallery"|l10n(page_data.lang) }}</span>
+                                    </a>
                                 </div>
                             {% endif %}
                         {% else %}{% endmatch %}