tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view: optimize for mobile and add icons
Some checks failed
/ push (push) Has been cancelled
Details

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-28 15:06:55 +07:00
parent 3fdb78362b
commit e887675346
6 changed files with 97 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
views/components/navigation.templ
View file

@ -6,9 +6,14 @@ import "github.com/tigorlazuardi/redmage/views/utils"
templ Navigation(c *views.Context) {
<div class="drawer">
<input id="drawer-toggle" type="checkbox" class="drawer-toggle"/>
<input id="drawer-toggle" type="checkbox" class="drawer-toggle" autocomplete="off"/>
<div class="drawer-content">
<header class="navbar bg-base-200 lg:hidden">
<header
x-data="{ lastScrollPost: 0, hide: false, get onTop() { return this.lastScrollPost < 60 } }"
class="navbar bg-base-200 z-50 lg:hidden transition-all duration-300 shadow-lg sticky top-0"
:class="{ '-translate-y-full': !onTop && hide }"
@scroll.window.throttle.50ms="hide = window.scrollY > lastScrollPost; lastScrollPost = window.scrollY;"
>
<div class="flex-none">
<label for="drawer-toggle" class="btn btn-square btn-ghost drawer-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@ -25,7 +30,7 @@ templ Navigation(c *views.Context) {
</header>
{ children... }
</div>
<nav class="drawer-side">
<nav class="drawer-side z-[51]">
<label for="drawer-toggle" class="drawer-overlay"></label>
<div class="menu py-4 min-w-[15rem] min-h-full bg-base-200 text-base-content">
<div class="flex flex-col items-center min-w-[180px] max-w-[280px]">

9
views/components/notification.templ
View file

@ -3,15 +3,14 @@ package components
const NotificationContainerID = "#notification-container"
templ NotificationContainer() {
<div id="notification-container" class="fixed bottom-4 right-4 z-50">
<div id="notification-container" class="toast max-xs:toast-top max-xs:toast-end z-50">
{ children... }
</div>
}
templ InfoNotication(messages ...string) {
<div
hx-on::load="setTimeout(() => this.remove(), 5000)"
class="toast"
x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
onclick="this.remove()"
>
<div class="alert alert-info hover:bg-info-content transition-all">
@ -27,8 +26,7 @@ templ InfoNotication(messages ...string) {
templ ErrorNotication(messages ...string) {
<div
hx-on::load="setTimeout(() => this.remove(), 5000)"
class="toast"
x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
onclick="this.remove()"
>
<div class="alert alert-error hover:bg-error-content transition-all">
@ -45,7 +43,6 @@ templ ErrorNotication(messages ...string) {
templ SuccessNotification(messages ...string) {
<div
x-data="{ init() { setTimeout(() => $el.remove(), 5000) } }"
class="toast"
onclick="this.remove()"
>
<div class="alert alert-success hover:bg-success-content transition-all">

7
views/devices/view.templ
View file

@ -7,6 +7,7 @@ import "github.com/tigorlazuardi/redmage/api"
import "strconv"
import "fmt"
import "github.com/tigorlazuardi/redmage/views/utils"
import "github.com/tigorlazuardi/redmage/views/icons"
type Data struct {
Error string
@ -32,7 +33,11 @@ templ Content(c *views.Context, data Data) {
} else {
<div class="flex justify-between items-center">
<h1 class="my-auto">Devices</h1>
<a href="/devices/add" class="btn btn-primary no-underline text-base-100">Add Device</a>
<div class="tooltip" data-tip="Add Device">
<a href="/devices/add" class="btn btn-primary btn-outline btn-square text-base-100">
@icons.PlusCircleFill("w-6 h-6")
</a>
</div>
</div>
<div class="divider"></div>
@filter(data)

37
views/icons/plus.templ Normal file
View file

@ -0,0 +1,37 @@
package icons
import "strings"
templ PlusCircleFill(class ...string) {
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
class={ strings.Join(class, " ") }
viewBox="0 0 32 32"
version="1.1"
>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="currentColor"
fill-rule="evenodd"
sketch:type="MSPage"
>
<g
id="Icon-Set-Filled"
sketch:type="MSLayerGroup"
transform="translate(-466.000000, -1089.000000)"
fill="currentColor"
>
<path
d="M488,1106 L483,1106 L483,1111 C483,1111.55 482.553,1112 482,1112 C481.447,1112 481,1111.55 481,1111 L481,1106 L476,1106 C475.447,1106 475,1105.55 475,1105 C475,1104.45 475.447,1104 476,1104 L481,1104 L481,1099 C481,1098.45 481.447,1098 482,1098 C482.553,1098 483,1098.45 483,1099 L483,1104 L488,1104 C488.553,1104 489,1104.45 489,1105 C489,1105.55 488.553,1106 488,1106 L488,1106 Z M482,1089 C473.163,1089 466,1096.16 466,1105 C466,1113.84 473.163,1121 482,1121 C490.837,1121 498,1113.84 498,1105 C498,1096.16 490.837,1089 482,1089 L482,1089 Z"
sketch:type="MSShapeGroup"
></path>
</g>
</g>
</svg>
}

18
views/subreddits/view.templ
View file

@ -6,6 +6,7 @@ import "github.com/tigorlazuardi/redmage/api"
import "github.com/tigorlazuardi/redmage/models"
import "fmt"
import "strconv"
import "github.com/tigorlazuardi/redmage/views/icons"
type Data struct {
Subreddits api.ListSubredditsResult
@ -24,17 +25,20 @@ templ View(c *views.Context, data Data) {
templ Content(c *views.Context, data Data) {
<main class="prose min-w-full">
@components.Container() {
<h1>Subreddits</h1>
if data.Subreddits.Total == 0 {
<div class="flex justify-between items-center">
<h1 class="my-0">Subreddits</h1>
<div class="tooltip" data-tip="Add Subreddit">
<a class="btn btn-primary btn-outline" href="/subreddits/add">
@icons.PlusCircleFill("w-6 h-6")
</a>
</div>
</div>
<div class="divider"></div>
if data.Subreddits.Total == 0 {
<h3>No Subreddits Found</h3>
<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
} else {
<div class="flex justify-center sm:justify-between flex-wrap gap-4">
<h2 class="my-auto">{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
<a class="btn btn-primary text-base-100 no-underline" href="/subreddits/add">Add Subreddit</a>
</div>
<div class="divider"></div>
<h2>{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
}
<div class="flex flex-wrap gap-1 justify-around" hx-boost="true">
for _, subreddit := range data.Subreddits.Data {

29
views/subredditsview/detailsview/detailsview.templ
View file

@ -43,40 +43,41 @@ templ DetailsContent(c *views.Context, data Data) {
<h1>Error: { data.Error }</h1>
} else {
<div class="flex items-center justify-between">
<h1>Subreddit { data.Subreddit.Name }</h1>
</div>
<div class="flex flex-wrap justify-center xs:justify-between content-center gap-4">
<h2 class="my-auto">
Total Images:
{ strconv.FormatInt(data.TotalImages, 10) }
</h2>
<div class="dropdown dropdown-hover dropdown-end">
<div tabindex="0" role="button" class="btn m-1">
<h1 class="my-auto">Subreddit { data.Subreddit.Name }</h1>
<div class="max-xs:toast max-xs:z-40">
<div class="dropdown dropdown-hover dropdown-top xs:dropdown-bottom dropdown-end">
<div tabindex="0" role="button" class="btn btn-primary max-xs:btn-circle btn-square xs:btn-outline m-1 max-xs:border-none">
@icons.Kebab("h-8 w-8")
</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-0">
<li>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 m-0 border-primary border-2">
<li class="m-0 p-0 hover:bg-primary rounded-btn">
<button
hx-post="/htmx/subreddits/start"
hx-include="this"
hx-target={ components.NotificationContainerID }
hx-target-error={ components.NotificationContainerID }
hx-swap="afterbegin"
class="btn btn-ghost"
class="btn btn-ghost btn-sm m-0"
>
Start Download
<input type="hidden" name="subreddit" value={ data.Subreddit.Name }/>
</button>
</li>
<li>
<div class="divider m-0 p-0"></div>
<li class="m-0 p-0 hover:bg-primary rounded-btn">
<a
href={ templ.SafeURL(fmt.Sprintf("/subreddits/edit/%s", data.Subreddit.Name)) }
class="btn btn-ghost no-underline"
class="btn btn-ghost btn-sm no-underline m-0"
>Edit</a>
</li>
</ul>
</div>
</div>
</div>
<h2 class="my-8">
Total Images:
{ strconv.FormatInt(data.TotalImages, 10) }
</h2>
<div class="divider"></div>
@FilterBar(c, data)
<div class="grid justify-center my-4">