diff --git a/interim-server/templates/base.html b/interim-server/templates/base.html index 51c8f74..f939620 100644 --- a/interim-server/templates/base.html +++ b/interim-server/templates/base.html @@ -4,6 +4,7 @@ {% block title %}Interim{% endblock %} {% include "meta_tags.html" %} + {%- block head_extras %}{% endblock -%} diff --git a/interim-server/templates/workspace_nav.html b/interim-server/templates/workspace_nav.html index 201704a..216ddc2 100644 --- a/interim-server/templates/workspace_nav.html +++ b/interim-server/templates/workspace_nav.html @@ -1,5 +1,30 @@ diff --git a/sass/_basic-dropdown.scss b/sass/_basic-dropdown.scss new file mode 100644 index 0000000..9277f5c --- /dev/null +++ b/sass/_basic-dropdown.scss @@ -0,0 +1,39 @@ +@use 'globals'; + +.basic-dropdown { + &__button { + anchor-name: --anchor-button; + } + + &__popover { + &:popover-open { + @include globals.popover; + + left: anchor(left); + padding: 0; + position: absolute; + position-anchor: --anchor-button; + top: anchor(bottom); + } + } + + &__menu { + list-style-type: none; + margin: 0; + padding: 8px 0; + + & > li { + padding: 0; + + &:hover { + background: #0001; + } + + & > button { + @include globals.reset-button; + + padding: 8px 16px; + } + } + } +} diff --git a/sass/_globals.scss b/sass/_globals.scss index c65364f..9f3d94c 100644 --- a/sass/_globals.scss +++ b/sass/_globals.scss @@ -111,7 +111,7 @@ $hover-lightness-scale-factor: -5%; } @mixin button-small { - padding: 0.25rem 0.5rem; + padding: 4px 8px; font-size: 0.9rem; } @@ -139,7 +139,8 @@ $hover-lightness-scale-factor: -5%; inset: unset; border: $popover-border; margin: 0; - margin-top: 0.25rem; + margin-top: 4px; + padding: 0; position: relative; display: block; background: #fff; diff --git a/sass/main.scss b/sass/main.scss index 2d79418..671e82d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,5 +1,6 @@ @use 'sass:color'; +@use 'basic-dropdown'; @use 'globals'; @use 'modern-normalize'; @use 'forms'; @@ -64,6 +65,10 @@ button, input[type="submit"] { &--clear { @include globals.button-clear; } + + &--small { + @include globals.button-small; + } } .page-grid { diff --git a/sass/viewer.scss b/sass/viewer.scss index a394260..c039d27 100644 --- a/sass/viewer.scss +++ b/sass/viewer.scss @@ -223,7 +223,7 @@ $table-border-color: #ccc; width: max-content; &:not(:has(button)) { - padding: 6px 8px; + padding: 6px 12px; } &--red { @@ -265,7 +265,7 @@ $table-border-color: #ccc; @include globals.button-clear; color: inherit; - padding: 8px; + padding: 6px 12px; } } diff --git a/sass/workspace-nav.scss b/sass/workspace-nav.scss index 3c337c6..576467b 100644 --- a/sass/workspace-nav.scss +++ b/sass/workspace-nav.scss @@ -6,6 +6,13 @@ $background-current-item: #0001; & h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + & h1 { + font-size: 1.5rem; } & h2 { @@ -20,10 +27,15 @@ $background-current-item: #0001; font-size: 1rem; } + &__section { + margin-top: 16px; + } + &__menu { list-style-type: none; padding: 0; - margin-bottom: 0; + margin: 0; + margin-top: 16px; } &__heading { @@ -31,8 +43,7 @@ $background-current-item: #0001; display: flex; font-size: inherit; justify-content: space-between; - margin: 0; - padding: 0.5rem; + margin: 8px; } &__aux-button { @@ -43,8 +54,9 @@ $background-current-item: #0001; } &__menu-item { - padding-top: 0.5rem; - padding-left: 0.5rem; + display: block; + margin-left: 8px; + padding: 0; } &__menu-leaf { @@ -52,7 +64,7 @@ $background-current-item: #0001; align-items: center; display: flex; justify-content: space-between; - padding: 0 0.5rem; + padding: 0 8px; &--current, &:hover { background: $background-current-item; @@ -62,7 +74,7 @@ $background-current-item: #0001; &__menu-link { color: globals.$link-color; flex: 1; - padding: 0.75rem 0; + padding: 12px 0; text-decoration: none; } } diff --git a/svelte/src/basic-dropdown.webc.svelte b/svelte/src/basic-dropdown.webc.svelte new file mode 100644 index 0000000..39a8e9d --- /dev/null +++ b/svelte/src/basic-dropdown.webc.svelte @@ -0,0 +1,44 @@ + + + + + +
+ +
+ +