thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaks to sidebar styling

Browse Source
This commit is contained in:
Tyler Hallada 2022-03-15 00:47:31 -04:00
parent a7e4b2e657
commit 7e4f6d977f
5 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/PluginTxtEditor.tsx
View File

@ -37,7 +37,7 @@ const PluginsLoader: React.FC<Props> = () => {
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
enable the loaded plugins by your current load order. enable the loaded plugins by your current load order.
</p> </p>
<button onClick={onPluginsTxtButtonClick}> <button onClick={onPluginsTxtButtonClick} className={styles.button}>
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file {!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
</button> </button>
{typeof window !== "undefined" && {typeof window !== "undefined" &&

3
components/PluginsList.tsx
View File

@ -29,7 +29,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
return ( return (
<> <>
{selectedCell && plugins.length > 0 && <h2>Loaded Plugins</h2>} {plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
<ol className={styles["plugin-list"]}> <ol className={styles["plugin-list"]}>
{plugins.map((plugin) => ( {plugins.map((plugin) => (
<li key={plugin.filename} title={plugin.filename}> <li key={plugin.filename} title={plugin.filename}>
@ -55,7 +55,6 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
</Link> </Link>
)} )}
</label> </label>
{/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
</li> </li>
))} ))}
</ol> </ol>

4
components/Sidebar.tsx
View File

@ -73,7 +73,7 @@ const Sidebar: React.FC<Props> = ({
if (lastModified) { if (lastModified) {
return ( return (
<div className={styles["sidebar-modified-date"]}> <div className={styles["sidebar-modified-date"]}>
<strong>Last updated:</strong>{" "} <strong>Site last updated:</strong>{" "}
{formatRelative(new Date(lastModified), new Date())} {formatRelative(new Date(lastModified), new Date())}
</div> </div>
); );
@ -147,7 +147,7 @@ const Sidebar: React.FC<Props> = ({
style={!open ? { display: "none" } : {}} style={!open ? { display: "none" } : {}}
> >
<div className={styles["sidebar-content"]}> <div className={styles["sidebar-content"]}>
<h2>Modmapper</h2> <h1 className={styles.title}>Modmapper</h1>
<p className={styles.subheader}> <p className={styles.subheader}>
An interactive map of Skyrim mods. An interactive map of Skyrim mods.
</p> </p>

4
styles/PluginTxtEditor.module.css
View File

@ -21,3 +21,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.button {
margin-bottom: 24px;
}

4
styles/Sidebar.module.css
View File

@ -34,6 +34,10 @@
justify-content: right; justify-content: right;
} }
.title {
font-size: 1.75rem;
}
.close { .close {
display: block; display: block;
font-size: 24px; font-size: 24px;