Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 09:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix layout regression in Settings sheet

Browse source 
My laziness in separating the styles between Settings and Accounts sheets bit back
This commit is contained in:
Lim Chee Aun 2023-07-16 10:35:54 +08:00
parent 18a5742bfc
commit 473dac1fde
3 changed files with 67 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/pages/accounts.css Normal file
View file

@ -0,0 +1,56 @@
#accounts-container {
background-color: var(--bg-faded-color);
}
#accounts-container section {
background-color: var(--bg-color);
margin: 8px 0 0;
padding: 8px 16px;
border-top: var(--hairline-width) solid var(--outline-color);
border-bottom: var(--hairline-width) solid var(--outline-color);
border-radius: 8px;
}
#accounts-container section ul > li:last-child {
border-bottom: none;
}
#accounts-container section > ul {
margin: 0;
padding: 0;
list-style: none;
}
#accounts-container section > ul > li {
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--hairline-width) solid var(--outline-color);
}
#accounts-container section > ul > li .current {
margin-right: 8px;
color: var(--green-color);
opacity: 0.1;
}
#accounts-container section > ul > li .current.is-current {
opacity: 1;
}
#accounts-container section > ul > li .current.is-current + .avatar {
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
}
#accounts-container section > ul > li .avatar + .name-text {
vertical-align: middle;
}
#accounts-container section > ul > li > div.actions {
flex-basis: fit-content;
margin-top: 8px;
}
#accounts-container .avatar {
margin-right: 8px;
}
#accounts-container .accounts-list li div {
display: flex;
align-items: center;
}

4
src/pages/accounts.jsx
View file

@ -1,4 +1,4 @@
import './settings.css'; import './accounts.css';
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu'; import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
import { useReducer, useState } from 'preact/hooks'; import { useReducer, useState } from 'preact/hooks';
@ -22,7 +22,7 @@ function Accounts({ onClose }) {
const [_, reload] = useReducer((x) => x + 1, 0); const [_, reload] = useReducer((x) => x + 1, 0);
return ( return (
<div id="settings-container" class="sheet" tabIndex="-1"> <div id="accounts-container" class="sheet" tabIndex="-1">
{!!onClose && ( {!!onClose && (
<button type="button" class="sheet-close" onClick={onClose}> <button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" /> <Icon icon="x" />

35
src/pages/settings.css
View file

@ -31,31 +31,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* flex-wrap: wrap; */ flex-wrap: wrap;
border-bottom: var(--hairline-width) solid var(--outline-color); border-bottom: var(--hairline-width) solid var(--outline-color);
} }
#settings-container section > ul > li .current {
margin-right: 8px;
color: var(--green-color);
opacity: 0.1;
}
#settings-container section > ul > li .current.is-current {
opacity: 1;
}
#settings-container section > ul > li .current.is-current + .avatar {
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
}
#settings-container section > ul > li .avatar + .name-text {
vertical-align: middle;
}
#settings-container section > ul > li > div {
display: flex;
align-items: center;
}
#settings-container section > ul > li > div.actions {
flex-basis: fit-content;
margin-top: 8px;
}
#settings-container section > ul > li > div:last-child { #settings-container section > ul > li > div:last-child {
text-align: right; text-align: right;
} }
@ -67,15 +45,20 @@
#settings-container section > ul > li .sub-section p { #settings-container section > ul > li .sub-section p {
margin-block: 0.5em; margin-block: 0.5em;
} }
#settings-container section > ul > li .sub-section ul {
margin: 0;
padding: 0;
list-style: none;
}
#settings-container section > ul > li .sub-section ul li {
line-height: 1.6;
}
#settings-container section > ul > li .sub-section p:last-child { #settings-container section > ul > li .sub-section p:last-child {
margin-block-end: 0; margin-block-end: 0;
} }
#settings-container div { #settings-container div {
vertical-align: middle; vertical-align: middle;
} }
#settings-container .avatar {
margin-right: 8px;
}
#settings-container section select { #settings-container section select {
padding: 4px; padding: 4px;