uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-11-30 21:26:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
dr-frmr 2024-06-17 22:53:12 -04:00
parent 758a58fc12
commit 5623cb2203
No known key found for this signature in database
2 changed files with 25 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
kinode/packages/app_store/app_store/src/http_api.rs
View File

@ -61,8 +61,6 @@ fn make_widget() -> String {
return r#"<html> return r#"<html>
<head> <head>
<style> <style>
/* General body styles */
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -73,13 +71,12 @@ fn make_widget() -> String {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
body { body {
color: white; color: white;
overflow: hidden; overflow: hidden;
} }
/* Flex container for apps */
#latest-apps { #latest-apps {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -95,8 +92,7 @@ fn make_widget() -> String {
scrollbar-color: transparent transparent; scrollbar-color: transparent transparent;
scrollbar-width: none; scrollbar-width: none;
} }
/* Individual app container */
.app { .app {
padding: 0.5rem; padding: 0.5rem;
display: flex; display: flex;
@ -109,39 +105,35 @@ fn make_widget() -> String {
font-family: sans-serif; font-family: sans-serif;
width: 100%; width: 100%;
} }
.app:hover { .app:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
/* App image styling */
.app-image { .app-image {
border-radius: 0.75rem; border-radius: 0.75rem;
margin-right: 0.5rem; margin-right: 0.5rem;
flex-grow: 1; flex-grow: 1;
background-size: cover; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 92px; height: 92px;
width: 92px; width: 92px;
max-width: 33%; max-width: 33%;
} }
/* App information styling */
.app-info { .app-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
max-width: 67%; max-width: 67%;
} }
/* Headings within app-info */
.app-info h2 { .app-info h2 {
font-weight: bold; font-weight: bold;
font-size: medium; font-size: medium;
} }
/* Responsive design for larger screens */
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
.app { .app {
width: 49%; width: 49%;
@ -165,7 +157,7 @@ fn make_widget() -> String {
a.target = '_blank'; a.target = '_blank';
a.rel = 'noopener noreferrer'; a.rel = 'noopener noreferrer';
const iconLetter = app.metadata_hash.replace('0x', '')[0].toUpperCase(); const iconLetter = app.metadata_hash.replace('0x', '')[0].toUpperCase();
a.innerHTML = `<div a.innerHTML = `<div
class="app-image" class="app-image"
style=" style="
background-image: url('${app.metadata.image || `/icons/${iconLetter}`}'); background-image: url('${app.metadata.image || `/icons/${iconLetter}`}');

38
kinode/packages/kino_updates/widget/src/lib.rs
View File

@ -33,7 +33,7 @@ fn init(_our: Address) {
serde_json::json!({ serde_json::json!({
"Add": { "Add": {
"label": "KinoUpdates", "label": "KinoUpdates",
"widget": create_widget(fetch_most_recent_blog_posts(12)), "widget": create_widget(fetch_most_recent_blog_posts(6)),
} }
}) })
.to_string(), .to_string(),
@ -49,15 +49,13 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
return format!( return format!(
r#"<html> r#"<html>
<head> <head>
<style> <style>
/* General body styles */
* {{ * {{
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
}} }}
a {{ a {{
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@ -77,8 +75,7 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
gap: 0.5rem; gap: 0.5rem;
font-family: sans-serif; font-family: sans-serif;
}} }}
/* Flex container for blog posts */
#latest-blog-posts {{ #latest-blog-posts {{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -94,8 +91,7 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
scrollbar-width: none; scrollbar-width: none;
align-self: stretch; align-self: stretch;
}} }}
/* Individual blog post container */
.post {{ .post {{
width: 100%; width: 100%;
display: flex; display: flex;
@ -104,8 +100,7 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
border-radius: 0.5em; border-radius: 0.5em;
padding: 0.5em; padding: 0.5em;
}} }}
/* Blog post image styling */
.post-image {{ .post-image {{
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -114,13 +109,12 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
height: 100px; height: 100px;
border-radius: 4px; border-radius: 4px;
}} }}
/* Blog post information styling */
.post-info {{ .post-info {{
max-width: 67%; max-width: 67%;
overflow: hidden;
}} }}
/* Responsive design for larger screens */
@media screen and (min-width: 500px) {{ @media screen and (min-width: 500px) {{
.post {{ .post {{
width: 49%; width: 49%;
@ -128,15 +122,13 @@ fn create_widget(posts: Vec<KinodeBlogPost>) -> String {
}} }}
</style> </style>
</head> </head>
<body class="text-white overflow-hidden h-screen w-screen flex flex-col gap-2"> <body class="text-white overflow-hidden">
<div <div
id="latest-blog-posts" id="latest-blog-posts"
class="flex flex-col p-2 gap-2 backdrop-brightness-125 rounded-xl shadow-lg h-screen w-screen overflow-y-auto self-stretch"
style=" style="
scrollbar-color: transparent transparent; scrollbar-color: transparent transparent;
scrollbar-width: none; scrollbar-width: none;
" ">
>
{} {}
</div> </div>
</body> </body>
@ -176,17 +168,17 @@ fn trim_content(content: &str) -> String {
fn post_to_html_string(post: KinodeBlogPost) -> String { fn post_to_html_string(post: KinodeBlogPost) -> String {
format!( format!(
r#"<a r#"<a
class="post p-2 grow self-stretch flex items-stretch rounded-lg shadow bg-white/10 hover:bg-white/20 font-sans w-full" class="post"
href="https://kinode.org/blog/post/{}" href="https://kinode.org/blog/post/{}"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div <div
class="post-image rounded mr-2 grow self-stretch h-full" class="post-image"
style="background-image: url('https://kinode.org{}');" style="background-image: url('https://kinode.org{}');"
></div> ></div>
<div class="post-info flex flex-col grow"> <div class="post-info">
<h2 class="font-bold">{}</h2> <h2 class="font-bold">{}</h2>
<p>{}</p> <p>{}</p>
</div> </div>