diff options
author | Jimmy <jimmy@spalge.com> | 2022-03-17 19:07:10 +1300 |
---|---|---|
committer | Jimmy <jimmy@spalge.com> | 2022-03-17 19:07:10 +1300 |
commit | 77ca56666c6a9568f7081014964ff119a82ae0e5 (patch) | |
tree | b41ae665ab55eef86f6766bfbbed8750b41c520b | |
parent | b8c2c8d381243e0ff2e430b4eeab132c7b0114a6 (diff) | |
parent | 7e0a999a27f4435a0e2cd91681d6184abdf83e1e (diff) | |
download | qutebrowser-77ca56666c6a9568f7081014964ff119a82ae0e5.tar.gz qutebrowser-77ca56666c6a9568f7081014964ff119a82ae0e5.zip |
Merge pull request #6999 from twigleingrid/hide-long-description
Hide long description of settings
-rw-r--r-- | qutebrowser/html/settings.html | 93 |
1 files changed, 70 insertions, 23 deletions
diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html index dfbc5c168..b06917fd5 100644 --- a/qutebrowser/html/settings.html +++ b/qutebrowser/html/settings.html @@ -65,6 +65,7 @@ input[type="radio"] { width: min-content; margin: 0; border: none; + cursor: pointer; } label { @@ -81,6 +82,12 @@ input[type="radio"]:checked + label { color: #084c88; } +.radio-button { + position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */ + display: inline-flex; + margin: 3px 1px; +} + .setting { width: 60%; } @@ -107,13 +114,39 @@ input[type="radio"]:checked + label { color: #635d5dcf; font-size: 80%; font-style: italic; +} + +.option-description p { + margin: 0; +} + +.long-description { white-space: pre-line; } -.radio-button { - position: relative; /* The absolutely positioned element inside this tag (the radio button) gets positioned relative to it. */ - display: inline-flex; - margin: 3px 1px; +details summary > * { + display: inline; +} + +details[open] .details { + display: none; +} + +summary { + margin: .5ex 0; + width: fit-content; + color: #1887c5; + outline: none; + font-size: 105%; + cursor: pointer; +} + +summary .short-description { + color: #635d5dcf; +} + +summary::selection { + background-color: inherit; } {% endblock %} @@ -126,35 +159,49 @@ input[type="radio"]:checked + label { </tr> {% for option in configdata.DATA.values()|sort(attribute='name') if not option.no_autoconfig %} <tr> + {% set loopIndex = loop.index0 %} <!-- FIXME: convert to string properly --> <td class="setting">{{ option.name }} {% if option.description %} - <p class="option-description">{{ option.description|e }}</p> + {% set description = option.description.split('\n', 1) %} + <div class="option-description"> + {% if description|length > 1 %} + <details> + <summary> + <p class="short-description">{{ description[0]|e }}</p> + <span class="details">Details</span> + </summary> + <p class="long-description">{{ description[1]|e }}</p> + </details> + {% else %} + <p>{{ description[0]|e }}</p> + {% endif %} + </div> {% endif %} </td> {% if option.typ.valid_values is not none %} <td class="valid-value"> {% for value in option.typ.valid_values.values %} - <div class="radio-button"> - <input type="radio" id="input-{{ option.name }}-{{ loop.index0 }}" - name="{{ option.name }}" value="{{ value }}" - onclick="cset('{{ option.name }}', this.value)" - {% if confget(option.name) == value %} - checked - {% endif %}> - <label for="input-{{ option.name }}-{{ loop.index0 }}"> - {{ value }} - </label> - </div> - {% endfor %} - </td> + <div class="radio-button"> + <input type="radio" id="input-{{ option.name }}-{{ loop.index0 }}" + name="{{ option.name }}" value="{{ value }}" + onclick="cset('{{ option.name }}', this.value)" + {% if confget(option.name) == value %} + checked + {% endif %}> + <label for="input-{{ option.name }}-{{ loop.index0 }}"> + {{ value }} + </label> + </div> + {% endfor %} + </td> {% else %} <td class="value"> - <input type="text" - id="input-{{ option.name }}" - onblur="cset('{{ option.name }}', this.value)" - value="{{ confget(option.name) }}"> - </input> + <input type="text" + id="input-{{ option.name }}" + onblur="cset('{{ option.name }}', this.value)" + value="{{ confget(option.name) }}"> + </input> </td> {% endif %} </tr> |