diff options
| -rw-r--r-- | extension/src/Bookmark.tsx | 2 | ||||
| -rw-r--r-- | extension/src/Folder.tsx | 13 | ||||
| -rw-r--r-- | extension/src/index.css | 39 | ||||
| -rw-r--r-- | extension/tsconfig.app.tsbuildinfo | 2 |
4 files changed, 42 insertions, 14 deletions
diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx index 125344e..fcc6756 100644 --- a/extension/src/Bookmark.tsx +++ b/extension/src/Bookmark.tsx @@ -2,7 +2,7 @@ import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; function Bookmark(props: {data: BookmarkTreeNode}) { return( - <a className="bookmark" id = "draggable" href={props.data.url}> + <a className="bookmark draggable" href={props.data.url}> <img alt="Bookmark icon" src={faviconURL(props.data.url)}></img> <span>{props.data.title}</span> </a> diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index 1695b41..93cc286 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -13,11 +13,22 @@ function Folder (props: {data: BookmarkTreeNode}) { ? <Folder data={child} /> : <Bookmark data={child} /> ) - } </div> </div> ) } +// if (props.data.children) { +// let l = []; +// for (let child of props.data.children) { +// if (child.children) { +// l.push(<Folder data={child} />) +// } else { +// l.push(<Bookmark data={child} />) +// } +// } +// return l +// } + export default Folder;
\ No newline at end of file diff --git a/extension/src/index.css b/extension/src/index.css index ad9f954..301b98f 100644 --- a/extension/src/index.css +++ b/extension/src/index.css @@ -1,40 +1,57 @@ body { - background-color: #1e1e1e; + background-color: #242424; color: white; + font-family: sans-serif; } +/* Folder */ .folder { + width: 100%; display: flex; flex-direction: column; - border-width: 2px; border-style: solid; - border-color: black; + border-width: 1px; + border-color: #393939; padding: 2px; - margin: 2px; + margin: 5px; padding: 10px; } - .folder > div { display: flex; flex-direction: row; - + flex-wrap: wrap; } -.bookmark > img{ - padding: 10px; - +.folder > span { + font-weight: bold; + font-size: 20px; + margin: 5px; } +/* Bookmark */ .bookmark { display: flex; flex-direction: column; width: 100px; - padding: 20px; + padding: 10px; + margin: 5px; +} + +.bookmark > img { + padding: 15px; + +} + +.bookmark > span { + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; } .bookmark:hover { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.3); } a { diff --git a/extension/tsconfig.app.tsbuildinfo b/extension/tsconfig.app.tsbuildinfo index 65e1504..a21fd05 100644 --- a/extension/tsconfig.app.tsbuildinfo +++ b/extension/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/bookmark.tsx","./src/folder.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file +{"root":["./src/Bookmark.tsx","./src/Folder.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file |