Simplify CSS styles
A lingering problem exists where the content is allowed to expand indefinitely vertically. This might be an issue with the stacks of flex elements near the root of the DOM. Since the value fixing this is still uncertain I'll leave as it is for now.
This commit is contained in:
parent
1a4c2ce98f
commit
0d0b38391d
@ -14,14 +14,12 @@ export function ExpressionCard({
|
||||
show_description,
|
||||
}: ExpressionCardProps) {
|
||||
return (
|
||||
<article className="expression-card">
|
||||
<h2 className="expression-card-prompt">{prompt}</h2>
|
||||
<span className="expression-card-categories">
|
||||
{categories.join(", ")}
|
||||
</span>
|
||||
{show_description && (
|
||||
<div className="expression-card-details">{description}</div>
|
||||
)}
|
||||
<article className="content-card">
|
||||
<h2 className="content-row text-title">{prompt}</h2>
|
||||
<span className="content-row text-meta">{categories.join(", ")}</span>
|
||||
{show_description ? (
|
||||
<div className="content-paragraph text-details">{description}</div>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@ -10,14 +10,10 @@ export function ExpressionSetCard({
|
||||
word_count,
|
||||
}: ExpressionSetCardProps) {
|
||||
return (
|
||||
<article className="expression-set-card">
|
||||
<h2 className="expression-set-card-header">
|
||||
<span className="expression-set-card-name">{name}</span>
|
||||
<span className="expression-set-card-word-count">
|
||||
{word_count} word(s)
|
||||
</span>
|
||||
</h2>
|
||||
<p className="expression-set-card-description">{description}</p>
|
||||
<article className="content-card">
|
||||
<h2 className="content-row text-title">{name}</h2>
|
||||
<span className="content-row text-meta">{word_count} word(s)</span>
|
||||
<p className="content-paragraph text-details">{description}</p>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16,8 +16,8 @@ export function ExpressionSetInfo({
|
||||
}: ExpressionSetInfo) {
|
||||
return (
|
||||
<section className="expression-set-info">
|
||||
<h2 className="expression-set-info-header">
|
||||
<span className="expression-set-info-name">{name}</span>
|
||||
<h2 className="content-row">
|
||||
<span className="text-title grow">{name}</span>
|
||||
<Link
|
||||
href={{
|
||||
pathname: "expression-set/settings",
|
||||
@ -37,10 +37,8 @@ export function ExpressionSetInfo({
|
||||
</a>
|
||||
</Link>
|
||||
</h2>
|
||||
<span className="expression-set-info-word-count">
|
||||
{word_count} word(s)
|
||||
</span>
|
||||
<p className="expression-set-info-description">{description}</p>
|
||||
<span className="content-row text-meta">{word_count} word(s)</span>
|
||||
<p className="content-paragraph text-details">{description}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,11 +17,11 @@ export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) {
|
||||
if (href !== "/" && router.pathname.startsWith(href)) active = true;
|
||||
|
||||
return (
|
||||
<li className={active ? "navigation-item active" : "navigation-item"}>
|
||||
<li className="navigation-li">
|
||||
<Link href={href} passHref>
|
||||
<a>
|
||||
<a className={active ? "navigation-item active" : "navigation-item"}>
|
||||
{iconUrl && <Image src={iconUrl} width="24" height="24" alt="" />}
|
||||
<span>{text}</span>
|
||||
<span className="text-navigation">{text}</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -34,9 +34,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
|
||||
description={expression_set.description}
|
||||
word_count={word_count}
|
||||
/>
|
||||
<p className="details grow scroll">
|
||||
No expressions left in this set.
|
||||
</p>
|
||||
<p className="text-details">No expressions left in this set.</p>
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
@ -50,7 +48,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
|
||||
description={expression_set.description}
|
||||
word_count={word_count}
|
||||
/>
|
||||
<p className="details grow scroll">{/* TODO add details */}</p>
|
||||
<p className="text-details grow">{/* TODO other details */}</p>
|
||||
<Link
|
||||
href={{
|
||||
pathname: "expression-sets/practice",
|
||||
@ -58,8 +56,8 @@ const ExpressionSetDetailsPage: NextPage = () => {
|
||||
}}
|
||||
passHref
|
||||
>
|
||||
<a className="navigation-item-button">
|
||||
<span>Practice</span>
|
||||
<a className="navigation-item text-navigation">
|
||||
<span>Practice this set</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,32 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
.text-navigation {
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
color: darkslategray;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-meta {
|
||||
color: slategray;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-details {
|
||||
color: darkslategray;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Page */
|
||||
|
||||
.page {
|
||||
@ -32,6 +58,7 @@
|
||||
|
||||
/* Will it conflict with overlays? Move elsewhere? */
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -46,55 +73,37 @@
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-shadow: 0px 5px 5px -5px darkslategray;
|
||||
}
|
||||
|
||||
.navigation > .navigation-item {
|
||||
.navigation > .navigation-li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navigation-item {
|
||||
.navigation-li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navigation-item > a {
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: lavenderblush;
|
||||
border: 1px solid darkslategray;
|
||||
font-weight: bold;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.navigation-item > a:hover {
|
||||
.navigation-item:hover {
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
.navigation-item.active > a {
|
||||
.navigation-item.active {
|
||||
background-color: bisque;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.navigation-item-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: lavenderblush;
|
||||
border: 1px solid darkslategray;
|
||||
font-weight: bold;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.navigation-item-button:hover {
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
/* Misc classes */
|
||||
|
||||
.icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -110,6 +119,8 @@
|
||||
border: 1px solid slategray;
|
||||
}
|
||||
|
||||
/* tofix */
|
||||
|
||||
.details {
|
||||
color: darkslategray;
|
||||
font-size: 15px;
|
||||
@ -117,95 +128,28 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Expression cards */
|
||||
/* Content organization */
|
||||
|
||||
.expression-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.content-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
background-color: lavender;
|
||||
border: 1px solid darkslategray;
|
||||
box-shadow: 0px 5px 5px -5px darkslategray;
|
||||
padding: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.expression-card-prompt {
|
||||
color: darkslategray;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.expression-card-categories {
|
||||
color: slategray;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.expression-card-details {
|
||||
color: darkslategray;
|
||||
font-size: 15px;
|
||||
margin: 20px 0px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.expression-card-details::-webkit-scrollbar-track {
|
||||
background-color: lightslategray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.expression-card-details::-webkit-scrollbar {
|
||||
border-radius: 4px;
|
||||
width: 8px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.expression-card-details::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: darkslategray;
|
||||
}
|
||||
|
||||
/* Expression set card */
|
||||
|
||||
.expression-set-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: lavender;
|
||||
border: 1px solid darkslategray;
|
||||
box-shadow: 0px 5px 5px -5px darkslategray;
|
||||
padding: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.expression-set-card-header {
|
||||
.content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expression-set-card-name {
|
||||
color: darkslategray;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.expression-set-card-word-count {
|
||||
color: slategray;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.expression-set-card-description {
|
||||
color: darkslategray;
|
||||
font-size: 15px;
|
||||
.content-paragraph {
|
||||
margin: 20px 0px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Expression set page */
|
||||
@ -215,33 +159,3 @@
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.expression-set-info-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expression-set-info-name {
|
||||
flex: 1;
|
||||
color: darkslategray;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0px;
|
||||
text-transform: capitalize;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.expression-set-info-word-count {
|
||||
flex: 1;
|
||||
color: slategray;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expression-set-info-description {
|
||||
color: darkslategray;
|
||||
font-size: 15px;
|
||||
margin: 20px 0px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user