This commit is contained in:
video-prize-ranch 2023-06-07 18:37:41 -04:00
parent de94a2c58e
commit 6c3f18a449
No known key found for this signature in database
16 changed files with 137 additions and 174 deletions

1
static/icons/PhChat.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48H40a16 16 0 0 0-16 16v160a15.84 15.84 0 0 0 9.25 14.5A16.05 16.05 0 0 0 40 240a15.89 15.89 0 0 0 10.25-3.78a.69.69 0 0 0 .13-.11L82.5 208H216a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16ZM40 224Zm176-32H82.5a16 16 0 0 0-10.3 3.75l-.12.11L40 224V64h176Z"/></svg>

After

Width:  |  Height:  |  Size: 376 B

View File

@ -10,6 +10,20 @@ p a {
text-decoration: underline
}
.posts {
margin-top: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 1fr;
gap: 1rem;
}
.posts img:not(.icon),
.posts video:not(:fullscreen) {
object-fit: cover;
aspect-ratio: 1;
}
#comments__expandBtn {
display: none;
}

View File

@ -7,7 +7,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<main class="my-8">

View File

@ -7,7 +7,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<main>

View File

@ -7,7 +7,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<main>

View File

@ -7,13 +7,13 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<main class="flex flex-col">
<h2 class="text-2xl font-bold">An error occurred</h2>
<p>You may have found a bug in rimgo. If this is a bug, open an issue on <a href="https://codeberg.org/video-prize-ranch/rimgo/issues/new">Codeberg</a>.</p>
<code class="mt-4 p-2 bg-slate-200 rounded-md">{{err}}</code>
<code class="mt-4 p-2 bg-slate-600 rounded-md">{{err}}</code>
</main>
{{> partials/footer }}

View File

