jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Move styles into Vite

Browse Source 
Make sidebar work better
This commit is contained in:
jude 2024-02-25 09:50:10 +00:00
parent 6254f91841
commit 5f6326179c
13 changed files with 1286 additions and 709 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1645
reminder-dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
reminder-dashboard/package.json
View File

@ -16,7 +16,7 @@
"react-colorful": "^5.6.1",
"react-query": "^3.39.3",
"tributejs": "^5.1.3",
"wouter": "^2.12.1"
"wouter": "^3.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.5.0",
@ -25,7 +25,8 @@
"eslint-config-preact": "^1.3.0",
"prettier": "^3.0.3",
"react-datepicker": "^4.21.0",
"sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^4.3.2"
"vite": "^5.1"
}
}

1
reminder-dashboard/src/api.ts
View File

@ -8,6 +8,7 @@ type UserInfo = {
};
export type GuildInfo = {
id: string;
patreon: boolean;
name: string;
error?: string;

2
reminder-dashboard/src/components/Reminder/IntervalSelector.tsx → reminder-dashboard/src/components/Reminder/IntervalSelector/index.tsx
View File

@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "preact/hooks";
import { useReminder } from "./ReminderContext";
import "./style.scss";
function divmod(a: number, b: number) {
return [Math.floor(a / b), a % b];

42
reminder-dashboard/src/components/Reminder/IntervalSelector/style.scss Normal file
View File

@ -0,0 +1,42 @@
div.interval-group {
height: unset !important;
}
div.interval-group .clear:focus {
outline: none;
box-shadow: none !important;
}
div.interval-group .no-break {
text-wrap: avoid;
white-space: nowrap;
}
div.interval-group .clear {
border: none;
background: none;
padding: 1px;
margin-right: -3px;
}
div.interval-group > .interval-group-left input {
-webkit-appearance: none;
border-style: none;
background-color: #eee;
font-size: 1rem;
font-family: monospace;
}
div.interval-group > .interval-group-left input.w2 {
width: 3ch;
}
div.interval-group > .interval-group-left input.w3 {
width: 3ch;
}
div.interval-group {
display: flex;
flex-direction: row;
justify-content: space-between;
}

2
reminder-dashboard/src/components/Reminder/Settings.tsx
View File

@ -6,14 +6,12 @@ import { fetchUserInfo } from "../../api";
import { useReminder } from "./ReminderContext";
import { Attachment } from "./Attachment";
import { TTS } from "./TTS";
import { useTimezone } from "../App/TimezoneProvider";
import { TimeInput } from "./TimeInput";
export const Settings = () => {
const { isSuccess: userFetched, data: userInfo } = useQuery(fetchUserInfo());
const [reminder, setReminder] = useReminder();
const [timezone] = useTimezone();
if (!userFetched) {
return <></>;

5
reminder-dashboard/src/components/Sidebar/GuildEntry.tsx
View File

@ -22,10 +22,9 @@ export const GuildEntry = ({ guild }: Props) => {
data-name={guild.name}
href={`/${guild.id}/reminders`}
>
<span class="icon">
<i class="fas fa-map-pin"></i>
</span>{" "}
<>
<span class="guild-name">{guild.name}</span>
</>
</Link>
</li>
);

5
reminder-dashboard/src/components/Sidebar/MobileSidebar.tsx
View File

@ -44,7 +44,10 @@ export const MobileSidebar = ({ children }) => {
class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
id="mobileSidebar"
style={{
display: sidebarOpen ? "block" : "none",
display: sidebarOpen ? "inherit" : "none",
}}
onClick={() => {
setSidebarOpen(!sidebarOpen);
}}
>
{children}

26
reminder-dashboard/src/components/Sidebar/index.tsx
View File

@ -6,6 +6,7 @@ import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker";
import "./style.scss";
type ContentProps = {
guilds: GuildInfo[];
@ -22,7 +23,30 @@ const SidebarContent = ({ guilds }: ContentProps) => {
<Wave />
<aside class="menu">
<p class="menu-label">Servers</p>
<ul class="menu-list guildList">{guildEntries}</ul>
<ul class="menu-list guildList">
{guildEntries}
<GuildEntry guild={{ id: "1", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "2", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "3", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "4", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "5", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "6", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "7", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "8", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "9", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
<GuildEntry guild={{ id: "10", name: "1", patreon: false }} />
</ul>
<div class="aside-footer">
<p class="menu-label">Options</p>
<ul class="menu-list">

51
reminder-dashboard/src/components/Sidebar/style.scss Normal file
View File

@ -0,0 +1,51 @@
div.brand {
text-align: center;
height: 52px;
background-color: #8fb677;
}
img.dashboard-brand {
text-align: center;
height: 100%;
width: auto;
}
ul.guildList {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
margin-bottom: 12px;
}
div.dashboard-sidebar svg {
flex-shrink: 0;
}
div.mobile-sidebar {
z-index: 100;
min-height: 100vh;
position: absolute;
top: 0;
}
div.mobile-sidebar.is-active {
display: flex;
}
aside.menu {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.dashboard-sidebar {
display: flex;
flex-direction: column;
background-color: #363636;
width: 230px !important;
padding-right: 0;
}
.aside-footer {
justify-self: end;
}

1
reminder-dashboard/src/index.tsx
View File

@ -1,4 +1,5 @@
import { render } from "preact";
import { App } from "./components/App";
import "./styles.scss";
render(<App />, document.getElementById("app"));

49
reminder-dashboard/src/styles.scss Normal file
View File

@ -0,0 +1,49 @@
/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
display: none;
}
div.reminderContent.is-collapsed .column.settings {
display: none;
}
div.reminderContent.is-collapsed .reminder-settings {
margin-bottom: 0;
}
div.reminderContent.is-collapsed .button-row {
display: none;
}
div.reminderContent.is-collapsed .button-row-edit {
display: none;
}
div.reminderContent.is-collapsed .reminder-topbar {
padding-bottom: 0;
}
div.reminderContent.is-collapsed .invert-collapses {
display: inline-flex;
}
div.reminderContent .invert-collapses {
display: none;
}
div.reminderContent.is-collapsed input[name="name"] {
display: inline-flex;
flex-grow: 1;
border: none;
background: none;
box-shadow: none;
opacity: 1;
}
div.reminderContent.is-collapsed .hide-box {
display: inline-flex;
}
div.reminderContent.is-collapsed .hide-box i {
transform: rotate(90deg);
}

157
web/static/css/style.css
View File

@ -6,58 +6,6 @@ button {
font-weight: 700;
}
/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
display: none;
}
div.reminderContent.is-collapsed .column.settings {
display: none;
}
div.reminderContent.is-collapsed .reminder-settings {
margin-bottom: 0;
}
div.reminderContent.is-collapsed .button-row {
display: none;
}
div.reminderContent.is-collapsed .button-row-edit {
display: none;
}
div.reminderContent.is-collapsed .reminder-topbar {
padding-bottom: 0;
}
div.reminderContent.is-collapsed .invert-collapses {
display: inline-flex;
}
div.reminderContent .invert-collapses {
display: none;
}
div.reminderContent.is-collapsed input[name="name"] {
display: inline-flex;
flex-grow: 1;
border: none;
background: none;
box-shadow: none;
opacity: 1;
}
div.reminderContent.is-collapsed .hide-box {
display: inline-flex;
}
div.reminderContent.is-collapsed .hide-box i {
transform: rotate(90deg);
}
/* END */
/* dashboard styles */
.hide-box {
border: none;
@ -160,52 +108,6 @@ div.reminderContent {
border-radius: 8px;
}
/* Interval inputs */
div.interval-group {
height: unset !important;
}
div.interval-group .clear:focus {
outline: none;
box-shadow: none !important;
}
div.interval-group .no-break {
text-wrap: avoid;
white-space: nowrap;
}
div.interval-group .clear {
border: none;
background: none;
padding: 1px;
margin-right: -3px;
}
div.interval-group > .interval-group-left input {
-webkit-appearance: none;
border-style: none;
background-color: #eee;
font-size: 1rem;
font-family: monospace;
}
div.interval-group > .interval-group-left input.w2 {
width: 3ch;
}
div.interval-group > .interval-group-left input.w3 {
width: 3ch;
}
div.interval-group {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* !Interval inputs */
.left-pad {
padding-left: 1rem;
padding-right: 0.2rem;
@ -291,69 +193,10 @@ img.rounded-corners {
border-radius: 12px;
}
div.brand {
text-align: center;
height: 52px;
background-color: #8fb677;
}
img.dashboard-brand {
text-align: center;
height: 100%;
width: auto;
}
div.dashboard-sidebar {
background-color: #363636;
width: 230px !important;
padding-right: 0;
}
ul.guildList {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
}
div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
flex-shrink: 0;
flex-grow: 0;
position: fixed;
bottom: 0;
width: 226px;
}
div.dashboard-sidebar svg {
flex-shrink: 0;
}
div.mobile-sidebar {
z-index: 100;
min-height: 100vh;
position: absolute;
top: 0;
display: none;
flex-direction: column;
}
#expandAll {
width: 60px;
}
div.mobile-sidebar .aside-footer {
margin-top: auto;
}
div.mobile-sidebar.is-active {
display: flex;
}
aside.menu {
display: flex;
flex-direction: column;
flex-grow: 1;
}
div.dashboard-frame {
min-height: 100vh;
margin-bottom: 0 !important;