Кнопка «Ответ» в подвале темы может сломать ветку

Внести вклад UX
11

Спасибо за это, Дон! Я хотел сделать это уже много лет! Я пошёл дальше и адаптировал вашу идею под свои нужды. Поскольку мой сайт немного отличается, и каждая категория уникальна — это не просто обычные обсуждения, — я решил полностью изменить текст кнопки ответа. Например, в категории «Критика изображений» я изменил её на «Дать критику или ответить». Добавив «или ответить», я, по-моему, обошёл опасения Якуке. Спасибо, что поднял эту тему, Якуке! Изначально у меня было только «Дать критику», но вы правы: это не подходит для всех ситуаций.

Мне не очень нравится трюк с font-size: 0, но по какой-то причине трюк с visibility:hidden не сработал в данном случае. Также я пробовал установить font-size в 1em вместо px, но это тоже не сработало. В итоге я выбрал чуть более крупный шрифт, чтобы кнопка выделялась, хотя предпочёл бы использовать em, чтобы шрифт масштабировался.

// Критика изображений
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          // скрыть текст «ответить»
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // Новый текст
          font-size: 18px;
          content: "Дать критику изображения или ответить";
        }
      }
    }
  }
}

Это особенно отлично подходит для моей категории AMA, где я изменил кнопку ответа на «Задать вопрос» — идеально! Это также помогает человеку, проводящему AMA, понять, что нужно использовать маленькую кнопку ответа.

// AMA
body.category-learning-ama {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          // скрыть текст «ответить»
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // Новый текст
          font-size: 18px;
          content: "Задать вопрос";
        }
      }
    }
  }
}

Также я установил цвет фона для кнопки ответа, чтобы она немного больше выделялась. Пока не разобрался, как правильно настроить плавный переход при наведении — любые идеи будут полезны…

.discourse-no-touch .topic-body .actions .fade-out {
    background: var(--primary-low);
}

image
image1880×1430 116 KB

В любом случае, надеюсь, мои рассуждения помогут другим!

2 лайка