Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Truncate ExtendedTextarea caption on smaller viewports
Rūdolfs Ošiņš committed 1 year ago
commit bbb60c847c4d377d48e2fe6814c2107ba6ef85b6
parent 9f83489634baee3aeafde54c8a5eee9b34bcb5fb
2 files changed +14 -15
modified src/components/ExtendedTextarea.svelte
@@ -217,14 +217,6 @@
    gap: 0.5rem;

  }
- 
  .caption {
- 
    font-size: var(--font-size-small);
- 
    color: var(--color-fill-gray);
- 
    display: flex;
- 
    flex-wrap: wrap;
- 
    align-items: flex-start;
- 
    gap: 0.25rem;
- 
  }

  .preview {

    width: 100%;

    font-size: var(--font-size-small);
@@ -268,13 +260,15 @@
      <span class="global-hide-on-small-desktop-down">Discard</span>

    </OutlineButton>

    {#if !preview}
- 
      <div class="caption">
+ 
      <div
+ 
        class="txt-overflow txt-small txt-missing"
+ 
        title={`Drag and drop files to add them. Markdown is supported. Press ${utils.modifierKey()}↵ to submit.`}>

        Drag and drop files to add them.
- 
        <div style="display: flex; align-items: center; gap: 0.25rem;">
- 
          <Icon name="markdown" />
- 
          Markdown is supported.
- 
        </div>
- 
        Press {utils.modifierKey()}↵ to submit.
+ 
        <Icon
+ 
          name="markdown"
+ 
          styleDisplay="inline"
+ 
          styleVerticalAlign="text-top" />
+ 
        Markdown is supported. Press {utils.modifierKey()}↵ to submit.

      </div>

    {/if}

    <div class="buttons">
modified src/components/Icon.svelte
@@ -5,6 +5,8 @@
    size?: "16" | "32";

    onclick?: () => void;

    disabled?: boolean;
+ 
    styleDisplay?: string;
+ 
    styleVerticalAlign?: string;

    name:

      | "attachment"

      | "arrow-left"
@@ -50,12 +52,13 @@
    onclick = undefined,

    name,

    disabled = false,
+ 
    styleDisplay = "flex",
+ 
    styleVerticalAlign = undefined,

  }: Props = $props();

</script>



<style>

  svg {
- 
    display: flex;

    flex-shrink: 0;

    -webkit-touch-callout: none;

    -webkit-user-select: none;
@@ -76,6 +79,8 @@
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->

<svg

  style:cursor={onclick && !disabled ? "pointer" : "inherit"}
+ 
  style:display={styleDisplay}
+ 
  style:vertical-align={styleVerticalAlign}

  class:hoverable={onclick}

  class:disabled

  role="img"