aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-17 05:54:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove scrollbar

Browse Source
This commit is contained in:
Shusui MOYATANI
2023-07-10 01:55:13 +09:00
parent cae14d68f0
commit 605a87558e
3 changed files with 4 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/column/Column.tsx
View File

@@ -57,9 +57,7 @@ const Column: Component<ColumnProps> = (props) => {
fallback={ fallback={
<> <>
<div class="shrink-0 border-b">{props.header}</div> <div class="shrink-0 border-b">{props.header}</div>
<div class="scrollbar flex flex-col overflow-y-scroll scroll-smooth"> <div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div>
{props.children}
</div>
</> </>
} }
> >
@@ -76,7 +74,7 @@ const Column: Component<ColumnProps> = (props) => {
<div>ホームに戻る</div> <div>ホームに戻る</div>
</button> </button>
</div> </div>
<ul class="scrollbar flex h-full flex-col overflow-y-scroll scroll-smooth pb-8"> <ul class="flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
<TimelineContentDisplay timelineContent={timeline} /> <TimelineContentDisplay timelineContent={timeline} />
</ul> </ul>
</div> </div>

6
src/components/column/ColumnSettings.tsx
View File

@@ -19,14 +19,12 @@ type ColumnSettingsSectionProps = {
children: JSX.Element; children: JSX.Element;
}; };
const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => { const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => (
return (
<div class="flex flex-col gap-2 border-b p-2"> <div class="flex flex-col gap-2 border-b p-2">
<div>{props.title}</div> <div>{props.title}</div>
<div>{props.children}</div> <div>{props.children}</div>
</div> </div>
); );
};
const ColumnSettings: Component<ColumnSettingsProps> = (props) => { const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
const i18n = useTranslation(); const i18n = useTranslation();
@@ -45,7 +43,7 @@ const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
return ( return (
<div class="flex flex-col border-t"> <div class="flex flex-col border-t">
<ColumnSettingsSection title={i18n()('column.config.columnWidth')}> <ColumnSettingsSection title={i18n()('column.config.columnWidth')}>
<div class="scrollbar flex h-9 gap-2 overflow-x-scroll"> <div class="flex h-9 gap-2 overflow-x-scroll">
<button <button
class="rounded-md border px-4 hover:bg-stone-100" class="rounded-md border px-4 hover:bg-stone-100"
onClick={() => setColumnWidth('widest')} onClick={() => setColumnWidth('widest')}

17
src/index.css
View File

@@ -38,20 +38,3 @@ em-emoji-picker {
width: 360px; width: 360px;
max-width: 90vw; max-width: 90vw;
} }
.scrollbar::-webkit-scrollbar:vertical {
width: 8px;
}
.scrollbar::-webkit-scrollbar:horizontal {
height: 8px;
}
.scrollbar::-webkit-scrollbar {
background-color: #fbf9f9;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #fce9ec;
border-radius: 8px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #fcd9dc;
}