Problem
The settings title and their input options are quite far away on a bigger desktop screen. It makes it difficult to identify what belongs to what. See this:
This is already zoomed in. E.g. when I see “smooth graph” I tend to think that the first toggle belongs to this setting, though it doesn’t. The summary options are also quite indistinguishable.
Describe the solution you’d like
I’d like something more obvious. I am by no means happy with my following example (I just put it together to show an example), but that would at least solve the above two issues:
The idea is that every row is visually set apart from other rows and every category is visually set apart from other categories. And of course, a lot could be improved in this design idea.
Additional Info
To create the demo above, I just created a simple demo index.html and styles.css, then loaded that into my firefox based browser.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>FSRS Simulator</h2>
<div class="row">
<div class="setting-title">Days to simulate</div>
<input type="number" name="days-to-simulate" id="days-to-simulate" value="365">
</div>
<div class="row">
<div class="setting-title">Additional new cards to simulate</div>
<input type="number" name="add-new-to-simulate" id="add-new-to-simulate" value="10">
</div>
<div class="row">
<div class="setting-title">Desired Retention</div>
<input type="number" name="dr" id="dr" value="95">
</div>
<div class="row">
<div class="setting-title">Maximum reviews / day</div>
<input type="number" name="max-revs-day" id="max-revs-day" value="365">
</div>
<div class="additional-space"></div>
<div class="row">
<details>
<summary>Easy Days</summary>
</details>
</div>
<div class="additional-space"></div>
<div class="row">
<details>
<summary>Advanced Settings</summary>
<div class="row nested">
<div class="setting-title">Maximum Interval</div>
<input type="number" name="max-int" id="max-int" value="36500">
</div>
<div class="row nested">
<div class="setting-title">Review sort order</div>
<input type="text" name="rev-sort" id="rev-sort" value="Ascending retrievability">
</div>
<div class="row nested">
<div class="setting-title">New cards ignore review limits</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="row nested">
<div class="setting-title">Smooth Graph</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="row nested">
<div class="setting-title">Suspend leeches</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="row nested">
<div class="setting-title">Leech threshold</div>
<input type="number" value="8">
</div>
</details>
</div>
<div class="additional-space"></div>
<div class="row all-at-start">
<input type="button" value="Simulate">
<input type="button" value="Clear Last Simulation">
<input type="button" value="Save Changes to Preset">
</div>
</body>
</html>
styles.css
body {
background-color: #E9ECEF;
}
h2 {
border-bottom: 1px solid #ADB5BD;
font-weight: 500;
color: #212529;
}
.row {
display: flex;
justify-content: space-between;
background-color: #F8F9FA;
padding: 0.5em;
border-radius: 0.5em;
margin-bottom: 0.25em;
}
.row .nested {
background-color: #E9ECEF;
}
.additional-space {
margin-bottom: 0.8em;
}
.all-at-start {
justify-content: left;
}
.all-at-start > * {
margin-inline-start: 0.55em;
}
details {
width: 100%;
}
details[open] summary{
margin-bottom: 0.6em;
}
input[type=button] {
background-color: #0d6efd;
color: #F8F9FA;
border: 0;
border-radius: 0.45em;
padding: 0.5em;
}
/* https://www.w3schools.com/howto/howto_css_switch.asp */
.switch {
position: relative;
display: inline-block;
width: 2.4em;
height: 1.2em;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
transition: .4s;
border-radius: 0.5em;
border: 1px solid #87878b;
}
.slider::before {
position: absolute;
content: "";
height: 0.5em;
width: 0.5em;
left: 0.35em;
bottom: 0.3em;
background-color: #E9ECEF;
transition: .4s;
border: 1px solid #87878b;
border-radius: 0.5em;
}
input:checked + .slider {
background-color: #0d6efd;
border: 0;
}
input:checked + .slider:before {
transform: translateX(1em);
}
This means, of course, that no existing svelte components or styles have been used; the purpose of that demo is only to start discussions and provide a visual.
I have wanted to find something to make rows like that more readable for a long time, though all my ideas are okay at best. Due to that, I’d love to see or read about other ideas that you might be having!