@ -7,7 +7,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<header class="my-8 p-8 rounded-xl flex flex-col gap-4 items-center justify-center bg-gradient-to-r from-blue-400 to-emerald-400">
@ -30,54 +30,7 @@
<h2 class="font-bold text-2xl">This instance</h2>
<section class="my-4 lg:m-4 flex flex-col lg:flex-row gap-4 items-center">
{{#if config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhCheckCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">Data not collected</h2>
<p class="text-black text-lg">This instance does not collect any data.</p>
</div>
{{/if}}
{{#unless config.Privacy.set}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhWarning.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">No details provided</h2>
<p class="text-black text-lg">The operator of this instance will be required to provide privacy details to be added to the instance list.</p>
</div>
{{else}}
{{#unless config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhWarningCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">Data collected</h2>
<p class="text-black text-lg">The following data may be collected:</p>
<ul class="flex flex-col">
{{#if config.Privacy.ip}}
<li class="flex gap-1">
<img src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
Internet address (IP Address)
</li>
{{/if}}
{{#if config.Privacy.url}}
<li class="flex gap-1">
<img src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
Page viewed (Request URL)
</li>
{{/if}}
{{#if config.Privacy.device}}
<li class="flex gap-1">
<img src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
Device Type (User agent)
</li>
{{/if}}
{{#if config.Privacy.diagnostics}}
<li class="flex gap-1">
<img src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
Diagnostics
</li>
{{/if}}
</ul>
</div>
{{/unless}}
{{/unless}}
{{> partials/privacy }}
<div class="self-start">
<h2 class="text-xl my-2 font-bold">Additional information</h2>
<ul>

View File

@ -18,8 +18,8 @@
<span class="text-md">(deleted {{this.DeletedAt}})</span>
{{/if}}
|
<img class="icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px"> {{this.Upvotes}}
<img class="icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px"> {{this.Downvotes}}
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px"> {{this.Upvotes}}
<img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px"> {{this.Downvotes}}
</div>
</div>
{{#if this.Comments}}

View File

@ -2,7 +2,7 @@
<div class="mb-1 flex gap-4 font-bold">
<a href="/">
<div class="flex">
<img src="/static/img/rimgo.svg" class="dark:invert dark:hue-rotate-180" width="32" height="32" />
<img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="32" height="32" />
<h1 class="text-md font-extrabold">rimgo</h1>
</div>
</a>
@ -10,5 +10,5 @@
<a href="/about">About</a>
<a href="/privacy">Privacy</a>
</div>
<p class="text-md text-slate-800">rimgo does not allow uploads or host any content. Issues with content should be reported to Imgur.</p>
<p class="text-md text-slate-200">rimgo does not allow uploads or host any content. Issues with content should be reported to Imgur.</p>
</footer>

View File

@ -1,6 +1,6 @@
<a href="/">
<nav class="m-4 flex items-center justify-center">
<img src="/static/img/rimgo.svg" class="dark:invert dark:hue-rotate-180" width="72" height="72" />
<img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="72" height="72" />
<h1 class="font-extrabold text-3xl">rimgo</h1>
</nav>
</a>

View File

@ -1,5 +1,5 @@
<a href="{{Link}}">
<div class="post">
<div class="bg-slate-600 rounded-lg">
{{#equal Cover.Type "video"}}
<video controls loop poster="/{{Cover.Id}}.webp" preload="none" width="100%" height="100%">
<source src="{{Cover.Url}}" type="video/mp4" />
@ -8,18 +8,18 @@
{{#equal Cover.Type "image"}}
<img src="{{Cover.Url}}" loading="lazy" width="100%" height="100%">
{{/equal}}
<p class="post__title">{{Title}}</p>
<p class="m-2 text-ellipsis whitespace-nowrap overflow-hidden">{{Title}}</p>
<div class="flex gap-2 p-2">
<div>
<img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
<div class="flex gap-1">
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Points" width="18px" height="18px">
{{Points}}
</div>
<div>
<img class="icon" src="/static/icons/message-square.svg" alt="Comments">
<div class="flex gap-1">
<img class="invert icon" src="/static/icons/PhChat.svg" alt="Comments" width="18px" height="18px">
{{Comments}}
</div>
<div>
<img class="icon" src="/static/icons/eye.svg" alt="Views">
<div class="flex gap-1">
<img class="invert icon" src="/static/icons/PhEye.svg" alt="Views" width="18px" height="18px">
{{Views}}
</div>
</div>

View File

@ -0,0 +1,48 @@
{{#if config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
<img class="invert" src="/static/icons/PhCheckCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-xl">Data not collected</h2>
<p class="text-lg">This instance does not collect any data.</p>
</div>
{{/if}}
{{#unless config.Privacy.set}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
<img class="invert" src="/static/icons/PhWarning.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-xl">No details provided</h2>
<p class="text-lg">The operator of this instance will be required to provide privacy details to be added to the instance list.</p>
</div>
{{else}}
{{#unless config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
<img class="invert" src="/static/icons/PhWarningCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-xl">Data collected</h2>
<p class="text-lg">The following data may be collected:</p>
<ul class="flex flex-col">
{{#if config.Privacy.ip}}
<li class="flex gap-1">
<img class="invert" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
Internet address (IP Address)
</li>
{{/if}}
{{#if config.Privacy.url}}
<li class="flex gap-1">
<img class="invert" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
Page viewed (Request URL)
</li>
{{/if}}
{{#if config.Privacy.device}}
<li class="flex gap-1">
<img class="invert" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
Device Type (User agent)
</li>
{{/if}}
{{#if config.Privacy.diagnostics}}
<li class="flex gap-1">
<img class="invert" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
Diagnostics
</li>
{{/if}}
</ul>
</div>
{{/unless}}
{{/unless}}

View File

@ -12,7 +12,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<header>
@ -32,16 +32,16 @@
{{/if}}
<div class="flex gap-2 items-center">
<div class="flex flex-center gap-2">
<img class="icon" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
<img class="icon invert" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
<p>{{post.Views}}</p>
</div>
{{#if post.SharedWithCommunity}}
<div class="flex flex-center gap-2">
<img class="icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
<img class="icon invert" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
<p>{{post.Upvotes}}</p>
</div>
<div class="flex flex-center gap-2">
<img class="icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
<img class="icon invert" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
<p>{{post.Downvotes}}</p>
</div>
{{/if}}
@ -78,7 +78,7 @@
</style>
{{#each post.tags}}
<a href="/t/{{this.Tag}}">
<div class="rounded-md p-4 min-w-[110px] {{this.BackgroundId}}">
<div class="rounded-md p-4 min-w-[110px] bg-slate-500 {{this.BackgroundId}}">
<p class="font-bold text-white text-center">{{this.Display}}</p>
</div>
</a>
@ -91,10 +91,10 @@
{{#if comments}}
<div>
<hr>
<input id="comments__expandBtn" type="checkbox">
<input id="comments__expandBtn" type="checkbox" checked>
<label class="comments__expandBtn__label my-2 py-4 border-solid border-t-2 border-slate-400" for="comments__expandBtn">
<h3 class="text-xl font-bold text-black">Comments ({{post.Comments}})</h3>
<span class="text-xl font-bold text-black"></span>
<h3 class="text-xl font-bold">Comments ({{post.Comments}})</h3>
<span class="text-xl font-bold"></span>
</label>
<div class="comments flex flex-col gap-2">
{{#each comments}}

View File

@ -7,7 +7,7 @@
{{> partials/head }}
</head>
<body class="font-sans text-lg dark:bg-slate-800 dark:text-white">
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<header>
@ -25,54 +25,7 @@
</header>
<main class="flex justify-center w-full">
{{#if config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhCheckCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">Data not collected</h2>
<p class="text-black text-lg">This instance does not collect any data.</p>
</div>
{{/if}}
{{#unless config.Privacy.set}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhWarning.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">No details provided</h2>
<p class="text-black text-lg">The operator of this instance will be required to provide privacy details to be added to the instance list.</p>
</div>
{{else}}
{{#unless config.Privacy.not_collected}}
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-200 rounded-lg">
<img src="/static/icons/PhWarningCircle.svg" alt="" height="36" width="36" />
<h2 class="font-bold text-black text-xl">Data collected</h2>
<p class="text-black text-lg">The following data may be collected:</p>
<ul class="flex flex-col">
{{#if config.Privacy.ip}}
<li class="flex gap-1">
<img src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
Internet address (IP Address)
</li>
{{/if}}
{{#if config.Privacy.url}}
<li class="flex gap-1">
<img src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
Page viewed (Request URL)
</li>
{{/if}}
{{#if config.Privacy.device}}
<li class="flex gap-1">
<img src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
Device Type (User agent)
</li>
{{/if}}
{{#if config.Privacy.diagnostics}}
<li class="flex gap-1">
<img src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
Diagnostics
</li>
{{/if}}
</ul>
</div>
{{/unless}}
{{/unless}}
{{> partials/privacy }}
</main>
<section>
@ -80,21 +33,21 @@
<p>Instance privacy aims to bring transparency to the data collected by frontends and encourage privacy friendly practices. There is often no privacy policy and users are forced to trust that the instance operator is not collecting data. However, there is a possibility that the instance operator can put false information so we encourage looking at other factors when selecting an instance.</p>
<ul class="flex flex-col list-outside list-disc mt-2 ml-4">
<li>
<img class="inline" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
<img class="inline invert" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
Internet address (IP Address) - This is an address that is given to your computer or internet connection.
This can be used to find your city or region and internet provider but can change depending on your connection.
</li>
<li>
<img class="inline" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
<img class="inline invert" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
Page viewed (Request URL) - This is what page you are viewing.
</li>
<li>
<img class="inline" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
<img class="inline invert" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
Device Type (User agent) - This is what browser, device, and operating system you are using.
Advanced users can change this with an extension or browser setting.
</li>
<li>
<img class="inline" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
<img class="inline invert" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
Diagnostics - When this data is only collected when there is an error or only a short amount of time while
diagnosing an issue.
</li>

View File

@ -5,46 +5,43 @@
<title>{{tag.Display}} - rimgo</title>
{{> partials/head }}
<link rel="stylesheet" href="/static/css/base.css" />
<link rel="stylesheet" href="/static/css/tag.css" />
</head>
<body>
{{> partials/header }}
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<main>
<div class="tagMeta" style="background-image: url('{{tag.Background}}');">
<div class="flex flex-center flex-col text-center">
<h2>{{tag.Display}}</h2>
<p>{{tag.PostCount}} posts</p>
</div>
<div class="flex flex-col gap-2">
{{#equal tag.Sort "popular"}}
<a href="?sort=popular"><b>Popular</b></a>
<a href="?sort=newest">Newest</a>
<a href="?sort=best">Best</a>
{{/equal}}
{{#equal tag.Sort "newest"}}
<a href="?sort=popular">Popular</a>
<a href="?sort=newest"><b>Newest</b></a>
<a href="?sort=best">Best</a>
{{/equal}}
{{#equal tag.Sort "best"}}
<a href="?sort=popular">Popular</a>
<a href="?sort=newest">Newest</a>
<a href="?sort=best"><b>Best</b></a>
{{/equal}}
</div>
<header class="p-4 rounded-xl text-white mb-4" style="background-image: url('{{tag.Background}}');">
<div class="flex flex-col items-center justify-center text-center">
<h2 class="text-2xl font-bold">{{tag.Display}}</h2>
<p>{{tag.PostCount}} posts</p>
</div>
<div class="flex flex-col">
{{#equal tag.Sort "popular"}}
<a href="?sort=popular"><b>Popular</b></a>
<a href="?sort=newest">Newest</a>
<a href="?sort=best">Best</a>
{{/equal}}
{{#equal tag.Sort "newest"}}
<a href="?sort=popular">Popular</a>
<a href="?sort=newest"><b>Newest</b></a>
<a href="?sort=best">Best</a>
{{/equal}}
{{#equal tag.Sort "best"}}
<a href="?sort=popular">Popular</a>
<a href="?sort=newest">Newest</a>
<a href="?sort=best"><b>Best</b></a>
{{/equal}}
</div>
</header>
<main>
<div class="posts">
{{#each tag.Posts}}
{{> partials/post }}
{{/each}}
</div>
<div class="pageSelector">
<div class="mt-4 font-bold">
{{#if displayPrev}}
<a href="{{channel.RelUrl}}?page={{prevPage}}">Previous page</a>
{{/if}}

View File

@ -5,33 +5,30 @@
<title>{{user.Username}} - rimgo</title>
{{> partials/head }}
<link rel="stylesheet" href="/static/css/user.css" />
</head>
<body>
<body class="font-sans text-lg bg-slate-800 text-white">
{{> partials/nav }}
<header class="p-4 rounded-xl text-white mb-4" style="background-image: url('{{user.Cover}}');">
<div class="flex items-center gap-2">
<img class="rounded-full" src="{{user.Avatar}}" width="72" height="72">
<div>
<h2 class="font-bold text-2xl">{{user.Username}}</h2>
<p>{{user.Points}} pts · {{user.CreatedAt}}</p>
</div>
</div>
<p class="mt-2">{{user.Bio}}</p>
</header>
<main>
<div class="userMeta" style="background-image: url('{{user.Cover}}');">
<div class="flex flex-center-y gap-2">
<img class="pfp" src="{{user.Avatar}}" width="72" height="72">
<div>
<h2>{{user.Username}}</h2>
<p>{{user.Points}} pts · {{user.CreatedAt}}</p>
</div>
</div>
<p>{{user.Bio}}</p>
</div>
<div class="posts">
{{#each submissions}}
{{> partials/post }}
{{/each}}
</div>
<div class="pageSelector">
<div class="mt-4 font-bold">
{{#equal page "0" }}
{{else}}
<a href="{{channel.RelUrl}}?page={{prevPage}}">Previous page</a>